search

bfanger / svelte-preprocess-react

Seamlessly use React components inside a Svelte app
MIT License
126 stars 6 forks source link

Optimization: static react children #8

Open bfanger opened 2 years ago

bfanger commented 2 years ago

If the default slot of a <react:Component> only contains other <react:Component>s and no Svelte components or control-flow these components could be compiled into a children prop.

<react:Header><react:Logo href="/" /></react:Header>

could be compiled to:

<React$Header children={ createElement(Logo, { href: "/" }) } />

Note: This could lead to surprises like:

<react:Tabs>
  <react:Tab>Tab 1</react:Tab>
  <react:Tab>Tab 2</react:Tab>
<react:Tabs>

working but it will stop working for:

<react:Tabs>
  <react:Tab>Tab 1</react:Tab>
  <react:Tab>Tab <strong>2</strong></react:Tab>
<react:Tabs>

because of the <strong> it wil opt-out of the optimisation and now Tabs no longer get the Tab components as direct children. Maybe the optimised version should also wrap the children into a "useless" fragment.