@tanstack/svelte-table 9.0.0-alpha.41 → 9.0.0-alpha.43

package/dist/createTable.svelte.js

@@ -1,51 +1,31 @@
-import { constructReactivityFeature, constructTable, } from '@tanstack/table-core';
+import { constructTable } from '@tanstack/table-core';
 import { useSelector } from '@tanstack/svelte-store';
 import { untrack } from 'svelte';
 import { mergeObjects } from './merge-objects';
+import { svelteReactivity } from './reactivity.svelte';
 export function createTable(tableOptions, selector = () => ({})) {
-    // 1. Create $state-based notifier for reactivity feature
-    let notifierValue = $state(0);
-    // 2. Construct reactivity feature (same pattern as solid/vue/angular)
-    const svelteReactivityFeature = constructReactivityFeature({
-        stateNotifier: () => notifierValue,
-        optionsNotifier: () => notifierValue,
-    });
-    // 3. Merge reactivity feature into options using mergeObjects (preserves getters)
+    // 1. Merge reactivity into options using mergeObjects (preserves getters)
     const mergedOptions = mergeObjects(tableOptions, {
-        _features: mergeObjects(tableOptions._features, {
-            svelteReactivityFeature,
-        }),
+        _features: {
+            coreReativityFeature: svelteReactivity(),
+            ...tableOptions._features,
+        },
     });
-    // 4. Set up resolved options with mergeOptions handler
+    // 2. Set up resolved options with mergeOptions handler
     const resolvedOptions = mergeObjects({
         mergeOptions: (defaultOptions, newOptions) => {
             return mergeObjects(defaultOptions, newOptions);
         },
     }, mergedOptions);
-    // 5. Construct table
+    // 3. Construct table
     const table = constructTable(resolvedOptions);
-    // 6. Subscribe to all state and options via useSelector
-    const allState = useSelector(table.store, (state) => state);
-    const allOptions = useSelector(table.optionsStore, (options) => options);
-    // 7. Sync store changes -> notifier.
-    // Use $effect.pre so this runs before DOM updates (like Solid's createComputed).
-    // Use untrack for the write so the effect only depends on allState/allOptions,
-    // not on notifierValue itself (which would cause an infinite loop).
-    $effect.pre(() => {
-        allState.current;
-        allOptions.current;
-        untrack(() => {
-            notifierValue++;
-        });
-    });
-    // 8. Sync options reactively. When controlled state changes (e.g., $state
+    // 4. Sync options reactively. When controlled state changes (e.g., $state
     // inside createTableState), the effect re-runs and calls setOptions.
     // Use $effect.pre so the table sees updated options BEFORE the DOM renders,
     // ensuring getRowModel() returns current data (not stale, one-frame-behind data).
     // The reactive reads (state getters, data getter) happen OUTSIDE untrack
-    // so they become dependencies. The setOptions call is INSIDE untrack to
-    // prevent tracking notifierValue (read via store.state's stateNotifier
-    // interceptor inside setOptions), which would cause an infinite loop.
+    // so they become dependencies. The setOptions call is INSIDE untrack so
+    // option writes do not subscribe this effect to table internals.
     $effect.pre(() => {
         // Read reactive getters to create $effect dependencies on external state
         const state = mergedOptions.state;
@@ -61,7 +41,7 @@ export function createTable(tableOptions, selector = () => ({})) {
             });
         });
     });
