3 ms·
Slots are currently an unwieldy band-aid. https://github.com/sveltejs/svelte/issues/1037 https://github.com/sveltejs/svelte/issues/1037 (open since 2017) http
by leppr 7y ago
Slots are currently an unwieldy band-aid.
https://github.com/sveltejs/svelte/issues/1037 https://github.com/sveltejs/svelte/issues/1037 (open since 2017)
https://github.com/sveltejs/svelte/issues/2079 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 7y agoI'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.