feat: update @tanstack/store to v9

riccardoperra · riccardoperra · commit 86199dc876c7 · 2026-02-23T21:57:12.000+01:00
diff --git a/examples/react/basic-external-state/package.json b/examples/react/basic-external-state/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "@tanstack/react-table": "^9.0.0-alpha.11",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
diff --git a/examples/react/basic-external-store/package.json b/examples/react/basic-external-store/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "@tanstack/react-table": "^9.0.0-alpha.11",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
diff --git a/examples/react/basic-external-store/src/main.tsx b/examples/react/basic-external-store/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import { Store, useStore } from '@tanstack/react-store'
+import { createStore, useStore } from '@tanstack/react-store'
 import {
   createColumnHelper,
   createPaginatedRowModel,
@@ -60,18 +60,17 @@ function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
   // create our own TanStack Store in our own scope (This could just be a global store if defined outside of this component)
-  const [myTableStore] = React.useState(
-    () =>
-      new Store(
-        getInitialTableState(
-          _features, // get default initial state from features
-          // custom initial state
-          {
-            sorting: [],
-            pagination: { pageIndex: 0, pageSize: 10 },
-          },
-        ),
+  const [myTableStore] = React.useState(() =>
+    createStore(
+      getInitialTableState(
+        _features, // get default initial state from features
+        // custom initial state
+        {
+          sorting: [],
+          pagination: { pageIndex: 0, pageSize: 10 },
+        },
       ),
+    ),
   )
 
   // Subscribe to store state for reactive updates, custom selector available too
diff --git a/examples/react/composable-tables/package.json b/examples/react/composable-tables/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "@tanstack/react-table": "^9.0.0-alpha.11",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
diff --git a/examples/react/pagination/package.json b/examples/react/pagination/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "@tanstack/react-table": "^9.0.0-alpha.11",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
diff --git a/examples/react/row-selection/package.json b/examples/react/row-selection/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "@tanstack/react-table": "^9.0.0-alpha.11",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
diff --git a/examples/react/with-tanstack-query/package.json b/examples/react/with-tanstack-query/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
     "@tanstack/react-query": "^5.90.20",
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "@tanstack/react-table": "^9.0.0-alpha.11",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
diff --git a/examples/react/with-tanstack-query/src/main.tsx b/examples/react/with-tanstack-query/src/main.tsx
@@ -6,7 +6,7 @@ import {
   keepPreviousData,
   useQuery,
 } from '@tanstack/react-query'
-import { Store, useStore } from '@tanstack/react-store'
+import { createStore, useStore } from '@tanstack/react-store'
 import './index.css'
 import {
   createColumnHelper,
@@ -49,7 +49,7 @@ const columns = columnHelper.columns([
   }),
 ])
 
-const myTableStore = new Store(
+const myTableStore = createStore(
   getInitialTableState(_features, {
     pagination: { pageIndex: 0, pageSize: 10 },
   }),
diff --git a/packages/angular-table/package.json b/packages/angular-table/package.json
@@ -51,7 +51,7 @@
     "test:types": "tsc && vitest --typecheck"
   },
   "dependencies": {
-    "@tanstack/angular-store": "^0.8.0",
+    "@tanstack/angular-store": "^0.9.1",
     "@tanstack/table-core": "workspace:*",
     "tslib": "^2.8.1"
   },
diff --git a/packages/angular-table/src/injectTable.ts b/packages/angular-table/src/injectTable.ts
@@ -2,7 +2,6 @@ import {
   Injector,
   assertInInjectionContext,
   computed,
-  effect,
   inject,
   untracked,
 } from '@angular/core'
@@ -134,14 +133,6 @@ export function injectTable<
       return result
     })
 
-    effect(
-      (onCleanup) => {
-        const cleanup = table.store.mount()
-        onCleanup(() => cleanup())
-      },
-      { injector },
-    )
-
     const tableState = injectStore(
       table.store,
       (state: TableState<TFeatures>) => state,
diff --git a/packages/preact-table/package.json b/packages/preact-table/package.json
@@ -51,7 +51,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@tanstack/preact-store": "^0.10.1",
+    "@tanstack/preact-store": "^0.11.1",
     "@tanstack/table-core": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/preact-table/src/useTable.ts b/packages/preact-table/src/useTable.ts
@@ -107,12 +107,6 @@ export function useTable<
     ...tableOptions,
   }))
 
