[leppr]

Since you've been using Svelte for a few months after using React, haven't you been hit by the lack of composability in Svelte?

Passing around components as variables is such a common pattern in React, and there's no good replacement in Svelte. The lack of dynamism in components and styles makes theming and crafting reusable components (outside of simple widgets) very tedious [1][2]. I'm genuinely curious how someone can come from React and not be bothered by it.

[1]: https://github.com/sveltejs/svelte/issues/2106

[2]: https://github.com/sveltejs/svelte/issues/1550

[xrd]

It's a great point. I'm not bothered by it only because I'm not using react professionally right now and don't use that pattern. Thanks for bringing that important point up.

[jiofih]

Passing components is totally supported, and you can use slots. There isn’t a single issue I identify with in that GH thread...

[leppr]

Slots are currently an unwieldy band-aid.

https://github.com/sveltejs/svelte/issues/1037 (open since 2017)

https://github.com/sveltejs/svelte/issues/2079

The simple usage of passing a component to a component, which almost every decently-sized project will make use of, has no convenient syntax, only workarounds:

    // parent.svelte
    <script>
      import Nested from './nested.svelte'
      import Child from './child.svelte';
    </script>
    <Child>
      <div slot="bar">       <-- Extra wrapper DOM node
        <Nested foo="Foo"/>
      </div>
    </Child>
    
    // child.svelte
    <slot name="bar" {...data}/>

Passing down an element as a prop requires separating the component constructor and its data and manually re-conciliating the two in the child component every time, since components can't be rendered from functions. It works but it's unnecessary boilerplate.

    // parent.svelte
    <script>
      import Nested from './nested.svelte';
      import Child from './child.svelte';
    </script>
    <Child nested={Nested} nestedData={{ foo: "Foo" }}/>
    
    // child.svelte
    <script>
      let export Component;
      let export componentData;
    </script>
    <Component {...componentData}/>

[troyk]

I'm evaluating svelte and have yet to do much, however handling dynamic components is a key requirement, and appears to be supported like so:

  <script>
    import RedThing from './RedThing.svelte';
    import GreenThing from './GreenThing.svelte';
    import BlueThing from './BlueThing.svelte';

    const options = [
      { color: 'red',   component: RedThing   },
      { color: 'green', component: GreenThing },
      { color: 'blue',  component: BlueThing  },
    ];

    let selected = options[0];
  </script>

  <select bind:value={selected}>
    {#each options as option}
      <option value={option}>{option.color}</option>
    {/each}
  </select>

  {#if selected.color === 'red'}
    <RedThing/>
  {:else if selected.color === 'green'}
    <GreenThing/>
  {:else if selected.color === 'blue'}
    <BlueThing/>
  {/if}

[leppr]

That's the tutorial challenge code, you get the `svelte:component` solution after clicking "Show me".

https://svelte.dev/tutorial/svelte-component

But yea that's indeed what I should have done in my example if I wanted the component to be reactive, as you can see that's even more verbose and still doesn't take care of props.

[xrd]

I love this thread!

And, isn't it likely this will be easier to support with Svelte eventually? My reasoning is that you just need to add a little syntactic sugar to the language and the compiler can add whatever code is necessary? With a runtime like React and Vue, it seems much harder to add in.

[leppr]

It's think it's likely the two issues I highlighted will eventually have syntactic sugar, I never wrote a transpiler but it doesn't seem that hard to support. It doesn't appear to be a priority though.

> With a runtime like React and Vue, it seems much harder to add in.

As a rule of thumb, it's almost always easier to add things at runtime than at compile time. That's why it took us so long to get Rust.