Hacker News new | ask | show | jobs
by troyk 2297 days ago
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}
1 comments

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.

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.

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.