chore: Improve reactive containers

Author: elliott-with-the-longest-name-on-github

packages/svelte-query/src/containers.svelte.ts

@@ -2,14 +2,36 @@ import { createSubscriber } from 'svelte/reactivity'
 
 type VoidFn = () => void
 type Subscriber = (update: VoidFn) => void | VoidFn
+type Effect =
+  | { type: 'pre'; fn: Subscriber }
+  | { type: 'regular'; fn: Subscriber }
 
 export class ReactiveValue<T> {
   #fn
   #subscribe
 
-  constructor(fn: () => T, onSubscribe: Subscriber) {
+  constructor(
+    fn: () => T,
+    onSubscribe: Subscriber,
+    effects: Array<Effect> = [],
+  ) {
     this.#fn = fn
-    this.#subscribe = createSubscriber(onSubscribe)
+    this.#subscribe = createSubscriber((update) => {
+      const cleanup = $effect.root(() => {
+        for (const effect of effects) {
+          if (effect.type === 'pre') {
+            $effect.pre(() => effect.fn(update))
+          } else {
+            $effect(() => effect.fn(update))
+          }
+        }
+      })
+      const off = onSubscribe(update)
+      return () => {
+        cleanup()
+        off?.()
+      }
+    })
   }
 
   get current() {
@@ -18,7 +40,11 @@ export class ReactiveValue<T> {
   }
 }
 
-export function createReactiveThunk<T>(fn: () => T, onSubscribe: Subscriber) {
-  const reactiveValue = new ReactiveValue(fn, onSubscribe)
+export function createReactiveThunk<T>(
+  fn: () => T,
+  onSubscribe: Subscriber,
+  effects?: Array<Effect>,
+) {
+  const reactiveValue = new ReactiveValue(fn, onSubscribe, effects)
   return () => reactiveValue.current
 }

packages/svelte-query/src/createBaseQuery.svelte.ts

@@ -33,8 +33,6 @@ export function createBaseQuery<
     return opts
   })
 
-  let updateEffects = () => {}
-
   /** Creates the observer */
   const observer = new Observer<
     TQueryFnData,
@@ -44,12 +42,6 @@ export function createBaseQuery<
     TQueryKey
   >(client, resolvedOptions)
 
-  /** Subscribe to changes in result and defaultedOptions */
-  $effect.pre(() => {
-    observer.setOptions(resolvedOptions, { listeners: false })
-    updateEffects()
-  })
-
   return createReactiveThunk(
     () => {
       const result = observer.getOptimisticResult(resolvedOptions)
@@ -58,9 +50,15 @@ export function createBaseQuery<
       }
       return result
     },
-    (update) => {
-      updateEffects = update
-      return observer.subscribe(update)
-    },
+    (update) => observer.subscribe(update),
+    [
+      {
+        type: 'pre',
+        fn: (update) => {
+          observer.setOptions(resolvedOptions, { listeners: false })
+          update()
+        },
+      },
+    ],
   )
 }

packages/svelte-query/src/createQueries.svelte.ts

@@ -218,26 +218,6 @@ export function createQueries<
     combine as QueriesObserverOptions<TCombinedResult>,
   )
 
-  let updateEffects = () => {}
-
-  $effect.pre(() => {
-    // Do not notify on updates because of changes in the options because
-    // these changes should already be reflected in the optimistic result.
-    observer.setQueries(
-      resolvedQueries,
-      { combine } as QueriesObserverOptions<TCombinedResult>,
-      { listeners: false },
-    )
-    updateEffects()
-  })
-
-  $effect(() => {
-    if (isRestoring || subscribed === false) {
-      return
-    }
-    observer.subscribe(updateEffects)
-  })
-
   return createReactiveThunk(
     () => {
       const [_, getCombinedResult, trackResult] = observer.getOptimisticResult(
@@ -246,8 +226,28 @@ export function createQueries<
       )
       return getCombinedResult(trackResult())
     },
-    (update) => {
-      updateEffects = update
-    },
+    () => {},
+    [
+      {
+        type: 'pre',
+        fn: (update) => {
+          observer.setQueries(
+            resolvedQueries,
+            { combine } as QueriesObserverOptions<TCombinedResult>,
+            { listeners: false },
+          )
+          update()
+        },
+      },
+      {
+        type: 'regular',
+        fn: (update) => {
+          if (isRestoring || subscribed === false) {
+            return
+          }
+          observer.subscribe(update)
+        },
+      },
+    ],
   )
 }