@tanstack/preact-table 9.0.0-alpha.42 → 9.0.0-alpha.44

package/dist/Subscribe.cjs

@@ -2,7 +2,8 @@ let _tanstack_preact_store = require("@tanstack/preact-store");
 
 //#region src/Subscribe.ts
 function Subscribe(props) {
-	const selected = (0, _tanstack_preact_store.useSelector)("source" in props ? props.source : props.table.store, "source" in props ? props.selector ?? ((x) => x) : props.selector, { compare: _tanstack_preact_store.shallow });
+	const selectFn = props.selector ?? ((x) => x);
+	const selected = (0, _tanstack_preact_store.useSelector)(props.source, selectFn, { compare: _tanstack_preact_store.shallow });
 	return typeof props.children === "function" ? props.children(selected) : props.children;
 }
 

package/dist/Subscribe.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Subscribe.cjs","names":["shallow"],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { shallow, useSelector } from '@tanstack/preact-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or\n * `table.optionsStore`). Omitting `selector` is equivalent to the identity\n * selector — children receive `TSourceValue`.\n */\nexport type SubscribePropsWithSourceIdentity<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector?: undefined\n  children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a projected value from a source (atom or store).\n */\nexport type SubscribePropsWithSourceWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector: (state: TSourceValue) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a single source — atom or store (identity or projected).\n */\nexport type SubscribePropsWithSource<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected = TSourceValue,\n> =\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = unknown,\n  TSourceValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TData, TSelected>\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\n/**\n * A Preact component that allows you to subscribe to the table state.\n *\n * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so\n * JSX contextual typing works. This standalone component uses a union `props` type.\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n>(\n  props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n>(\n  props: SubscribePropsWithSourceWithSelector<\n    TFeatures,\n    TData,\n    TSourceValue,\n    TSelected\n  >,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TSourceValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TSourceValue>,\n): ComponentChildren {\n  const source = 'source' in props ? props.source : props.table.store\n  const selectFn =\n    'source' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector\n\n  const selected = useSelector(\n    source as never,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ComponentChildren)(selected)\n    : props.children\n}\n"],"mappings":";;;AA+HA,SAAgB,UAMd,OACmB;CAKnB,MAAM,mDAJS,YAAY,QAAQ,MAAM,SAAS,MAAM,MAAM,OAE5D,YAAY,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAKpE,EACE,SAASA,gCACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAAqD,SAAS,GACrE,MAAM"}
+{"version":3,"file":"Subscribe.cjs","names":["shallow"],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { shallow, useSelector } from '@tanstack/preact-store'\nimport type {\n  Atom,\n  ReadonlyAtom,\n  ReadonlyStore,\n  Store,\n} from '@tanstack/preact-store'\nimport type { TableFeatures, TableState } from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\nexport type SubscribeSource<TValue> =\n  | Atom<TValue>\n  | ReadonlyAtom<TValue>\n  | Store<TValue>\n  | ReadonlyStore<TValue>\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TSelected,\n> = {\n  source: SubscribeSource<TableState<TFeatures>>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or\n * `table.optionsStore`). Omitting `selector` is equivalent to the identity\n * selector — children receive `TSourceValue`.\n */\nexport type SubscribePropsWithSourceIdentity<TSourceValue> = {\n  source: SubscribeSource<TSourceValue>\n  selector?: undefined\n  children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a projected value from a source (atom or store).\n */\nexport type SubscribePropsWithSourceWithSelector<TSourceValue, TSelected> = {\n  source: SubscribeSource<TSourceValue>\n  selector: (state: TSourceValue) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a single source — atom or store (identity or projected).\n */\nexport type SubscribePropsWithSource<TSourceValue, TSelected = TSourceValue> =\n  | SubscribePropsWithSourceIdentity<TSourceValue>\n  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TSelected = unknown,\n  TSourceValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TSelected>\n  | SubscribePropsWithSourceIdentity<TSourceValue>\n  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>\n\n/**\n * A Preact component that allows you to subscribe to the table state.\n *\n * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so\n * JSX contextual typing works. This standalone component uses a union `props` type.\n */\nexport function Subscribe<TSourceValue>(\n  props: SubscribePropsWithSourceIdentity<TSourceValue>,\n): ComponentChildren\nexport function Subscribe<TSourceValue, TSelected>(\n  props: SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>,\n): ComponentChildren\nexport function Subscribe<TFeatures extends TableFeatures, TSelected>(\n  props: SubscribePropsWithStore<TFeatures, TSelected>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TSelected,\n  TSourceValue,\n>(\n  props: SubscribeProps<TFeatures, TSelected, TSourceValue>,\n): ComponentChildren {\n  const selectFn = props.selector ?? ((x: unknown) => x)\n\n  const selected = useSelector(\n    props.source as never,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ComponentChildren)(selected)\n    : props.children\n}\n"],"mappings":";;;AAuFA,SAAgB,UAKd,OACmB;CACnB,MAAM,WAAW,MAAM,cAAc,MAAe;CAEpD,MAAM,mDACJ,MAAM,QACN,UACA,EACE,SAASA,gCACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAAqD,SAAS,GACrE,MAAM"}

package/dist/Subscribe.d.cts

@@ -1,14 +1,15 @@
-import { RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { TableFeatures, TableState } from "@tanstack/table-core";
 import { ComponentChildren } from "preact";
-import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
+import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/preact-store";
 
 //#region src/Subscribe.d.ts
+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}.
  */
-type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowData, TSelected> = {
-  table: Table<TFeatures, TData>;
+type SubscribePropsWithStore<TFeatures extends TableFeatures, TSelected> = {
+  source: SubscribeSource<TableState<TFeatures>>;
   /**
    * Select from full table state. Re-renders when the selected value changes
    * (shallow compare).
@@ -24,35 +25,33 @@ type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowD
  * `table.optionsStore`). Omitting `selector` is equivalent to the identity
  * selector — children receive `TSourceValue`.
  */
-type SubscribePropsWithSourceIdentity<TFeatures extends TableFeatures, TData extends RowData, TSourceValue> = {
-  table: Table<TFeatures, TData>;
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+type SubscribePropsWithSourceIdentity<TSourceValue> = {
+  source: SubscribeSource<TSourceValue>;
   selector?: undefined;
   children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren;
 };
 /**
  * Subscribe to a projected value from a source (atom or store).
  */
-type SubscribePropsWithSourceWithSelector<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected> = {
-  table: Table<TFeatures, TData>;
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+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).
  */
-type SubscribePropsWithSource<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected = TSourceValue> = SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue> | SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>;
-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>;
+type SubscribePropsWithSource<TSourceValue, TSelected = TSourceValue> = SubscribePropsWithSourceIdentity<TSourceValue> | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>;
+type SubscribeProps<TFeatures extends TableFeatures, TSelected = unknown, TSourceValue = unknown> = 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.
  */
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue>(props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>): ComponentChildren;
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected>(props: SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>): ComponentChildren;
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected>(props: SubscribePropsWithStore<TFeatures, TData, TSelected>): ComponentChildren;
+declare function Subscribe<TSourceValue>(props: SubscribePropsWithSourceIdentity<TSourceValue>): ComponentChildren;
+declare function Subscribe<TSourceValue, TSelected>(props: SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TSelected>(props: SubscribePropsWithStore<TFeatures, TSelected>): ComponentChildren;
 //#endregion
-export { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore };
+export { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, SubscribeSource };
 //# sourceMappingURL=Subscribe.d.cts.map

package/dist/Subscribe.d.ts

@@ -1,14 +1,15 @@
-import { RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
-import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
+import { TableFeatures, TableState } from "@tanstack/table-core";
+import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/preact-store";
 import { ComponentChildren } from "preact";
 
 //#region src/Subscribe.d.ts
+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}.
  */
-type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowData, TSelected> = {
-  table: Table<TFeatures, TData>;
+type SubscribePropsWithStore<TFeatures extends TableFeatures, TSelected> = {
+  source: SubscribeSource<TableState<TFeatures>>;
   /**
    * Select from full table state. Re-renders when the selected value changes
    * (shallow compare).
@@ -24,35 +25,33 @@ type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowD
  * `table.optionsStore`). Omitting `selector` is equivalent to the identity
  * selector — children receive `TSourceValue`.
  */
-type SubscribePropsWithSourceIdentity<TFeatures extends TableFeatures, TData extends RowData, TSourceValue> = {
-  table: Table<TFeatures, TData>;
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+type SubscribePropsWithSourceIdentity<TSourceValue> = {
+  source: SubscribeSource<TSourceValue>;
   selector?: undefined;
   children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren;
 };
 /**
  * Subscribe to a projected value from a source (atom or store).
  */
-type SubscribePropsWithSourceWithSelector<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected> = {
-  table: Table<TFeatures, TData>;
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+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).
  */
-type SubscribePropsWithSource<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected = TSourceValue> = SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue> | SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>;
-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>;
+type SubscribePropsWithSource<TSourceValue, TSelected = TSourceValue> = SubscribePropsWithSourceIdentity<TSourceValue> | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>;
+type SubscribeProps<TFeatures extends TableFeatures, TSelected = unknown, TSourceValue = unknown> = 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.
  */
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue>(props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>): ComponentChildren;
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected>(props: SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>): ComponentChildren;
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected>(props: SubscribePropsWithStore<TFeatures, TData, TSelected>): ComponentChildren;
+declare function Subscribe<TSourceValue>(props: SubscribePropsWithSourceIdentity<TSourceValue>): ComponentChildren;
+declare function Subscribe<TSourceValue, TSelected>(props: SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TSelected>(props: SubscribePropsWithStore<TFeatures, TSelected>): ComponentChildren;
 //#endregion
-export { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore };
+export { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, SubscribeSource };
 //# sourceMappingURL=Subscribe.d.ts.map

package/dist/Subscribe.js

@@ -2,7 +2,8 @@ import { shallow, useSelector } from "@tanstack/preact-store";
 
 //#region src/Subscribe.ts
 function Subscribe(props) {
-	const selected = useSelector("source" in props ? props.source : props.table.store, "source" in props ? props.selector ?? ((x) => x) : props.selector, { compare: shallow });
+	const selectFn = props.selector ?? ((x) => x);
+	const selected = useSelector(props.source, selectFn, { compare: shallow });
 	return typeof props.children === "function" ? props.children(selected) : props.children;
 }
 

package/dist/Subscribe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Subscribe.js","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { shallow, useSelector } from '@tanstack/preact-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or\n * `table.optionsStore`). Omitting `selector` is equivalent to the identity\n * selector — children receive `TSourceValue`.\n */\nexport type SubscribePropsWithSourceIdentity<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector?: undefined\n  children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a projected value from a source (atom or store).\n */\nexport type SubscribePropsWithSourceWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector: (state: TSourceValue) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a single source — atom or store (identity or projected).\n */\nexport type SubscribePropsWithSource<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected = TSourceValue,\n> =\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = unknown,\n  TSourceValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TData, TSelected>\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\n/**\n * A Preact component that allows you to subscribe to the table state.\n *\n * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so\n * JSX contextual typing works. This standalone component uses a union `props` type.\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n>(\n  props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n>(\n  props: SubscribePropsWithSourceWithSelector<\n    TFeatures,\n    TData,\n    TSourceValue,\n    TSelected\n  >,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TSourceValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TSourceValue>,\n): ComponentChildren {\n  const source = 'source' in props ? props.source : props.table.store\n  const selectFn =\n    'source' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector\n\n  const selected = useSelector(\n    source as never,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ComponentChildren)(selected)\n    : props.children\n}\n"],"mappings":";;;AA+HA,SAAgB,UAMd,OACmB;CAKnB,MAAM,WAAW,YAJF,YAAY,QAAQ,MAAM,SAAS,MAAM,MAAM,OAE5D,YAAY,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAKpE,EACE,SAAS,SACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAAqD,SAAS,GACrE,MAAM"}
+{"version":3,"file":"Subscribe.js","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { shallow, useSelector } from '@tanstack/preact-store'\nimport type {\n  Atom,\n  ReadonlyAtom,\n  ReadonlyStore,\n  Store,\n} from '@tanstack/preact-store'\nimport type { TableFeatures, TableState } from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\nexport type SubscribeSource<TValue> =\n  | Atom<TValue>\n  | ReadonlyAtom<TValue>\n  | Store<TValue>\n  | ReadonlyStore<TValue>\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TSelected,\n> = {\n  source: SubscribeSource<TableState<TFeatures>>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or\n * `table.optionsStore`). Omitting `selector` is equivalent to the identity\n * selector — children receive `TSourceValue`.\n */\nexport type SubscribePropsWithSourceIdentity<TSourceValue> = {\n  source: SubscribeSource<TSourceValue>\n  selector?: undefined\n  children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a projected value from a source (atom or store).\n */\nexport type SubscribePropsWithSourceWithSelector<TSourceValue, TSelected> = {\n  source: SubscribeSource<TSourceValue>\n  selector: (state: TSourceValue) => TSelected\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a single source — atom or store (identity or projected).\n */\nexport type SubscribePropsWithSource<TSourceValue, TSelected = TSourceValue> =\n  | SubscribePropsWithSourceIdentity<TSourceValue>\n  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TSelected = unknown,\n  TSourceValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TSelected>\n  | SubscribePropsWithSourceIdentity<TSourceValue>\n  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>\n\n/**\n * A Preact component that allows you to subscribe to the table state.\n *\n * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so\n * JSX contextual typing works. This standalone component uses a union `props` type.\n */\nexport function Subscribe<TSourceValue>(\n  props: SubscribePropsWithSourceIdentity<TSourceValue>,\n): ComponentChildren\nexport function Subscribe<TSourceValue, TSelected>(\n  props: SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>,\n): ComponentChildren\nexport function Subscribe<TFeatures extends TableFeatures, TSelected>(\n  props: SubscribePropsWithStore<TFeatures, TSelected>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TSelected,\n  TSourceValue,\n>(\n  props: SubscribeProps<TFeatures, TSelected, TSourceValue>,\n): ComponentChildren {\n  const selectFn = props.selector ?? ((x: unknown) => x)\n\n  const selected = useSelector(\n    props.source as never,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ComponentChildren)(selected)\n    : props.children\n}\n"],"mappings":";;;AAuFA,SAAgB,UAKd,OACmB;CACnB,MAAM,WAAW,MAAM,cAAc,MAAe;CAEpD,MAAM,WAAW,YACf,MAAM,QACN,UACA,EACE,SAAS,SACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAAqD,SAAS,GACrE,MAAM"}

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { FlexRender, FlexRenderProps, Renderable, flexRender } from "./FlexRender.cjs";
-import { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore } from "./Subscribe.cjs";
+import { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, SubscribeSource } from "./Subscribe.cjs";
 import { PreactTable, useTable } from "./useTable.cjs";
 import { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppPreactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, createTableHook } from "./createTableHook.cjs";
 export * from "@tanstack/table-core";
-export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppPreactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, PreactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, createTableHook, flexRender, useTable };
+export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppPreactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, PreactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, SubscribeSource, createTableHook, flexRender, useTable };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { FlexRender, FlexRenderProps, Renderable, flexRender } from "./FlexRender.js";
-import { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore } from "./Subscribe.js";
+import { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, SubscribeSource } from "./Subscribe.js";
 import { PreactTable, useTable } from "./useTable.js";
 import { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppPreactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, createTableHook } from "./createTableHook.js";
 export * from "@tanstack/table-core";
-export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppPreactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, PreactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, createTableHook, flexRender, useTable };
+export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppPreactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, PreactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, SubscribeSource, createTableHook, flexRender, useTable };

package/dist/reactivity.cjs

@@ -0,0 +1,20 @@
+let _tanstack_preact_store = require("@tanstack/preact-store");
+
+//#region src/reactivity.ts
+function preactReactivity() {
+	return {
+		createOptionsStore: false,
+		batch: _tanstack_preact_store.batch,
+		untrack: (fn) => fn(),
+		createReadonlyAtom: (fn, options) => {
+			return (0, _tanstack_preact_store.createAtom)(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
+		},
+		createWritableAtom: (value, options) => {
+			return (0, _tanstack_preact_store.createAtom)(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
+		}
+	};
+}
+
+//#endregion
+exports.preactReactivity = preactReactivity;
+//# sourceMappingURL=reactivity.cjs.map

package/dist/reactivity.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/preact-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\nexport function preactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n\n// // TOTO - re-explore preact signals for reactivity\n// import { batch, computed, signal, untracked } from '@preact/signals'\n// import type {\n//   TableAtomOptions,\n//   TableReactivityBindings,\n// } from '@tanstack/table-core/reactivity'\n// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'\n\n// function observerToCallback<T>(\n//   observerOrNext: Observer<T> | ((value: T) => void),\n// ): (value: T) => void {\n//   return typeof observerOrNext === 'function'\n//     ? observerOrNext\n//     : (value) => observerOrNext.next?.(value)\n// }\n\n// function signalToReadonlyAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): ReadonlyAtom<T> {\n//   return Object.assign(source, {\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as ReadonlyAtom<T>['subscribe'],\n//   })\n// }\n\n// function signalToWritableAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): Atom<T> {\n//   return Object.assign(source, {\n//     set: (updater: T | ((prevVal: T) => T)) => {\n//       source.value =\n//         typeof updater === 'function'\n//           ? (updater as (prevVal: T) => T)(source.value)\n//           : updater\n//     },\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as Atom<T>['subscribe'],\n//   })\n// }\n\n// export function preactReactivity(): TableReactivityBindings {\n//   return {\n//     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n//       return signalToReadonlyAtom(computed(fn))\n//     },\n//     createWritableAtom: <T>(\n//       value: T,\n//       _options?: TableAtomOptions<T>,\n//     ): Atom<T> => {\n//       return signalToWritableAtom(signal(value))\n//     },\n//     untrack: untracked,\n//     batch: batch,\n//   }\n// }\n"],"mappings":";;;AAMA,SAAgB,mBAA4C;AAC1D,QAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;AACrE,uDAAwB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;AAClE,iDAAkB,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}

package/dist/reactivity.js

@@ -0,0 +1,20 @@
+import { batch, createAtom } from "@tanstack/preact-store";
+
+//#region src/reactivity.ts
+function preactReactivity() {
+	return {
+		createOptionsStore: false,
+		batch,
+		untrack: (fn) => fn(),
+		createReadonlyAtom: (fn, options) => {
+			return createAtom(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
+		},
+		createWritableAtom: (value, options) => {
+			return createAtom(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
+		}
+	};
+}
+
+//#endregion
+export { preactReactivity };
+//# sourceMappingURL=reactivity.js.map

package/dist/reactivity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/preact-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\nexport function preactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n\n// // TOTO - re-explore preact signals for reactivity\n// import { batch, computed, signal, untracked } from '@preact/signals'\n// import type {\n//   TableAtomOptions,\n//   TableReactivityBindings,\n// } from '@tanstack/table-core/reactivity'\n// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'\n\n// function observerToCallback<T>(\n//   observerOrNext: Observer<T> | ((value: T) => void),\n// ): (value: T) => void {\n//   return typeof observerOrNext === 'function'\n//     ? observerOrNext\n//     : (value) => observerOrNext.next?.(value)\n// }\n\n// function signalToReadonlyAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): ReadonlyAtom<T> {\n//   return Object.assign(source, {\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as ReadonlyAtom<T>['subscribe'],\n//   })\n// }\n\n// function signalToWritableAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): Atom<T> {\n//   return Object.assign(source, {\n//     set: (updater: T | ((prevVal: T) => T)) => {\n//       source.value =\n//         typeof updater === 'function'\n//           ? (updater as (prevVal: T) => T)(source.value)\n//           : updater\n//     },\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as Atom<T>['subscribe'],\n//   })\n// }\n\n// export function preactReactivity(): TableReactivityBindings {\n//   return {\n//     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n//       return signalToReadonlyAtom(computed(fn))\n//     },\n//     createWritableAtom: <T>(\n//       value: T,\n//       _options?: TableAtomOptions<T>,\n//     ): Atom<T> => {\n//       return signalToWritableAtom(signal(value))\n//     },\n//     untrack: untracked,\n//     batch: batch,\n//   }\n// }\n"],"mappings":";;;AAMA,SAAgB,mBAA4C;AAC1D,QAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;AACrE,UAAO,iBAAiB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;AAClE,UAAO,WAAW,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}

package/dist/useTable.cjs

@@ -1,9 +1,9 @@
 const require_FlexRender = require('./FlexRender.cjs');
 const require_Subscribe = require('./Subscribe.cjs');
+const require_reactivity = require('./reactivity.cjs');
 let _tanstack_table_core = require("@tanstack/table-core");
 let _tanstack_preact_store = require("@tanstack/preact-store");
 let preact_hooks = require("preact/hooks");
-let _tanstack_table_core_reactivity = require("@tanstack/table-core/reactivity");
 
 //#region src/useTable.ts
 function useTable(tableOptions, selector = () => ({})) {
@@ -11,34 +11,32 @@ function useTable(tableOptions, selector = () => ({})) {
 		const tableInstance = (0, _tanstack_table_core.constructTable)({
 			...tableOptions,
 			_features: {
-				coreReativityFeature: (0, _tanstack_table_core_reactivity.constructReactivityBindings)(),
+				coreReativityFeature: require_reactivity.preactReactivity(),
 				...tableOptions._features
 			}
 		});
 		tableInstance.Subscribe = ((props) => {
+			const source = props.source ?? tableInstance.store;
 			return require_Subscribe.Subscribe({
 				...props,
-				table: tableInstance
+				source
 			});
 		});
 		tableInstance.FlexRender = require_FlexRender.FlexRender;
 		return tableInstance;
 	});
-	(0, preact_hooks.useEffect)(() => {
-		table.setOptions((prev) => ({
-			...prev,
-			...tableOptions
-		}));
-	}, [table, tableOptions]);
+	table.setOptions((prev) => ({
+		...prev,
+		...tableOptions
+	}));
 	const state = (0, _tanstack_preact_store.useSelector)(table.store, selector, { compare: _tanstack_preact_store.shallow });
-	const options = (0, _tanstack_preact_store.useSelector)(table.optionsStore, (options) => options, { compare: _tanstack_preact_store.shallow });
 	return (0, preact_hooks.useMemo)(() => ({
 		...table,
-		options,
+		options: tableOptions,
 		state
 	}), [
 		table,
-		options,
+		tableOptions,
 		state
 	]);
 }

package/dist/useTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { constructReactivityBindings } from '@tanstack/table-core/reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\n// import { preactReactivity } from './reactivity'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * 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 `useTable`.\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      _features: {\n        coreReativityFeature: constructReactivityBindings(), // preactReactivity() currently causes infinite re-renders\n        ...tableOptions._features,\n      },\n    }) as PreactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  useEffect(() => {\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n  }, [table, tableOptions])\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n  const options = useSelector(table.optionsStore, (options) => options, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      options,\n      state,\n    }),\n    [table, options, state],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;AAsFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,0CAAwB;EAC7B,MAAM,yDAA+B;GACnC,GAAG;GACH,WAAW;IACT,wFAAmD;IACnD,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;AACzC,UAAOA,4BAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAEF,mCAAgB;AACd,QAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;GACJ,EAAE;IACF,CAAC,OAAO,aAAa,CAAC;CAEzB,MAAM,gDAAoB,MAAM,OAAO,UAAU,EAAE,SAASC,gCAAS,CAAC;CACtE,MAAM,kDAAsB,MAAM,eAAe,YAAY,SAAS,EACpE,SAASA,gCACV,CAAC;AAEF,yCACS;EACL,GAAG;EACH;EACA;EACD,GACD;EAAC;EAAO;EAAS;EAAM,CACxB"}
+{"version":3,"file":"useTable.cjs","names":["preactReactivity","Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { preactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * 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 `useTable`.\n   */\n  readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      _features: {\n        coreReativityFeature: preactReactivity(),\n        ...tableOptions._features,\n      },\n    }) as PreactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      const source = props.source ?? tableInstance.store\n\n      return Subscribe({\n        ...props,\n        source,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n\n  return useMemo(\n    () => ({\n      ...table,\n      options: tableOptions,\n      state,\n    }),\n    [table, tableOptions, state],\n  )\n}\n"],"mappings":";;;;;;;;AA8EA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,0CAAwB;EAC7B,MAAM,yDAA+B;GACnC,GAAG;GACH,WAAW;IACT,sBAAsBA,qCAAkB;IACxC,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;GACzC,MAAM,SAAS,MAAM,UAAU,cAAc;AAE7C,UAAOC,4BAAU;IACf,GAAG;IACH;IACD,CAAC;;AAGJ,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,gDAAoB,MAAM,OAAO,UAAU,EAAE,SAASC,gCAAS,CAAC;AAEtE,yCACS;EACL,GAAG;EACH,SAAS;EACT;EACD,GACD;EAAC;EAAO;EAAc;EAAM,CAC7B"}

package/dist/useTable.d.cts

@@ -1,8 +1,7 @@
 import { FlexRenderProps } from "./FlexRender.cjs";
-import { SubscribePropsWithStore } from "./Subscribe.cjs";
+import { SubscribePropsWithStore, SubscribeSource } from "./Subscribe.cjs";
 import { CellData, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 import { ComponentChildren } from "preact";
-import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
 
 //#region src/useTable.d.ts
 type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
@@ -35,16 +34,16 @@ type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
    */
   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'>): ComponentChildren;
+    <TSubSelected>(props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>): ComponentChildren;
   };
   /**
    * A Preact component that renders headers, cells, or footers with custom markup.
@@ -54,10 +53,7 @@ type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
   /**
    * 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 `useTable`.
    */
-  readonly state: Readonly<TSelected> & {
-    columns: TableOptions<TFeatures, TData>['columns'];
-    data: TableOptions<TFeatures, TData>['data'];
-  };
+  readonly state: Readonly<TSelected>;
 };
 declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): PreactTable<TFeatures, TData, TSelected>;
 //#endregion

package/dist/useTable.d.ts

@@ -1,7 +1,6 @@
 import { FlexRenderProps } from "./FlexRender.js";
-import { SubscribePropsWithStore } from "./Subscribe.js";
+import { SubscribePropsWithStore, SubscribeSource } from "./Subscribe.js";
 import { CellData, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
-import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
 import { ComponentChildren } from "preact";
 
 //#region src/useTable.d.ts
@@ -35,16 +34,16 @@ type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
    */
   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'>): ComponentChildren;
+    <TSubSelected>(props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>): ComponentChildren;
   };
   /**
    * A Preact component that renders headers, cells, or footers with custom markup.
@@ -54,10 +53,7 @@ type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
   /**
    * 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 `useTable`.
    */
-  readonly state: Readonly<TSelected> & {
-    columns: TableOptions<TFeatures, TData>['columns'];
-    data: TableOptions<TFeatures, TData>['data'];
-  };
+  readonly state: Readonly<TSelected>;
 };
 declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): PreactTable<TFeatures, TData, TSelected>;
 //#endregion

package/dist/useTable.js

@@ -1,9 +1,9 @@
 import { FlexRender } from "./FlexRender.js";
 import { Subscribe } from "./Subscribe.js";
+import { preactReactivity } from "./reactivity.js";
 import { constructTable } from "@tanstack/table-core";
 import { shallow, useSelector } from "@tanstack/preact-store";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { constructReactivityBindings } from "@tanstack/table-core/reactivity";
+import { useMemo, useState } from "preact/hooks";
 
 //#region src/useTable.ts
 function useTable(tableOptions, selector = () => ({})) {
@@ -11,34 +11,32 @@ function useTable(tableOptions, selector = () => ({})) {
 		const tableInstance = constructTable({
 			...tableOptions,
 			_features: {
-				coreReativityFeature: constructReactivityBindings(),
+				coreReativityFeature: preactReactivity(),
 				...tableOptions._features
 			}
 		});
 		tableInstance.Subscribe = ((props) => {
+			const source = props.source ?? tableInstance.store;
 			return Subscribe({
 				...props,
-				table: tableInstance
+				source
 			});
 		});
 		tableInstance.FlexRender = FlexRender;
 		return tableInstance;
 	});
-	useEffect(() => {
-		table.setOptions((prev) => ({
-			...prev,
-			...tableOptions
-		}));
-	}, [table, tableOptions]);
+	table.setOptions((prev) => ({
+		...prev,
+		...tableOptions
+	}));
 	const state = useSelector(table.store, selector, { compare: shallow });
-	const options = useSelector(table.optionsStore, (options) => options, { compare: shallow });
 	return useMemo(() => ({
 		...table,
-		options,
+		options: tableOptions,
 		state
 	}), [
 		table,
-		options,
+		tableOptions,
 		state
 	]);
 }

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { constructReactivityBindings } from '@tanstack/table-core/reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\n// import { preactReactivity } from './reactivity'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * 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 `useTable`.\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      _features: {\n        coreReativityFeature: constructReactivityBindings(), // preactReactivity() currently causes infinite re-renders\n        ...tableOptions._features,\n      },\n    }) as PreactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  useEffect(() => {\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n  }, [table, tableOptions])\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n  const options = useSelector(table.optionsStore, (options) => options, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      options,\n      state,\n    }),\n    [table, options, state],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;AAsFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe;GACnC,GAAG;GACH,WAAW;IACT,sBAAsB,6BAA6B;IACnD,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;AACzC,UAAO,UAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAa;AAE3B,SAAO;GACP;AAEF,iBAAgB;AACd,QAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;GACJ,EAAE;IACF,CAAC,OAAO,aAAa,CAAC;CAEzB,MAAM,QAAQ,YAAY,MAAM,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;CACtE,MAAM,UAAU,YAAY,MAAM,eAAe,YAAY,SAAS,EACpE,SAAS,SACV,CAAC;AAEF,QAAO,eACE;EACL,GAAG;EACH;EACA;EACD,GACD;EAAC;EAAO;EAAS;EAAM,CACxB"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-store'\nimport { preactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (source first, then store) so JSX contextual typing works for both modes.\n   * Source without `selector` is separate so children infer `TSourceValue` (identity projection).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * 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 `useTable`.\n   */\n  readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable({\n      ...tableOptions,\n      _features: {\n        coreReativityFeature: preactReactivity(),\n        ...tableOptions._features,\n      },\n    }) as PreactTable<TFeatures, TData, TSelected>\n\n    tableInstance.Subscribe = ((props: any) => {\n      const source = props.source ?? tableInstance.store\n\n      return Subscribe({\n        ...props,\n        source,\n      })\n    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const state = useSelector(table.store, selector, { compare: shallow })\n\n  return useMemo(\n    () => ({\n      ...table,\n      options: tableOptions,\n      state,\n    }),\n    [table, tableOptions, state],\n  )\n}\n"],"mappings":";;;;;;;;AA8EA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe;GACnC,GAAG;GACH,WAAW;IACT,sBAAsB,kBAAkB;IACxC,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;GACzC,MAAM,SAAS,MAAM,UAAU,cAAc;AAE7C,UAAO,UAAU;IACf,GAAG;IACH;IACD,CAAC;;AAGJ,gBAAc,aAAa;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,QAAQ,YAAY,MAAM,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;AAEtE,QAAO,eACE;EACL,GAAG;EACH,SAAS;EACT;EACD,GACD;EAAC;EAAO;EAAc;EAAM,CAC7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/preact-table",
-  "version": "9.0.0-alpha.42",
+  "version": "9.0.0-alpha.44",
   "description": "Headless UI for building powerful tables & datagrids for Preact.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -48,9 +48,8 @@
     "src"
   ],
   "dependencies": {
-    "@preact/signals": "^2.9.0",
     "@tanstack/preact-store": "^0.13.0",
-    "@tanstack/table-core": "9.0.0-alpha.42"
+    "@tanstack/table-core": "9.0.0-alpha.43"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.5",

package/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,13 +39,8 @@ 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
 }
@@ -48,14 +48,8 @@ export type SubscribePropsWithSourceIdentity<
 /**
  * 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
 }
@@ -63,34 +57,18 @@ export type SubscribePropsWithSourceWithSelector<
 /**
  * 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.
@@ -98,47 +76,26 @@ export type SubscribeProps<
  * 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,

package/src/reactivity.ts

@@ -1,63 +1,87 @@
-// TOTO - re-explore preact signals for reactivity
-import { batch, computed, signal, untracked } from '@preact/signals'
+import { batch, createAtom } from '@tanstack/preact-store'
 import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
-import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'
-
-function observerToCallback<T>(
-  observerOrNext: Observer<T> | ((value: T) => void),
-): (value: T) => void {
-  return typeof observerOrNext === 'function'
-    ? observerOrNext
-    : (value) => observerOrNext.next?.(value)
-}
-
-function signalToReadonlyAtom<T>(source: {
-  value: T
-  subscribe: (observer: (value: T) => void) => () => void
-}): ReadonlyAtom<T> {
-  return Object.assign(source, {
-    get: () => source.value,
-    subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
-      const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
-      return { unsubscribe }
-    }) as ReadonlyAtom<T>['subscribe'],
-  })
-}
-
-function signalToWritableAtom<T>(source: {
-  value: T
-  subscribe: (observer: (value: T) => void) => () => void
-}): Atom<T> {
-  return Object.assign(source, {
-    set: (updater: T | ((prevVal: T) => T)) => {
-      source.value =
-        typeof updater === 'function'
-          ? (updater as (prevVal: T) => T)(source.value)
-          : updater
-    },
-    get: () => source.value,
-    subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
-      const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
-      return { unsubscribe }
-    }) as Atom<T>['subscribe'],
-  })
-}
 
 export function preactReactivity(): TableReactivityBindings {
   return {
-    createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
-      return signalToReadonlyAtom(computed(fn))
+    createOptionsStore: false,
+    batch,
+    untrack: (fn) => fn(),
+    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {
+      return createAtom(() => fn(), {
+        compare: options?.compare,
+      })
     },
-    createWritableAtom: <T>(
-      value: T,
-      _options?: TableAtomOptions<T>,
-    ): Atom<T> => {
-      return signalToWritableAtom(signal(value))
+    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {
+      return createAtom(value, {
+        compare: options?.compare,
+      })
     },
-    untrack: untracked,
-    batch: batch,
   }
 }
+
+// // TOTO - re-explore preact signals for reactivity
+// import { batch, computed, signal, untracked } from '@preact/signals'
+// import type {
+//   TableAtomOptions,
+//   TableReactivityBindings,
+// } from '@tanstack/table-core/reactivity'
+// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'
+
+// function observerToCallback<T>(
+//   observerOrNext: Observer<T> | ((value: T) => void),
+// ): (value: T) => void {
+//   return typeof observerOrNext === 'function'
+//     ? observerOrNext
+//     : (value) => observerOrNext.next?.(value)
+// }
+
+// function signalToReadonlyAtom<T>(source: {
+//   value: T
+//   subscribe: (observer: (value: T) => void) => () => void
+// }): ReadonlyAtom<T> {
+//   return Object.assign(source, {
+//     get: () => source.value,
+//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
+//       return { unsubscribe }
+//     }) as ReadonlyAtom<T>['subscribe'],
+//   })
+// }
+
+// function signalToWritableAtom<T>(source: {
+//   value: T
+//   subscribe: (observer: (value: T) => void) => () => void
+// }): Atom<T> {
+//   return Object.assign(source, {
+//     set: (updater: T | ((prevVal: T) => T)) => {
+//       source.value =
+//         typeof updater === 'function'
+//           ? (updater as (prevVal: T) => T)(source.value)
+//           : updater
+//     },
+//     get: () => source.value,
+//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
+//       return { unsubscribe }
+//     }) as Atom<T>['subscribe'],
+//   })
+// }
+
+// export function preactReactivity(): TableReactivityBindings {
+//   return {
+//     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
+//       return signalToReadonlyAtom(computed(fn))
+//     },
+//     createWritableAtom: <T>(
+//       value: T,
+//       _options?: TableAtomOptions<T>,
+//     ): Atom<T> => {
+//       return signalToWritableAtom(signal(value))
+//     },
+//     untrack: untracked,
+//     batch: batch,
+//   }
+// }

package/src/useTable.ts

@@ -1,10 +1,9 @@
-import { useEffect, useMemo, useState } from 'preact/hooks'
+import { useMemo, useState } from 'preact/hooks'
 import { constructTable } from '@tanstack/table-core'
 import { shallow, useSelector } from '@tanstack/preact-store'
-import { constructReactivityBindings } from '@tanstack/table-core/reactivity'
+import { preactReactivity } from './reactivity'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
-// import { preactReactivity } from './reactivity'
 import type {
   CellData,
   RowData,
@@ -13,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,
@@ -52,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
   }
   /**
@@ -78,10 +73,7 @@ export type PreactTable<
   /**
    * 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 `useTable`.
    */
-  readonly state: Readonly<TSelected> & {
-    columns: TableOptions<TFeatures, TData>['columns']
-    data: TableOptions<TFeatures, TData>['data']
-  }
+  readonly state: Readonly<TSelected>
 }
 
 export function useTable<
@@ -97,15 +89,17 @@ export function useTable<
     const tableInstance = constructTable({
       ...tableOptions,
       _features: {
-        coreReativityFeature: constructReactivityBindings(), // preactReactivity() currently causes infinite re-renders
+        coreReativityFeature: preactReactivity(),
         ...tableOptions._features,
       },
     }) 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']
 
@@ -114,24 +108,20 @@ export function useTable<
     return tableInstance
   })
 
-  useEffect(() => {
-    table.setOptions((prev) => ({
-      ...prev,
-      ...tableOptions,
-    }))
-  }, [table, tableOptions])
+  // sync options on every render
+  table.setOptions((prev) => ({
+    ...prev,
+    ...tableOptions,
+  }))
 
   const state = useSelector(table.store, selector, { compare: shallow })
-  const options = useSelector(table.optionsStore, (options) => options, {
-    compare: shallow,
-  })
 
   return useMemo(
     () => ({
       ...table,
-      options,
+      options: tableOptions,
       state,
     }),
-    [table, options, state],
-  ) as PreactTable<TFeatures, TData, TSelected>
+    [table, tableOptions, state],
+  )
 }