feat(react): refactor useQuantaStore with cached snapshots & update dependency

JeelGajera · JeelGajera · commit 9b5b3018fbc1 · 2025-11-08T16:50:21.000+05:30
diff --git a/.changeset/dark-zoos-bet.md b/.changeset/dark-zoos-bet.md
@@ -0,0 +1,32 @@
+---
+'@quantajs/react': major
+'@quantajs/core': major
+---
+
+feat(react): refactor useQuantaStore with cached snapshots
+
+\- Add store-level Set<subscribers> + notifyAll in createStore
+
+\- Wire flattenStore.set trap → trigger + notifyAll
+
+\- Generic Dependency<S> with snapshot-aware notify()
+
+\- Update StoreSubscriber to (snapshot?: S) => void
+
+\- Rewrite @quantajs/react useQuantaStore:
+
+&nbsp; • useRef cache + fresh flat snapshot on every core mutation
+
+&nbsp; • stable actions/getters (no re-bind loops)
+
+&nbsp; • selector support for fine-grained re-renders
+
+&nbsp; • SSR-safe server snapshot
+
+&nbsp; • full error isolation (warn, never crash on bad subscriber)
+
+\- Fix React re-render staleness: UI now updates instantly
+
+\- Eliminate infinite-loop warning (cached snapshot is stable until dirty)Please enter a summary for your changes.
+
+An empty message aborts the editor.
diff --git a/package.json b/package.json
@@ -13,24 +13,24 @@
     "version:update": "pnpm changeset version && pnpm install"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.5",
-    "@eslint/eslintrc": "^3.3.0",
-    "@eslint/js": "^9.35.0",
-    "@types/node": "^24.4.0",
-    "@typescript-eslint/eslint-plugin": "^8.35.0",
-    "@typescript-eslint/parser": "^8.35.0",
-    "eslint": "^9.35.0",
+    "@changesets/cli": "^2.29.7",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-unused-imports": "^4.1.3",
+    "eslint-plugin-unused-imports": "^4.3.0",
     "prettier": "^3.6.2",
-    "rimraf": "^6.0.1",
-    "terser": "^5.43.1",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.6",
+    "rimraf": "^6.1.0",
+    "terser": "^5.44.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
     "vite-plugin-banner": "^0.8.1",
-    "vite-plugin-dts": "^4.0.3",
+    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-eslint": "^1.8.1"
   },
   "workspaces": [
diff --git a/packages/core/src/core/create-store.ts b/packages/core/src/core/create-store.ts
@@ -89,16 +89,21 @@ const createStore = <
             }
         }
 
