@tanstack/vue-table 9.0.0-beta.3 → 9.0.0-beta.5

package/src/reactivity.ts

@@ -1,20 +1,17 @@
-import {
-  computed,
-  getCurrentScope,
-  onScopeDispose,
-  shallowRef,
-  watch,
-} from 'vue'
-import { batch, createAtom } from '@tanstack/vue-store'
+import { computed, shallowRef, watch } from 'vue'
+import { batch } from '@tanstack/store'
 import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
-import type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'
+import type {
+  Atom,
+  Observer,
+  ReadonlyAtom,
+  Subscription,
+} from '@tanstack/store'
 import type { ComputedRef, ShallowRef } from 'vue'
 
-const optionsStoreDebugName = 'table/optionsStore'
-
 function observerToCallback<T>(
   observerOrNext: Observer<T> | ((value: T) => void),
 ): (value: T) => void {
@@ -64,50 +61,27 @@ function refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {
  * refs.
  */
 export function vueReactivity(): TableReactivityBindings {
+  const subscriptions = new Set<Subscription>()
+
   return {
     createOptionsStore: true,
-    wrapExternalAtoms: false,
-    addSubscription: () => {
-      throw new Error(
-        'Feature not supported in current reactivity implementation',
-      )
+    wrapExternalAtoms: true,
+    addSubscription: (subscription) => {
+      subscriptions.add(subscription)
     },
     unmount: () => {
-      throw new Error(
-        'Feature not supported in current reactivity implementation',
-      )
+      subscriptions.forEach((s) => s.unsubscribe())
+      subscriptions.clear()
     },
     schedule: (fn) => queueMicrotask(() => fn()),
     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
-      const storeAtom = createAtom(() => fn(), {
-        compare: _options?.compare,
-      })
-      const version = shallowRef(0)
-      const subscription = storeAtom.subscribe(() => {
-        version.value += 1
-      })
-      if (getCurrentScope()) {
-        onScopeDispose(() => subscription.unsubscribe())
-      }
-
-      return refToReadonlyAtom(
-        computed(() => {
-          version.value
-          return storeAtom.get()
-        }),
-      )
+      return refToReadonlyAtom(computed(() => fn()))
     },
     createWritableAtom: <T>(
       value: T,
       _options?: TableAtomOptions<T>,
     ): Atom<T> => {
-      if (_options?.debugName === optionsStoreDebugName) {
-        return refToWritableAtom(shallowRef(value) as ShallowRef<T>)
-      }
-
-      return createAtom(value, {
-        compare: _options?.compare,
-      })
+      return refToWritableAtom(shallowRef(value) as ShallowRef<T>)
     },
     untrack: (fn) => fn(),
     batch,

package/src/useTable.ts

@@ -1,16 +1,8 @@
-import { unref, watch } from 'vue'
+import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'
 import { constructTable } from '@tanstack/table-core'
-import { shallow, useSelector } from '@tanstack/vue-store'
 import { flatMerge, mergeProxy } from './merge-proxy'
 import { vueReactivity } from './reactivity'
 import type {
-  Atom,
-  ReadonlyAtom,
-  ReadonlyStore,
-  Store,
-} from '@tanstack/vue-store'
-import type {
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
@@ -19,12 +11,6 @@ import type {
 } from '@tanstack/table-core'
 import type { MaybeRef, VNode } from 'vue'
 
-export type SubscribeSource<TValue> =
-  | Atom<TValue>
-  | ReadonlyAtom<TValue>
-  | Store<TValue>
-  | ReadonlyStore<TValue>
-
 export type TableOptionsWithReactiveData<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -61,57 +47,19 @@ function getReactiveOptionDeps<
 export type VueTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 > = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state` for render reads,
-   * `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. `table.store.state` is a current-value snapshot and is easy
-   * to misuse in render code.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` 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']
-  /**
-   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
-   * `selector` for the whole value (identity), or pass `selector` to project. Split
-   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector?: undefined
-      children:
-        | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector: (state: TSourceValue) => TSubSelected
-      children:
-        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-    <TSubSelected>(props: {
-      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected
-      children:
-        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-  }
-  /**
-   * 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 `useTable`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
+  /** Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Vue only tracks those atom reads.
    */
-  readonly state: Readonly<TSelected>
+  Subscribe: (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>
+  }) => VNode | Array<VNode>
 }
 
 /**
@@ -119,8 +67,8 @@ export type VueTable<
  *
  * Table options may contain Vue refs or computed values. The adapter unwraps
  * those reactive inputs, watches them with synchronous flushing, and keeps the
- * table options in sync. The optional selector projects from `table.store` and
- * exposes the selected value on `table.state`.
+ * table options in sync. Use `table.Subscribe` or native Vue computed values
+ * around `table.atoms.<slice>.get()` for selected reactive reads.
  *
  * @example
  * ```ts
@@ -131,22 +79,17 @@ export type VueTable<
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state.pagination
  * ```
  */
 export function useTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 >(
   tableOptions:
     | TableOptions<TFeatures, TData>
     | TableOptionsWithReactiveData<TFeatures, TData>,
-  selector?: (state: TableState<TFeatures>) => TSelected,
-): VueTable<TFeatures, TData, TSelected> {
+): VueTable<TFeatures, TData> {
   const syncTableOptions = (
     table: Table<TFeatures, TData>,
     options: TableOptionsWithReactiveData<TFeatures, TData>,
@@ -156,9 +99,11 @@ export function useTable<
     )
   }
 
+  const reactivity = vueReactivity()
+
   const mergedOptions = mergeProxy(tableOptions, {
     features: {
-      coreReativityFeature: vueReactivity(),
+      coreReativityFeature: reactivity,
       ...(unref(tableOptions.features) ?? {}),
     },
   }) as TableOptionsWithReactiveData<TFeatures, TData>
@@ -177,7 +122,11 @@ export function useTable<
   ) as TableOptions<TFeatures, TData>
 
   const coreTable = constructTable(resolvedOptions)
-  const table = coreTable as unknown as VueTable<TFeatures, TData, TSelected>
+  const table = coreTable as unknown as VueTable<TFeatures, TData>
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => reactivity.unmount?.())
+  }
 
   watch(
     () => getReactiveOptionDeps(mergedOptions),
@@ -222,30 +171,11 @@ export function useTable<
     { immediate: true },
   )
 
-  table.Subscribe = ((props: {
-    source?: SubscribeSource<unknown>
-    selector?: ((state: unknown) => unknown) | undefined
-    children:
-      | ((state: Readonly<unknown>) => VNode | Array<VNode>)
-      | VNode
-      | Array<VNode>
+  table.Subscribe = (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>
   }) => {
-    const source = props.source ?? table.store
-    const selected = useSelector(source as never, props.selector as never, {
-      compare: shallow,
-    })
-    if (typeof props.children === 'function') {
-      return props.children(selected.value as Readonly<unknown>)
-    }
-    return props.children
-  }) as VueTable<TFeatures, TData, TSelected>['Subscribe']
-
-  const stateStore = useSelector(table.store, selector)
-
-  return {
-    ...table,
-    get state() {
-      return stateStore.value
-    },
+    return props.children(table.atoms)
   }
+
+  return table
 }