@tanstack/svelte-table 9.0.0-alpha.50 → 9.0.0-alpha.52

package/dist/createTable.svelte.d.ts

@@ -1,7 +1,17 @@
 import type { RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
-export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Table<TFeatures, TData> & {
+export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Omit<Table<TFeatures, TData>, 'store'> & {
     /**
-     * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `createTable`.
+     * @deprecated Prefer `table.state` for render reads,
+     * `table.atoms.<slice>.get()` for slice snapshots, or
+     * `useSelector(table.store, selector)` for explicit subscriptions.
+     * `table.store.state` is a current-value snapshot and is easy to misuse in
+     * render code.
+     */
+    readonly store: Table<TFeatures, TData>['store'];
+    /**
+     * The selected state of the table. This state may not match the structure of
+     * the full table state because it is selected by the selector function that
+     * you pass as the 2nd argument to `createTable`.
      *
      * @example
      * const table = createTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state

package/dist/reactivity.svelte.d.ts

@@ -2,8 +2,8 @@ import type { TableReactivityBindings } from '@tanstack/table-core/reactivity';
 /**
  * Creates the table-core reactivity bindings used by the Svelte adapter.
  *
- * Readonly table atoms are backed by `$derived.by`, writable atoms by `$state`,
- * and subscriptions bridge through rune effects so table APIs participate in
- * Svelte dependency tracking.
+ * Table state atoms are backed by TanStack Store atoms. The options store stays
+ * framework-native because row-model APIs read `table.options` directly during
+ * render. Readonly table atoms bridge Store dependency tracking into `$derived.by`.
  */
 export declare function svelteReactivity(): TableReactivityBindings;

package/dist/reactivity.svelte.js

@@ -1,4 +1,6 @@
-import { flushSync, untrack } from 'svelte';
+import { untrack } from 'svelte';
+import { batch, createAtom } from '@tanstack/svelte-store';
+const optionsStoreDebugName = 'table/optionsStore';
 function observerToCallback(observerOrNext) {
     return typeof observerOrNext === 'function'
         ? observerOrNext
@@ -14,42 +16,67 @@ function subscribeToRune(getValue, observerOrNext) {
     });
     return { unsubscribe };
 }
+function createRuneWritableAtom(initialValue) {
+    let value = $state(initialValue);
+    return {
+        set: (updater) => {
+            value =
+                typeof updater === 'function'
+                    ? updater(value)
+                    : updater;
+        },
+        get: () => value,
+        subscribe: ((observerOrNext) => {
+            return subscribeToRune(() => value, observerOrNext);
+        }),
+    };
+}
 /**
  * Creates the table-core reactivity bindings used by the Svelte adapter.
  *
- * Readonly table atoms are backed by `$derived.by`, writable atoms by `$state`,
- * and subscriptions bridge through rune effects so table APIs participate in
- * Svelte dependency tracking.
+ * Table state atoms are backed by TanStack Store atoms. The options store stays
+ * framework-native because row-model APIs read `table.options` directly during
+ * render. Readonly table atoms bridge Store dependency tracking into `$derived.by`.
  */
 export function svelteReactivity() {
     return {
         createOptionsStore: true,
         schedule: (fn) => queueMicrotask(() => fn()),
         createReadonlyAtom: (fn, _options) => {
-            const value = $derived.by(fn);
+            const storeAtom = createAtom(() => fn(), {
+                compare: _options?.compare,
+            });
+            let version = $state(0);
+            $effect(() => {
+                const subscription = storeAtom.subscribe(() => {
+                    version += 1;
+                });
+                return () => subscription.unsubscribe();
+            });
+            const value = $derived.by(() => {
+                version;
+                return storeAtom.get();
+            });
             return {
-                get: () => value,
+                get: () => {
+                    const currentValue = storeAtom.get();
+                    value;
+                    return currentValue;
+                },
                 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);
-                }),
-            };
+            if (_options?.debugName === optionsStoreDebugName) {
+                return createRuneWritableAtom(initialValue);
+            }
+            return createAtom(initialValue, {
+                compare: _options?.compare,
+            });
         },
         untrack: untrack,
-        batch: (fn) => flushSync(fn),
+        batch,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.50",
+  "version": "9.0.0-alpha.52",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,13 +53,13 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/table-core": "9.0.0-alpha.49"
+    "@tanstack/table-core": "9.0.0-alpha.52"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "eslint-plugin-svelte": "^3.17.1",
-    "svelte": "^5.55.7",
+    "eslint-plugin-svelte": "^3.19.0",
+    "svelte": "^5.56.0",
     "svelte-check": "^4.4.8"
   },
   "peerDependencies": {

package/skills/svelte/compose-with-tanstack-store/SKILL.md

@@ -71,7 +71,7 @@ function logSort() {
 }
 ```
 
-`table.store.state` is the full snapshot equivalent.
+`table.state` is the full snapshot equivalent.
 
 ## Pattern 2 — Reactive selector via `createTable`
 

package/skills/svelte/production-readiness/SKILL.md

@@ -160,7 +160,7 @@ function exportSelected() {
 }
 ```
 
-`table.store.state` is the same idea for a full snapshot.
+`table.state` is the same idea for a full snapshot.
 
 ## 6. Key every `{#each}` block on a stable id
 

package/skills/svelte/table-state/SKILL.md

@@ -109,7 +109,7 @@ Read the atom directly. Cheapest path; only reactive when called inside a rune-t
 ```ts
 const sorting = table.atoms.sorting.get()
 const pagination = table.atoms.pagination.get()
-const flat = table.store.state
+const flat = table.state
 ```
 
 ### Reactive read inside markup — `table.state` selector

package/src/createTable.svelte.ts

@@ -15,9 +15,19 @@ export type SvelteTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TSelected = TableState<TFeatures>,
-> = Table<TFeatures, TData> & {
+> = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `createTable`.
+   * @deprecated Prefer `table.state` for render reads,
+   * `table.atoms.<slice>.get()` for slice snapshots, or
+   * `useSelector(table.store, selector)` for explicit subscriptions.
+   * `table.store.state` is a current-value snapshot and is easy to misuse in
+   * render code.
+   */
+  readonly store: Table<TFeatures, TData>['store']
+  /**
+   * The selected state of the table. This state may not match the structure of
+   * the full table state because it is selected by the selector function that
+   * you pass as the 2nd argument to `createTable`.
    *
    * @example
    * const table = createTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
@@ -82,7 +92,7 @@ export function createTable<
   ) as TableOptions<TFeatures, TData>
 
   // 3. Construct table
-  const table = constructTable(resolvedOptions) as SvelteTable<
+  const table = constructTable(resolvedOptions) as unknown as SvelteTable<
     TFeatures,
     TData,
     TSelected

package/src/reactivity.svelte.ts

@@ -1,10 +1,13 @@
-import { flushSync, untrack } from 'svelte'
+import { untrack } from 'svelte'
+import { batch, createAtom } from '@tanstack/svelte-store'
 import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
 import type { Atom, Observer, ReadonlyAtom } from '@tanstack/svelte-store'
 
+const optionsStoreDebugName = 'table/optionsStore'
+
 function observerToCallback<T>(
   observerOrNext: Observer<T> | ((value: T) => void),
 ): (value: T) => void {
@@ -28,22 +31,59 @@ function subscribeToRune<T>(
   return { unsubscribe }
 }
 
+function createRuneWritableAtom<T>(initialValue: 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'],
+  }
+}
+
 /**
  * Creates the table-core reactivity bindings used by the Svelte adapter.
  *
- * Readonly table atoms are backed by `$derived.by`, writable atoms by `$state`,
- * and subscriptions bridge through rune effects so table APIs participate in
- * Svelte dependency tracking.
+ * Table state atoms are backed by TanStack Store atoms. The options store stays
+ * framework-native because row-model APIs read `table.options` directly during
+ * render. Readonly table atoms bridge Store dependency tracking into `$derived.by`.
  */
 export function svelteReactivity(): TableReactivityBindings {
   return {
     createOptionsStore: true,
     schedule: (fn) => queueMicrotask(() => fn()),
     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
-      const value = $derived.by(fn)
+      const storeAtom = createAtom(() => fn(), {
+        compare: _options?.compare,
+      })
+      let version = $state(0)
+
+      $effect(() => {
+        const subscription = storeAtom.subscribe(() => {
+          version += 1
+        })
+
+        return () => subscription.unsubscribe()
+      })
+
+      const value = $derived.by(() => {
+        version
+        return storeAtom.get()
+      })
 
       return {
-        get: () => value,
+        get: () => {
+          const currentValue = storeAtom.get()
+          value
+          return currentValue
+        },
         subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
           return subscribeToRune(() => value, observerOrNext)
         }) as ReadonlyAtom<T>['subscribe'],
@@ -53,22 +93,15 @@ export function svelteReactivity(): TableReactivityBindings {
       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'],
+      if (_options?.debugName === optionsStoreDebugName) {
+        return createRuneWritableAtom(initialValue)
       }
+
+      return createAtom(initialValue, {
+        compare: _options?.compare,
+      })
     },
     untrack: untrack,
-    batch: (fn) => flushSync(fn),
+    batch,
   }
 }