4 ms·
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> im
by troyk 7y 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}
- leppr 7y agoThat's the tutorial challenge code, you get the `svelte:component` solution after clicking "Show me". https://svelte.dev/tutorial/svelte-component 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 7y agoI 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 7y agoIt'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.