Svelte 5: root.svelte file generate <svelte:component> is deprecated in runes mode — components are dynamic by default

[lts20050703]

Describe the bug

When using any Svelte 5 features, root.svelte file generate `<svelte:component>` is deprecated in runes mode — components are dynamic by default

I'm not sure if this is a bug that SvelteKit, Svelte, or @svelte/adapter-static needs to fix. Hope you guys can transfer it to the correct one if needed.

Reproduction

Just create a new SvelteKit project and use any Svelte 5 features.

Logs

5:55:38 PM [vite-plugin-svelte] .svelte-kit/generated/root.svelte:45:1 `<svelte:component>` is deprecated in runes mode — components are dynamic by default
43: {#if constructors[1]}
44:   <!-- svelte-ignore binding_property_non_reactive -->
45:   <svelte:component this={constructors[0]} bind:this={components[0]} data={data_0}>
                         ^
46:     <!-- svelte-ignore binding_property_non_reactive -->
47:     <svelte:component this={constructors[1]} bind:this={components[1]} data={data_1} {form} />
5:55:38 PM [vite-plugin-svelte] .svelte-kit/generated/root.svelte:47:2 `<svelte:component>` is deprecated in runes mode — components are dynamic by default
45:   <svelte:component this={constructors[0]} bind:this={components[0]} data={data_0}>
46:     <!-- svelte-ignore binding_property_non_reactive -->
47:     <svelte:component this={constructors[1]} bind:this={components[1]} data={data_1} {form} />
                                                                                                  ^
48:   </svelte:component>
49: {:else}
5:55:38 PM [vite-plugin-svelte] .svelte-kit/generated/root.svelte:51:1 `<svelte:component>` is deprecated in runes mode — components are dynamic by default
49: {:else}
50:   <!-- svelte-ignore binding_property_non_reactive -->
51:   <svelte:component this={constructors[0]} bind:this={components[0]} data={data_0} {form} />
                                                                                                ^
52: {/if}
53:

System Info

System:
    OS: Linux 6.5 KDE neon 6.0 6.0
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 8.43 GB / 15.40 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.6.0 - /run/user/1000/fnm_multishells/33079_1723484947088/bin/node
    npm: 10.8.2 - /run/user/1000/fnm_multishells/33079_1723484947088/bin/npm
    bun: 1.1.16 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 127.1.68.137
  npmPackages:
    @sveltejs/adapter-static: ^3.0.3 => 3.0.3 
    @sveltejs/kit: ^2.5.21 => 2.5.21 
    @sveltejs/vite-plugin-svelte: ^3.1.1 => 3.1.1 
    svelte: ^5.0.0-next.218 => 5.0.0-next.218 
    vite: ^5.4.0 => 5.4.0

Severity

annoyance

Additional Information

No response

[Conduitry]

@Rich-Harris Right now, we're emitting code like <svelte:component this={constructors[0]} ...> - What do you think about also recognizing things of the form <foo[bar]> as always being components? Or is that too niche, and we should just have a sequence of {@const}s at different levels of {#if}s?

As a side note, if we're going to be refactoring this generated component, maybe we should also switch away from the name constructors in Svelte 5, for clarity.

[HummingMind]

The same message / warning is gerenrated even without opting into the runes mode with this compilerOptions: { runes: true } as it probably auto-detects runes mode.

[Conduitry]

The code that generates this file (https://github.com/sveltejs/kit/blob/main/packages/kit/src/core/sync/write_root.js) detects the presence of Svelte 5 and uses that, not the compiler option, to decide what to write. The generated file actually forces runes mode on at the component level with <svelte:options>.

[paoloricciuti]

@Rich-Harris Right now, we're emitting code like <svelte:component this={constructors[0]} ...> - What do you think about also recognizing things of the form <foo[bar]> as always being components? Or is that too niche, and we should just have a sequence of {@const}s at different levels of {#if}s?

Tbf i think the same assumptions made for component.thing could be made for component[thing]...my only fear is that this opens the door to some weird things like various directives that allow things like use:foo[bar].thing[0] and it's a mess to parse right.

[paoloricciuti]

Oh just realised that we already allow that for uppercase components...i guess it make sense to allow lowercase components too

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32P3QqCQBBGX2UYuihYtGu1wO0xXC9Ex1pwf9gdgxDfPSzCIvBiYObjHJhvwl4PFDGrJrSNIcyw9B4F8sMvR7zTwIQCoxtDuyRFbIP2fFZWsTbeBYYS-uAMKEzSMnkbCvMvQK6A_AWWGYjh4ox3lixHOMEucsO0rya-aXvNoJwFfHY514dc2SJd37DFalfHOnmRkJ5RoHGd7jV1mHEYaRZrya2KzZYpt0z5b9bzE2jdl89kAQAA

[paoloricciuti]

@Conduitry i've opened a PR to treat arr[0] as a component too...if it get's merged i'll open a pr to sveltekit to fix this.

As a side note, if we're going to be refactoring this generated component, maybe we should also switch away from the name constructors in Svelte 5, for clarity.

do you think is worth it? That will mean a lot of conditionals in write_root.js for a decently small gain of readability of a generated file. Personally i would wait until we move to kit 3 and we drop support for svelte 4.

[Conduitry]

If we end up going with sveltejs/svelte#12821, then no, I don't think it's worth it. If we don't go with that change and we're going to need to do a bit of refactoring of this component anyway, then possibly.

[Rich-Harris]

Huh, didn't realize the array notation thing already works. That skeeves me out a bit tbh, it makes it look like you can use arbitrary expressions

[paoloricciuti]

Huh, didn't realize the array notation thing already works. That skeeves me out a bit tbh, it makes it look like you can use arbitrary expressions

Tbf i think you actually can...once something is recognized as a component it just use that thing as a function call

[paoloricciuti]

It breaks down when using variables tho (surprisingly it actually worked until i wrote the code for the button since at the point which become a source and it's not $.get in the component.

[Rich-Harris]

No, you can't. It just puts the expression in verbatim without processing it. This is a bug and we should fix it

[paoloricciuti]

No, you can't. It just puts the expression in verbatim without processing it. This is a bug and we should fix it

Yeah see my following comment...by fix it i guess you mean make it work right? 😄