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.
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.
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}/>
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.
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.
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