@tanstack/vue-table 9.0.0-alpha.41 → 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 +45 -0
- package/dist/reactivity.cjs.map +1 -0
- package/dist/reactivity.js +45 -0
- package/dist/reactivity.js.map +1 -0
- package/dist/useTable.cjs +3 -14
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.js +5 -16
- package/dist/useTable.js.map +1 -1
- package/package.json +2 -2
- package/src/reactivity.ts +64 -0
- package/src/useTable.ts +4 -22
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
let vue = require("vue");
|
|
2
|
+
|
|
3
|
+
//#region src/reactivity.ts
|
|
4
|
+
function observerToCallback(observerOrNext) {
|
|
5
|
+
return typeof observerOrNext === "function" ? observerOrNext : (value) => {
|
|
6
|
+
var _observerOrNext$next;
|
|
7
|
+
return (_observerOrNext$next = observerOrNext.next) === null || _observerOrNext$next === void 0 ? void 0 : _observerOrNext$next.call(observerOrNext, value);
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
function refToReadonlyAtom(source) {
|
|
11
|
+
return Object.assign(source, {
|
|
12
|
+
get: () => source.value,
|
|
13
|
+
subscribe: ((observerOrNext) => {
|
|
14
|
+
return { unsubscribe: (0, vue.watch)(source, observerToCallback(observerOrNext), { flush: "sync" }) };
|
|
15
|
+
})
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function refToWritableAtom(source) {
|
|
19
|
+
return Object.assign(source, {
|
|
20
|
+
set: (updater) => {
|
|
21
|
+
source.value = typeof updater === "function" ? updater(source.value) : updater;
|
|
22
|
+
},
|
|
23
|
+
get: () => source.value,
|
|
24
|
+
subscribe: ((observerOrNext) => {
|
|
25
|
+
return { unsubscribe: (0, vue.watch)(source, observerToCallback(observerOrNext), { flush: "sync" }) };
|
|
26
|
+
})
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function vueReactivity() {
|
|
30
|
+
return {
|
|
31
|
+
createOptionsStore: true,
|
|
32
|
+
createReadonlyAtom: (fn, _options) => {
|
|
33
|
+
return refToReadonlyAtom((0, vue.computed)(fn));
|
|
34
|
+
},
|
|
35
|
+
createWritableAtom: (value, _options) => {
|
|
36
|
+
return refToWritableAtom((0, vue.shallowRef)(value));
|
|
37
|
+
},
|
|
38
|
+
untrack: (fn) => fn(),
|
|
39
|
+
batch: (fn) => fn()
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
//#endregion
|
|
44
|
+
exports.vueReactivity = vueReactivity;
|
|
45
|
+
//# sourceMappingURL=reactivity.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction 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\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): 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 stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\nexport function vueReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: true,\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(fn))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAQA,SAAS,mBACP,gBACoB;AACpB,QAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,MAAM;;;AAG7C,SAAS,kBACP,QACiB;AACjB,QAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,4BAHU,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAS,kBAAqB,QAAgC;AAC5D,QAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;AACzC,UAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,MAAM,GAC5C;;EAER,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,4BAHU,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAgB,gBAAyC;AACvD,QAAO;EACL,oBAAoB;EACpB,qBAAwB,IAAa,aAAmC;AACtE,UAAO,oCAA2B,GAAG,CAAC;;EAExC,qBACE,OACA,aACY;AACZ,UAAO,sCAA6B,MAAM,CAAkB;;EAE9D,UAAU,OAAO,IAAI;EACrB,QAAQ,OAAO,IAAI;EACpB"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { computed, shallowRef, watch } from "vue";
|
|
2
|
+
|
|
3
|
+
//#region src/reactivity.ts
|
|
4
|
+
function observerToCallback(observerOrNext) {
|
|
5
|
+
return typeof observerOrNext === "function" ? observerOrNext : (value) => {
|
|
6
|
+
var _observerOrNext$next;
|
|
7
|
+
return (_observerOrNext$next = observerOrNext.next) === null || _observerOrNext$next === void 0 ? void 0 : _observerOrNext$next.call(observerOrNext, value);
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
function refToReadonlyAtom(source) {
|
|
11
|
+
return Object.assign(source, {
|
|
12
|
+
get: () => source.value,
|
|
13
|
+
subscribe: ((observerOrNext) => {
|
|
14
|
+
return { unsubscribe: watch(source, observerToCallback(observerOrNext), { flush: "sync" }) };
|
|
15
|
+
})
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function refToWritableAtom(source) {
|
|
19
|
+
return Object.assign(source, {
|
|
20
|
+
set: (updater) => {
|
|
21
|
+
source.value = typeof updater === "function" ? updater(source.value) : updater;
|
|
22
|
+
},
|
|
23
|
+
get: () => source.value,
|
|
24
|
+
subscribe: ((observerOrNext) => {
|
|
25
|
+
return { unsubscribe: watch(source, observerToCallback(observerOrNext), { flush: "sync" }) };
|
|
26
|
+
})
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function vueReactivity() {
|
|
30
|
+
return {
|
|
31
|
+
createOptionsStore: true,
|
|
32
|
+
createReadonlyAtom: (fn, _options) => {
|
|
33
|
+
return refToReadonlyAtom(computed(fn));
|
|
34
|
+
},
|
|
35
|
+
createWritableAtom: (value, _options) => {
|
|
36
|
+
return refToWritableAtom(shallowRef(value));
|
|
37
|
+
},
|
|
38
|
+
untrack: (fn) => fn(),
|
|
39
|
+
batch: (fn) => fn()
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
//#endregion
|
|
44
|
+
export { vueReactivity };
|
|
45
|
+
//# sourceMappingURL=reactivity.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction 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\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): 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 stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\nexport function vueReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: true,\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(fn))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAQA,SAAS,mBACP,gBACoB;AACpB,QAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,MAAM;;;AAG7C,SAAS,kBACP,QACiB;AACjB,QAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAS,kBAAqB,QAAgC;AAC5D,QAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;AACzC,UAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,MAAM,GAC5C;;EAER,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAgB,gBAAyC;AACvD,QAAO;EACL,oBAAoB;EACpB,qBAAwB,IAAa,aAAmC;AACtE,UAAO,kBAAkB,SAAS,GAAG,CAAC;;EAExC,qBACE,OACA,aACY;AACZ,UAAO,kBAAkB,WAAW,MAAM,CAAkB;;EAE9D,UAAU,OAAO,IAAI;EACrB,QAAQ,OAAO,IAAI;EACpB"}
|
package/dist/useTable.cjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const require_merge_proxy = require('./merge-proxy.cjs');
|
|
2
|
+
const require_reactivity = require('./reactivity.cjs');
|
|
2
3
|
let vue = require("vue");
|
|
3
4
|
let _tanstack_table_core = require("@tanstack/table-core");
|
|
4
5
|
let _tanstack_vue_store = require("@tanstack/vue-store");
|
|
@@ -13,31 +14,19 @@ function getReactiveOptionDeps(options) {
|
|
|
13
14
|
return Object.keys(options).map((key) => (0, vue.unref)(options[key]));
|
|
14
15
|
}
|
|
15
16
|
function useTable(tableOptions, selector = () => ({})) {
|
|
16
|
-
const notifier = (0, vue.ref)(0);
|
|
17
17
|
const syncTableOptions = (table, options) => {
|
|
18
18
|
table.setOptions(() => getOptionsWithReactiveValues(options));
|
|
19
19
|
};
|
|
20
|
-
const vueReactivityFeature = (0, _tanstack_table_core.constructReactivityFeature)({
|
|
21
|
-
stateNotifier: () => notifier.value,
|
|
22
|
-
optionsNotifier: () => notifier.value
|
|
23
|
-
});
|
|
24
20
|
const mergedOptions = {
|
|
25
21
|
...tableOptions,
|
|
26
22
|
_features: {
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
coreReativityFeature: require_reactivity.vueReactivity(),
|
|
24
|
+
...tableOptions._features
|
|
29
25
|
}
|
|
30
26
|
};
|
|
31
27
|
const table = (0, _tanstack_table_core.constructTable)(require_merge_proxy.mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
|
|
32
28
|
return require_merge_proxy.mergeProxy(defaultOptions, newOptions);
|
|
33
29
|
} }));
|
|
34
|
-
const allState = (0, _tanstack_vue_store.useSelector)(table.store, (state) => state);
|
|
35
|
-
const allOptions = (0, _tanstack_vue_store.useSelector)(table.optionsStore, (state) => state);
|
|
36
|
-
(0, vue.watchEffect)(() => {
|
|
37
|
-
allState.value;
|
|
38
|
-
allOptions.value;
|
|
39
|
-
notifier.value++;
|
|
40
|
-
});
|
|
41
30
|
(0, vue.watch)(() => getReactiveOptionDeps(mergedOptions), () => {
|
|
42
31
|
syncTableOptions(table, mergedOptions);
|
|
43
32
|
}, { immediate: true });
|
package/dist/useTable.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.cjs","names":["mergeProxy","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useTable.cjs","names":["mergeProxy","vueReactivity","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type { Atom, ReadonlyAtom } from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\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 * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n coreReativityFeature: vueReactivity(),\n ...tableOptions._features,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(table, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(table, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: Atom<unknown> | ReadonlyAtom<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source !== undefined ? props.source : table.store\n const selectFn =\n props.source !== undefined\n ? (props.selector ?? ((x: unknown) => x))\n : props.selector\n const selected = useSelector(source as never, selectFn as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n }\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,sBACd,QAAQ,KACT;AAGH,QAAOA,+BAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,uBACzB,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,kBACG,EAAE,GACkC;CACvC,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,sBAAsBC,kCAAe;GACrC,GAAG,aAAa;GACjB;EACF;CAiBD,MAAM,iDAfkBD,+BACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAOA,+BAAW,gBAAgB,WAAW;IAEhD,CAGyC,CAAC;AAM7C,sBAEI,sBACE,cACD,QACG;AACJ,mBAAiB,OAAO,cAAc;IAExC,EAAE,WAAW,MAAM,CACpB;AAED,sBACQ;EACJ,MAAM,iCAAwB,aAAa,MAAM;EAGjD,MAAM,iCAAwB,aAAa,MAAM;AAIjD,MAAI,CAAC,gBACH,QAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;AAE3C,OAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;AACjD,OAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,OAC1D;AAKF,oBAAiB,KAAK,gBAAgB,KAAK;;AAG7C,SAAO;KAER,qBAAqB;AACpB,MAAI,iBAAiB,SAAS,EAC5B,kBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAMJ,MAAM,gDALS,MAAM,WAAW,SAAY,MAAM,SAAS,MAAM,OAE/D,MAAM,WAAW,SACZ,MAAM,cAAc,MAAe,KACpC,MAAM,UACqD,EAC/D,SAASE,6BACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,kDAAyB,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}
|
package/dist/useTable.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { mergeProxy } from "./merge-proxy.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { vueReactivity } from "./reactivity.js";
|
|
3
|
+
import { unref, watch } from "vue";
|
|
4
|
+
import { constructTable } from "@tanstack/table-core";
|
|
4
5
|
import { shallow, useSelector } from "@tanstack/vue-store";
|
|
5
6
|
|
|
6
7
|
//#region src/useTable.ts
|
|
@@ -13,31 +14,19 @@ function getReactiveOptionDeps(options) {
|
|
|
13
14
|
return Object.keys(options).map((key) => unref(options[key]));
|
|
14
15
|
}
|
|
15
16
|
function useTable(tableOptions, selector = () => ({})) {
|
|
16
|
-
const notifier = ref(0);
|
|
17
17
|
const syncTableOptions = (table, options) => {
|
|
18
18
|
table.setOptions(() => getOptionsWithReactiveValues(options));
|
|
19
19
|
};
|
|
20
|
-
const vueReactivityFeature = constructReactivityFeature({
|
|
21
|
-
stateNotifier: () => notifier.value,
|
|
22
|
-
optionsNotifier: () => notifier.value
|
|
23
|
-
});
|
|
24
20
|
const mergedOptions = {
|
|
25
21
|
...tableOptions,
|
|
26
22
|
_features: {
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
coreReativityFeature: vueReactivity(),
|
|
24
|
+
...tableOptions._features
|
|
29
25
|
}
|
|
30
26
|
};
|
|
31
27
|
const table = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
|
|
32
28
|
return mergeProxy(defaultOptions, newOptions);
|
|
33
29
|
} }));
|
|
34
|
-
const allState = useSelector(table.store, (state) => state);
|
|
35
|
-
const allOptions = useSelector(table.optionsStore, (state) => state);
|
|
36
|
-
watchEffect(() => {
|
|
37
|
-
allState.value;
|
|
38
|
-
allOptions.value;
|
|
39
|
-
notifier.value++;
|
|
40
|
-
});
|
|
41
30
|
watch(() => getReactiveOptionDeps(mergedOptions), () => {
|
|
42
31
|
syncTableOptions(table, mergedOptions);
|
|
43
32
|
}, { immediate: true });
|
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 { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type { Atom, ReadonlyAtom } from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\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 * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n coreReativityFeature: vueReactivity(),\n ...tableOptions._features,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(table, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(table, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: Atom<unknown> | ReadonlyAtom<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source !== undefined ? props.source : table.store\n const selectFn =\n props.source !== undefined\n ? (props.selector ?? ((x: unknown) => x))\n : props.selector\n const selected = useSelector(source as never, selectFn as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n }\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,OAAO,MACrB,QAAQ,KACT;AAGH,QAAO,WAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,QAC/B,MAAM,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,kBACG,EAAE,GACkC;CACvC,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,sBAAsB,eAAe;GACrC,GAAG,aAAa;GACjB;EACF;CAiBD,MAAM,QAAQ,eAfU,WACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAO,WAAW,gBAAgB,WAAW;IAEhD,CAGyC,CAAC;AAM7C,aAEI,sBACE,cACD,QACG;AACJ,mBAAiB,OAAO,cAAc;IAExC,EAAE,WAAW,MAAM,CACpB;AAED,aACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,MAAM;EAGjD,MAAM,kBAAkB,MAAM,aAAa,MAAM;AAIjD,MAAI,CAAC,gBACH,QAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;AAE3C,OAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;AACjD,OAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,OAC1D;AAKF,oBAAiB,KAAK,gBAAgB,KAAK;;AAG7C,SAAO;KAER,qBAAqB;AACpB,MAAI,iBAAiB,SAAS,EAC5B,kBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAMJ,MAAM,WAAW,YALF,MAAM,WAAW,SAAY,MAAM,SAAS,MAAM,OAE/D,MAAM,WAAW,SACZ,MAAM,cAAc,MAAe,KACpC,MAAM,UACqD,EAC/D,SAAS,SACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,aAAa,YAAY,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-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 Vue.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
],
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@tanstack/vue-store": "^0.11.0",
|
|
52
|
-
"@tanstack/table-core": "9.0.0-alpha.
|
|
52
|
+
"@tanstack/table-core": "9.0.0-alpha.43"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@vitejs/plugin-vue": "^6.0.6",
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { computed, shallowRef, watch } from 'vue'
|
|
2
|
+
import type {
|
|
3
|
+
TableAtomOptions,
|
|
4
|
+
TableReactivityBindings,
|
|
5
|
+
} from '@tanstack/table-core/reactivity'
|
|
6
|
+
import type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'
|
|
7
|
+
import type { ComputedRef, ShallowRef } from 'vue'
|
|
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 refToReadonlyAtom<T>(
|
|
18
|
+
source: ComputedRef<T> | ShallowRef<T>,
|
|
19
|
+
): ReadonlyAtom<T> {
|
|
20
|
+
return Object.assign(source, {
|
|
21
|
+
get: () => source.value,
|
|
22
|
+
subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
|
|
23
|
+
const stop = watch(source, observerToCallback(observerOrNext), {
|
|
24
|
+
flush: 'sync',
|
|
25
|
+
})
|
|
26
|
+
return { unsubscribe: stop }
|
|
27
|
+
}) as ReadonlyAtom<T>['subscribe'],
|
|
28
|
+
})
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {
|
|
32
|
+
return Object.assign(source, {
|
|
33
|
+
set: (updater: T | ((prevVal: T) => T)) => {
|
|
34
|
+
source.value =
|
|
35
|
+
typeof updater === 'function'
|
|
36
|
+
? (updater as (prevVal: T) => T)(source.value)
|
|
37
|
+
: updater
|
|
38
|
+
},
|
|
39
|
+
get: () => source.value,
|
|
40
|
+
subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
|
|
41
|
+
const stop = watch(source, observerToCallback(observerOrNext), {
|
|
42
|
+
flush: 'sync',
|
|
43
|
+
})
|
|
44
|
+
return { unsubscribe: stop }
|
|
45
|
+
}) as Atom<T>['subscribe'],
|
|
46
|
+
})
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export function vueReactivity(): TableReactivityBindings {
|
|
50
|
+
return {
|
|
51
|
+
createOptionsStore: true,
|
|
52
|
+
createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
|
|
53
|
+
return refToReadonlyAtom(computed(fn))
|
|
54
|
+
},
|
|
55
|
+
createWritableAtom: <T>(
|
|
56
|
+
value: T,
|
|
57
|
+
_options?: TableAtomOptions<T>,
|
|
58
|
+
): Atom<T> => {
|
|
59
|
+
return refToWritableAtom(shallowRef(value) as ShallowRef<T>)
|
|
60
|
+
},
|
|
61
|
+
untrack: (fn) => fn(),
|
|
62
|
+
batch: (fn) => fn(),
|
|
63
|
+
}
|
|
64
|
+
}
|
package/src/useTable.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
constructReactivityFeature,
|
|
4
|
-
constructTable,
|
|
5
|
-
} from '@tanstack/table-core'
|
|
1
|
+
import { unref, watch } from 'vue'
|
|
2
|
+
import { constructTable } from '@tanstack/table-core'
|
|
6
3
|
import { shallow, useSelector } from '@tanstack/vue-store'
|
|
7
4
|
import { mergeProxy } from './merge-proxy'
|
|
5
|
+
import { vueReactivity } from './reactivity'
|
|
8
6
|
import type { Atom, ReadonlyAtom } from '@tanstack/vue-store'
|
|
9
7
|
import type {
|
|
10
8
|
NoInfer,
|
|
@@ -106,8 +104,6 @@ export function useTable<
|
|
|
106
104
|
selector: (state: TableState<TFeatures>) => TSelected = () =>
|
|
107
105
|
({}) as TSelected,
|
|
108
106
|
): VueTable<TFeatures, TData, TSelected> {
|
|
109
|
-
const notifier = ref<number>(0)
|
|
110
|
-
|
|
111
107
|
const syncTableOptions = (
|
|
112
108
|
table: Table<TFeatures, TData>,
|
|
113
109
|
options: TableOptionsWithReactiveData<TFeatures, TData>,
|
|
@@ -118,16 +114,11 @@ export function useTable<
|
|
|
118
114
|
)
|
|
119
115
|
}
|
|
120
116
|
|
|
121
|
-
const vueReactivityFeature = constructReactivityFeature({
|
|
122
|
-
stateNotifier: () => notifier.value,
|
|
123
|
-
optionsNotifier: () => notifier.value,
|
|
124
|
-
})
|
|
125
|
-
|
|
126
117
|
const mergedOptions = {
|
|
127
118
|
...tableOptions,
|
|
128
119
|
_features: {
|
|
120
|
+
coreReativityFeature: vueReactivity(),
|
|
129
121
|
...tableOptions._features,
|
|
130
|
-
vueReactivityFeature,
|
|
131
122
|
},
|
|
132
123
|
}
|
|
133
124
|
|
|
@@ -152,15 +143,6 @@ export function useTable<
|
|
|
152
143
|
TSelected
|
|
153
144
|
>
|
|
154
145
|
|
|
155
|
-
const allState = useSelector(table.store, (state) => state)
|
|
156
|
-
const allOptions = useSelector(table.optionsStore, (state) => state)
|
|
157
|
-
|
|
158
|
-
watchEffect(() => {
|
|
159
|
-
allState.value
|
|
160
|
-
allOptions.value
|
|
161
|
-
notifier.value++
|
|
162
|
-
})
|
|
163
|
-
|
|
164
146
|
watch(
|
|
165
147
|
() =>
|
|
166
148
|
getReactiveOptionDeps(
|