@tanstack/preact-table 9.0.0-alpha.42 → 9.0.0-alpha.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/reactivity.cjs +20 -0
- package/dist/reactivity.cjs.map +1 -0
- package/dist/reactivity.js +20 -0
- package/dist/reactivity.js.map +1 -0
- package/dist/useTable.cjs +8 -11
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +1 -4
- package/dist/useTable.d.ts +1 -4
- package/dist/useTable.js +9 -12
- package/dist/useTable.js.map +1 -1
- package/package.json +2 -3
- package/src/reactivity.ts +76 -52
- package/src/useTable.ts +12 -20
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
let _tanstack_preact_store = require("@tanstack/preact-store");
|
|
2
|
+
|
|
3
|
+
//#region src/reactivity.ts
|
|
4
|
+
function preactReactivity() {
|
|
5
|
+
return {
|
|
6
|
+
createOptionsStore: false,
|
|
7
|
+
batch: _tanstack_preact_store.batch,
|
|
8
|
+
untrack: (fn) => fn(),
|
|
9
|
+
createReadonlyAtom: (fn, options) => {
|
|
10
|
+
return (0, _tanstack_preact_store.createAtom)(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
11
|
+
},
|
|
12
|
+
createWritableAtom: (value, options) => {
|
|
13
|
+
return (0, _tanstack_preact_store.createAtom)(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
//#endregion
|
|
19
|
+
exports.preactReactivity = preactReactivity;
|
|
20
|
+
//# sourceMappingURL=reactivity.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { batch, createAtom } from "@tanstack/preact-store";
|
|
2
|
+
|
|
3
|
+
//#region src/reactivity.ts
|
|
4
|
+
function preactReactivity() {
|
|
5
|
+
return {
|
|
6
|
+
createOptionsStore: false,
|
|
7
|
+
batch,
|
|
8
|
+
untrack: (fn) => fn(),
|
|
9
|
+
createReadonlyAtom: (fn, options) => {
|
|
10
|
+
return createAtom(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
11
|
+
},
|
|
12
|
+
createWritableAtom: (value, options) => {
|
|
13
|
+
return createAtom(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
//#endregion
|
|
19
|
+
export { preactReactivity };
|
|
20
|
+
//# sourceMappingURL=reactivity.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
const require_FlexRender = require('./FlexRender.cjs');
|
|
2
2
|
const require_Subscribe = require('./Subscribe.cjs');
|
|
3
|
+
const require_reactivity = require('./reactivity.cjs');
|
|
3
4
|
let _tanstack_table_core = require("@tanstack/table-core");
|
|
4
5
|
let _tanstack_preact_store = require("@tanstack/preact-store");
|
|
5
6
|
let preact_hooks = require("preact/hooks");
|
|
6
|
-
let _tanstack_table_core_reactivity = require("@tanstack/table-core/reactivity");
|
|
7
7
|
|
|
8
8
|
//#region src/useTable.ts
|
|
9
9
|
function useTable(tableOptions, selector = () => ({})) {
|
|
@@ -11,7 +11,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
11
11
|
const tableInstance = (0, _tanstack_table_core.constructTable)({
|
|
12
12
|
...tableOptions,
|
|
13
13
|
_features: {
|
|
14
|
-
coreReativityFeature:
|
|
14
|
+
coreReativityFeature: require_reactivity.preactReactivity(),
|
|
15
15
|
...tableOptions._features
|
|
16
16
|
}
|
|
17
17
|
});
|
|
@@ -24,21 +24,18 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
24
24
|
tableInstance.FlexRender = require_FlexRender.FlexRender;
|
|
25
25
|
return tableInstance;
|
|
26
26
|
});
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}));
|
|
32
|
-
}, [table, tableOptions]);
|
|
27
|
+
table.setOptions((prev) => ({
|
|
28
|
+
...prev,
|
|
29
|
+
...tableOptions
|
|
30
|
+
}));
|
|
33
31
|
const state = (0, _tanstack_preact_store.useSelector)(table.store, selector, { compare: _tanstack_preact_store.shallow });
|
|
34
|
-
const options = (0, _tanstack_preact_store.useSelector)(table.optionsStore, (options) => options, { compare: _tanstack_preact_store.shallow });
|
|
35
32
|
return (0, preact_hooks.useMemo)(() => ({
|
|
36
33
|
...table,
|
|
37
|
-
options,
|
|
34
|
+
options: tableOptions,
|
|
38
35
|
state
|
|
39
36
|
}), [
|
|
40
37
|
table,
|
|
41
|
-
|
|
38
|
+
tableOptions,
|
|
42
39
|
state
|
|
43
40
|
]);
|
|
44
41
|
}
|
package/dist/useTable.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import {
|
|
1
|
+
{"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 { 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}\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 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 // 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":";;;;;;;;AAkFA,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;AACzC,UAAOC,4BAAU;IACf,GAAG;IACH,OAAO;IACR,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
CHANGED
|
@@ -54,10 +54,7 @@ type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
|
|
|
54
54
|
/**
|
|
55
55
|
* 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`.
|
|
56
56
|
*/
|
|
57
|
-
readonly state: Readonly<TSelected
|
|
58
|
-
columns: TableOptions<TFeatures, TData>['columns'];
|
|
59
|
-
data: TableOptions<TFeatures, TData>['data'];
|
|
60
|
-
};
|
|
57
|
+
readonly state: Readonly<TSelected>;
|
|
61
58
|
};
|
|
62
59
|
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): PreactTable<TFeatures, TData, TSelected>;
|
|
63
60
|
//#endregion
|
package/dist/useTable.d.ts
CHANGED
|
@@ -54,10 +54,7 @@ type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
|
|
|
54
54
|
/**
|
|
55
55
|
* 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`.
|
|
56
56
|
*/
|
|
57
|
-
readonly state: Readonly<TSelected
|
|
58
|
-
columns: TableOptions<TFeatures, TData>['columns'];
|
|
59
|
-
data: TableOptions<TFeatures, TData>['data'];
|
|
60
|
-
};
|
|
57
|
+
readonly state: Readonly<TSelected>;
|
|
61
58
|
};
|
|
62
59
|
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): PreactTable<TFeatures, TData, TSelected>;
|
|
63
60
|
//#endregion
|
package/dist/useTable.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { FlexRender } from "./FlexRender.js";
|
|
2
2
|
import { Subscribe } from "./Subscribe.js";
|
|
3
|
+
import { preactReactivity } from "./reactivity.js";
|
|
3
4
|
import { constructTable } from "@tanstack/table-core";
|
|
4
5
|
import { shallow, useSelector } from "@tanstack/preact-store";
|
|
5
|
-
import {
|
|
6
|
-
import { constructReactivityBindings } from "@tanstack/table-core/reactivity";
|
|
6
|
+
import { useMemo, useState } from "preact/hooks";
|
|
7
7
|
|
|
8
8
|
//#region src/useTable.ts
|
|
9
9
|
function useTable(tableOptions, selector = () => ({})) {
|
|
@@ -11,7 +11,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
11
11
|
const tableInstance = constructTable({
|
|
12
12
|
...tableOptions,
|
|
13
13
|
_features: {
|
|
14
|
-
coreReativityFeature:
|
|
14
|
+
coreReativityFeature: preactReactivity(),
|
|
15
15
|
...tableOptions._features
|
|
16
16
|
}
|
|
17
17
|
});
|
|
@@ -24,21 +24,18 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
24
24
|
tableInstance.FlexRender = FlexRender;
|
|
25
25
|
return tableInstance;
|
|
26
26
|
});
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}));
|
|
32
|
-
}, [table, tableOptions]);
|
|
27
|
+
table.setOptions((prev) => ({
|
|
28
|
+
...prev,
|
|
29
|
+
...tableOptions
|
|
30
|
+
}));
|
|
33
31
|
const state = useSelector(table.store, selector, { compare: shallow });
|
|
34
|
-
const options = useSelector(table.optionsStore, (options) => options, { compare: shallow });
|
|
35
32
|
return useMemo(() => ({
|
|
36
33
|
...table,
|
|
37
|
-
options,
|
|
34
|
+
options: tableOptions,
|
|
38
35
|
state
|
|
39
36
|
}), [
|
|
40
37
|
table,
|
|
41
|
-
|
|
38
|
+
tableOptions,
|
|
42
39
|
state
|
|
43
40
|
]);
|
|
44
41
|
}
|
package/dist/useTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import {
|
|
1
|
+
{"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 { 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}\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 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 // 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":";;;;;;;;AAkFA,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;AACzC,UAAO,UAAU;IACf,GAAG;IACH,OAAO;IACR,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/preact-table",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.43",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for Preact.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -48,9 +48,8 @@
|
|
|
48
48
|
"src"
|
|
49
49
|
],
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@preact/signals": "^2.9.0",
|
|
52
51
|
"@tanstack/preact-store": "^0.13.0",
|
|
53
|
-
"@tanstack/table-core": "9.0.0-alpha.
|
|
52
|
+
"@tanstack/table-core": "9.0.0-alpha.43"
|
|
54
53
|
},
|
|
55
54
|
"devDependencies": {
|
|
56
55
|
"@preact/preset-vite": "^2.10.5",
|
package/src/reactivity.ts
CHANGED
|
@@ -1,63 +1,87 @@
|
|
|
1
|
-
|
|
2
|
-
import { batch, computed, signal, untracked } from '@preact/signals'
|
|
1
|
+
import { batch, createAtom } from '@tanstack/preact-store'
|
|
3
2
|
import type {
|
|
4
3
|
TableAtomOptions,
|
|
5
4
|
TableReactivityBindings,
|
|
6
5
|
} from '@tanstack/table-core/reactivity'
|
|
7
|
-
import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'
|
|
8
|
-
|
|
9
|
-
function observerToCallback<T>(
|
|
10
|
-
observerOrNext: Observer<T> | ((value: T) => void),
|
|
11
|
-
): (value: T) => void {
|
|
12
|
-
return typeof observerOrNext === 'function'
|
|
13
|
-
? observerOrNext
|
|
14
|
-
: (value) => observerOrNext.next?.(value)
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function signalToReadonlyAtom<T>(source: {
|
|
18
|
-
value: T
|
|
19
|
-
subscribe: (observer: (value: T) => void) => () => void
|
|
20
|
-
}): ReadonlyAtom<T> {
|
|
21
|
-
return Object.assign(source, {
|
|
22
|
-
get: () => source.value,
|
|
23
|
-
subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
|
|
24
|
-
const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
|
|
25
|
-
return { unsubscribe }
|
|
26
|
-
}) as ReadonlyAtom<T>['subscribe'],
|
|
27
|
-
})
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function signalToWritableAtom<T>(source: {
|
|
31
|
-
value: T
|
|
32
|
-
subscribe: (observer: (value: T) => void) => () => void
|
|
33
|
-
}): Atom<T> {
|
|
34
|
-
return Object.assign(source, {
|
|
35
|
-
set: (updater: T | ((prevVal: T) => T)) => {
|
|
36
|
-
source.value =
|
|
37
|
-
typeof updater === 'function'
|
|
38
|
-
? (updater as (prevVal: T) => T)(source.value)
|
|
39
|
-
: updater
|
|
40
|
-
},
|
|
41
|
-
get: () => source.value,
|
|
42
|
-
subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
|
|
43
|
-
const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
|
|
44
|
-
return { unsubscribe }
|
|
45
|
-
}) as Atom<T>['subscribe'],
|
|
46
|
-
})
|
|
47
|
-
}
|
|
48
6
|
|
|
49
7
|
export function preactReactivity(): TableReactivityBindings {
|
|
50
8
|
return {
|
|
51
|
-
|
|
52
|
-
|
|
9
|
+
createOptionsStore: false,
|
|
10
|
+
batch,
|
|
11
|
+
untrack: (fn) => fn(),
|
|
12
|
+
createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {
|
|
13
|
+
return createAtom(() => fn(), {
|
|
14
|
+
compare: options?.compare,
|
|
15
|
+
})
|
|
53
16
|
},
|
|
54
|
-
createWritableAtom: <T>(
|
|
55
|
-
value
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return signalToWritableAtom(signal(value))
|
|
17
|
+
createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {
|
|
18
|
+
return createAtom(value, {
|
|
19
|
+
compare: options?.compare,
|
|
20
|
+
})
|
|
59
21
|
},
|
|
60
|
-
untrack: untracked,
|
|
61
|
-
batch: batch,
|
|
62
22
|
}
|
|
63
23
|
}
|
|
24
|
+
|
|
25
|
+
// // TOTO - re-explore preact signals for reactivity
|
|
26
|
+
// import { batch, computed, signal, untracked } from '@preact/signals'
|
|
27
|
+
// import type {
|
|
28
|
+
// TableAtomOptions,
|
|
29
|
+
// TableReactivityBindings,
|
|
30
|
+
// } from '@tanstack/table-core/reactivity'
|
|
31
|
+
// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'
|
|
32
|
+
|
|
33
|
+
// function observerToCallback<T>(
|
|
34
|
+
// observerOrNext: Observer<T> | ((value: T) => void),
|
|
35
|
+
// ): (value: T) => void {
|
|
36
|
+
// return typeof observerOrNext === 'function'
|
|
37
|
+
// ? observerOrNext
|
|
38
|
+
// : (value) => observerOrNext.next?.(value)
|
|
39
|
+
// }
|
|
40
|
+
|
|
41
|
+
// function signalToReadonlyAtom<T>(source: {
|
|
42
|
+
// value: T
|
|
43
|
+
// subscribe: (observer: (value: T) => void) => () => void
|
|
44
|
+
// }): ReadonlyAtom<T> {
|
|
45
|
+
// return Object.assign(source, {
|
|
46
|
+
// get: () => source.value,
|
|
47
|
+
// subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
|
|
48
|
+
// const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
|
|
49
|
+
// return { unsubscribe }
|
|
50
|
+
// }) as ReadonlyAtom<T>['subscribe'],
|
|
51
|
+
// })
|
|
52
|
+
// }
|
|
53
|
+
|
|
54
|
+
// function signalToWritableAtom<T>(source: {
|
|
55
|
+
// value: T
|
|
56
|
+
// subscribe: (observer: (value: T) => void) => () => void
|
|
57
|
+
// }): Atom<T> {
|
|
58
|
+
// return Object.assign(source, {
|
|
59
|
+
// set: (updater: T | ((prevVal: T) => T)) => {
|
|
60
|
+
// source.value =
|
|
61
|
+
// typeof updater === 'function'
|
|
62
|
+
// ? (updater as (prevVal: T) => T)(source.value)
|
|
63
|
+
// : updater
|
|
64
|
+
// },
|
|
65
|
+
// get: () => source.value,
|
|
66
|
+
// subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
|
|
67
|
+
// const unsubscribe = source.subscribe(observerToCallback(observerOrNext))
|
|
68
|
+
// return { unsubscribe }
|
|
69
|
+
// }) as Atom<T>['subscribe'],
|
|
70
|
+
// })
|
|
71
|
+
// }
|
|
72
|
+
|
|
73
|
+
// export function preactReactivity(): TableReactivityBindings {
|
|
74
|
+
// return {
|
|
75
|
+
// createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
|
|
76
|
+
// return signalToReadonlyAtom(computed(fn))
|
|
77
|
+
// },
|
|
78
|
+
// createWritableAtom: <T>(
|
|
79
|
+
// value: T,
|
|
80
|
+
// _options?: TableAtomOptions<T>,
|
|
81
|
+
// ): Atom<T> => {
|
|
82
|
+
// return signalToWritableAtom(signal(value))
|
|
83
|
+
// },
|
|
84
|
+
// untrack: untracked,
|
|
85
|
+
// batch: batch,
|
|
86
|
+
// }
|
|
87
|
+
// }
|
package/src/useTable.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useMemo, useState } from 'preact/hooks'
|
|
2
2
|
import { constructTable } from '@tanstack/table-core'
|
|
3
3
|
import { shallow, useSelector } from '@tanstack/preact-store'
|
|
4
|
-
import {
|
|
4
|
+
import { preactReactivity } from './reactivity'
|
|
5
5
|
import { FlexRender } from './FlexRender'
|
|
6
6
|
import { Subscribe } from './Subscribe'
|
|
7
|
-
// import { preactReactivity } from './reactivity'
|
|
8
7
|
import type {
|
|
9
8
|
CellData,
|
|
10
9
|
RowData,
|
|
@@ -78,10 +77,7 @@ export type PreactTable<
|
|
|
78
77
|
/**
|
|
79
78
|
* 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`.
|
|
80
79
|
*/
|
|
81
|
-
readonly state: Readonly<TSelected>
|
|
82
|
-
columns: TableOptions<TFeatures, TData>['columns']
|
|
83
|
-
data: TableOptions<TFeatures, TData>['data']
|
|
84
|
-
}
|
|
80
|
+
readonly state: Readonly<TSelected>
|
|
85
81
|
}
|
|
86
82
|
|
|
87
83
|
export function useTable<
|
|
@@ -97,7 +93,7 @@ export function useTable<
|
|
|
97
93
|
const tableInstance = constructTable({
|
|
98
94
|
...tableOptions,
|
|
99
95
|
_features: {
|
|
100
|
-
coreReativityFeature:
|
|
96
|
+
coreReativityFeature: preactReactivity(),
|
|
101
97
|
...tableOptions._features,
|
|
102
98
|
},
|
|
103
99
|
}) as PreactTable<TFeatures, TData, TSelected>
|
|
@@ -114,24 +110,20 @@ export function useTable<
|
|
|
114
110
|
return tableInstance
|
|
115
111
|
})
|
|
116
112
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}, [table, tableOptions])
|
|
113
|
+
// sync options on every render
|
|
114
|
+
table.setOptions((prev) => ({
|
|
115
|
+
...prev,
|
|
116
|
+
...tableOptions,
|
|
117
|
+
}))
|
|
123
118
|
|
|
124
119
|
const state = useSelector(table.store, selector, { compare: shallow })
|
|
125
|
-
const options = useSelector(table.optionsStore, (options) => options, {
|
|
126
|
-
compare: shallow,
|
|
127
|
-
})
|
|
128
120
|
|
|
129
121
|
return useMemo(
|
|
130
122
|
() => ({
|
|
131
123
|
...table,
|
|
132
|
-
options,
|
|
124
|
+
options: tableOptions,
|
|
133
125
|
state,
|
|
134
126
|
}),
|
|
135
|
-
[table,
|
|
136
|
-
)
|
|
127
|
+
[table, tableOptions, state],
|
|
128
|
+
)
|
|
137
129
|
}
|