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.
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}/>
// 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}/> <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}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.
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.
> 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.
I also wouldn't consider that a disadvantage vs React/Redux, since that also requires using immutable data.
On point 1, this issue is the one to watch. https://github.com/sveltejs/svelte/issues/4518 Language server support will work for both JavaScript and TypeScript and error/type checking and editor support should be pretty comprehensive when it's ready. Svelte 3 was written with TypeScript in mind, so the idioms are fairly compatible with type checking. (a nice pit of success for design!)
This should also fix reassigning to a const mentioned in point 2.
These are the complaints that standout for me with Svelte after using it for a few months:
* Sub-par editor support. For me, the litmus test is whether I can use F2 to rename a variable, and it often does not work inside a Svelte template. There are other places where the editor does not know what to do with your code, because it is not pure JS. Vue is much worse with this since so many things are just strings; React really shines with editor support. This makes a big difference when you are using a large project where you didn't write the code.
* I don't love that you have to re-assign a object/array variable to get Svelte to notice it changed, and you can do that inside a Svelte template to a const variable and you won't get a complaint from the compiler.
* Much smaller ecosystem compared to React and Vue, which is expected at this point.
Other than this, I absolutely love Svelte. Stores are such an amazing abstraction. Animation is well thought out. Storybook works perfectly. Mostly it is pure JS once it gets inside the browser, so you can debug effectively which is not the case with Vue for example.