feat: simplified Subscribe by remove table prop in favor of just source

Author: KevinVandy

packages/angular-table/src/injectTable.ts

@@ -7,9 +7,15 @@ import {
   untracked,
 } from '@angular/core'
 import { constructTable } from '@tanstack/table-core'
+import { injectSelector, shallow } from '@tanstack/angular-store'
 import { lazyInit } from './lazySignalInitializer'
 import { angularReactivity } from './reactivity'
-import type { Atom, ReadonlyAtom } from '@tanstack/angular-store'
+import type {
+  Atom,
+  ReadonlyAtom,
+  ReadonlyStore,
+  Store,
+} from '@tanstack/angular-store'
 import type {
   RowData,
   Table,
@@ -19,6 +25,12 @@ import type {
 } from '@tanstack/table-core'
 import type { Signal, ValueEqualityFn } from '@angular/core'
 
+export type SubscribeSource<TValue> =
+  | Atom<TValue>
+  | ReadonlyAtom<TValue>
+  | Store<TValue>
+  | ReadonlyStore<TValue>
+
 /**
  * Store mode: pass `selector` (required) to project from full table state.
  * Source mode: pass `source` (atom or store); omit `selector` for the whole value
@@ -27,12 +39,12 @@ import type { Signal, ValueEqualityFn } from '@angular/core'
  */
 export interface AngularTableComputed<TFeatures extends TableFeatures> {
   <TSourceValue>(props: {
-    source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+    source: SubscribeSource<TSourceValue>
     selector?: undefined
     equal?: ValueEqualityFn<TSourceValue>
   }): Signal<Readonly<TSourceValue>>
   <TSourceValue, TSubSelected>(props: {
-    source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+    source: SubscribeSource<TSourceValue>
     selector: (state: TSourceValue) => TSubSelected
     equal?: ValueEqualityFn<TSubSelected>
   }): Signal<Readonly<TSubSelected>>
@@ -59,10 +71,7 @@ export type AngularTable<
    * Creates a computed that subscribe to changes in the table store with a custom selector.
    * Default equality function is "shallow".
    */
-  computed: <TSubSelected = {}>(props: {
-    selector: (state: TableState<TFeatures>) => TSubSelected
-    equal?: ValueEqualityFn<TSubSelected>
-  }) => Signal<Readonly<TSubSelected>>
+  computed: AngularTableComputed<TFeatures>
 }
 
 /**
@@ -160,14 +169,21 @@ export function injectTable<
       { injector, debugName: 'tableOptionsUpdate' },
     )
 
-    table.computed = function Subscribe<TSubSelected = {}>(props: {
-      selector: (state: TableState<TFeatures>) => TSubSelected
-      equal?: ValueEqualityFn<TSubSelected>
+    table.computed = function Subscribe(props: {
+      source?: SubscribeSource<unknown>
+      selector?: (state: unknown) => unknown
+      equal?: ValueEqualityFn<unknown>
     }) {
-      return computed(() => props.selector(table.store.get()), {
-        equal: props.equal,
-      })
-    }
+      const source = props.source ?? table.store
+      return injectSelector(
+        source,
+        props.selector ?? ((state: unknown) => state),
+        {
+          compare: props.equal ?? shallow,
+          injector,
+        },
+      )
+    } as AngularTableComputed<TFeatures>
 
     Object.defineProperty(table, 'state', {
       value: computed(() => selector(table.store.get())),

packages/lit-table/src/TableController.ts

@@ -1,7 +1,7 @@
 import { constructTable } from '@tanstack/table-core'
 import { litReactivity } from './reactivity'
 import { FlexRender } from './flexRender'
-import type { Atom, ReadonlyAtom } from '@tanstack/store'
+import type { Atom, ReadonlyAtom, ReadonlyStore, Store } from '@tanstack/store'
 import type {
   NoInfer,
   RowData,
@@ -16,6 +16,12 @@ import type {
   TemplateResult,
 } from 'lit'
 
+export type SubscribeSource<TValue> =
+  | Atom<TValue>
+  | ReadonlyAtom<TValue>
+  | Store<TValue>
+  | ReadonlyStore<TValue>
+
 /**
  * The extended table type returned by the Lit adapter.
  * Includes a `Subscribe` method for fine-grained state subscriptions
@@ -43,15 +49,15 @@ export type LitTable<
    */
   Subscribe: {
     <TSourceValue>(props: {
-      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+      source: SubscribeSource<TSourceValue>
       selector?: undefined
       children:
         | ((state: Readonly<TSourceValue>) => TemplateResult | string)
         | TemplateResult
         | string
     }): TemplateResult | string
     <TSourceValue, TSubscribeSelected>(props: {
-      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+      source: SubscribeSource<TSourceValue>
       selector: (state: TSourceValue) => TSubscribeSelected
       children:
         | ((state: Readonly<TSubscribeSelected>) => TemplateResult | string)
@@ -178,20 +184,17 @@ export class TableController<
 
     // Attach Subscribe function
     const Subscribe = function Subscribe(props: {
-      source?: Atom<unknown> | ReadonlyAtom<unknown>
+      source?: SubscribeSource<unknown>
       selector?: (state: unknown) => unknown
       children:
         | ((state: Readonly<unknown>) => TemplateResult | string)
         | TemplateResult
         | string
     }): TemplateResult | string {
-      let selectedState: unknown
-      if (props.source !== undefined) {
-        const v = props.source.get()
-        selectedState = props.selector !== undefined ? props.selector(v) : v
-      } else {
-        selectedState = props.selector!(tableInstance.store.state)
-      }
+      const source = props.source ?? tableInstance.store
+      const value = source.get()
+      const selectedState =
+        props.selector !== undefined ? props.selector(value) : value
       if (typeof props.children === 'function') {
         return props.children(selectedState as Readonly<unknown>)
       }
@@ -215,7 +218,6 @@ export class TableController<
         this.host.requestUpdate()
       })
 
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       this._optionsSubscription = this._table.optionsStore!.subscribe(() => {
         this._notifier++
         this.host.requestUpdate()

packages/preact-table/src/Subscribe.ts

@@ -1,23 +1,28 @@
 import { shallow, useSelector } from '@tanstack/preact-store'
-import type { Atom, ReadonlyAtom } from '@tanstack/preact-store'
 import type {
-  RowData,
-  Table,
-  TableFeatures,
-  TableState,
-} from '@tanstack/table-core'
+  Atom,
+  ReadonlyAtom,
+  ReadonlyStore,
+  Store,
+} from '@tanstack/preact-store'
+import type { TableFeatures, TableState } from '@tanstack/table-core'
 import type { ComponentChildren } from 'preact'
 
+export type SubscribeSource<TValue> =
+  | Atom<TValue>
+  | ReadonlyAtom<TValue>
+  | Store<TValue>
+  | ReadonlyStore<TValue>
+
 /**
  * Subscribe to `table.store` (full table state). The selector receives the full
  * {@link TableState}.
  */
 export type SubscribePropsWithStore<
   TFeatures extends TableFeatures,
-  TData extends RowData,
   TSelected,
 > = {
-  table: Table<TFeatures, TData>
+  source: SubscribeSource<TableState<TFeatures>>
   /**
    * Select from full table state. Re-renders when the selected value changes
    * (shallow compare).
@@ -34,111 +39,63 @@ export type SubscribePropsWithStore<
  * `table.optionsStore`). Omitting `selector` is equivalent to the identity
  * selector — children receive `TSourceValue`.
  */
-export type SubscribePropsWithSourceIdentity<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-> = {
-  table: Table<TFeatures, TData>
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+export type SubscribePropsWithSourceIdentity<TSourceValue> = {
+  source: SubscribeSource<TSourceValue>
   selector?: undefined
   children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren
 }
 
 /**
  * Subscribe to a projected value from a source (atom or store).
  */
-export type SubscribePropsWithSourceWithSelector<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-  TSelected,
-> = {
-  table: Table<TFeatures, TData>
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+export type SubscribePropsWithSourceWithSelector<TSourceValue, TSelected> = {
+  source: SubscribeSource<TSourceValue>
   selector: (state: TSourceValue) => TSelected
   children: ((state: TSelected) => ComponentChildren) | ComponentChildren
 }
 
 /**
  * Subscribe to a single source — atom or store (identity or projected).
  */
-export type SubscribePropsWithSource<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-  TSelected = TSourceValue,
-> =
-  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>
-  | SubscribePropsWithSourceWithSelector<
-      TFeatures,
-      TData,
-      TSourceValue,
-      TSelected
-    >
+export type SubscribePropsWithSource<TSourceValue, TSelected = TSourceValue> =
+  | SubscribePropsWithSourceIdentity<TSourceValue>
+  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>
 
 export type SubscribeProps<
   TFeatures extends TableFeatures,
-  TData extends RowData,
   TSelected = unknown,
   TSourceValue = unknown,
 > =
-  | SubscribePropsWithStore<TFeatures, TData, TSelected>
-  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>
-  | SubscribePropsWithSourceWithSelector<
-      TFeatures,
-      TData,
-      TSourceValue,
-      TSelected
-    >
+  | SubscribePropsWithStore<TFeatures, TSelected>
+  | SubscribePropsWithSourceIdentity<TSourceValue>
+  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>
 
 /**
  * A Preact component that allows you to subscribe to the table state.
  *
  * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so
  * JSX contextual typing works. This standalone component uses a union `props` type.
  */
-export function Subscribe<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
->(
-  props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>,
+export function Subscribe<TSourceValue>(
+  props: SubscribePropsWithSourceIdentity<TSourceValue>,
 ): ComponentChildren
-export function Subscribe<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-  TSelected,
->(
-  props: SubscribePropsWithSourceWithSelector<
-    TFeatures,
-    TData,
-    TSourceValue,
-    TSelected
-  >,
+export function Subscribe<TSourceValue, TSelected>(
+  props: SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>,
 ): ComponentChildren
-export function Subscribe<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSelected,
->(
-  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,
+export function Subscribe<TFeatures extends TableFeatures, TSelected>(
+  props: SubscribePropsWithStore<TFeatures, TSelected>,
 ): ComponentChildren
 export function Subscribe<
   TFeatures extends TableFeatures,
-  TData extends RowData,
   TSelected,
   TSourceValue,
 >(
-  props: SubscribeProps<TFeatures, TData, TSelected, TSourceValue>,
+  props: SubscribeProps<TFeatures, TSelected, TSourceValue>,
 ): ComponentChildren {
-  const source = 'source' in props ? props.source : props.table.store
-  const selectFn =
-    'source' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector
+  const selectFn = props.selector ?? ((x: unknown) => x)
 
   const selected = useSelector(
-    source as never,
+    props.source as never,
     selectFn as Parameters<typeof useSelector>[1],
     {
       compare: shallow,

packages/preact-table/src/useTable.ts

@@ -12,10 +12,9 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/table-core'
-import type { Atom, ReadonlyAtom } from '@tanstack/preact-store'
 import type { ComponentChildren } from 'preact'
 import type { FlexRenderProps } from './FlexRender'
-import type { SubscribePropsWithStore } from './Subscribe'
+import type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'
 
 export type PreactTable<
   TFeatures extends TableFeatures,
@@ -51,20 +50,17 @@ export type PreactTable<
    */
   Subscribe: {
     <TSourceValue>(props: {
-      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+      source: SubscribeSource<TSourceValue>
       selector?: undefined
       children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren
     }): ComponentChildren
     <TSourceValue, TSubSelected>(props: {
-      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+      source: SubscribeSource<TSourceValue>
       selector: (state: TSourceValue) => TSubSelected
       children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren
     }): ComponentChildren
     <TSubSelected>(
-      props: Omit<
-        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,
-        'table'
-      >,
+      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,
     ): ComponentChildren
   }
   /**
@@ -99,9 +95,11 @@ export function useTable<
     }) as PreactTable<TFeatures, TData, TSelected>
 
     tableInstance.Subscribe = ((props: any) => {
+      const source = props.source ?? tableInstance.store
+
       return Subscribe({
         ...props,
-        table: tableInstance,
+        source,
       })
     }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']