@blac/react 2.0.0-rc-7 → 2.0.0-rc-8

package/src/useBloc.tsx

@@ -5,13 +5,9 @@ import {
   BlocState,
   InferPropsFromGeneric,
 } from '@blac/core';
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useSyncExternalStore
-} from 'react';
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import useExternalBlocStore from './useExternalBlocStore';
+import { DependencyTracker } from './DependencyTracker';
 
 /**
  * Type definition for the return type of the useBloc hook
@@ -63,59 +59,74 @@ export default function useBloc<B extends BlocConstructor<BlocBase<any>>>(
   bloc: B,
   options?: BlocHookOptions<InstanceType<B>>,
 ): HookTypes<B> {
-  // Determine ID for isolated or shared blocs
-  // const base = bloc as unknown as BlocBaseAbstract;
-  // const isIsolated = base.isolated;
-  // const effectiveBlocId = isIsolated ? rid : blocId;
   const {
     externalStore,
     usedKeys,
     usedClassPropKeys,
     instance,
     rid,
+    hasProxyTracking,
   } = useExternalBlocStore(bloc, options);
 
-  // Subscribe to state changes using React's external store API
   const state = useSyncExternalStore<BlocState<InstanceType<B>>>(
     externalStore.subscribe,
     () => {
       const snapshot = externalStore.getSnapshot();
       if (snapshot === undefined) {
-        throw new Error(`[useBloc] State snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`);
+        throw new Error(
+          `[useBloc] State snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`,
+        );
       }
       return snapshot;
     },
-    externalStore.getServerSnapshot ? () => {
-      const serverSnapshot = externalStore.getServerSnapshot!();
-      if (serverSnapshot === undefined) {
-        throw new Error(`[useBloc] Server state snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`);
-      }
-      return serverSnapshot;
-    } : undefined,
+    externalStore.getServerSnapshot
+      ? () => {
+          const serverSnapshot = externalStore.getServerSnapshot!();
+          if (serverSnapshot === undefined) {
+            throw new Error(
+              `[useBloc] Server state snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`,
+            );
+          }
+          return serverSnapshot;
+        }
+      : undefined,
   );
 
-  // Cache proxies to avoid recreation on every render
+  const dependencyTracker = useRef<DependencyTracker | null>(null);
+  if (!dependencyTracker.current) {
+    dependencyTracker.current = new DependencyTracker({
+      enableBatching: true,
+      enableMetrics: process.env.NODE_ENV === 'development',
+      enableDeepTracking: false,
+    });
+  }
+
   const stateProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
   const classProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
 
   const returnState = useMemo(() => {
+    // If a custom selector is provided, don't use proxy tracking
+    if (options?.selector) {
+      return state;
+    }
+
+    hasProxyTracking.current = true;
+
     if (typeof state !== 'object' || state === null) {
       return state;
     }
 
-    // Check cache first
     let proxy = stateProxyCache.current.get(state);
     if (!proxy) {
       proxy = new Proxy(state, {
         get(target, prop) {
-          // Use setTimeout to defer dependency tracking until after render
-          setTimeout(() => {
-            usedKeys.current.add(prop as string);
-          }, 0);
+          if (typeof prop === 'string') {
+            usedKeys.current.add(prop);
+            dependencyTracker.current?.trackStateAccess(prop);
+          }
           const value = target[prop as keyof typeof target];
           return value;
         },
-        // Handle symbols and non-enumerable properties
         has(target, prop) {
           return prop in target;
         },
@@ -124,7 +135,7 @@ export default function useBloc<B extends BlocConstructor<BlocBase<any>>>(
         },
         getOwnPropertyDescriptor(target, prop) {
           return Reflect.getOwnPropertyDescriptor(target, prop);
-        }
+        },
       });
       stateProxyCache.current.set(state as object, proxy as object);
     }
@@ -133,20 +144,24 @@ export default function useBloc<B extends BlocConstructor<BlocBase<any>>>(
 
   const returnClass = useMemo(() => {
     if (!instance.current) {
-      throw new Error(`[useBloc] Bloc instance is null for ${bloc.name}. This should never happen - bloc instance must be defined.`);
+      throw new Error(
+        `[useBloc] Bloc instance is null for ${bloc.name}. This should never happen - bloc instance must be defined.`,
+      );
     }
 
-    // Check cache first
     let proxy = classProxyCache.current.get(instance.current);
     if (!proxy) {
       proxy = new Proxy(instance.current, {
         get(target, prop) {
           if (!target) {
-            throw new Error(`[useBloc] Bloc target is null for ${bloc.name}. This should never happen - bloc target must be defined.`);
+            throw new Error(
+              `[useBloc] Bloc target is null for ${bloc.name}. This should never happen - bloc target must be defined.`,
+            );
           }
           const value = target[prop as keyof InstanceType<B>];
-          if (typeof value !== 'function') {
-            usedClassPropKeys.current.add(prop as string);
+          if (typeof value !== 'function' && typeof prop === 'string') {
+            usedClassPropKeys.current.add(prop);
+            dependencyTracker.current?.trackClassAccess(prop);
           }
           return value;
         },
@@ -156,38 +171,48 @@ export default function useBloc<B extends BlocConstructor<BlocBase<any>>>(
     return proxy;
   }, [instance.current?.uid]);
 
-  // Create a stable reference object for this component
   const componentRef = useRef({});
 
-  // Set up bloc lifecycle management
   useEffect(() => {
     const currentInstance = instance.current;
     if (!currentInstance) return;
-    
-    // Pass component reference for proper memory management
+
     currentInstance._addConsumer(rid, componentRef.current);
 
-    // Call onMount callback if provided
     options?.onMount?.(currentInstance);
 
-    // Cleanup: remove this component as a consumer using the captured instance
     return () => {
       if (!currentInstance) {
         return;
       }
       options?.onUnmount?.(currentInstance);
       currentInstance._removeConsumer(rid);
+
+      dependencyTracker.current?.reset();
     };
-  }, [instance.current?.uid, rid]); // Use UID to ensure we re-run when instance changes
+  }, [instance.current?.uid, rid]);
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development' && dependencyTracker.current) {
+      const metrics = dependencyTracker.current.getMetrics();
+      if (metrics.stateAccessCount > 0 || metrics.classAccessCount > 0) {
+        console.debug(`[useBloc] ${bloc.name} Performance Metrics:`, metrics);
+      }
+    }
+  });
 
-  // Ensure state and instance are never undefined/null
   if (returnState === undefined) {
-    throw new Error(`[useBloc] State is undefined for ${bloc.name}. This should never happen - state must be defined.`);
+    throw new Error(
+      `[useBloc] State is undefined for ${bloc.name}. This should never happen - state must be defined.`,
+    );
   }
   if (!returnClass) {
-    throw new Error(`[useBloc] Instance is null for ${bloc.name}. This should never happen - instance must be defined.`);
+    throw new Error(
+      `[useBloc] Instance is null for ${bloc.name}. This should never happen - instance must be defined.`,
+    );
   }
 
-  // Safe return with proper typing
-  return [returnState, returnClass] as [BlocState<InstanceType<B>>, InstanceType<B>];
+  return [returnState, returnClass] as [
+    BlocState<InstanceType<B>>,
+    InstanceType<B>,
+  ];
 }

package/src/useExternalBlocStore.ts

@@ -34,6 +34,7 @@ export interface ExternalBlacStore<
   externalStore: ExternalStore<B>;
   instance: React.RefObject<InstanceType<B>>;
   rid: string;
+  hasProxyTracking: React.RefObject<boolean>;
 }
 
 /**
@@ -59,6 +60,10 @@ const useExternalBlocStore = <
 
   const usedKeys = useRef<Set<string>>(new Set());
   const usedClassPropKeys = useRef<Set<string>>(new Set());
+  
+  // Track whether proxy-based dependency tracking has been initialized
+  // This helps distinguish between direct external store usage and useBloc proxy usage
+  const hasProxyTracking = useRef<boolean>(false);
 
   const getBloc = useCallback(() => {
     return Blac.getBloc(bloc, {
@@ -75,52 +80,67 @@ const useExternalBlocStore = <
     blocInstance.current = getBloc();
   }, [getBloc]);
 
-  const dependencyArray: BlocHookDependencyArrayFn<BlocState<InstanceType<B>>> =
-    useMemo(
-      () =>
-        (newState): ReturnType<BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>> => {
-          const instance = blocInstance.current;
+  // Track previous state and dependencies for selector
+  const previousStateRef = useRef<BlocState<InstanceType<B>> | undefined>(undefined);
+  const lastDependenciesRef = useRef<unknown[][] | undefined>(undefined);
+  const lastStableSnapshot = useRef<BlocState<InstanceType<B>> | undefined>(undefined);
+  
+  // Track bloc instance uid to prevent unnecessary store recreation
+  const blocUidRef = useRef<string | undefined>(undefined);
+  if (blocUidRef.current !== blocInstance.current?.uid) {
+    blocUidRef.current = blocInstance.current?.uid;
+  }
 
-          if (!instance) {
-            return [];
-          }
-
-          // Use custom dependency selector if provided
-          if (selector) {
-            return selector(newState);
-          }
+  const dependencyArray = useMemo(
+    () =>
+      (newState: BlocState<InstanceType<B>>, oldState?: BlocState<InstanceType<B>>): unknown[][] => {
+        const instance = blocInstance.current;
 
-          // Fall back to bloc's default dependency selector if available
-          if (instance.defaultDependencySelector) {
-            return instance.defaultDependencySelector(newState);
-          }
+        if (!instance) {
+          return [[], []]; // [stateArray, classArray]
+        }
 
-          // For primitive states, use default selector
-          if (typeof newState !== 'object') {
-            // Default behavior for primitive states: re-render if the state itself changes.
-            return [[newState]];
-          }
+        // Use the provided oldState or fall back to our tracked previous state
+        const previousState = oldState ?? previousStateRef.current;
+        
+        let currentDependencies: unknown[][];
 
+        // Use custom dependency selector if provided
+        if (selector) {
+          const flatDeps = selector(newState, previousState, instance);
+          // Wrap flat custom selector result in the two-array structure for consistency
+          currentDependencies = [flatDeps, []]; // [customSelectorDeps, classArray]
+        }
+        // Fall back to bloc's default dependency selector if available
+        else if (instance.defaultDependencySelector) {
+          const flatDeps = instance.defaultDependencySelector(newState, previousState, instance);
+          // Wrap flat default selector result in the two-array structure for consistency
+          currentDependencies = [flatDeps, []]; // [defaultSelectorDeps, classArray]
+        }
+        // For primitive states, use default selector
+        else if (typeof newState !== 'object') {
+          // Default behavior for primitive states: re-render if the state itself changes.
+          currentDependencies = [[newState], []]; // [primitiveStateArray, classArray]
+        }
+        else {
           // For object states, track which properties were actually used
-          const usedStateValues: unknown[] = [];
+          const stateDependencies: unknown[] = [];
+          const classDependencies: unknown[] = [];
+          
+          // Add state property values that were accessed
           for (const key of usedKeys.current) {
             if (key in newState) {
-              usedStateValues.push(newState[key as keyof typeof newState]);
+              stateDependencies.push(newState[key as keyof typeof newState]);
             }
           }
 
-          // Track used class properties for dependency tracking, this enables rerenders when class getters change
-          const usedClassValues: unknown[] = [];
+          // Add class property values that were accessed
           for (const key of usedClassPropKeys.current) {
             if (key in instance) {
               try {
                 const value = instance[key as keyof InstanceType<B>];
-                switch (typeof value) {
-                  case 'function':
-                    continue;
-                  default:
-                    usedClassValues.push(value);
-                    continue;
+                if (typeof value !== 'function') {
+                  classDependencies.push(value);
                 }
               } catch (error) {
                 Blac.instance.log('useBloc Error', error);
@@ -128,32 +148,57 @@ const useExternalBlocStore = <
             }
           }
 
-          // If no state properties have been accessed, return empty dependencies to prevent re-renders
-          // Class properties can change independently of state
-          if (usedKeys.current.size === 0) {
-            return usedClassPropKeys.current.size > 0 ? [usedClassValues] : [[]];
+          // If no properties have been accessed through proxy
+          if (usedKeys.current.size === 0 && usedClassPropKeys.current.size === 0) {
+            // If proxy tracking has never been initialized, this is direct external store usage
+            // In this case, always track the entire state to ensure notifications
+            if (!hasProxyTracking.current) {
+              stateDependencies.push(newState);
+            }
+            // If proxy tracking was initialized but no properties accessed, 
+            // return empty dependencies to prevent unnecessary re-renders
           }
 
-          return [usedStateValues, usedClassValues];
+          currentDependencies = [stateDependencies, classDependencies];
+        }
+
+        // Update tracked state
+        previousStateRef.current = newState;
+
+
+        // Return the dependencies for BlacObserver to compare
+        return currentDependencies;
         },
       [],
     );
 
+  // Store active subscriptions to reuse observers
+  const activeObservers = useRef<Map<Function, { observer: BlacObserver<BlocState<InstanceType<B>>>, unsubscribe: () => void }>>(new Map());
+
   const state: ExternalStore<B> = useMemo(() => {
     return {
       subscribe: (listener: (state: BlocState<InstanceType<B>>) => void) => {
+        
         const currentInstance = blocInstance.current;
         if (!currentInstance) {
           return () => {}; // Return no-op if no instance
         }
 
+        // Check if we already have an observer for this listener
+        const existing = activeObservers.current.get(listener);
+        if (existing) {
+          return existing.unsubscribe;
+        }
         const observer: BlacObserver<BlocState<InstanceType<B>>> = {
           fn: () => {
             try {
-              // Reset dependency tracking before listener is called 
-              // This ensures we only track properties accessed during the current render
-              usedKeys.current = new Set();
-              usedClassPropKeys.current = new Set();
+              
+              // Only reset dependency tracking if we're not using a custom selector
+              // Custom selectors override proxy-based tracking entirely
+              if (!selector && !currentInstance.defaultDependencySelector) {
+                usedKeys.current = new Set();
+                usedClassPropKeys.current = new Set();
+              }
 
               // Only trigger listener if there are actual subscriptions
               listener(currentInstance.state);
@@ -179,10 +224,16 @@ const useExternalBlocStore = <
         // This will trigger the callback whenever the bloc's state changes
         const unSub = currentInstance._observer.subscribe(observer);
 
-        // Return an unsubscribe function that can be called to clean up the subscription
-        return () => {
+        const unsubscribe = () => {
+          activeObservers.current.delete(listener);
           unSub();
         };
+
+        // Store the observer and unsubscribe function
+        activeObservers.current.set(listener, { observer, unsubscribe });
+
+        // Return an unsubscribe function that can be called to clean up the subscription
+        return unsubscribe;
       },
       // Return an immutable snapshot of the current bloc state
       getSnapshot: (): BlocState<InstanceType<B>> | undefined => {
@@ -190,7 +241,55 @@ const useExternalBlocStore = <
         if (!instance) {
           return {} as BlocState<InstanceType<B>>;
         }
-        return instance.state;
+
+        const currentState = instance.state;
+        const currentDependencies = dependencyArray(currentState, previousStateRef.current);
+        
+        // Check if dependencies have changed using the two-array comparison logic
+        const lastDeps = lastDependenciesRef.current;
+        let dependenciesChanged = false;
+        
+        if (!lastDeps) {
+          // First time - dependencies changed
+          dependenciesChanged = true;
+        } else if (lastDeps.length !== currentDependencies.length) {
+          // Array structure changed
+          dependenciesChanged = true;
+        } else {
+          // Compare each array (state and class dependencies)
+          for (let arrayIndex = 0; arrayIndex < currentDependencies.length; arrayIndex++) {
+            const lastArray = lastDeps[arrayIndex] || [];
+            const newArray = currentDependencies[arrayIndex] || [];
+            
+            if (lastArray.length !== newArray.length) {
+              dependenciesChanged = true;
+              break;
+            }
+            
+            // Compare each dependency value using Object.is
+            for (let i = 0; i < newArray.length; i++) {
+              if (!Object.is(lastArray[i], newArray[i])) {
+                dependenciesChanged = true;
+                break;
+              }
+            }
+            
+            if (dependenciesChanged) break;
+          }
+        }
+        
+        // Update dependency tracking
+        lastDependenciesRef.current = currentDependencies;
+        
+        // If dependencies haven't changed, return the same snapshot reference
+        // This prevents React from re-rendering when dependencies are stable
+        if (!dependenciesChanged && lastStableSnapshot.current) {
+          return lastStableSnapshot.current;
+        }
+        
+        // Dependencies changed - update and return new snapshot
+        lastStableSnapshot.current = currentState;
+        return currentState;
       },
       // Server snapshot mirrors the client snapshot in this implementation
       getServerSnapshot: (): BlocState<InstanceType<B>> | undefined => {
@@ -201,7 +300,7 @@ const useExternalBlocStore = <
         return instance.state;
       },
     }
-  }, [blocInstance.current?.uid]); // Re-create store when instance changes
+  }, []); // Store is stable - individual methods handle instance changes
 
   return {
     usedKeys,
@@ -209,6 +308,7 @@ const useExternalBlocStore = <
     externalStore: state,
     instance: blocInstance,
     rid,
+    hasProxyTracking,
   };
 };