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

package/src/useExternalBlocStore.ts

@@ -1,215 +1,140 @@
-import { Blac, BlacObserver, BlocBase, BlocBaseAbstract, BlocConstructor, BlocHookDependencyArrayFn, BlocState, generateUUID } from '@blac/core';
+import {
+  Blac,
+  BlocBase,
+  BlocConstructor,
+  BlocState,
+  InferPropsFromGeneric,
+  generateUUID,
+} from '@blac/core';
 import { useCallback, useMemo, useRef } from 'react';
-import { BlocHookOptions } from './useBloc';
 
-export interface ExternalStore<
-  B extends BlocConstructor<BlocBase<any>>
-> {
-  /**
-   * Subscribes to changes in the store and returns an unsubscribe function.
-   * @param onStoreChange - Callback function that will be called whenever the store changes
-   * @returns A function that can be called to unsubscribe from store changes
-   */
-  subscribe: (onStoreChange: (state: BlocState<InstanceType<B>>) => void) => () => void;
-
-  /**
-   * Gets the current snapshot of the store state.
-   * @returns The current state of the store
-   */
-  getSnapshot: () => BlocState<InstanceType<B>> | undefined;
+interface ExternalStoreOptions<B extends BlocBase<any>> {
+  id?: string;
+  props?: InferPropsFromGeneric<B>;
+  selector?: (
+    currentState: BlocState<B>,
+    previousState: BlocState<B>,
+    instance: B,
+  ) => any[];
+}
 
-  /**
-   * Gets the server snapshot of the store state.
-   * This is optional and defaults to the same value as getSnapshot.
-   * @returns The server state of the store
-   */
-  getServerSnapshot?: () => BlocState<InstanceType<B>> | undefined;
+interface ExternalStore<T> {
+  getSnapshot: () => T | undefined;
+  subscribe: (listener: () => void) => () => void;
+  getServerSnapshot?: () => T | undefined;
 }
 
-export interface ExternalBlacStore<
-  B extends BlocConstructor<BlocBase<any>>
-> {
-  usedKeys: React.RefObject<Set<string>>;
-  usedClassPropKeys: React.RefObject<Set<string>>;
-  externalStore: ExternalStore<B>;
-  instance: React.RefObject<InstanceType<B>>;
+interface ExternalBlocStoreResult<B extends BlocBase<any>> {
+  externalStore: ExternalStore<BlocState<B>>;
+  instance: { current: B | null };
+  usedKeys: { current: Set<string> };
+  usedClassPropKeys: { current: Set<string> };
   rid: string;
 }
 
 /**
- * Creates an external store that wraps a Bloc instance, providing a React-compatible interface
- * for subscribing to and accessing bloc state.
+ * Hook for using an external bloc store
+ * Provides low-level access to bloc instances for use with React's useSyncExternalStore
  */
-const useExternalBlocStore = <
-  B extends BlocConstructor<BlocBase<any>>
+export default function useExternalBlocStore<
+  B extends BlocConstructor<BlocBase<any>>,
 >(
-  bloc: B,
-  options: BlocHookOptions<InstanceType<B>> | undefined,
-): ExternalBlacStore<B> => {
-  const { id: blocId, props, selector } = options ?? {};
-
-  const rid = useMemo(() => {
-    return generateUUID();
-  }, []);
-
-  const base = bloc as unknown as BlocBaseAbstract;
-
-  const isIsolated = base.isolated;
-  const effectiveBlocId = isIsolated ? rid : blocId;
-
-  const usedKeys = useRef<Set<string>>(new Set());
-  const usedClassPropKeys = useRef<Set<string>>(new Set());
+  blocConstructor: B,
+  options: ExternalStoreOptions<InstanceType<B>> = {},
+): ExternalBlocStoreResult<InstanceType<B>> {
+  const ridRef = useRef<string>(`external-${generateUUID()}`);
+  const usedKeysRef = useRef<Set<string>>(new Set());
+  const usedClassPropKeysRef = useRef<Set<string>>(new Set());
+  const instanceRef = useRef<InstanceType<B> | null>(null);
+
+  // Get or create bloc instance
+  const bloc = useMemo(() => {
+    const blac = Blac.getInstance();
+    const base = blocConstructor as unknown as BlocBase<any>;
+
+    // For isolated blocs, always create a new instance
+    if (
+      (base.constructor as any).isolated ||
+      (blocConstructor as any).isolated
+    ) {
+      const newBloc = new blocConstructor(options?.props) as InstanceType<B>;
+      const uniqueId =
+        options?.id || `${blocConstructor.name}_${generateUUID()}`;
+      newBloc._updateId(uniqueId);
+      blac.activateBloc(newBloc);
+      return newBloc;
+    }
 
-  const getBloc = useCallback(() => {
-    return Blac.getBloc(bloc, {
-      id: effectiveBlocId,
-      props,
-      instanceRef: rid
+    // For shared blocs, use the existing getBloc logic
+    return blac.getBloc(blocConstructor, {
+      id: options?.id,
+      props: options?.props,
     });
-  }, [bloc, effectiveBlocId, props, rid]);
-
-  const blocInstance = useRef<InstanceType<B>>(getBloc());
-
-  // Update the instance when dependencies change
-  useMemo(() => {
-    blocInstance.current = getBloc();
-  }, [getBloc]);
-
-  const dependencyArray: BlocHookDependencyArrayFn<BlocState<InstanceType<B>>> =
-    useMemo(
-      () =>
-        (newState): ReturnType<BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>> => {
-          const instance = blocInstance.current;
-
-          if (!instance) {
-            return [];
-          }
-
-          // Use custom dependency selector if provided
-          if (selector) {
-            return selector(newState);
-          }
-
-          // Fall back to bloc's default dependency selector if available
-          if (instance.defaultDependencySelector) {
-            return instance.defaultDependencySelector(newState);
-          }
-
-          // For primitive states, use default selector
-          if (typeof newState !== 'object') {
-            // Default behavior for primitive states: re-render if the state itself changes.
-            return [[newState]];
-          }
-
-          // For object states, track which properties were actually used
-          const usedStateValues: unknown[] = [];
-          for (const key of usedKeys.current) {
-            if (key in newState) {
-              usedStateValues.push(newState[key as keyof typeof newState]);
-            }
-          }
-
-          // Track used class properties for dependency tracking, this enables rerenders when class getters change
-          const usedClassValues: unknown[] = [];
-          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;
-                }
-              } catch (error) {
-                Blac.instance.log('useBloc Error', error);
-              }
-            }
-          }
-
-          // 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] : [[]];
-          }
-
-          return [usedStateValues, usedClassValues];
-        },
-      [],
-    );
-
-  const state: ExternalStore<B> = useMemo(() => {
-    return {
-      subscribe: (listener: (state: BlocState<InstanceType<B>>) => void) => {
-        const currentInstance = blocInstance.current;
+  }, [blocConstructor, options?.id]);
+
+  // Create external store interface
+  const externalStore = useMemo<ExternalStore<BlocState<InstanceType<B>>>>(
+    () => ({
+      getSnapshot: () => {
+        const currentInstance = instanceRef.current;
+        return currentInstance ? currentInstance.state : undefined;
+      },
+      subscribe: (listener: () => void) => {
+        const currentInstance = instanceRef.current;
         if (!currentInstance) {
-          return () => {}; // Return no-op if no instance
+          // Return no-op unsubscribe if no instance
+          return () => {};
         }
 
-        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 trigger listener if there are actual subscriptions
-              listener(currentInstance.state);
-            } catch (e) {
-              // Log any errors that occur during the listener callback
-              // This ensures errors in listeners don't break the entire application
-              console.error({
-                e,
-                blocInstance: currentInstance,
-                dependencyArray,
-              });
+        // Wrap listener to handle errors gracefully
+        const safeListener = (
+          newState: BlocState<InstanceType<B>>,
+          oldState: BlocState<InstanceType<B>>,
+        ) => {
+          try {
+            // Reset tracking keys on each listener call
+            usedKeysRef.current.clear();
+            usedClassPropKeysRef.current.clear();
+
+            // Call selector if provided
+            if (options.selector && currentInstance) {
+              options.selector(newState, oldState, currentInstance);
             }
-          },
-          // Pass the dependency array to control when the subscription is updated
-          dependencyArray,
-          // Use the provided id to identify this subscription
-          id: rid,
-        }
-
-        Blac.activateBloc(currentInstance);
-
-        // Subscribe to the bloc's observer with the provided listener function
-        // 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 () => {
-          unSub();
+            // Call listener with state if it expects it
+            if (listener.length > 0) {
+              (listener as any)(newState);
+            } else {
+              listener();
+            }
+          } catch (error) {
+            console.error('Listener error in useExternalBlocStore:', error);
+            // Don't rethrow to prevent breaking other listeners
+          }
         };
+
+        const unsubscribe = currentInstance._observer.subscribe({
+          id: ridRef.current,
+          fn: safeListener,
+        });
+        return unsubscribe;
       },
-      // Return an immutable snapshot of the current bloc state
-      getSnapshot: (): BlocState<InstanceType<B>> | undefined => {
-        const instance = blocInstance.current;
-        if (!instance) {
-          return {} as BlocState<InstanceType<B>>;
-        }
-        return instance.state;
-      },
-      // Server snapshot mirrors the client snapshot in this implementation
-      getServerSnapshot: (): BlocState<InstanceType<B>> | undefined => {
-        const instance = blocInstance.current;
-        if (!instance) {
-          return {} as BlocState<InstanceType<B>>;
-        }
-        return instance.state;
+      getServerSnapshot: () => {
+        const currentInstance = instanceRef.current;
+        return currentInstance ? currentInstance.state : undefined;
       },
-    }
-  }, [blocInstance.current?.uid]); // Re-create store when instance changes
+    }),
+    [],
+  );
+
+  // Update instance ref
+  instanceRef.current = bloc;
 
   return {
-    usedKeys,
-    usedClassPropKeys,
-    externalStore: state,
-    instance: blocInstance,
-    rid,
+    externalStore,
+    instance: instanceRef,
+    usedKeys: usedKeysRef,
+    usedClassPropKeys: usedClassPropKeysRef,
+    rid: ridRef.current,
   };
