@tanstack/angular-table 9.0.0-alpha.12 → 9.0.0-alpha.16

package/dist/fesm2022/tanstack-angular-table.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, inject, Directive, reflectComponentType, TemplateRef, Type, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, runInInjectionContext, computed, effect, untracked, Injector, ViewContainerRef, DestroyRef, isSignal, signal, assertInInjectionContext } from '@angular/core';
-import { getMemoFnMeta, $internalMemoFnMeta, constructTable, createColumnHelper } from '@tanstack/table-core';
+import { InjectionToken, input, inject, Directive, reflectComponentType, TemplateRef, Type, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, runInInjectionContext, computed, effect, untracked, Injector, ViewContainerRef, DestroyRef, assertInInjectionContext, signal } from '@angular/core';
+import { constructReactivityFeature, constructTable, createColumnHelper } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
 import { injectStore } from '@tanstack/angular-store';
 
@@ -1024,258 +1024,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRender", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRenderProps", required: false }] }], injector: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRenderInjector", required: false }] }] } });
 
-const $TABLE_REACTIVE = Symbol('reactive');
-function markReactive(obj) {
-    Object.defineProperty(obj, $TABLE_REACTIVE, { value: true });
-}
-function isReactive(obj) {
-    return Reflect.get(obj, $TABLE_REACTIVE) === true;
-}
-/**
- * Defines a lazy computed property on an object. The property is initialized
- * with a getter that computes its value only when accessed for the first time.
- * After the first access, the computed value is cached, and the getter is
- * replaced with a direct property assignment for efficiency.
- *
- * @internal should be used only internally
- */
-function defineLazyComputedProperty(notifier, setObjectOptions) {
-    const { originalObject, property, overridePrototype, valueFn } = setObjectOptions;
-    if (overridePrototype) {
-        assignReactivePrototypeAPI(notifier, originalObject, property);
-    }
-    else {
-        Object.defineProperty(originalObject, property, {
-            enumerable: true,
-            configurable: true,
-            get() {
-                const computedValue = toComputed(notifier, valueFn, property);
-                markReactive(computedValue);
-                // Once the property is set the first time, we don't need a getter anymore
-                // since we have a computed / cached fn value
-                Object.defineProperty(originalObject, property, {
-                    value: computedValue,
-                    configurable: true,
-                    enumerable: true,
-                });
-                return computedValue;
-            },
-        });
-    }
-}
-/**
- * @description Transform a function into a computed that react to given notifier re-computations
- *
- * Here we'll handle all type of accessors:
- * - 0 argument -> e.g. table.getCanNextPage())
- * - 0~1 arguments -> e.g. table.getIsSomeRowsPinned(position?)
- * - 1 required argument -> e.g. table.getColumn(columnId)
- * - 1+ argument -> e.g. table.getRow(id, searchAll?)
- *
- * Since we are not able to detect automatically the accessors parameters,
- * we'll wrap all accessors into a cached function wrapping a computed
- * that return it's value based on the given parameters
- *
- * @internal should be used only internally
- */
-function toComputed(notifier, fn, debugName) {
-    const hasArgs = getFnArgsLength(fn) > 0;
-    if (!hasArgs) {
-        const computedFn = computed(() => {
-            void notifier();
-            return fn();
-        }, { ...(ngDevMode ? { debugName: "computedFn" } : {}), debugName });
-        Object.defineProperty(computedFn, 'name', { value: debugName });
-        markReactive(computedFn);
-        return computedFn;
-    }
-    const computedFn = function (...argsArray) {
-        const cacheable = argsArray.length === 0 ||
-            argsArray.every((arg) => {
-                return (arg === null ||
-                    arg === undefined ||
-                    typeof arg === 'string' ||
-                    typeof arg === 'number' ||
-                    typeof arg === 'boolean' ||
-                    typeof arg === 'symbol');
-            });
-        if (!cacheable) {
-            return fn.apply(this, argsArray);
-        }
-        const serializedArgs = serializeArgs(...argsArray);
-        if ((computedFn._reactiveCache ??= {})[serializedArgs]) {
-            return computedFn._reactiveCache[serializedArgs]();
-        }
-        const computedSignal = computed(() => {
-            void notifier();
-            return fn.apply(this, argsArray);
-        }, { ...(ngDevMode ? { debugName: "computedSignal" } : {}), debugName });
-        computedFn._reactiveCache[serializedArgs] = computedSignal;
-        return computedSignal();
-    };
-    Object.defineProperty(computedFn, 'name', { value: debugName });
-    markReactive(computedFn);
-    return computedFn;
-}
-function serializeArgs(...args) {
-    return JSON.stringify(args);
-}
-function getFnArgsLength(fn) {
-    return Math.max(0, getMemoFnMeta(fn)?.originalArgsLength ?? fn.length);
-}
-function assignReactivePrototypeAPI(notifier, prototype, fnName) {
-    if (isReactive(prototype[fnName]))
-        return;
-    const fn = prototype[fnName];
-    const originalArgsLength = getFnArgsLength(fn);
-    if (originalArgsLength <= 1) {
-        Object.defineProperty(prototype, fnName, {
-            enumerable: true,
-            configurable: true,
-            get() {
-                const self = this;
-                // Create a cache in the current prototype to allow the signals
-                // to be garbage collected. Shorthand for a WeakMap implementation
-                self._reactiveCache ??= {};
-                const cached = (self._reactiveCache[`${self.id}${fnName}`] ??= computed(() => {
-                    notifier();
-                    return fn.apply(self);
-                }, {}));
-                markReactive(cached);
-                cached[$internalMemoFnMeta] = {
-                    originalArgsLength,
-                };
-                return cached;
-            },
-        });
-    }
-    else {
-        prototype[fnName] = function (...args) {
-            notifier();
-            return fn.apply(this, args);
-        };
-        markReactive(prototype[fnName]);
-        prototype[fnName][$internalMemoFnMeta] = {
-            originalArgsLength,
-        };
-    }
-}
-function setReactivePropertiesOnObject(notifier, obj, options) {
-    const { skipProperty } = options;
-    if (isReactive(obj)) {
-        return;
-    }
-    markReactive(obj);
-    for (const property in obj) {
-        const value = obj[property];
-        if (isSignal(value) ||
-            typeof value !== 'function' ||
-            skipProperty(property)) {
-            continue;
-        }
-        defineLazyComputedProperty(notifier, {
-            valueFn: value,
-            property,
-            originalObject: obj,
-            overridePrototype: options.overridePrototype,
-        });
-    }
-}
-
-/**
- * Resolves the user-provided `reactivity.*` config to a skip predicate.
- *
- * - `false` is handled by callers (feature method returns early)
- * - `true` selects the default predicate
- * - a function overrides the default predicate
- */
-const getUserSkipPropertyFn = (value, defaultPropertyFn) => {
-    if (typeof value === 'boolean') {
-        return defaultPropertyFn;
-    }
-    return value ?? defaultPropertyFn;
-};
-function constructAngularReactivityFeature() {
-    return {
-        getDefaultTableOptions(table) {
-            return {
-                reactivity: {
-                    header: true,
-                    column: true,
-                    row: true,
-                    cell: true,
-                },
-            };
-        },
-        constructTableAPIs: (table) => {
-            const rootNotifier = signal(null, ...(ngDevMode ? [{ debugName: "rootNotifier" }] : []));
-            table.setTableNotifier = (notifier) => rootNotifier.set(notifier);
-            table.get = computed(() => rootNotifier()(), { ...(ngDevMode ? { debugName: "get" } : {}), equal: () => false });
-            setReactivePropertiesOnObject(table.get, table, {
-                overridePrototype: false,
-                skipProperty: skipBaseProperties,
-            });
-        },
-        assignCellPrototype: (prototype, table) => {
-            if (table.options.reactivity?.cell === false) {
-                return;
-            }
-            setReactivePropertiesOnObject(table.get, prototype, {
-                skipProperty: getUserSkipPropertyFn(table.options.reactivity?.cell, skipBaseProperties),
-                overridePrototype: true,
-            });
-        },
-        assignColumnPrototype: (prototype, table) => {
-            if (table.options.reactivity?.column === false) {
-                return;
-            }
-            setReactivePropertiesOnObject(table.get, prototype, {
-                skipProperty: getUserSkipPropertyFn(table.options.reactivity?.cell, skipBaseProperties),
-                overridePrototype: true,
-            });
-        },
-        assignHeaderPrototype: (prototype, table) => {
-            if (table.options.reactivity?.header === false) {
-                return;
-            }
-            setReactivePropertiesOnObject(table.get, prototype, {
-                skipProperty: getUserSkipPropertyFn(table.options.reactivity?.cell, skipBaseProperties),
-                overridePrototype: true,
-            });
-        },
-        assignRowPrototype: (prototype, table) => {
-            if (table.options.reactivity?.row === false) {
-                return;
-            }
-            setReactivePropertiesOnObject(table.get, prototype, {
-                skipProperty: getUserSkipPropertyFn(table.options.reactivity?.cell, skipBaseProperties),
-                overridePrototype: true,
-            });
-        },
-    };
-}
-/**
- * Angular reactivity feature that add reactive signal supports in table core instance.
- * This is used internally by the Angular table adapter `injectTable`.
- *
- * @private
- */
-const angularReactivityFeature = constructAngularReactivityFeature();
-/**
- * Default predicate used to skip base/non-reactive properties.
- */
-function skipBaseProperties(property) {
-    return (
-    // equals `getContext`
-    property === 'getContext' ||
-        // start with `_`
-        property[0] === '_' ||
-        // doesn't start with `get`, but faster
-        !(property[0] === 'g' && property[1] === 'e' && property[2] === 't') ||
-        // ends with `Handler`
-        property.endsWith('Handler'));
-}
-
 /**
  * Implementation from @tanstack/angular-query
  * {https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/util/lazy-init/lazy-init.ts}
@@ -1377,6 +1125,10 @@ function lazyInit(initializer) {
 function injectTable(options, selector = (state) => state) {
     assertInInjectionContext(injectTable);
     const injector = inject(Injector);
+    const stateNotifier = signal(0, ...(ngDevMode ? [{ debugName: "stateNotifier" }] : []));
+    const angularReactivityFeature = constructReactivityFeature({
+        stateNotifier: () => stateNotifier(),
+    });
     return lazyInit(() => {
         const resolvedOptions = {
             ...options(),
@@ -1386,30 +1138,34 @@ function injectTable(options, selector = (state) => state) {
             },
         };
         const table = constructTable(resolvedOptions);
+        const tableState = injectStore(table.store, (state) => state, { injector });
+        const tableOptions = injectStore(table.optionsStore, (state) => state, {
+            injector,
+        });
         const updatedOptions = computed(() => {
             const tableOptionsValue = options();
             const result = {
-                ...table.options,
+                ...untracked(() => table.options),
                 ...tableOptionsValue,
-                _features: {
-                    ...tableOptionsValue._features,
-                    angularReactivityFeature,
-                },
+                _features: { ...tableOptionsValue._features, angularReactivityFeature },
             };
             if (tableOptionsValue.state) {
                 result.state = tableOptionsValue.state;
             }
             return result;
         }, ...(ngDevMode ? [{ debugName: "updatedOptions" }] : []));
-        const tableState = injectStore(table.store, (state) => state, { injector });
-        const tableSignalNotifier = computed(() => {
-            tableState();
-            table.setOptions(updatedOptions());
-            untracked(() => table.baseStore.setState((prev) => ({ ...prev })));
-            return table;
-        }, { ...(ngDevMode ? { debugName: "tableSignalNotifier" } : {}), equal: () => false });
-        table.setTableNotifier(tableSignalNotifier);
-        table.Subscribe = function Subscribe(props) {
+        effect(() => {
+            const newOptions = updatedOptions();
+            untracked(() => table.setOptions(newOptions));
+        }, { injector, debugName: 'tableOptionsUpdate' });
+        let isMount = true;
+        effect(() => {
+            void [tableOptions(), tableState()];
+            if (!isMount)
+                untracked(() => stateNotifier.update((n) => n + 1));
+            isMount && (isMount = false);
+        }, { injector, debugName: 'tableStateNotifier' });
+        table.subscribe = function Subscribe(props) {
             return injectStore(table.store, props.selector, {
                 injector,
                 equal: props.equal,
@@ -1418,6 +1174,13 @@ function injectTable(options, selector = (state) => state) {
         Object.defineProperty(table, 'state', {
             value: injectStore(table.store, selector, { injector }),
         });
+        Object.defineProperty(table, 'value', {
+            value: computed(() => {
+                tableOptions();
+                tableState();
+                return table;
+            }),
+        });
         return table;
     });
 }
@@ -1498,5 +1261,5 @@ const FlexRender = [FlexRenderDirective, FlexRenderCell];
  * Generated bundle index. Do not edit.
  */
 
-export { FlexRender, FlexRenderCell, FlexRenderComponentInstance, FlexRenderDirective, TanStackTable, TanStackTableCell, TanStackTableCellToken, TanStackTableHeader, TanStackTableHeaderToken, TanStackTableToken, angularReactivityFeature, createTableHook, flexRenderComponent, injectFlexRenderContext, injectTable, injectTableCellContext, injectTableContext, injectTableHeaderContext };
+export { FlexRender, FlexRenderCell, FlexRenderComponentInstance, FlexRenderDirective, TanStackTable, TanStackTableCell, TanStackTableCellToken, TanStackTableHeader, TanStackTableHeaderToken, TanStackTableToken, createTableHook, flexRenderComponent, injectFlexRenderContext, injectTable, injectTableCellContext, injectTableContext, injectTableHeaderContext };
 //# sourceMappingURL=tanstack-angular-table.mjs.map