docs: clarify svelte:component migration, avoids common gotcha #13835
Conversation
|
| @@ -699,9 +714,9 @@ In Svelte 4, doing the following triggered reactivity: | |||
|
|
|||
| This is because the Svelte compiler treated the assignment to `foo.value` as an instruction to update anything that referenced `foo`. In Svelte 5, reactivity is determined at runtime rather than compile time, so you should define `value` as a reactive `$state` field on the `Foo` class. Wrapping `new Foo()` with `$state(...)` will have no effect — only vanilla objects and arrays are made deeply reactive. | |||
|
|
|||
| ### `<svelte:component>` is no longer necessary | |||
| ### `<svelte:component>` is no longer necessary {#svelte-component-no-longer-necessary} | |||
There was a problem hiding this comment.
what is the {#svelte-component-no-longer-necessary} for?
There was a problem hiding this comment.
It's a heading ID so that it can be referenced in the section 'Component typing changes'
I added it since the example block of code used the old dynamic component syntax (and I don't believe this should be changed), so while sequentially reading the migration docs, a bit of a reminder that there's new syntax, where to find it and an example of old vs new is nice.
There was a problem hiding this comment.
All headings are automatically made linkable. You don't need to do anything extra
| ### `<svelte:component>` is no longer necessary {#svelte-component-no-longer-necessary} | |
| ### `<svelte:component>` is no longer necessary |
There was a problem hiding this comment.
Fair, I customized it since the autogenerated one depends on its parent section as well, and thus seems quite fragile: #Breaking-changes-in-runes-mode-svelte:component-is-no-longer-necessary. For example, it will break if this section is moved out of the parent heading.
However, now that I realize, it shouldn't be in the Breaking-changes-in-runes-mode section since it's not a breaking change, it just throws a deprecation warning REPL.
Modifying this PR now to move the section outside Breaking changes
…it is not breaking. Change links.
…velte:component section
Clarify docs to specify that, while
svelte:componentis no longer needed and deprecated, capitalizing the component variable name is required to avoid mismatching types.Avoids users doing the same gotcha that I stumbled upon, it will be a common oversight when refactoring existing codebases: #13795
As evidenced in these docs themselves (corrected):
... let component: Component<{ foo: string }> = $state( Math.random() ? ComponentA : ComponentB ); </script> <svelte:component this={component} foo="bar" />