-        // Define Actions
+        // Store-level subscribers for broad "onAnyChange" (framework-safe)
+        const subscribers = new Set<StoreSubscriber>();
+
+        // Define core store object
         const store = {
             state,
             getters,
             actions: {} as A,
             subscribe: (callback: StoreSubscriber) => {
                 try {
+                    subscribers.add(callback);
                     dependency.depend(callback);
                     return () => {
                         try {
+                            subscribers.delete(callback);
                             dependency.remove(callback);
                         } catch (error) {
                             logger.error(
@@ -113,6 +118,24 @@ const createStore = <
                     throw error;
                 }
             },
+            notifyAll: () => {
+                try {
+                    const snapshot = store.state; // Fresh ref for subs
+                    subscribers.forEach((cb) => {
+                        try {
+                            cb(snapshot);
+                        } catch (e) {
+                            logger.warn(
+                                `Store: Subscriber callback failed for "${name}": ${e instanceof Error ? e.message : String(e)}`,
+                            );
+                        }
+                    });
+                } catch (error) {
+                    logger.error(
+                        `Store: notifyAll failed for "${name}": ${error instanceof Error ? error.message : String(error)}`,
+                    );
+                }
+            },
             $reset: () => {
                 try {
                     const initial = initialStateMap.get(store);
diff --git a/packages/core/src/core/dependency.ts b/packages/core/src/core/dependency.ts
@@ -1,14 +1,15 @@
+import { StoreSubscriber } from 'type/store-types';
 import { logger } from '../services/logger-service';
 
-export class Dependency {
+export class Dependency<S = any> {
     [x: string]: any;
-    private subscribers: Set<Function>;
+    private subscribers: Set<StoreSubscriber<S>>;
 
     constructor() {
         this.subscribers = new Set();
     }
 
-    depend(callback: Function | null) {
+    depend(callback: StoreSubscriber<S> | null) {
         try {
             if (callback) {
                 this.subscribers.add(callback);
@@ -17,38 +18,44 @@ export class Dependency {
             logger.error(
                 `Dependency: Failed to add dependency: ${error instanceof Error ? error.message : String(error)}`,
             );
-            throw error;
+            // throw error;
         }
     }
 
-    notify() {
+    notify(snapshot?: S): void {
         try {
-            this.subscribers.forEach((subscriber) => {
+            const activeSubs = new Set(this.subscribers);
+            activeSubs.forEach((subscriber) => {
                 try {
-                    subscriber();
+                    if (snapshot !== undefined) {
+                        subscriber(snapshot); // Pass fresh state if provided (framework opt-in)
+                    } else {
+                        subscriber(); // Legacy no-arg compat
+                    }
                 } catch (error) {
-                    logger.error(
-                        `Dependency: Failed to notify subscriber: ${error instanceof Error ? error.message : String(error)}`,
+                    logger.warn(
+                        // Warn only—isolated: Don't break other subs
+                        `Dependency: Subscriber callback failed: ${error instanceof Error ? error.message : String(error)}`,
                     );
-                    throw error;
+                    // Continue chain
                 }
             });
         } catch (error) {
             logger.error(
                 `Dependency: Failed to notify subscribers: ${error instanceof Error ? error.message : String(error)}`,
             );
-            throw error;
+            // throw error;
         }
     }
 
-    remove(callback: Function) {
+    remove(callback: StoreSubscriber<S>) {
         try {
             this.subscribers.delete(callback);
         } catch (error) {
             logger.error(
                 `Dependency: Failed to remove dependency: ${error instanceof Error ? error.message : String(error)}`,
             );
-            throw error;
+            // throw error;
         }
     }
 
@@ -59,11 +66,11 @@ export class Dependency {
             logger.error(
                 `Dependency: Failed to clear dependencies: ${error instanceof Error ? error.message : String(error)}`,
             );
-            throw error;
+            // throw error;
         }
     }
 
     get getSubscribers() {
-        return this.subscribers;
+        return new Set(this.subscribers);
     }
 }
diff --git a/packages/core/src/core/effect.ts b/packages/core/src/core/effect.ts
@@ -1,15 +1,16 @@
 import { Dependency } from './dependency';
 import { logger } from '../services/logger-service';
+import { StoreSubscriber } from '../type/store-types';
 
 const targetMap = new WeakMap<object, Record<string | symbol, Dependency>>();
-let activeEffect: Function | null = null;
+let activeEffect: StoreSubscriber | null = null;
 
 let isBatching = false;
-const effectQueue = new Set<Function>();
-const effectStack: Function[] = [];
+const effectQueue = new Set<StoreSubscriber>();
+const effectStack: StoreSubscriber[] = [];
 
 // Start and process batched effects
-export function batchEffects(fn: Function) {
+export function batchEffects(fn: StoreSubscriber) {
     try {
         isBatching = true;
         fn();
@@ -134,7 +135,7 @@ export function track(target: object, prop: string | symbol) {
 }
 
 // Reactive effect to handle reactivity with comprehensive error handling
-export function reactiveEffect(effect: Function) {
+export function reactiveEffect(effect: StoreSubscriber) {
     const wrappedEffect = () => {
         if (effectStack.includes(effect)) {
             const errorMessage = `Circular dependency detected: Effect "${
diff --git a/packages/core/src/type/store-types.ts b/packages/core/src/type/store-types.ts
@@ -10,13 +10,13 @@ export type ActionDefinition<S extends object, G extends object, A> = {
     [key in keyof A]: (this: StoreInstance<S, G, A>, ...args: any[]) => any;
 } & ThisType<S & { [K in keyof G]: G[K] } & A>;
 
-export type StoreSubscriber = () => void;
+export type StoreSubscriber<S = any> = (snapshot?: S) => void;
 
 export interface Store<S, G, A> {
     state: S;
     getters: G;
     actions: A;
-    subscribe: (callback: StoreSubscriber) => () => void;
+    subscribe: (callback: StoreSubscriber<S>) => () => void;
     $reset: () => void;
     $persist?: PersistenceManager;
 }
@@ -30,6 +30,9 @@ export type StoreInstance<
     G extends Record<string, any>,
     A,
 > = S & { [K in keyof G]: G[K] } & A & {
+        state: S;
+        getters: G;
+        actions: A;
         subscribe: (callback: StoreSubscriber) => () => void;
         $reset: () => void;
         $persist?: PersistenceManager;
diff --git a/packages/core/src/utils/flattenStore.ts b/packages/core/src/utils/flattenStore.ts
@@ -1,5 +1,6 @@
-import { StoreInstance } from '../type/store-types';
+import { StoreInstance, StoreSubscriber } from '../type/store-types';
 import { logger } from '../services/logger-service';
+import { trigger } from '../core/effect';
 
 export const flattenStore = <
     S extends object,
@@ -9,6 +10,8 @@ export const flattenStore = <
     state: S;
     getters: G;
     actions: A;
+    subscribe?: (cb: StoreSubscriber) => () => void;
+    notifyAll?: () => void;
 }): StoreInstance<S, G, A> => {
     try {
         const flattenedProxy = new Proxy(store, {
@@ -48,13 +51,17 @@ export const flattenStore = <
             },
             set(target, prop: string, value, receiver) {
                 try {
-                    // If the property exists in state, update it there
-                    if (prop in target.state) {
-                        return Reflect.set(target.state, prop, value);
+                    const wasInState = prop in target.state;
+                    const result = wasInState
+                        ? Reflect.set(target.state, prop, value) // Mutate reactive state
+                        : Reflect.set(target, prop, value, receiver); // Fallback
+                    if (result && wasInState) {
+                        // Trigger core reactivity (per-key)
+                        trigger(target.state, prop);
+                        // Broad notify via notifyAll (global subs for frameworks)
+                        target.notifyAll?.();
                     }
-
-                    // Otherwise, fallback to setting the property on the target
-                    return Reflect.set(target, prop, value, receiver);
+                    return result;
                 } catch (error) {
                     logger.error(
                         `FlattenStore: Failed to set property "${prop}": ${error instanceof Error ? error.message : String(error)}`,
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
@@ -4,7 +4,6 @@
         "target": "ES2020",
         "lib": ["ES2020", "DOM", "DOM.Iterable"],
         "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
         "noFallthroughCasesInSwitch": true,
         "composite": true,
         "declaration": true,
diff --git a/packages/react/src/hooks/useQuantaStore.ts b/packages/react/src/hooks/useQuantaStore.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
