svelte-preprocess-react icon indicating copy to clipboard operation
svelte-preprocess-react copied to clipboard

Optimization: static react children

Open bfanger opened this issue 3 years ago • 0 comments

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.

Related #43

bfanger avatar Jun 26 '22 10:06 bfanger