Svelte 5: Store auto-subscription not working in .svelte.js|ts files

[theetrain]

Describe the bug

When importing stores in .svelte.js or .svelte.ts files, using $ to auto-subscribe to the store does not work as expected. I'm not sure if this is intended behaviour since manually using .subscribe requires a callback.

My goal is to create a class that contains values $derived() from a store.

Reproduction

Svelte 5 reproduction

Logs

No response

System Info

Svelte 5 REPL `v5.0.0-next.208`

Severity

annoyance

[trueadm]

Do you happen to know what version this was working in before?

[theetrain]

I'm not sure if it ever worked; this is my first time trying today. It could be my lack of knowledge expecting stores and signals to be interoperable; so I'm mainly curious if this is expected to work at all.

Related Discord thread: https://discord.com/channels/457912077277855764/1269382572228481155

[rChaoz]

I think this is possibly related to #9265. Since stores generally expect to be unsubscribed from at some point, the same pitfalls could apply here.

[Rich-Harris]

This isn't a bug, it's expected behaviour. It works in components because there's a clearly defined lifecycle (i.e. we create subscriptions when the component mounts, and destroy them when it unmounts) whereas no such thing exists for modules.

It just needs a clearer error and perhaps some documentation. Once 5.0 is out, we'll add state-based alternatives to the SvelteKit stores and you'll never have to touch them again.

[theetrain]

I hope the forthcoming documentation covers how to manually subscribe and unsubscribe to stores; particularly with SvelteKit $page until I suppose a SvelteKit 2.X release adds a class-based instance like:

import { page } from '$app/stores' // current 'stores' implementation
import { page } from '$app/state' // Runes-based stores, bike-sheddable

[7nik]

how to manually subscribe and unsubscribe to stores

But it's covered by the docs and tutorial. SvelteKit stores are regular stores.

[theetrain]

Sorry I should clarify my previous comment:

If Svelte Stores are able to be derived with Runes outside of components, an example on how to subscribe and unsubscribe to them would be helpful. In other words, a solution to my REPL above.

[paoloricciuti]

Sorry I should clarify my previous comment:

If Svelte Stores are able to be derived with Runes outside of components, an example on how to subscribe and unsubscribe to them would be helpful. In other words, a solution to my REPL above.

Outside component rather than derived you should probably just use state and subscribe