Rune mode not set when referencing external files using runes

[rogerfar]

Describe the bug

If you store state in another file, for example:

class StoreClass
{
	 #store = $state(['Item 1', 'Item 2']);

	get store() {
		return this.#store;
	}

	remove() {
		this.#store = this.#store.slice(1);
	}
}

const store = new StoreClass();
export default store;

And you consume it in your component:

<script>
	import store from './Store.svelte.ts';

	const remove = () =>{
		store.remove();
	}

	//$inspect(store.store);
</script>

{#each store.store as item (item)}
	{item}<br/>
{/each}

<button onclick={() => remove()}>Remove item</button>

It will not remove the items when clicking Remove item.

BUT, if you uncomment $inspect(store.store);, it will work.

Reproduction

Broken in:
https://svelte.dev/playground/a89f6d819f524ca78055fb90c63c51ea?version=5.34.5
https://svelte.dev/playground/a89f6d819f524ca78055fb90c63c51ea?version=5.34.4

Works in:
https://svelte.dev/playground/a89f6d819f524ca78055fb90c63c51ea?version=5.34.3

Logs

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700
    Memory: 27.36 GB / 63.79 GB
  Binaries:
    Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 11.4.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (137.0.3296.68)
    Internet Explorer: 11.0.19041.5794

Severity

blocking all usage of svelte

[brunnerh]

This is about whether runes mode is active or not, not observation (it probably should work either way though 🤔).

[rogerfar]

Did the default change? I am very particular to use only Svelte5 ready libraries, and I'm not getting that "Running in legacy mode" warning anywhere anymore either.

[brunnerh]

If you remove all runes from a component, it will be in legacy mode unless you force runes in the global config.

[kyle-leonhard]

This is about whether runes mode is active or not (it probably should work either way though 🤔).

I stumbled onto this as well: #16163 (comment)

Is there an easy way to identify which files are in runes mode versus legacy mode? Or perhaps force runes mode everywhere?

A look at the release points to either #16150 or, more likely, #16145 as the culprit

[brunnerh]

Is there an easy way to identify which files are in runes mode versus legacy mode?

The VS Code extension should be able to tell you.

Or perhaps force runes mode everywhere?

You can set an option in the compilerOptions in the svelte.config.js, though this will force runes mode even for imported third party components which will probably break unless all imported components are already migrated.

As far as I know, one can dynamically set options via the Vite plugin instead (so you can e.g. exclude components from node_modules).

[rogerfar]

If you remove all runes from a component, it will be in legacy mode unless you force runes in the global config.

Ok, docs aren't clear that it goes into legacy mode when there are no runes directly on the component.

To be fair, it did show in VSCode Legacy code on top of my file.

But this is not maintainable, I have to go through each of my components and add this options flag, because there is no way to set it globally just for your app, like in a +layout.ts.

Tried setting compilerOptions.runes = true, but Storybook seems to still have some legacy stuff in it.

[brunnerh]

Related issue on dynamic config:

• Parametric compile options #12415

(If you are using the Vite plugin, it would already be possible to exclude Storybook.)

Anyway, this still looks like a bug that needs fixing...

[kyle-leonhard]

Thanks for the replies @brunnerh ! I appreciate it

[7nik]

Rune mode not set when referencing external files using runes

I think it's impossible:

• potential breaking change;
• what if explicitly legacy component imports from .svelte.js/ts file?
• regular js/ts file can re-export from .svelte.js/ts or use exports from it;
• it's barely possible to know whether a svelte library's exports are in rune mode or not, or mixed.

[rogerfar]

I have no problem setting runes: true, but because it's simply tries to validate ALL files it comes across, it's not useful.

If it can ignore files that are not references in the project, that would be a big step forward.

[kyle-leonhard]

@rogerfar, would dynamicCompileOptions do the trick? It lets one decide on a per-file basis whether to apply runes mode or not.

With sveltekit and vite, in svelte.config.ts, add something like:

vitePlugin: {
  dynamicCompileOptions({ filename, compileOptions }) {
    if (!filename.includes("node_modules") && !compileOptions.runes) {
      return { runes: true };
    }
  },
},

This seems to work for me as evidenced by observing it fixes reactivity issues. Though the plugin in vscode still shows legacy mode, as noted in #12415 (comment)