-};
-
-export default useExternalBlocStore;
+}

package/src/useBloc.tsx

@@ -1,193 +0,0 @@
-import {
-  BlocBase,
-  BlocConstructor,
-  BlocHookDependencyArrayFn,
-  BlocState,
-  InferPropsFromGeneric,
-} from '@blac/core';
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useSyncExternalStore
-} from 'react';
-import useExternalBlocStore from './useExternalBlocStore';
-
-/**
- * Type definition for the return type of the useBloc hook
- * @template B - Bloc constructor type
- */
-type HookTypes<B extends BlocConstructor<BlocBase<any>>> = [
-  BlocState<InstanceType<B>>,
-  InstanceType<B>,
-];
-
-/**
- * Configuration options for the useBloc hook
- */
-export interface BlocHookOptions<B extends BlocBase<any>> {
-  id?: string;
-  selector?: BlocHookDependencyArrayFn<BlocState<B>>;
-  props?: InferPropsFromGeneric<B>;
-  onMount?: (bloc: B) => void;
-  onUnmount?: (bloc: B) => void;
-}
-
-/**
- * Default dependency selector that wraps the entire state in an array
- * @template T - State type
- * @returns {Array<Array<T>>} Dependency array containing the entire state
- */
-
-/**
- * React hook for integrating with Blac state management
- *
- * This hook connects a React component to a Bloc state container, providing
- * automatic re-rendering when relevant state changes, dependency tracking,
- * and proper lifecycle management.
- *
- * @template B - Bloc constructor type
- * @template O - BlocHookOptions type
- * @param {B} bloc - Bloc constructor class
- * @param {O} [options] - Configuration options for the hook
- * @returns {HookTypes<B>} Tuple containing [state, bloc instance]
- *
- * @example
- * const [state, counterBloc] = useBloc(CounterBloc);
- * // Access state
- * console.log(state.count);
- * // Call bloc methods
- * counterBloc.increment();
- */
-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,
-  } = 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.`);
-      }
-      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,
-  );
-
-  // Cache proxies to avoid recreation on every render
-  const stateProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
-  const classProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
-
-  const returnState = useMemo(() => {
-    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);
-          const value = target[prop as keyof typeof target];
-          return value;
-        },
-        // Handle symbols and non-enumerable properties
-        has(target, prop) {
-          return prop in target;
-        },
-        ownKeys(target) {
-          return Reflect.ownKeys(target);
-        },
-        getOwnPropertyDescriptor(target, prop) {
-          return Reflect.getOwnPropertyDescriptor(target, prop);
-        }
-      });
-      stateProxyCache.current.set(state as object, proxy as object);
-    }
-    return proxy;
-  }, [state]);
-
-  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.`);
-    }
-
-    // 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.`);
-          }
-          const value = target[prop as keyof InstanceType<B>];
-          if (typeof value !== 'function') {
-            usedClassPropKeys.current.add(prop as string);
-          }
-          return value;
-        },
-      });
-      classProxyCache.current.set(instance.current, proxy);
-    }
-    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);
-    };
-  }, [instance.current?.uid, rid]); // Use UID to ensure we re-run when instance changes
-
-  // 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.`);
-  }
-  if (!returnClass) {
-    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>];
-}