Integration with svelte lost reactivity since version 5.24.0

[ykrods]

description

After svelte@5.24.0, even if implemented as described in https://signaldb.js.org/guides/svelte/ , items cannot be referenced correctly.

workaround is following: (Not sure if this is the proper fix, but this will work as before)

<script>
  import { Collection } from "@signaldb/core";

+ let dep = $state(0);

  const Posts = new Collection({
    reactivity: {
      create() {
-       let dep = $state(0);
        return {
          depend() {
            dep;
          },
          notify() {
            dep += 1;
          },
        };
      },
      isInScope: () => !!$effect.tracking(),
    },
  });
  let items = $state.raw([]);
  // ... 
</script>

reproduction

https://github.com/ykrods/svelte-reproduction-signaldb/tree/main

[ykrods]

Maybe the following changes are related to this issue.

• docs: add note on effect-local state sveltejs/svelte#15572
• fix: don't depend on deriveds created inside the current reaction sveltejs/svelte#15564

[ykrods]

I did a little research and found that in svelte@5.24.0, the behavior has changed: updates to $state/$derived created inside a $effect no longer trigger that $effect to re-run.

Because of this, in the current implementation of SignalDB, $effect no longer re-runs since dep ( $state(0) ) is created in options.reactivity.create() in cursor.fetch() in $effect .

Also, belated thanks for your work on signaldb!

[maxnowack]

Hi @ykrods! Thanks for looking into this.

Unfortunately, the workaround isn't ideal 🙁 It would cause all $effects that include a query to rerun whenever the collection is updated — even if only one effect would normally need to rerun. This could lead to unnecessary re-executions and performance issues.

I tried solving this by wrapping the $state creation inside a untrack(), but that seems to immediately trigger a rerun of the $effect, causing an endless loop.

Since I'm not very familiar with Svelte, there might be a solution I'm missing here.

[ykrods]

I'm not deeply familiar with svelte either, so I would like some advice from the svelte community before the actual fix, but the following code fixes the behavior.

Since reactivity.create() is called inside cursor.fetch() , using $state seems difficult, so I tried switching to another approach using createSubscriber:

  import { createSubscriber } from 'svelte/reactivity'
  import { Collection } from "@signaldb/core";

  const Posts = new Collection({
    reactivity: {
      create() {
        let _update;
        const subscribe = createSubscriber((update) => {
          _update = update;
        });
        return {
          depend() {
            subscribe()
          },
          notify() {
            _update();
          },
        };
      },
      isInScope: () => !!$effect.tracking(),
    },
  });

​

[ykrods]

I opened a discussion to ask the community about this.

sveltejs/svelte#15608

[maxnowack]

I think the solution using createSubscriber you've proposed is even better than my initial approach using $state. What a pity that we cannot use $effect.tracking without a rune—then we could build a dedicated reactivity adapter like we did for the other libraries.

Could you create a PR to update the guide to use your solution?

[ykrods]

Of course, I’ll get on it and open a PR soon 👍 .