From e9289c66fedec923605d78dcefaea3b7001040ac Mon Sep 17 00:00:00 2001
From: Maikel ten Voorde <info@matevo.nl>
Date: Fri, 4 Apr 2025 10:27:17 +0200
Subject: [PATCH 1/2] fix: add dispose functionality for svelte adapter

fix: modified the svelte test

docs: update svelte documentation

docs: update svelte documentation
---
 docs/guides/svelte/index.md                   | 20 ++-----------------
 docs/reactivity/index.md                      |  2 +-
 docs/reference/svelte/index.md                | 13 +-----------
 .../__tests__/reactivity.svelte.spec.ts       | 16 +--------------
 .../svelte/index.svelte.ts                    | 16 +++++++++++++--
 5 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/docs/guides/svelte/index.md b/docs/guides/svelte/index.md
index 5b8fc35af..47cddcc2a 100644
--- a/docs/guides/svelte/index.md
+++ b/docs/guides/svelte/index.md
@@ -58,15 +58,7 @@ const Posts = new Collection({
   reactivity: svelteReactivityAdapter,
 });
 
-let items = $state.raw([]);
-$effect(() => {
-  const cursor = Posts.find({});
-  items = cursor.fetch();
-
-  return () => {
-    cursor.cleanup();
-  };
-});
+let items = $directive(Posts.find({}).fetch());
 ```
 
 This code sets up a `Posts` collection and enables reactivity using Svelte’s built-in reactivity features.
@@ -84,15 +76,7 @@ Now let's create a component that lists posts and allows the user to add new one
     reactivity: svelteReactivityAdapter,
   });
 
-  let items = $state.raw([]);
-  $effect(() => {
-    const cursor = Posts.find({});
-    items = cursor.fetch();
-
-    return () => {
-      cursor.cleanup();
-    };
-  });
+  let items = $directive(Posts.find({}).fetch());
 </script>
 
 <button onclick={() => Posts.insert({ title: 'Post', author: 'Author' })}>
diff --git a/docs/reactivity/index.md b/docs/reactivity/index.md
index e35bfdb9d..ae69bd0d0 100644
--- a/docs/reactivity/index.md
+++ b/docs/reactivity/index.md
@@ -79,7 +79,7 @@ For some libraries, it wasn't possible to implement a [`onDispose`](/reference/c
 | [`sinuous`](/reference/sinuous/) | ✅ | ✅ | ❌ |
 | [`Solid Signals`](/reference/solid/) | ✅ | ✅ | ❌ |
 | [`sprae`](https://github.com/dy/sprae) (see [#858](https://github.com/maxnowack/signaldb/issues/858)) | ✅ | ❌ | ❌ |
-| [`Svelte Runes`](/reference/svelte/) | ✅ | ❌ | ✅ |
+| [`Svelte Runes`](/reference/svelte/) | ✅ | ✅ | ✅ |
 | [`ulive`](https://github.com/kethan/ulive) | ❌ | - | - |
 | [`usignal`](/reference/usignal/) | ✅ | ❌ | ❌ |
 | [`Vue.js refs`](/reference/vue/) | ✅ | ❌ | ❌ |
diff --git a/docs/reference/svelte/index.md b/docs/reference/svelte/index.md
index 28b32bdaa..cef398d15 100644
--- a/docs/reference/svelte/index.md
+++ b/docs/reference/svelte/index.md
@@ -34,22 +34,11 @@ const Posts = new Collection({
   reactivity: svelteReactivityAdapter,
 });
 
-let items = $state.raw([]);
-$effect(() => {
-  const cursor = Posts.find({});
-  items = cursor.fetch();
-
-  return () => {
-    cursor.cleanup();
-  };
-});
+let items = $directive(Posts.find({}).fetch());
 ```
 
 Reactivity adapter for usage with [Svelte 5](https://svelte.dev/).
 
-The API of Svelte doesn't allow [automatic cleanup](/reference/core/createreactivityadapter/#ondispose-callback-void-dependency-dependency-optional).
-With Svelte, you can return a function from your `$effect` that will be called on cleanup. Use this one to cleanup your cursors (see an example above).
-
 In Svelte, reactivity is built into the very fabric of the framework, eliminating the need for manual change detection cycles. Svelte’s reactive declarations and writable stores automatically track and update state, ensuring that your UI remains consistently in sync with underlying data changes. When paired with SignalDB this natural reactivity is taken to the next level.
 
 SignalDB seamlessly integrates with Svelte’s reactive model by emitting live data updates. As changes occur in SignalDB, those updates are immediately propagated to Svelte’s stores, triggering automatic re-rendering of affected components. This ensures that every part of your application reflects the most current data without any extra boilerplate or manual intervention.
diff --git a/packages/reactivity-adapters/svelte/__tests__/reactivity.svelte.spec.ts b/packages/reactivity-adapters/svelte/__tests__/reactivity.svelte.spec.ts
index 490d9b5ca..f7cdd466a 100644
--- a/packages/reactivity-adapters/svelte/__tests__/reactivity.svelte.spec.ts
+++ b/packages/reactivity-adapters/svelte/__tests__/reactivity.svelte.spec.ts
@@ -1,5 +1,4 @@
 import { it, expect } from 'vitest'
-import { flushSync } from 'svelte'
 import { Collection } from '@signaldb/core'
 import svelteReactivityAdapter from '../index.svelte.ts'
 
@@ -8,23 +7,10 @@ it('should be reactive with svelte', async () => {
     reactivity: svelteReactivityAdapter,
   })
 
-  let count = $state(100)
+  const count = $derived(collection.find({}).count())
 
-  const cleanup = $effect.root(() => {
-    $effect(() => {
-      const cursor = collection.find({})
-      count = cursor.count()
-
-      return () => cursor.cleanup()
-    })
-  })
-
-  flushSync()
   expect(count).to.equal(0)
   collection.insert({ text: 'foo' })
 
-  flushSync()
   expect(count).to.equal(1)
-
-  cleanup()
 })
