Effect is not called when using state in svelte non-component file

[VitaliyR]

Describe the bug

1. Create a class in .svelte.js file, define state([]) property
2. In constructor, define effect.root -> effect which will console.log when the state updates
3. It never console logged

Some of investigations:

See the REPL. If I will store this store globally, and then somewhen call window.globalStoreReference.all = [] - now effects will start working - wat.

I have a feeling that I'm not doing something right although this is pretty much logical way to do it after reading the docs and some articles about such usages.

Reproduction

https://svelte.dev/playground/7fb9745958a64a96b09b3c32b8b2594a?version=5.20.1

Open console, see that there are some info about value of the state.

Click button -> state value updates but the effect never called since there are no new console.logs calls.

Logs

No logs

System Info

System:
    OS: macOS 15.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 306.55 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  Browsers:
    Brave Browser: 133.1.75.178
    Firefox: 135.0
    Safari: 18.3
  npmPackages:
    svelte: ^5.20.1 => 5.20.1
    webpack: ^5.82.1 => 5.82.1

Severity

annoyance

[brunnerh]

There is some issue here with effects not being triggered correctly, but that code is also buggy.

All conditions in effects have to be some kind of state, otherwise the effect will easily end up with zero dependencies and never run again. Only dependencies that are hit during effect execution will trigger the effect again later.

Your $effect is (theoretically) barely kept functional by the initial log statement containing this.all. If that is removed, the $effect will be dead.

One of the things that apparently does not work here is an $effect triggering itself.
Here is a small reproduction showing this.

[trueadm]

This is because the component you're creating the class in is from a legacy component. Effects only invalidate themselves in runes mode.

[brunnerh]

That does not seem right, especially for a root effect defined outside the component.
.svelte.js files are de-facto in runes mode and should control their own behavior.

[trueadm]

The root effect is being created from the component – and component context is shared this way. We can't change this otherwise we'd break the ability to do getContext and beforeUpdate etc outside of a component as they both use the shared internal component context object that is scoped on deriveds and effects.

[VitaliyR]

In my real example, the things are even worse since I dont have a svelte component. I'm having just file.js which wants to change the store (rune $state), and the store.js wants to save the changes - so basically have that $effect handler whenever store is changed.

And then, eventually, some time in future, a Svelte component might be (or might be not!) mounted into the DOM and then it will play with the store ($state from store.js).

So I'm not sure whats the best way to achieve this. As for me, as I've stated above - something either buggy or I'm doing it wrong (although I was inspired by https://www.matsimon.dev/blog/svelte-in-depth-effect-root but again, I dont have Svelte mounted yet)