-  // Mount the derived store to register it on the dependency graph
-  useIsomorphicLayoutEffect(() => {
-    const cleanup = table.store.mount()
-    return cleanup
-  }, [table])
-
   useIsomorphicLayoutEffect(() => {
     // prevent race condition between table.setOptions and table.baseStore.setState
     queueMicrotask(() => {
diff --git a/packages/react-table/package.json b/packages/react-table/package.json
@@ -51,7 +51,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "@tanstack/table-core": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/react-table/src/useTable.ts b/packages/react-table/src/useTable.ts
@@ -108,12 +108,6 @@ export function useTable<
     ...tableOptions,
   }))
 
-  // Mount the derived store to register it on the dependency graph
-  useIsomorphicLayoutEffect(() => {
-    const cleanup = table.store.mount()
-    return cleanup
-  }, [table])
-
   useIsomorphicLayoutEffect(() => {
     // prevent race condition between table.setOptions and table.baseStore.setState
     queueMicrotask(() => {
diff --git a/packages/svelte-table/package.json b/packages/svelte-table/package.json
@@ -47,7 +47,7 @@
     "build": "svelte-package --input ./src --output ./dist"
   },
   "dependencies": {
-    "@tanstack/svelte-store": "^0.9.0",
+    "@tanstack/svelte-store": "^0.10.1",
     "@tanstack/table-core": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/table-core/package.json b/packages/table-core/package.json
@@ -55,6 +55,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@tanstack/store": "^0.8.0"
+    "@tanstack/store": "^0.9.1"
   }
 }
diff --git a/packages/table-core/src/core/table/constructTable.ts b/packages/table-core/src/core/table/constructTable.ts
@@ -1,6 +1,6 @@
-import { Derived, Store } from '@tanstack/store'
-import {} from '../../utils'
+import { createStore } from '@tanstack/store'
 import { coreFeatures } from '../coreFeatures'
+import type { Store } from '@tanstack/store'
 import type { RowData } from '../../types/type-utils'
 import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
 import type { Table, Table_Internal } from '../../types/Table'
@@ -23,7 +23,7 @@ export function createTableStore<TFeatures extends TableFeatures>(
   features: TFeatures,
   initialState: Partial<TableState<TFeatures>> | undefined = {},
 ): Store<TableState<TFeatures>> {
-  return new Store(getInitialTableState(features, initialState))
+  return createStore(getInitialTableState(features, initialState))
 }
 
 export function constructTable<
@@ -52,20 +52,14 @@ export function constructTable<
     table.options.initialState,
   )
 
-  table.baseStore =
-    table.options.store ?? (new Store(table.initialState) as any)
-
-  // @ts-ignore - complex TFeatures type inference does not work with Derived
-  table.store = new Derived({
-    deps: [table.baseStore],
-    fn: ({ currDepVals }) => {
-      const baseState = currDepVals[0]
-      // Merge base state with user-provided external state (table.options.state takes precedence)
-      return {
-        ...baseState,
-        ...(table.options.state ?? {}),
-      } as TableState<TFeatures>
-    },
+  table.baseStore = table.options.store ?? createStore(table.initialState)
+
+  table.store = createStore(() => {
+    const state = table.baseStore.get()
+    return {
+      ...state,
+      ...(table.options.state ?? {}),
+    }
   })
 
   if (
@@ -78,11 +72,11 @@ export function constructTable<
 
     console.log(
       `Constructing Table Instance
-    
+
   Features:   ${features.join('\n              ')}
-    
+
   Row Models: ${rowModels.length ? rowModels.join('\n              ') : '(none)'}
-    
+
   States:     ${states.join('\n              ')}`,
     )
   }
diff --git a/packages/table-core/src/core/table/coreTablesFeature.types.ts b/packages/table-core/src/core/table/coreTablesFeature.types.ts
@@ -1,4 +1,4 @@
-import type { Derived, Store } from '@tanstack/store'
+import type { ReadonlyStore, Store } from '@tanstack/store'
 import type { CoreFeatures } from '../coreFeatures'
 import type { RowModelFns } from '../../types/RowModelFns'
 import type { RowData, Updater } from '../../types/type-utils'
@@ -105,7 +105,7 @@ export interface Table_CoreProperties<
   /**
    * Where the table state is stored.
    */
-  store: Derived<TableState<TFeatures>, [Store<TableState<TFeatures>>]>
+  store: ReadonlyStore<TableState<TFeatures>>
 }
 
 export interface Table_Table<
diff --git a/packages/table-core/src/core/table/coreTablesFeature.utils.ts b/packages/table-core/src/core/table/coreTablesFeature.utils.ts
@@ -8,7 +8,7 @@ export function table_reset<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>): void {
-  table.baseStore.setState(structuredClone(table.initialState))
+  table.baseStore.setState(() => structuredClone(table.initialState))
 }
 
 export function table_mergeOptions<
diff --git a/packages/table-core/src/types/Table.ts b/packages/table-core/src/types/Table.ts
@@ -1,4 +1,4 @@
-import type { Derived, Store } from '@tanstack/store'
+import type { ReadonlyStore, Store } from '@tanstack/store'
 import type { Table_ColumnFaceting } from '../features/column-faceting/columnFacetingFeature.types'
 import type { Table_ColumnResizing } from '../features/column-resizing/columnResizingFeature.types'
 import type { Table_ColumnFiltering } from '../features/column-filtering/columnFilteringFeature.types'
@@ -121,5 +121,5 @@ export type Table_Internal<
   }
   initialState: TableState_All
   baseStore: Store<TableState_All>
-  store: Derived<TableState_All>
+  store: ReadonlyStore<TableState_All>
 }
diff --git a/packages/vue-table/package.json b/packages/vue-table/package.json
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@tanstack/table-core": "workspace:*",
-    "@tanstack/vue-store": "^0.8.0"
+    "@tanstack/vue-store": "^0.9.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.3",
diff --git a/packages/vue-table/src/useTable.ts b/packages/vue-table/src/useTable.ts
@@ -116,7 +116,7 @@ export function useTable<
     watch(
       () => tableOptions.data,
       () => {
-        table.store.setState((prev: TableState<TFeatures>) => ({
+        table.baseStore.setState((prev: TableState<TFeatures>) => ({
           ...prev,
           data: unref(tableOptions.data),
         }))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