diff --git a/packages/reactivity-adapters/svelte/index.svelte.ts b/packages/reactivity-adapters/svelte/index.svelte.ts
index dca1f22e7..3da5ac4a2 100644
--- a/packages/reactivity-adapters/svelte/index.svelte.ts
+++ b/packages/reactivity-adapters/svelte/index.svelte.ts
@@ -4,17 +4,29 @@ import { createReactivityAdapter } from '@signaldb/core'
 const svelteReactivityAdapter = createReactivityAdapter({
   create() {
     let update: () => void
-    const subscribe = createSubscriber(u => update = u)
+    let cancel: () => void
+    const subscribe = createSubscriber((u) => {
+      update = u
+      return () => cancel()
+    })
     return {
       depend() {
         subscribe()
       },
       notify() {
-        update()
+        if (update) {
+          update()
+        }
+      },
+      onStop(callback: () => void) {
+        cancel = callback
       },
     }
   },
   isInScope: () => !!$effect.tracking(),
+  onDispose(callback: () => void, { onStop }) {
+    onStop(callback)
+  },
 })
 
 export default svelteReactivityAdapter

From 88f6e487bc4c466a5ff1bc0d81d7016b4c1ccccc Mon Sep 17 00:00:00 2001
From: Max Nowack <maxnowack@users.noreply.github.com>
Date: Fri, 4 Apr 2025 12:03:18 +0200
Subject: [PATCH 2/2] docs: update changelog

---
 packages/reactivity-adapters/svelte/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/reactivity-adapters/svelte/CHANGELOG.md b/packages/reactivity-adapters/svelte/CHANGELOG.md
index 675640b7a..d2d64d20a 100644
--- a/packages/reactivity-adapters/svelte/CHANGELOG.md
+++ b/packages/reactivity-adapters/svelte/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+* Add `onDispose` method to adapter and remove the need for manual cleanup (thanks @signalize!)
+
 ## [1.0.0] - 2025-03-27
 
 ### Added