-    // 9. State selector
+    // 5. State selector
     const stateStore = useSelector(table.store, selector);
     Object.defineProperty(table, 'state', {
         get() {

package/dist/reactivity.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { TableReactivityBindings } from '@tanstack/table-core/reactivity';
+export declare function svelteReactivity(): TableReactivityBindings;

package/dist/reactivity.svelte.js

@@ -0,0 +1,47 @@
+import { flushSync, untrack } from 'svelte';
+function observerToCallback(observerOrNext) {
+    return typeof observerOrNext === 'function'
+        ? observerOrNext
+        : (value) => observerOrNext.next?.(value);
+}
+function subscribeToRune(getValue, observerOrNext) {
+    const callback = observerToCallback(observerOrNext);
+    const unsubscribe = $effect.root(() => {
+        $effect(() => {
+            const value = getValue();
+            untrack(() => callback(value));
+        });
+    });
+    return { unsubscribe };
+}
+export function svelteReactivity() {
+    return {
+        createOptionsStore: true,
+        createReadonlyAtom: (fn, _options) => {
+            const value = $derived.by(fn);
+            return {
+                get: () => value,
+                subscribe: ((observerOrNext) => {
+                    return subscribeToRune(() => value, observerOrNext);
+                }),
+            };
+        },
+        createWritableAtom: (initialValue, _options) => {
+            let value = $state(initialValue);
+            return {
+                set: (updater) => {
+                    value =
+                        typeof updater === 'function'
+                            ? updater(value)
+                            : updater;
+                },
+                get: () => value,
+                subscribe: ((observerOrNext) => {
+                    return subscribeToRune(() => value, observerOrNext);
+                }),
+            };
+        },
+        untrack: untrack,
+        batch: (fn) => flushSync(fn),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.41",
+  "version": "9.0.0-alpha.43",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -51,7 +51,7 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/table-core": "9.0.0-alpha.41"
+    "@tanstack/table-core": "9.0.0-alpha.43"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",

package/src/createTable.svelte.ts

@@ -1,10 +1,8 @@
-import {
-  constructReactivityFeature,
-  constructTable,
-} from '@tanstack/table-core'
-import { shallow, useSelector } from '@tanstack/svelte-store'
+import { constructTable } from '@tanstack/table-core'
+import { useSelector } from '@tanstack/svelte-store'
 import { untrack } from 'svelte'
 import { mergeObjects } from './merge-objects'
+import { svelteReactivity } from './reactivity.svelte'
 import type {
   RowData,
   Table,
@@ -38,23 +36,15 @@ export function createTable<
   selector: (state: TableState<TFeatures>) => TSelected = () =>
     ({}) as TSelected,
 ): SvelteTable<TFeatures, TData, TSelected> {
-  // 1. Create $state-based notifier for reactivity feature
-  let notifierValue = $state(0)
-
-  // 2. Construct reactivity feature (same pattern as solid/vue/angular)
-  const svelteReactivityFeature = constructReactivityFeature<TFeatures, TData>({
-    stateNotifier: () => notifierValue,
-    optionsNotifier: () => notifierValue,
-  })
-
-  // 3. Merge reactivity feature into options using mergeObjects (preserves getters)
+  // 1. Merge reactivity into options using mergeObjects (preserves getters)
   const mergedOptions = mergeObjects(tableOptions, {
-    _features: mergeObjects(tableOptions._features, {
-      svelteReactivityFeature,
-    }),
-  }) as any
+    _features: {
+      coreReativityFeature: svelteReactivity(),
+      ...tableOptions._features,
+    },
+  }) as TableOptions<TFeatures, TData>
 
-  // 4. Set up resolved options with mergeOptions handler
+  // 2. Set up resolved options with mergeOptions handler
   const resolvedOptions = mergeObjects(
     {
       mergeOptions: (
@@ -67,40 +57,23 @@ export function createTable<
     mergedOptions,
   ) as TableOptions<TFeatures, TData>
 
-  // 5. Construct table
+  // 3. Construct table
   const table = constructTable(resolvedOptions) as SvelteTable<
     TFeatures,
     TData,
     TSelected
   >
 
-  // 6. Subscribe to all state and options via useSelector
-  const allState = useSelector(table.store, (state) => state)
-  const allOptions = useSelector(table.optionsStore, (options) => options)
-
-  // 7. Sync store changes -> notifier.
-  // Use $effect.pre so this runs before DOM updates (like Solid's createComputed).
-  // Use untrack for the write so the effect only depends on allState/allOptions,
-  // not on notifierValue itself (which would cause an infinite loop).
-  $effect.pre(() => {
-    allState.current
-    allOptions.current
-    untrack(() => {
-      notifierValue++
-    })
-  })
-
-  // 8. Sync options reactively. When controlled state changes (e.g., $state
+  // 4. Sync options reactively. When controlled state changes (e.g., $state
   // inside createTableState), the effect re-runs and calls setOptions.
   // Use $effect.pre so the table sees updated options BEFORE the DOM renders,
   // ensuring getRowModel() returns current data (not stale, one-frame-behind data).
   // The reactive reads (state getters, data getter) happen OUTSIDE untrack
-  // so they become dependencies. The setOptions call is INSIDE untrack to
-  // prevent tracking notifierValue (read via store.state's stateNotifier
-  // interceptor inside setOptions), which would cause an infinite loop.
+  // so they become dependencies. The setOptions call is INSIDE untrack so
+  // option writes do not subscribe this effect to table internals.
   $effect.pre(() => {
     // Read reactive getters to create $effect dependencies on external state
-    const state = mergedOptions.state
+    const state: Record<string, unknown> | undefined = mergedOptions.state
     if (state) {
       for (const key in state) {
         void state[key]
@@ -110,15 +83,12 @@ export function createTable<
 
     untrack(() => {
       table.setOptions((prev) => {
-        return mergeObjects(prev, mergedOptions) as TableOptions<
-          TFeatures,
-          TData
-        >
+        return mergeObjects(prev, mergedOptions)
       })
     })
   })
 
-  // 9. State selector
+  // 5. State selector
   const stateStore = useSelector(table.store, selector)
 
   Object.defineProperty(table, 'state', {

package/src/reactivity.svelte.ts

@@ -0,0 +1,66 @@
+import { flushSync, untrack } from 'svelte'
+import type {
+  TableAtomOptions,
+  TableReactivityBindings,
+} from '@tanstack/table-core/reactivity'
+import type { Atom, Observer, ReadonlyAtom } from '@tanstack/svelte-store'
+
+function observerToCallback<T>(
+  observerOrNext: Observer<T> | ((value: T) => void),
+): (value: T) => void {
+  return typeof observerOrNext === 'function'
+    ? observerOrNext
+    : (value) => observerOrNext.next?.(value)
+}
+
+function subscribeToRune<T>(
+  getValue: () => T,
+  observerOrNext: Observer<T> | ((value: T) => void),
+) {
+  const callback = observerToCallback(observerOrNext)
+  const unsubscribe = $effect.root(() => {
+    $effect(() => {
+      const value = getValue()
+      untrack(() => callback(value))
+    })
+  })
+
+  return { unsubscribe }
+}
+
+export function svelteReactivity(): TableReactivityBindings {
+  return {
+    createOptionsStore: true,
+    createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
+      const value = $derived.by(fn)
+
+      return {
+        get: () => value,
+        subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+          return subscribeToRune(() => value, observerOrNext)
+        }) as ReadonlyAtom<T>['subscribe'],
+      }
+    },
+    createWritableAtom: <T>(
+      initialValue: T,
+      _options?: TableAtomOptions<T>,
+    ): Atom<T> => {
+      let value = $state(initialValue)
+
+      return {
+        set: (updater: T | ((prevVal: T) => T)) => {
+          value =
+            typeof updater === 'function'
+              ? (updater as (prevVal: T) => T)(value)
+              : updater
+        },
+        get: () => value,
+        subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+          return subscribeToRune(() => value, observerOrNext)
+        }) as Atom<T>['subscribe'],
+      }
+    },
+    untrack: untrack,
+    batch: (fn) => flushSync(fn),
+  }
+}