@tanstack/angular-table 9.0.0-alpha.49 → 9.0.0-alpha.51

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, input, inject, Directive, reflectComponentType, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, runInInjectionContext, computed, effect, untracked, Injector, ViewContainerRef, DestroyRef, NgZone, signal, assertInInjectionContext } from '@angular/core';
 import { constructTable, createColumnHelper } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { batch, createAtom } from '@tanstack/angular-store';
 export { shallow } from '@tanstack/angular-store';
 
 /**
@@ -1113,59 +1113,140 @@ function lazyInit(initializer) {
     });
 }
 
-function signalToReadonlyAtom(signal, injector) {
-    return Object.assign(signal, {
-        get: () => signal(),
-        subscribe: (observer) => {
-            return toObservable(computed(signal), { injector: injector }).subscribe(observer);
+const optionsStoreDebugName = 'table/optionsStore';
+function observerToCallback(observerOrNext) {
+    return typeof observerOrNext === 'function'
+        ? observerOrNext
+        : (value) => observerOrNext.next?.(value);
+}
+function signalToReadonlyAtom(source, getSource, subscribeSource) {
+    return Object.assign(source, {
+        get: () => {
+            const value = getSource();
+            source();
+            return value;
         },
+        subscribe: subscribeSource,
     });
 }
-function signalToWritableAtom(signal, injector) {
-    return Object.assign(signal.asReadonly(), {
+function signalToWritableAtom(source, injector) {
+    const observers = new Set();
+    let observed = false;
+    effect(() => {
+        const value = source();
+        if (!observed) {
+            observed = true;
+            return;
+        }
+        observers.forEach((observer) => observer(value));
+    }, { injector });
+    return Object.assign(source.asReadonly(), {
         set: (updater) => {
             typeof updater === 'function'
-                ? signal.update(updater)
-                : signal.set(updater);
-        },
-        get: () => signal(),
-        subscribe: (observer) => {
-            return toObservable(computed(signal), { injector: injector }).subscribe(observer);
+                ? source.update(updater)
+                : source.set(updater);
         },
+        get: () => source(),
+        subscribe: ((observerOrNext) => {
+            const observer = observerToCallback(observerOrNext);
+            observers.add(observer);
+            return {
+                unsubscribe: () => observers.delete(observer),
+            };
+        }),
     });
 }
 /**
  * Creates the table-core reactivity bindings used by the Angular adapter.
  *
- * Readonly table atoms are backed by Angular `computed` signals and writable
- * atoms by Angular `signal`. Subscriptions bridge through `toObservable` with
- * the caller's injector so table APIs can be consumed from Angular `computed`
- * and `effect` calls.
+ * Table state atoms are backed by TanStack Store atoms. The options store stays
+ * framework-native because row-model APIs read `table.options` directly during
+ * render. Readonly table atoms bridge Store dependency tracking into Angular
+ * computed signals.
  */
 function angularReactivity(injector) {
     const ngZone = injector.get(NgZone);
+    const destroyRef = injector.get(DestroyRef);
     return {
         createOptionsStore: true,
         schedule: (fn) => ngZone.runOutsideAngular(() => queueMicrotask(fn)),
         createReadonlyAtom: (fn, options) => {
-            const signal = computed(() => fn(), {
+            const storeAtom = createAtom(() => fn(), {
+                compare: options?.compare,
+            });
+            const version = signal(0, { ...(ngDevMode ? { debugName: "version" } : /* istanbul ignore next */ {}), equal: () => false });
+            const subscription = storeAtom.subscribe(() => {
+                version.update((value) => value + 1);
+            });
+            destroyRef.onDestroy(() => subscription.unsubscribe());
+            const value = computed(() => {
+                version();
+                return storeAtom.get();
+            }, {
                 equal: options?.compare,
                 debugName: options?.debugName,
             });
-            return signalToReadonlyAtom(signal, injector);
+            return signalToReadonlyAtom(value, () => storeAtom.get(), (observerOrNext) => {
+                const observer = observerToCallback(observerOrNext);
+                return storeAtom.subscribe(() => {
+                    observer(storeAtom.get());
+                });
+            });
         },
         createWritableAtom: (value, options) => {
-            const writableSignal = signal(value, {
-                equal: options?.compare,
-                debugName: options?.debugName,
+            if (options?.debugName === optionsStoreDebugName) {
+                const writableSignal = signal(value, {
+                    equal: options.compare,
+                    debugName: options.debugName,
+                });
+                return signalToWritableAtom(writableSignal, injector);
+            }
+            return createAtom(value, {
+                compare: options?.compare,
             });
-            return signalToWritableAtom(writableSignal, injector);
         },
         untrack: untracked,
-        batch: (fn) => fn(),
+        batch,
     };
 }
 
+function createStateProxy(table) {
+    const getSnapshot = () => {
+        const snapshot = {};
+        const stateKeys = Object.keys(table.initialState);
+        for (const key of stateKeys) {
+            snapshot[key] = table.atoms[key].get();
+        }
+        return snapshot;
+    };
+    const target = {};
+    return new Proxy(target, {
+        get(target, prop, receiver) {
+            if (prop === 'toJSON') {
+                return getSnapshot;
+            }
+            if (typeof prop === 'string' && prop in table.initialState) {
+                return table.atoms[prop]?.get();
+            }
+            return Reflect.get(target, prop, receiver);
+        },
+        has(_, prop) {
+            return typeof prop === 'string' && prop in table.initialState;
+        },
+        ownKeys() {
+            return Reflect.ownKeys(table.initialState);
+        },
+        getOwnPropertyDescriptor(_, prop) {
+            if (typeof prop !== 'string' || !(prop in table.initialState)) {
+                return undefined;
+            }
+            return {
+                enumerable: true,
+                configurable: true,
+            };
+        },
+    });
+}
 /**
  * Creates and returns an Angular-reactive table instance.
  *
@@ -1234,6 +1315,14 @@ function injectTable(options) {
                 ...options()._features,
             },
         });
+        const stateProxy = createStateProxy(table);
+        Object.defineProperty(table, 'state', {
+            get() {
+                return stateProxy;
+            },
+            configurable: true,
+            enumerable: true,
+        });
         let isMount = true;
         effect(() => {
             const newOptions = options();