@blac/react 2.0.0-rc-2 → 2.0.0-rc-4

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("@blac/core"),n=require("react"),E=(u,e,S)=>{const a=u;return{subscribe:B=>{const s=a._observer.subscribe({fn:()=>{try{B(a.state)}catch(l){console.error({e:l,resolvedBloc:u,dependencyArray:e})}},dependencyArray:e,id:S});return()=>{s()}},getSnapshot:()=>a.state,getServerSnapshot:()=>a.state}},R=E;function _(u,e){const{selector:S,id:a,props:B}=e??{},s=n.useMemo(()=>Math.random().toString(36),[]),l=n.useRef(new Set),m=n.useRef(new Set),M=n.useRef(new Set),g=n.useRef(new Set),w={},h=u.isolated?s:a,b=n.useRef(null);n.useMemo(()=>{b.current=y.Blac.getBloc(u,{id:h,props:B,instanceRef:s})},[u,h,s]);const t=b.current;if(!t)throw new Error(`useBloc: could not resolve bloc: ${u.name||u}`);s===t._instanceRef&&(e!=null&&e.props)&&y.Blac.instance.findRegisteredBlocInstance(u,h)===t&&t.props!==e.props&&(t.props=e.props);const I=n.useMemo(()=>r=>{if(S)return S(r);if(t.defaultDependencySelector)return t.defaultDependencySelector(r);if(typeof r!="object")return[[r]];const c=[];for(const d of l.current)d in r&&c.push(r[d]);const o=[];for(const d of M.current)if(d in t)try{const i=t[d];switch(typeof i){case"function":continue;default:o.push(i);continue}}catch(i){y.Blac.instance.log("useBloc Error",i)}return setTimeout(()=>{m.current=new Set,g.current=new Set}),[c,o]},[]),v=n.useMemo(()=>R(t,I,s),[t,s]),f=n.useSyncExternalStore(v.subscribe,v.getSnapshot,v.getServerSnapshot),x=n.useMemo(()=>{try{if(typeof f=="object")return new Proxy(f,{get(r,c){return m.current.add(c),l.current.add(c),f[c]}})}catch(r){y.Blac.instance.log("useBloc Error",r)}return f},[f]),C=n.useMemo(()=>new Proxy(t,{get(r,c){const o=t[c];return typeof o!="function"&&g.current.add(c),o}}),[t]);return n.useLayoutEffect(()=>{l.current=new Set(m.current),M.current=new Set(g.current)},[w]),n.useEffect(()=>{var c;const r=b.current;if(r)return r._addConsumer(s),(c=e==null?void 0:e.onMount)==null||c.call(e,r),()=>{var o;(o=e==null?void 0:e.onUnmount)==null||o.call(e,r),r._removeConsumer(s)}},[u,s]),[x,C]}exports.externalBlocStore=R;exports.useBloc=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),I=require("@blac/core"),M=(y,c)=>{var t;const{id:S,props:h,selector:v}=c??{},s=u.useMemo(()=>crypto.randomUUID(),[]),m=y.isolated?s:S,f=u.useRef(new Set),b=u.useRef(new Set),C=u.useCallback(()=>I.Blac.getBloc(y,{id:m,props:h,instanceRef:s}),[y,h]),o=u.useRef(C()),g=u.useMemo(()=>e=>{const n=o.current;if(!n)return[];if(v)return v(e);if(n.defaultDependencySelector)return n.defaultDependencySelector(e);if(typeof e!="object")return[[e]];const i=[];for(const l of f.current)l in e&&i.push(e[l]);const x=[];for(const l of b.current)if(l in n)try{const d=n[l];switch(typeof d){case"function":continue;default:x.push(d);continue}}catch(d){I.Blac.instance.log("useBloc Error",d)}return[i,x]},[]),r=u.useMemo(()=>({subscribe:e=>{const n=o.current;if(!n)return()=>{};let i=!1;const x={fn:()=>{try{i||(i=!0,f.current=new Set,b.current=new Set,i=!1),e(n.state)}catch(d){console.error({e:d,blocInstance:n,dependencyArray:g})}},dependencyArray:g,id:s};I.Blac.activateBloc(n);const l=n._observer.subscribe(x);return()=>{l()}},getSnapshot:()=>{var e;return((e=o.current)==null?void 0:e.state)||{}},getServerSnapshot:()=>{var e;return((e=o.current)==null?void 0:e.state)||{}}}),[(t=o.current)==null?void 0:t.uid]);return{usedKeys:f,usedClassPropKeys:b,externalStore:r,instance:o,rid:s}};function P(y,c){var o,g;const{externalStore:S,usedKeys:h,usedClassPropKeys:v,instance:s,rid:B}=M(y,c),a=u.useSyncExternalStore(S.subscribe,S.getSnapshot,S.getServerSnapshot),m=u.useRef(new WeakMap),f=u.useRef(new WeakMap),b=u.useMemo(()=>{if(typeof a!="object"||a===null)return a;let r=m.current.get(a);return r||(r=new Proxy(a,{get(t,e){return h.current.add(e),t[e]},has(t,e){return e in t},ownKeys(t){return Reflect.ownKeys(t)},getOwnPropertyDescriptor(t,e){return Reflect.getOwnPropertyDescriptor(t,e)}}),m.current.set(a,r)),r},[a]),C=u.useMemo(()=>{if(!s.current)return null;let r=f.current.get(s.current);return r||(r=new Proxy(s.current,{get(t,e){if(!t)return null;const n=t[e];return typeof n!="function"&&v.current.add(e),n}}),f.current.set(s.current,r)),r},[(o=s.current)==null?void 0:o.uid]);return u.useEffect(()=>{var t;const r=s.current;if(r)return r._addConsumer(B),(t=c==null?void 0:c.onMount)==null||t.call(c,r),()=>{var e;r&&((e=c==null?void 0:c.onUnmount)==null||e.call(c,r),r._removeConsumer(B))}},[(g=s.current)==null?void 0:g.uid,B]),[b,C]}exports.externalBlocStore=M;exports.useBloc=P;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/externalBlocStore.ts","../src/useBloc.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { BlocBase, BlocConstructor, BlocHookDependencyArrayFn, BlocState } from '@blac/core';\n\n/**\n * Interface defining an external store that can be used to subscribe to and access bloc state.\n * This interface follows the React external store pattern for state management.\n * \n * @template B - The type of the Bloc instance\n * @template S - The type of the Bloc state\n */\nexport interface ExternalStore<\n  B extends InstanceType<BlocConstructor<any>>\n> {\n  /**\n   * Subscribes to changes in the store and returns an unsubscribe function.\n   * @param onStoreChange - Callback function that will be called whenever the store changes\n   * @returns A function that can be called to unsubscribe from store changes\n   */\n  subscribe: (onStoreChange: (state: BlocState<B>) => void) => () => void;\n\n  /**\n   * Gets the current snapshot of the store state.\n   * @returns The current state of the store\n   */\n  getSnapshot: () => BlocState<B>;\n\n  /**\n   * Gets the server snapshot of the store state.\n   * This is optional and defaults to the same value as getSnapshot.\n   * @returns The server state of the store\n   */\n  getServerSnapshot?: () => BlocState<B>;\n}\n\n/**\n * Creates an external store that wraps a Bloc instance, providing a React-compatible interface\n * for subscribing to and accessing bloc state.\n * \n * @template B - The type of the Bloc instance\n * @template S - The type of the Bloc state\n * @param bloc - The Bloc instance to wrap\n * @param dependencyArray - Function that returns an array of dependencies for the subscription\n * @param rid - Unique identifier for the subscription\n * @returns An ExternalStore instance that provides methods to subscribe to and access bloc state\n */\nconst externalBlocStore = <\n  B extends InstanceType<BlocConstructor<any>>\n>(\n  resolvedBloc: B,\n  dependencyArray: BlocHookDependencyArrayFn<BlocState<B>>,\n  rid: string,\n): ExternalStore<B> => {\n  // TODO: Revisit this type assertion. Ideally, 'resolvedBloc' should conform to a type\n  // that guarantees '_observer' and 'state' properties without needing 'as unknown as ...'.\n  // This might require adjustments in the core @blac/core types.\n  const asBlocBase = resolvedBloc as unknown as BlocBase<BlocState<B>>;\n  return {\n    subscribe: (listener: (state: BlocState<B>) => void) => {\n      // Subscribe to the bloc's observer with the provided listener function\n      // This will trigger the callback whenever the bloc's state changes\n      const unSub = asBlocBase._observer.subscribe({\n        fn: () => {\n          try {\n            listener(asBlocBase.state);\n          } catch (e) {\n            // Log any errors that occur during the listener callback\n            // This ensures errors in listeners don't break the entire application\n            console.error({\n              e,\n              resolvedBloc,\n              dependencyArray,\n            });\n          }\n        },\n        // Pass the dependency array to control when the subscription is updated\n        dependencyArray,\n        // Use the provided id to identify this subscription\n        id: rid,\n      });\n\n      // Return an unsubscribe function that can be called to clean up the subscription\n      return () => {\n        unSub();\n      };\n    },\n    // Return an immutable snapshot of the current bloc state\n    getSnapshot: (): BlocState<B> => asBlocBase.state,\n    // Server snapshot mirrors the client snapshot in this implementation\n    getServerSnapshot: (): BlocState<B> => asBlocBase.state,\n  };\n};\n\nexport default externalBlocStore;\n","/* eslint-disable @typescript-eslint/restrict-template-expressions */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  Blac,\n  BlocBase,\n  BlocBaseAbstract,\n  BlocConstructor,\n  BlocHookDependencyArrayFn,\n  BlocState,\n  InferPropsFromGeneric,\n} from '@blac/core';\nimport {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport externalBlocStore from './externalBlocStore';\n\n/**\n * Type definition for the return type of the useBloc hook\n * @template B - Bloc constructor type\n */\ntype HookTypes<B extends BlocConstructor<BlocBase<any>>> = [\n  BlocState<InstanceType<B>>,\n  InstanceType<B>,\n];\n\n/**\n * Configuration options for the useBloc hook\n */\nexport interface BlocHookOptions<B extends BlocBase<any>> {\n  id?: string;\n  selector?: BlocHookDependencyArrayFn<BlocState<B>>;\n  props?: InferPropsFromGeneric<B>;\n  onMount?: (bloc: B) => void;\n  onUnmount?: (bloc: B) => void;\n}\n\n/**\n * Default dependency selector that wraps the entire state in an array\n * @template T - State type\n * @param {T} s - Current state\n * @returns {Array<Array<T>>} Dependency array containing the entire state\n */\n\n/**\n * React hook for integrating with Blac state management\n *\n * This hook connects a React component to a Bloc state container, providing\n * automatic re-rendering when relevant state changes, dependency tracking,\n * and proper lifecycle management.\n *\n * @template B - Bloc constructor type\n * @template O - BlocHookOptions type\n * @param {B} bloc - Bloc constructor class\n * @param {O} [options] - Configuration options for the hook\n * @returns {HookTypes<B>} Tuple containing [state, bloc instance]\n *\n * @example\n * const [state, counterBloc] = useBloc(CounterBloc);\n * // Access state\n * console.log(state.count);\n * // Call bloc methods\n * counterBloc.increment();\n */\nexport default function useBloc<B extends BlocConstructor<BlocBase<any>>>(\n  bloc: B,\n  options?: BlocHookOptions<InstanceType<B>>,\n): HookTypes<B> {\n  const { selector: selector, id: blocId, props } = options ?? {};\n  const rid = useMemo(() => {\n    return Math.random().toString(36);\n  }, []);\n\n  // Track used state keys\n  const usedKeys = useRef<Set<string>>(new Set());\n  const instanceKeys = useRef<Set<string>>(new Set());\n\n  // Track used class properties\n  const usedClassPropKeys = useRef<Set<string>>(new Set());\n  const instanceClassPropKeys = useRef<Set<string>>(new Set());\n\n  const renderInstance = {};\n\n  // Determine ID for isolated or shared blocs\n  const base = bloc as unknown as BlocBaseAbstract;\n  const isIsolated = base.isolated;\n  const effectiveBlocId = isIsolated ? rid : blocId;\n\n  // Use useRef to hold the bloc instance reference consistently across renders\n  const blocRef = useRef<InstanceType<B> | null>(null);\n\n  // Initialize or get the bloc instance ONCE using useMemo based on the effective ID\n  // This avoids re-running Blac.getBloc on every render.\n  useMemo(() => {\n    blocRef.current = Blac.getBloc(bloc, {\n      id: effectiveBlocId,\n      props,\n      instanceRef: rid, // Pass component ID for consumer tracking\n    });\n  }, [bloc, effectiveBlocId, rid]); // Dependencies ensure this runs only when bloc type or ID changes\n\n  const resolvedBloc = blocRef.current;\n\n  if (!resolvedBloc) {\n    // This should ideally not happen if Blac.getBloc works correctly\n    throw new Error(`useBloc: could not resolve bloc: ${bloc.name || bloc}`);\n  }\n\n  // Update props ONLY if this hook instance created the bloc (or is the designated main instance)\n  // We rely on Blac.getBloc to handle initial props correctly during creation.\n  // Subsequent calls should not overwrite props.\n  // Check if this instanceRef matches the one stored on the bloc when it was created/first retrieved.\n  if (\n    rid === resolvedBloc._instanceRef &&\n    options?.props &&\n    Blac.instance.findRegisteredBlocInstance(bloc, effectiveBlocId) ===\n      resolvedBloc\n  ) {\n    // Avoid double-setting props if Blac.getBloc already set them during creation\n    if (resolvedBloc.props !== options.props) {\n      resolvedBloc.props = options.props;\n    }\n  }\n\n  // Configure dependency tracking for re-renders\n  const dependencyArray: BlocHookDependencyArrayFn<BlocState<InstanceType<B>>> =\n    useMemo(\n      () =>\n        (\n          newState,\n        ): ReturnType<\n          BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>\n        > => {\n          // Use custom dependency selector if provided\n          if (selector) {\n            return selector(newState);\n          }\n\n          // Fall back to bloc's default dependency selector if available\n          if (resolvedBloc.defaultDependencySelector) {\n            return resolvedBloc.defaultDependencySelector(newState);\n          }\n\n          // For primitive states, use default selector\n          if (typeof newState !== 'object') {\n            // Default behavior for primitive states: re-render if the state itself changes.\n            return [[newState]];\n          }\n\n          // For object states, track which properties were actually used\n          const usedStateValues: string[] = [];\n          for (const key of usedKeys.current) {\n            if (key in newState) {\n              usedStateValues.push(newState[key as keyof typeof newState]);\n            }\n          }\n\n          // Track used class properties for dependency tracking, this enables rerenders when class getters change\n          const usedClassValues: unknown[] = [];\n          for (const key of usedClassPropKeys.current) {\n            if (key in resolvedBloc) {\n              try {\n                const value = resolvedBloc[key as keyof InstanceType<B>];\n                switch (typeof value) {\n                  case 'function':\n                    continue;\n                  default:\n                    usedClassValues.push(value);\n                    continue;\n                }\n              } catch (error) {\n                Blac.instance.log('useBloc Error', error);\n              }\n            }\n          }\n\n          setTimeout(() => {\n            instanceKeys.current = new Set();\n            instanceClassPropKeys.current = new Set();\n          });\n\n          return [usedStateValues, usedClassValues];\n        },\n      [],\n    );\n\n  // Set up external store subscription for state updates\n  const store = useMemo(\n    () => externalBlocStore(resolvedBloc, dependencyArray, rid),\n    [resolvedBloc, rid],\n  ); // dependencyArray removed as it changes frequently\n\n  // Subscribe to state changes using React's external store API\n  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n\n  // Create a proxy for state to track property access\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const returnState: BlocState<InstanceType<B>> = useMemo(() => {\n    try {\n      if (typeof state === 'object') {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n        return new Proxy(state as any, {\n          get(_, prop) {\n            instanceKeys.current.add(prop as string);\n            usedKeys.current.add(prop as string);\n            const value = state[prop as keyof typeof state];\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n            return value;\n          },\n        });\n      }\n    } catch (error) {\n      Blac.instance.log('useBloc Error', error);\n    }\n    return state;\n  }, [state]);\n\n  // Create a proxy for the bloc instance to track property access\n  const returnClass = useMemo(() => {\n    return new Proxy(resolvedBloc, {\n      get(_, prop) {\n        const value = resolvedBloc[prop as keyof InstanceType<B>];\n        // Track which class properties are accessed (excluding methods)\n        if (typeof value !== 'function') {\n          instanceClassPropKeys.current.add(prop as string);\n        }\n        return value;\n      },\n    });\n  }, [resolvedBloc]);\n\n  // Clean up tracked keys after each render\n  useLayoutEffect(() => {\n    // inherit the keys from the previous render\n    usedKeys.current = new Set(instanceKeys.current);\n    usedClassPropKeys.current = new Set(instanceClassPropKeys.current);\n  }, [renderInstance]);\n\n  // Set up bloc lifecycle management\n  useEffect(() => {\n    const currentBlocInstance = blocRef.current; // Capture instance for cleanup\n    if (!currentBlocInstance) return;\n\n    currentBlocInstance._addConsumer(rid);\n\n    // Call onMount callback if provided\n    options?.onMount?.(currentBlocInstance);\n\n    // Cleanup: remove this component as a consumer using the captured instance\n    return () => {\n      options?.onUnmount?.(currentBlocInstance);\n      currentBlocInstance._removeConsumer(rid);\n    };\n  }, [bloc, rid]); // Do not add options.onMount to deps, it will cause a loop\n\n  return [returnState, returnClass];\n}\n"],"names":["externalBlocStore","resolvedBloc","dependencyArray","rid","asBlocBase","listener","unSub","e","externalBlocStore$1","useBloc","bloc","options","selector","blocId","props","useMemo","usedKeys","useRef","instanceKeys","usedClassPropKeys","instanceClassPropKeys","renderInstance","effectiveBlocId","blocRef","Blac","newState","usedStateValues","key","usedClassValues","value","error","store","state","useSyncExternalStore","returnState","_","prop","returnClass","useLayoutEffect","useEffect","currentBlocInstance","_a"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../src/useExternalBlocStore.ts","../src/useBloc.tsx"],"sourcesContent":["import { Blac, BlacObserver, BlocBase, BlocBaseAbstract, BlocConstructor, BlocHookDependencyArrayFn, BlocState } from '@blac/core';\nimport { useCallback, useMemo, useRef } from 'react';\nimport { BlocHookOptions } from './useBloc';\n\nexport interface ExternalStore<\n  B extends BlocConstructor<BlocBase<any>>\n> {\n  /**\n   * Subscribes to changes in the store and returns an unsubscribe function.\n   * @param onStoreChange - Callback function that will be called whenever the store changes\n   * @returns A function that can be called to unsubscribe from store changes\n   */\n  subscribe: (onStoreChange: (state: BlocState<InstanceType<B>>) => void) => () => void;\n\n  /**\n   * Gets the current snapshot of the store state.\n   * @returns The current state of the store\n   */\n  getSnapshot: () => BlocState<InstanceType<B>>;\n\n  /**\n   * Gets the server snapshot of the store state.\n   * This is optional and defaults to the same value as getSnapshot.\n   * @returns The server state of the store\n   */\n  getServerSnapshot?: () => BlocState<InstanceType<B>>;\n}\n\nexport interface ExternalBlacStore<\n  B extends BlocConstructor<BlocBase<any>>\n> {\n  usedKeys: React.RefObject<Set<string>>;\n  usedClassPropKeys: React.RefObject<Set<string>>;\n  externalStore: ExternalStore<B>;\n  instance: React.RefObject<InstanceType<B>>;\n  rid: string;\n}\n\n/**\n * Creates an external store that wraps a Bloc instance, providing a React-compatible interface\n * for subscribing to and accessing bloc state.\n */\nconst useExternalBlocStore = <\n  B extends BlocConstructor<BlocBase<any>>\n>(\n  bloc: B,\n  options: BlocHookOptions<InstanceType<B>> | undefined,\n): ExternalBlacStore<B> => {\n  const { id: blocId, props, selector } = options ?? {};\n\n  const rid = useMemo(() => {\n    return crypto.randomUUID();\n  }, []);\n\n  const base = bloc as unknown as BlocBaseAbstract;\n\n  const isIsolated = base.isolated;\n  const effectiveBlocId = isIsolated ? rid : blocId;\n\n  const usedKeys = useRef<Set<string>>(new Set());\n  const usedClassPropKeys = useRef<Set<string>>(new Set());\n\n  const getBloc = useCallback(() => {\n    return Blac.getBloc(bloc, {\n      id: effectiveBlocId,\n      props,\n      instanceRef: rid\n    });\n  }, [bloc, props]);\n\n  const blocInstance = useRef<InstanceType<B>>(getBloc());\n\n\n  const dependencyArray: BlocHookDependencyArrayFn<BlocState<InstanceType<B>>> =\n    useMemo(\n      () =>\n        (newState): ReturnType<BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>> => {\n          const instance = blocInstance.current;\n\n          if (!instance) {\n            return [];\n          }\n\n          // Use custom dependency selector if provided\n          if (selector) {\n            return selector(newState);\n          }\n\n          // Fall back to bloc's default dependency selector if available\n          if (instance.defaultDependencySelector) {\n            return instance.defaultDependencySelector(newState);\n          }\n\n          // For primitive states, use default selector\n          if (typeof newState !== 'object') {\n            // Default behavior for primitive states: re-render if the state itself changes.\n            return [[newState]];\n          }\n\n          // For object states, track which properties were actually used\n          const usedStateValues: string[] = [];\n          for (const key of usedKeys.current) {\n            if (key in newState) {\n              usedStateValues.push(newState[key as keyof typeof newState]);\n            }\n          }\n\n          // Track used class properties for dependency tracking, this enables rerenders when class getters change\n          const usedClassValues: unknown[] = [];\n          for (const key of usedClassPropKeys.current) {\n            if (key in instance) {\n              try {\n                const value = instance[key as keyof InstanceType<B>];\n                switch (typeof value) {\n                  case 'function':\n                    continue;\n                  default:\n                    usedClassValues.push(value);\n                    continue;\n                }\n              } catch (error) {\n                Blac.instance.log('useBloc Error', error);\n              }\n            }\n          }\n\n          return [usedStateValues, usedClassValues];\n        },\n      [],\n    );\n\n  const state: ExternalStore<B> = useMemo(() => {\n    return {\n      subscribe: (listener: (state: BlocState<InstanceType<B>>) => void) => {\n        const currentInstance = blocInstance.current;\n        if (!currentInstance) {\n          return () => {}; // Return no-op if no instance\n        }\n\n        // Use a flag to prevent multiple resets during the same listener execution\n        let isResetting = false;\n\n        const observer: BlacObserver<BlocState<InstanceType<B>>> = {\n          fn: () => {\n            try {\n              if (!isResetting) {\n                isResetting = true;\n                usedKeys.current = new Set();\n                usedClassPropKeys.current = new Set();\n                isResetting = false;\n              }\n\n              listener(currentInstance.state);\n            } catch (e) {\n              // Log any errors that occur during the listener callback\n              // This ensures errors in listeners don't break the entire application\n              console.error({\n                e,\n                blocInstance: currentInstance,\n                dependencyArray,\n              });\n            }\n          },\n          // Pass the dependency array to control when the subscription is updated\n          dependencyArray,\n          // Use the provided id to identify this subscription\n          id: rid,\n        }\n\n        Blac.activateBloc(currentInstance);\n\n        // Subscribe to the bloc's observer with the provided listener function\n        // This will trigger the callback whenever the bloc's state changes\n        const unSub = currentInstance._observer.subscribe(observer);\n\n        // Return an unsubscribe function that can be called to clean up the subscription\n        return () => {\n          unSub();\n        };\n      },\n      // Return an immutable snapshot of the current bloc state\n      getSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current?.state || ({} as BlocState<InstanceType<B>>),\n      // Server snapshot mirrors the client snapshot in this implementation\n      getServerSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current?.state || ({} as BlocState<InstanceType<B>>),\n    }\n  }, [blocInstance.current?.uid]); // Re-create store when instance changes\n\n  return {\n    usedKeys,\n    usedClassPropKeys,\n    externalStore: state,\n    instance: blocInstance,\n    rid,\n  };\n};\n\nexport default useExternalBlocStore;\n","import {\n  BlocBase,\n  BlocConstructor,\n  BlocHookDependencyArrayFn,\n  BlocState,\n  InferPropsFromGeneric,\n} from '@blac/core';\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore\n} from 'react';\nimport useExternalBlocStore from './useExternalBlocStore';\n\n/**\n * Type definition for the return type of the useBloc hook\n * @template B - Bloc constructor type\n */\ntype HookTypes<B extends BlocConstructor<BlocBase<any>>> = [\n  BlocState<InstanceType<B>>,\n  InstanceType<B>,\n];\n\n/**\n * Configuration options for the useBloc hook\n */\nexport interface BlocHookOptions<B extends BlocBase<any>> {\n  id?: string;\n  selector?: BlocHookDependencyArrayFn<BlocState<B>>;\n  props?: InferPropsFromGeneric<B>;\n  onMount?: (bloc: B) => void;\n  onUnmount?: (bloc: B) => void;\n}\n\n/**\n * Default dependency selector that wraps the entire state in an array\n * @template T - State type\n * @param {T} s - Current state\n * @returns {Array<Array<T>>} Dependency array containing the entire state\n */\n\nconst log = (...args: unknown[]) => {\n  console.log('useBloc', ...args);\n};\n\n/**\n * React hook for integrating with Blac state management\n *\n * This hook connects a React component to a Bloc state container, providing\n * automatic re-rendering when relevant state changes, dependency tracking,\n * and proper lifecycle management.\n *\n * @template B - Bloc constructor type\n * @template O - BlocHookOptions type\n * @param {B} bloc - Bloc constructor class\n * @param {O} [options] - Configuration options for the hook\n * @returns {HookTypes<B>} Tuple containing [state, bloc instance]\n *\n * @example\n * const [state, counterBloc] = useBloc(CounterBloc);\n * // Access state\n * console.log(state.count);\n * // Call bloc methods\n * counterBloc.increment();\n */\nexport default function useBloc<B extends BlocConstructor<BlocBase<any>>>(\n  bloc: B,\n  options?: BlocHookOptions<InstanceType<B>>,\n): HookTypes<B> {\n  // Determine ID for isolated or shared blocs\n  // const base = bloc as unknown as BlocBaseAbstract;\n  // const isIsolated = base.isolated;\n  // const effectiveBlocId = isIsolated ? rid : blocId;\n  const {\n    externalStore,\n    usedKeys,\n    usedClassPropKeys,\n    instance,\n    rid,\n  } = useExternalBlocStore(bloc, options);\n\n  // Subscribe to state changes using React's external store API\n  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(\n    externalStore.subscribe,\n    externalStore.getSnapshot,\n    externalStore.getServerSnapshot,\n  );\n\n  // Cache proxies to avoid recreation on every render\n  const stateProxyCache = useRef<WeakMap<object, object>>(new WeakMap());\n  const classProxyCache = useRef<WeakMap<object, object>>(new WeakMap());\n\n  const returnState = useMemo(() => {\n    if (typeof state !== 'object' || state === null) {\n      return state;\n    }\n\n    // Check cache first\n    let proxy = stateProxyCache.current.get(state);\n    if (!proxy) {\n      proxy = new Proxy(state, {\n        get(target, prop) {\n          usedKeys.current.add(prop as string);\n          const value = target[prop as keyof typeof target];\n          return value;\n        },\n        // Handle symbols and non-enumerable properties\n        has(target, prop) {\n          return prop in target;\n        },\n        ownKeys(target) {\n          return Reflect.ownKeys(target);\n        },\n        getOwnPropertyDescriptor(target, prop) {\n          return Reflect.getOwnPropertyDescriptor(target, prop);\n        }\n      });\n      stateProxyCache.current.set(state as object, proxy as object);\n    }\n    return proxy;\n  }, [state]);\n\n  const returnClass = useMemo(() => {\n    if (!instance.current) {\n      return null;\n    }\n\n    // Check cache first\n    let proxy = classProxyCache.current.get(instance.current);\n    if (!proxy) {\n      proxy = new Proxy(instance.current, {\n        get(target, prop) {\n          if (!target) {\n            return null;\n          }\n          const value = target[prop as keyof InstanceType<B>];\n          if (typeof value !== 'function') {\n            usedClassPropKeys.current.add(prop as string);\n          }\n          return value;\n        },\n      });\n      classProxyCache.current.set(instance.current, proxy);\n    }\n    return proxy;\n  }, [instance.current?.uid]);\n\n  // Set up bloc lifecycle management\n  useEffect(() => {\n    const currentInstance = instance.current;\n    if (!currentInstance) return;\n    \n    currentInstance._addConsumer(rid);\n\n    // Call onMount callback if provided\n    options?.onMount?.(currentInstance);\n\n    // Cleanup: remove this component as a consumer using the captured instance\n    return () => {\n      if (!currentInstance) {\n        return;\n      }\n      options?.onUnmount?.(currentInstance);\n      currentInstance._removeConsumer(rid);\n    };\n  }, [instance.current?.uid, rid]); // Use UID to ensure we re-run when instance changes\n\n  return [returnState as BlocState<InstanceType<B>>, returnClass as InstanceType<B>];\n}\n"],"names":["useExternalBlocStore","bloc","options","blocId","props","selector","rid","useMemo","effectiveBlocId","usedKeys","useRef","usedClassPropKeys","getBloc","useCallback","Blac","blocInstance","dependencyArray","newState","instance","usedStateValues","key","usedClassValues","value","error","state","listener","currentInstance","isResetting","observer","e","unSub","_a","useBloc","externalStore","useSyncExternalStore","stateProxyCache","classProxyCache","returnState","proxy","target","prop","returnClass","useEffect","_b"],"mappings":"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"}

package/dist/index.d.ts

@@ -15,44 +15,38 @@ declare interface BlocHookOptions<B extends BlocBase<any>> {
     onUnmount?: (bloc: B) => void;
 }
 
+declare 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>>;
+    rid: string;
+}
+
 /**
  * Creates an external store that wraps a Bloc instance, providing a React-compatible interface
  * for subscribing to and accessing bloc state.
- *
- * @template B - The type of the Bloc instance
- * @template S - The type of the Bloc state
- * @param bloc - The Bloc instance to wrap
- * @param dependencyArray - Function that returns an array of dependencies for the subscription
- * @param rid - Unique identifier for the subscription
- * @returns An ExternalStore instance that provides methods to subscribe to and access bloc state
  */
-export declare const externalBlocStore: <B extends InstanceType<BlocConstructor<any>>>(resolvedBloc: B, dependencyArray: BlocHookDependencyArrayFn<BlocState<B>>, rid: string) => ExternalStore<B>;
+export declare const externalBlocStore: <B extends BlocConstructor<BlocBase<any>>>(bloc: B, options: BlocHookOptions<InstanceType<B>> | undefined) => ExternalBlacStore<B>;
 
-/**
- * Interface defining an external store that can be used to subscribe to and access bloc state.
- * This interface follows the React external store pattern for state management.
- *
- * @template B - The type of the Bloc instance
- * @template S - The type of the Bloc state
- */
-declare interface ExternalStore<B extends InstanceType<BlocConstructor<any>>> {
+declare 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<B>) => void) => () => void;
+    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<B>;
+    getSnapshot: () => BlocState<InstanceType<B>>;
     /**
      * 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<B>;
+    getServerSnapshot?: () => BlocState<InstanceType<B>>;
 }
 
 /**
@@ -64,12 +58,6 @@ BlocState<InstanceType<B>>,
 InstanceType<B>
 ];
 
-/**
- * Default dependency selector that wraps the entire state in an array
- * @template T - State type
- * @param {T} s - Current state
- * @returns {Array<Array<T>>} Dependency array containing the entire state
- */
 /**
  * React hook for integrating with Blac state management
  *

package/dist/index.es.js

@@ -1,120 +1,148 @@
-import { Blac as B } from "@blac/core";
-import { useMemo as a, useRef as S, useSyncExternalStore as R, useLayoutEffect as K, useEffect as P } from "react";
-const M = (s, e, y) => {
-  const o = s;
-  return {
-    subscribe: (h) => {
-      const c = o._observer.subscribe({
+import { useMemo as g, useRef as h, useCallback as P, useSyncExternalStore as p, useEffect as K } from "react";
+import { Blac as w } from "@blac/core";
+const k = (d, c) => {
+  var t;
+  const { id: y, props: x, selector: v } = c ?? {}, s = g(() => crypto.randomUUID(), []), B = d.isolated ? s : y, l = h(/* @__PURE__ */ new Set()), S = h(/* @__PURE__ */ new Set()), I = P(() => w.getBloc(d, {
+    id: B,
+    props: x,
+    instanceRef: s
+  }), [d, x]), u = h(I()), b = g(
+    () => (e) => {
+      const n = u.current;
+      if (!n)
+        return [];
+      if (v)
+        return v(e);
+      if (n.defaultDependencySelector)
+        return n.defaultDependencySelector(e);
+      if (typeof e != "object")
+        return [[e]];
+      const f = [];
+      for (const a of l.current)
+        a in e && f.push(e[a]);
+      const C = [];
+      for (const a of S.current)
+        if (a in n)
+          try {
+            const i = n[a];
+            switch (typeof i) {
+              case "function":
+                continue;
+              default:
+                C.push(i);
+                continue;
+            }
+          } catch (i) {
+            w.instance.log("useBloc Error", i);
+          }
+      return [f, C];
+    },
+    []
+  ), r = g(() => ({
+    subscribe: (e) => {
+      const n = u.current;
+      if (!n)
+        return () => {
+        };
+      let f = !1;
+      const C = {
         fn: () => {
           try {
-            h(o.state);
-          } catch (l) {
+            f || (f = !0, l.current = /* @__PURE__ */ new Set(), S.current = /* @__PURE__ */ new Set(), f = !1), e(n.state);
+          } catch (i) {
             console.error({
-              e: l,
-              resolvedBloc: s,
-              dependencyArray: e
+              e: i,
+              blocInstance: n,
+              dependencyArray: b
             });
           }
         },
         // Pass the dependency array to control when the subscription is updated
-        dependencyArray: e,
+        dependencyArray: b,
         // Use the provided id to identify this subscription
-        id: y
-      });
+        id: s
+      };
+      w.activateBloc(n);
+      const a = n._observer.subscribe(C);
       return () => {
-        c();
+        a();
       };
     },
     // Return an immutable snapshot of the current bloc state
-    getSnapshot: () => o.state,
-    // Server snapshot mirrors the client snapshot in this implementation
-    getServerSnapshot: () => o.state
-  };
-}, j = M;
-function L(s, e) {
-  const { selector: y, id: o, props: h } = e ?? {}, c = a(() => Math.random().toString(36), []), l = S(/* @__PURE__ */ new Set()), m = S(/* @__PURE__ */ new Set()), x = S(/* @__PURE__ */ new Set()), g = S(/* @__PURE__ */ new Set()), I = {}, v = s.isolated ? c : o, b = S(null);
-  a(() => {
-    b.current = B.getBloc(s, {
-      id: v,
-      props: h,
-      instanceRef: c
-      // Pass component ID for consumer tracking
-    });
-  }, [s, v, c]);
-  const t = b.current;
-  if (!t)
-    throw new Error(`useBloc: could not resolve bloc: ${s.name || s}`);
-  c === t._instanceRef && (e != null && e.props) && B.instance.findRegisteredBlocInstance(s, v) === t && t.props !== e.props && (t.props = e.props);
-  const C = a(
-    () => (r) => {
-      if (y)
-        return y(r);
-      if (t.defaultDependencySelector)
-        return t.defaultDependencySelector(r);
-      if (typeof r != "object")
-        return [[r]];
-      const n = [];
-      for (const d of l.current)
-        d in r && n.push(r[d]);
-      const u = [];
-      for (const d of x.current)
-        if (d in t)
-          try {
-            const i = t[d];
-            switch (typeof i) {
-              case "function":
-                continue;
-              default:
-                u.push(i);
-                continue;
-            }
-          } catch (i) {
-            B.instance.log("useBloc Error", i);
-          }
-      return setTimeout(() => {
-        m.current = /* @__PURE__ */ new Set(), g.current = /* @__PURE__ */ new Set();
-      }), [n, u];
+    getSnapshot: () => {
+      var e;
+      return ((e = u.current) == null ? void 0 : e.state) || {};
     },
-    []
-  ), w = a(
-    () => j(t, C, c),
-    [t, c]
-  ), f = R(
-    w.subscribe,
-    w.getSnapshot,
-    w.getServerSnapshot
-  ), E = a(() => {
-    try {
-      if (typeof f == "object")
-        return new Proxy(f, {
-          get(r, n) {
-            return m.current.add(n), l.current.add(n), f[n];
-          }
-        });
-    } catch (r) {
-      B.instance.log("useBloc Error", r);
-    }
-    return f;
-  }, [f]), _ = a(() => new Proxy(t, {
-    get(r, n) {
-      const u = t[n];
-      return typeof u != "function" && g.current.add(n), u;
+    // Server snapshot mirrors the client snapshot in this implementation
+    getServerSnapshot: () => {
+      var e;
+      return ((e = u.current) == null ? void 0 : e.state) || {};
     }
-  }), [t]);
+  }), [(t = u.current) == null ? void 0 : t.uid]);
+  return {
+    usedKeys: l,
+    usedClassPropKeys: S,
+    externalStore: r,
+    instance: u,
+    rid: s
+  };
+};
+function E(d, c) {
+  var u, b;
+  const {
+    externalStore: y,
+    usedKeys: x,
+    usedClassPropKeys: v,
+    instance: s,
+    rid: m
+  } = k(d, c), o = p(
+    y.subscribe,
+    y.getSnapshot,
+    y.getServerSnapshot
+  ), B = h(/* @__PURE__ */ new WeakMap()), l = h(/* @__PURE__ */ new WeakMap()), S = g(() => {
+    if (typeof o != "object" || o === null)
+      return o;
+    let r = B.current.get(o);
+    return r || (r = new Proxy(o, {
+      get(t, e) {
+        return x.current.add(e), t[e];
+      },
+      // Handle symbols and non-enumerable properties
+      has(t, e) {
+        return e in t;
+      },
+      ownKeys(t) {
+        return Reflect.ownKeys(t);
+      },
+      getOwnPropertyDescriptor(t, e) {
+        return Reflect.getOwnPropertyDescriptor(t, e);
+      }
+    }), B.current.set(o, r)), r;
+  }, [o]), I = g(() => {
+    if (!s.current)
+      return null;
+    let r = l.current.get(s.current);
+    return r || (r = new Proxy(s.current, {
+      get(t, e) {
+        if (!t)
+          return null;
+        const n = t[e];
+        return typeof n != "function" && v.current.add(e), n;
+      }
+    }), l.current.set(s.current, r)), r;
+  }, [(u = s.current) == null ? void 0 : u.uid]);
   return K(() => {
-    l.current = new Set(m.current), x.current = new Set(g.current);
-  }, [I]), P(() => {
-    var n;
-    const r = b.current;
+    var t;
+    const r = s.current;
     if (r)
-      return r._addConsumer(c), (n = e == null ? void 0 : e.onMount) == null || n.call(e, r), () => {
-        var u;
-        (u = e == null ? void 0 : e.onUnmount) == null || u.call(e, r), r._removeConsumer(c);
+      return r._addConsumer(m), (t = c == null ? void 0 : c.onMount) == null || t.call(c, r), () => {
+        var e;
+        r && ((e = c == null ? void 0 : c.onUnmount) == null || e.call(c, r), r._removeConsumer(m));
       };
-  }, [s, c]), [E, _];
+  }, [(b = s.current) == null ? void 0 : b.uid, m]), [S, I];
 }
 export {
-  j as externalBlocStore,
-  L as useBloc
+  k as externalBlocStore,
+  E as useBloc
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/externalBlocStore.ts","../src/useBloc.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { BlocBase, BlocConstructor, BlocHookDependencyArrayFn, BlocState } from '@blac/core';\n\n/**\n * Interface defining an external store that can be used to subscribe to and access bloc state.\n * This interface follows the React external store pattern for state management.\n * \n * @template B - The type of the Bloc instance\n * @template S - The type of the Bloc state\n */\nexport interface ExternalStore<\n  B extends InstanceType<BlocConstructor<any>>\n> {\n  /**\n   * Subscribes to changes in the store and returns an unsubscribe function.\n   * @param onStoreChange - Callback function that will be called whenever the store changes\n   * @returns A function that can be called to unsubscribe from store changes\n   */\n  subscribe: (onStoreChange: (state: BlocState<B>) => void) => () => void;\n\n  /**\n   * Gets the current snapshot of the store state.\n   * @returns The current state of the store\n   */\n  getSnapshot: () => BlocState<B>;\n\n  /**\n   * Gets the server snapshot of the store state.\n   * This is optional and defaults to the same value as getSnapshot.\n   * @returns The server state of the store\n   */\n  getServerSnapshot?: () => BlocState<B>;\n}\n\n/**\n * Creates an external store that wraps a Bloc instance, providing a React-compatible interface\n * for subscribing to and accessing bloc state.\n * \n * @template B - The type of the Bloc instance\n * @template S - The type of the Bloc state\n * @param bloc - The Bloc instance to wrap\n * @param dependencyArray - Function that returns an array of dependencies for the subscription\n * @param rid - Unique identifier for the subscription\n * @returns An ExternalStore instance that provides methods to subscribe to and access bloc state\n */\nconst externalBlocStore = <\n  B extends InstanceType<BlocConstructor<any>>\n>(\n  resolvedBloc: B,\n  dependencyArray: BlocHookDependencyArrayFn<BlocState<B>>,\n  rid: string,\n): ExternalStore<B> => {\n  // TODO: Revisit this type assertion. Ideally, 'resolvedBloc' should conform to a type\n  // that guarantees '_observer' and 'state' properties without needing 'as unknown as ...'.\n  // This might require adjustments in the core @blac/core types.\n  const asBlocBase = resolvedBloc as unknown as BlocBase<BlocState<B>>;\n  return {\n    subscribe: (listener: (state: BlocState<B>) => void) => {\n      // Subscribe to the bloc's observer with the provided listener function\n      // This will trigger the callback whenever the bloc's state changes\n      const unSub = asBlocBase._observer.subscribe({\n        fn: () => {\n          try {\n            listener(asBlocBase.state);\n          } catch (e) {\n            // Log any errors that occur during the listener callback\n            // This ensures errors in listeners don't break the entire application\n            console.error({\n              e,\n              resolvedBloc,\n              dependencyArray,\n            });\n          }\n        },\n        // Pass the dependency array to control when the subscription is updated\n        dependencyArray,\n        // Use the provided id to identify this subscription\n        id: rid,\n      });\n\n      // Return an unsubscribe function that can be called to clean up the subscription\n      return () => {\n        unSub();\n      };\n    },\n    // Return an immutable snapshot of the current bloc state\n    getSnapshot: (): BlocState<B> => asBlocBase.state,\n    // Server snapshot mirrors the client snapshot in this implementation\n    getServerSnapshot: (): BlocState<B> => asBlocBase.state,\n  };\n};\n\nexport default externalBlocStore;\n","/* eslint-disable @typescript-eslint/restrict-template-expressions */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  Blac,\n  BlocBase,\n  BlocBaseAbstract,\n  BlocConstructor,\n  BlocHookDependencyArrayFn,\n  BlocState,\n  InferPropsFromGeneric,\n} from '@blac/core';\nimport {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport externalBlocStore from './externalBlocStore';\n\n/**\n * Type definition for the return type of the useBloc hook\n * @template B - Bloc constructor type\n */\ntype HookTypes<B extends BlocConstructor<BlocBase<any>>> = [\n  BlocState<InstanceType<B>>,\n  InstanceType<B>,\n];\n\n/**\n * Configuration options for the useBloc hook\n */\nexport interface BlocHookOptions<B extends BlocBase<any>> {\n  id?: string;\n  selector?: BlocHookDependencyArrayFn<BlocState<B>>;\n  props?: InferPropsFromGeneric<B>;\n  onMount?: (bloc: B) => void;\n  onUnmount?: (bloc: B) => void;\n}\n\n/**\n * Default dependency selector that wraps the entire state in an array\n * @template T - State type\n * @param {T} s - Current state\n * @returns {Array<Array<T>>} Dependency array containing the entire state\n */\n\n/**\n * React hook for integrating with Blac state management\n *\n * This hook connects a React component to a Bloc state container, providing\n * automatic re-rendering when relevant state changes, dependency tracking,\n * and proper lifecycle management.\n *\n * @template B - Bloc constructor type\n * @template O - BlocHookOptions type\n * @param {B} bloc - Bloc constructor class\n * @param {O} [options] - Configuration options for the hook\n * @returns {HookTypes<B>} Tuple containing [state, bloc instance]\n *\n * @example\n * const [state, counterBloc] = useBloc(CounterBloc);\n * // Access state\n * console.log(state.count);\n * // Call bloc methods\n * counterBloc.increment();\n */\nexport default function useBloc<B extends BlocConstructor<BlocBase<any>>>(\n  bloc: B,\n  options?: BlocHookOptions<InstanceType<B>>,\n): HookTypes<B> {\n  const { selector: selector, id: blocId, props } = options ?? {};\n  const rid = useMemo(() => {\n    return Math.random().toString(36);\n  }, []);\n\n  // Track used state keys\n  const usedKeys = useRef<Set<string>>(new Set());\n  const instanceKeys = useRef<Set<string>>(new Set());\n\n  // Track used class properties\n  const usedClassPropKeys = useRef<Set<string>>(new Set());\n  const instanceClassPropKeys = useRef<Set<string>>(new Set());\n\n  const renderInstance = {};\n\n  // Determine ID for isolated or shared blocs\n  const base = bloc as unknown as BlocBaseAbstract;\n  const isIsolated = base.isolated;\n  const effectiveBlocId = isIsolated ? rid : blocId;\n\n  // Use useRef to hold the bloc instance reference consistently across renders\n  const blocRef = useRef<InstanceType<B> | null>(null);\n\n  // Initialize or get the bloc instance ONCE using useMemo based on the effective ID\n  // This avoids re-running Blac.getBloc on every render.\n  useMemo(() => {\n    blocRef.current = Blac.getBloc(bloc, {\n      id: effectiveBlocId,\n      props,\n      instanceRef: rid, // Pass component ID for consumer tracking\n    });\n  }, [bloc, effectiveBlocId, rid]); // Dependencies ensure this runs only when bloc type or ID changes\n\n  const resolvedBloc = blocRef.current;\n\n  if (!resolvedBloc) {\n    // This should ideally not happen if Blac.getBloc works correctly\n    throw new Error(`useBloc: could not resolve bloc: ${bloc.name || bloc}`);\n  }\n\n  // Update props ONLY if this hook instance created the bloc (or is the designated main instance)\n  // We rely on Blac.getBloc to handle initial props correctly during creation.\n  // Subsequent calls should not overwrite props.\n  // Check if this instanceRef matches the one stored on the bloc when it was created/first retrieved.\n  if (\n    rid === resolvedBloc._instanceRef &&\n    options?.props &&\n    Blac.instance.findRegisteredBlocInstance(bloc, effectiveBlocId) ===\n      resolvedBloc\n  ) {\n    // Avoid double-setting props if Blac.getBloc already set them during creation\n    if (resolvedBloc.props !== options.props) {\n      resolvedBloc.props = options.props;\n    }\n  }\n\n  // Configure dependency tracking for re-renders\n  const dependencyArray: BlocHookDependencyArrayFn<BlocState<InstanceType<B>>> =\n    useMemo(\n      () =>\n        (\n          newState,\n        ): ReturnType<\n          BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>\n        > => {\n          // Use custom dependency selector if provided\n          if (selector) {\n            return selector(newState);\n          }\n\n          // Fall back to bloc's default dependency selector if available\n          if (resolvedBloc.defaultDependencySelector) {\n            return resolvedBloc.defaultDependencySelector(newState);\n          }\n\n          // For primitive states, use default selector\n          if (typeof newState !== 'object') {\n            // Default behavior for primitive states: re-render if the state itself changes.\n            return [[newState]];\n          }\n\n          // For object states, track which properties were actually used\n          const usedStateValues: string[] = [];\n          for (const key of usedKeys.current) {\n            if (key in newState) {\n              usedStateValues.push(newState[key as keyof typeof newState]);\n            }\n          }\n\n          // Track used class properties for dependency tracking, this enables rerenders when class getters change\n          const usedClassValues: unknown[] = [];\n          for (const key of usedClassPropKeys.current) {\n            if (key in resolvedBloc) {\n              try {\n                const value = resolvedBloc[key as keyof InstanceType<B>];\n                switch (typeof value) {\n                  case 'function':\n                    continue;\n                  default:\n                    usedClassValues.push(value);\n                    continue;\n                }\n              } catch (error) {\n                Blac.instance.log('useBloc Error', error);\n              }\n            }\n          }\n\n          setTimeout(() => {\n            instanceKeys.current = new Set();\n            instanceClassPropKeys.current = new Set();\n          });\n\n          return [usedStateValues, usedClassValues];\n        },\n      [],\n    );\n\n  // Set up external store subscription for state updates\n  const store = useMemo(\n    () => externalBlocStore(resolvedBloc, dependencyArray, rid),\n    [resolvedBloc, rid],\n  ); // dependencyArray removed as it changes frequently\n\n  // Subscribe to state changes using React's external store API\n  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n\n  // Create a proxy for state to track property access\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const returnState: BlocState<InstanceType<B>> = useMemo(() => {\n    try {\n      if (typeof state === 'object') {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n        return new Proxy(state as any, {\n          get(_, prop) {\n            instanceKeys.current.add(prop as string);\n            usedKeys.current.add(prop as string);\n            const value = state[prop as keyof typeof state];\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n            return value;\n          },\n        });\n      }\n    } catch (error) {\n      Blac.instance.log('useBloc Error', error);\n    }\n    return state;\n  }, [state]);\n\n  // Create a proxy for the bloc instance to track property access\n  const returnClass = useMemo(() => {\n    return new Proxy(resolvedBloc, {\n      get(_, prop) {\n        const value = resolvedBloc[prop as keyof InstanceType<B>];\n        // Track which class properties are accessed (excluding methods)\n        if (typeof value !== 'function') {\n          instanceClassPropKeys.current.add(prop as string);\n        }\n        return value;\n      },\n    });\n  }, [resolvedBloc]);\n\n  // Clean up tracked keys after each render\n  useLayoutEffect(() => {\n    // inherit the keys from the previous render\n    usedKeys.current = new Set(instanceKeys.current);\n    usedClassPropKeys.current = new Set(instanceClassPropKeys.current);\n  }, [renderInstance]);\n\n  // Set up bloc lifecycle management\n  useEffect(() => {\n    const currentBlocInstance = blocRef.current; // Capture instance for cleanup\n    if (!currentBlocInstance) return;\n\n    currentBlocInstance._addConsumer(rid);\n\n    // Call onMount callback if provided\n    options?.onMount?.(currentBlocInstance);\n\n    // Cleanup: remove this component as a consumer using the captured instance\n    return () => {\n      options?.onUnmount?.(currentBlocInstance);\n      currentBlocInstance._removeConsumer(rid);\n    };\n  }, [bloc, rid]); // Do not add options.onMount to deps, it will cause a loop\n\n  return [returnState, returnClass];\n}\n"],"names":["externalBlocStore","resolvedBloc","dependencyArray","rid","asBlocBase","listener","unSub","e","externalBlocStore$1","useBloc","bloc","options","selector","blocId","props","useMemo","usedKeys","useRef","instanceKeys","usedClassPropKeys","instanceClassPropKeys","renderInstance","effectiveBlocId","blocRef","Blac","newState","usedStateValues","key","usedClassValues","value","error","store","state","useSyncExternalStore","returnState","_","prop","returnClass","useLayoutEffect","useEffect","currentBlocInstance","_a"],"mappings":";;AA6CA,MAAMA,IAAoB,CAGxBC,GACAC,GACAC,MACqB;AAIrB,QAAMC,IAAaH;AACZ,SAAA;AAAA,IACL,WAAW,CAACI,MAA4C;AAGhD,YAAAC,IAAQF,EAAW,UAAU,UAAU;AAAA,QAC3C,IAAI,MAAM;AACJ,cAAA;AACF,YAAAC,EAASD,EAAW,KAAK;AAAA,mBAClBG,GAAG;AAGV,oBAAQ,MAAM;AAAA,cACZ,GAAAA;AAAA,cACA,cAAAN;AAAA,cACA,iBAAAC;AAAA,YAAA,CACD;AAAA,UACH;AAAA,QACF;AAAA;AAAA,QAEA,iBAAAA;AAAA;AAAA,QAEA,IAAIC;AAAA,MAAA,CACL;AAGD,aAAO,MAAM;AACL,QAAAG;MAAA;AAAA,IAEV;AAAA;AAAA,IAEA,aAAa,MAAoBF,EAAW;AAAA;AAAA,IAE5C,mBAAmB,MAAoBA,EAAW;AAAA,EAAA;AAEtD,GAEAI,IAAeR;ACzBS,SAAAS,EACtBC,GACAC,GACc;AACd,QAAM,EAAE,UAAAC,GAAoB,IAAIC,GAAQ,OAAAC,EAAM,IAAIH,KAAW,IACvDR,IAAMY,EAAQ,MACX,KAAK,OAAA,EAAS,SAAS,EAAE,GAC/B,CAAE,CAAA,GAGCC,IAAWC,EAAwB,oBAAA,IAAK,CAAA,GACxCC,IAAeD,EAAwB,oBAAA,IAAK,CAAA,GAG5CE,IAAoBF,EAAwB,oBAAA,IAAK,CAAA,GACjDG,IAAwBH,EAAwB,oBAAA,IAAK,CAAA,GAErDI,IAAiB,CAAA,GAKjBC,IAFOZ,EACW,WACaP,IAAMU,GAGrCU,IAAUN,EAA+B,IAAI;AAInD,EAAAF,EAAQ,MAAM;AACJ,IAAAQ,EAAA,UAAUC,EAAK,QAAQd,GAAM;AAAA,MACnC,IAAIY;AAAA,MACJ,OAAAR;AAAA,MACA,aAAaX;AAAA;AAAA,IAAA,CACd;AAAA,EACA,GAAA,CAACO,GAAMY,GAAiBnB,CAAG,CAAC;AAE/B,QAAMF,IAAesB,EAAQ;AAE7B,MAAI,CAACtB;AAEH,UAAM,IAAI,MAAM,oCAAoCS,EAAK,QAAQA,CAAI,EAAE;AAQvE,EAAAP,MAAQF,EAAa,iBACrBU,KAAA,QAAAA,EAAS,UACTa,EAAK,SAAS,2BAA2Bd,GAAMY,CAAe,MAC5DrB,KAGEA,EAAa,UAAUU,EAAQ,UACjCV,EAAa,QAAQU,EAAQ;AAKjC,QAAMT,IACJa;AAAA,IACE,MACE,CACEU,MAGG;AAEH,UAAIb;AACF,eAAOA,EAASa,CAAQ;AAI1B,UAAIxB,EAAa;AACR,eAAAA,EAAa,0BAA0BwB,CAAQ;AAIpD,UAAA,OAAOA,KAAa;AAEf,eAAA,CAAC,CAACA,CAAQ,CAAC;AAIpB,YAAMC,IAA4B,CAAA;AACvB,iBAAAC,KAAOX,EAAS;AACzB,QAAIW,KAAOF,KACOC,EAAA,KAAKD,EAASE,CAA4B,CAAC;AAK/D,YAAMC,IAA6B,CAAA;AACxB,iBAAAD,KAAOR,EAAkB;AAClC,YAAIQ,KAAO1B;AACL,cAAA;AACI,kBAAA4B,IAAQ5B,EAAa0B,CAA4B;AACvD,oBAAQ,OAAOE,GAAO;AAAA,cACpB,KAAK;AACH;AAAA,cACF;AACE,gBAAAD,EAAgB,KAAKC,CAAK;AAC1B;AAAA,YACJ;AAAA,mBACOC,GAAO;AACT,YAAAN,EAAA,SAAS,IAAI,iBAAiBM,CAAK;AAAA,UAC1C;AAIJ,wBAAW,MAAM;AACF,QAAAZ,EAAA,8BAAc,OACLE,EAAA,8BAAc;MAAI,CACzC,GAEM,CAACM,GAAiBE,CAAe;AAAA,IAC1C;AAAA,IACF,CAAC;AAAA,EAAA,GAICG,IAAQhB;AAAA,IACZ,MAAMf,EAAkBC,GAAcC,GAAiBC,CAAG;AAAA,IAC1D,CAACF,GAAcE,CAAG;AAAA,EAAA,GAId6B,IAAQC;AAAA,IACZF,EAAM;AAAA,IACNA,EAAM;AAAA,IACNA,EAAM;AAAA,EAAA,GAKFG,IAA0CnB,EAAQ,MAAM;AACxD,QAAA;AACE,UAAA,OAAOiB,KAAU;AAEZ,eAAA,IAAI,MAAMA,GAAc;AAAA,UAC7B,IAAIG,GAAGC,GAAM;AACE,mBAAAlB,EAAA,QAAQ,IAAIkB,CAAc,GAC9BpB,EAAA,QAAQ,IAAIoB,CAAc,GACrBJ,EAAMI,CAA0B;AAAA,UAGhD;AAAA,QAAA,CACD;AAAA,aAEIN,GAAO;AACT,MAAAN,EAAA,SAAS,IAAI,iBAAiBM,CAAK;AAAA,IAC1C;AACO,WAAAE;AAAA,EAAA,GACN,CAACA,CAAK,CAAC,GAGJK,IAActB,EAAQ,MACnB,IAAI,MAAMd,GAAc;AAAA,IAC7B,IAAIkC,GAAGC,GAAM;AACL,YAAAP,IAAQ5B,EAAamC,CAA6B;AAEpD,aAAA,OAAOP,KAAU,cACGT,EAAA,QAAQ,IAAIgB,CAAc,GAE3CP;AAAA,IACT;AAAA,EAAA,CACD,GACA,CAAC5B,CAAY,CAAC;AAGjB,SAAAqC,EAAgB,MAAM;AAEpB,IAAAtB,EAAS,UAAU,IAAI,IAAIE,EAAa,OAAO,GAC/CC,EAAkB,UAAU,IAAI,IAAIC,EAAsB,OAAO;AAAA,EAAA,GAChE,CAACC,CAAc,CAAC,GAGnBkB,EAAU,MAAM;;AACd,UAAMC,IAAsBjB,EAAQ;AACpC,QAAKiB;AAEL,aAAAA,EAAoB,aAAarC,CAAG,IAGpCsC,IAAA9B,KAAA,gBAAAA,EAAS,YAAT,QAAA8B,EAAA,KAAA9B,GAAmB6B,IAGZ,MAAM;;AACX,SAAAC,IAAA9B,KAAA,gBAAAA,EAAS,cAAT,QAAA8B,EAAA,KAAA9B,GAAqB6B,IACrBA,EAAoB,gBAAgBrC,CAAG;AAAA,MAAA;AAAA,EACzC,GACC,CAACO,GAAMP,CAAG,CAAC,GAEP,CAAC+B,GAAaG,CAAW;AAClC;"}
+{"version":3,"file":"index.es.js","sources":["../src/useExternalBlocStore.ts","../src/useBloc.tsx"],"sourcesContent":["import { Blac, BlacObserver, BlocBase, BlocBaseAbstract, BlocConstructor, BlocHookDependencyArrayFn, BlocState } from '@blac/core';\nimport { useCallback, useMemo, useRef } from 'react';\nimport { BlocHookOptions } from './useBloc';\n\nexport interface ExternalStore<\n  B extends BlocConstructor<BlocBase<any>>\n> {\n  /**\n   * Subscribes to changes in the store and returns an unsubscribe function.\n   * @param onStoreChange - Callback function that will be called whenever the store changes\n   * @returns A function that can be called to unsubscribe from store changes\n   */\n  subscribe: (onStoreChange: (state: BlocState<InstanceType<B>>) => void) => () => void;\n\n  /**\n   * Gets the current snapshot of the store state.\n   * @returns The current state of the store\n   */\n  getSnapshot: () => BlocState<InstanceType<B>>;\n\n  /**\n   * Gets the server snapshot of the store state.\n   * This is optional and defaults to the same value as getSnapshot.\n   * @returns The server state of the store\n   */\n  getServerSnapshot?: () => BlocState<InstanceType<B>>;\n}\n\nexport interface ExternalBlacStore<\n  B extends BlocConstructor<BlocBase<any>>\n> {\n  usedKeys: React.RefObject<Set<string>>;\n  usedClassPropKeys: React.RefObject<Set<string>>;\n  externalStore: ExternalStore<B>;\n  instance: React.RefObject<InstanceType<B>>;\n  rid: string;\n}\n\n/**\n * Creates an external store that wraps a Bloc instance, providing a React-compatible interface\n * for subscribing to and accessing bloc state.\n */\nconst useExternalBlocStore = <\n  B extends BlocConstructor<BlocBase<any>>\n>(\n  bloc: B,\n  options: BlocHookOptions<InstanceType<B>> | undefined,\n): ExternalBlacStore<B> => {\n  const { id: blocId, props, selector } = options ?? {};\n\n  const rid = useMemo(() => {\n    return crypto.randomUUID();\n  }, []);\n\n  const base = bloc as unknown as BlocBaseAbstract;\n\n  const isIsolated = base.isolated;\n  const effectiveBlocId = isIsolated ? rid : blocId;\n\n  const usedKeys = useRef<Set<string>>(new Set());\n  const usedClassPropKeys = useRef<Set<string>>(new Set());\n\n  const getBloc = useCallback(() => {\n    return Blac.getBloc(bloc, {\n      id: effectiveBlocId,\n      props,\n      instanceRef: rid\n    });\n  }, [bloc, props]);\n\n  const blocInstance = useRef<InstanceType<B>>(getBloc());\n\n\n  const dependencyArray: BlocHookDependencyArrayFn<BlocState<InstanceType<B>>> =\n    useMemo(\n      () =>\n        (newState): ReturnType<BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>> => {\n          const instance = blocInstance.current;\n\n          if (!instance) {\n            return [];\n          }\n\n          // Use custom dependency selector if provided\n          if (selector) {\n            return selector(newState);\n          }\n\n          // Fall back to bloc's default dependency selector if available\n          if (instance.defaultDependencySelector) {\n            return instance.defaultDependencySelector(newState);\n          }\n\n          // For primitive states, use default selector\n          if (typeof newState !== 'object') {\n            // Default behavior for primitive states: re-render if the state itself changes.\n            return [[newState]];\n          }\n\n          // For object states, track which properties were actually used\n          const usedStateValues: string[] = [];\n          for (const key of usedKeys.current) {\n            if (key in newState) {\n              usedStateValues.push(newState[key as keyof typeof newState]);\n            }\n          }\n\n          // Track used class properties for dependency tracking, this enables rerenders when class getters change\n          const usedClassValues: unknown[] = [];\n          for (const key of usedClassPropKeys.current) {\n            if (key in instance) {\n              try {\n                const value = instance[key as keyof InstanceType<B>];\n                switch (typeof value) {\n                  case 'function':\n                    continue;\n                  default:\n                    usedClassValues.push(value);\n                    continue;\n                }\n              } catch (error) {\n                Blac.instance.log('useBloc Error', error);\n              }\n            }\n          }\n\n          return [usedStateValues, usedClassValues];\n        },\n      [],\n    );\n\n  const state: ExternalStore<B> = useMemo(() => {\n    return {\n      subscribe: (listener: (state: BlocState<InstanceType<B>>) => void) => {\n        const currentInstance = blocInstance.current;\n        if (!currentInstance) {\n          return () => {}; // Return no-op if no instance\n        }\n\n        // Use a flag to prevent multiple resets during the same listener execution\n        let isResetting = false;\n\n        const observer: BlacObserver<BlocState<InstanceType<B>>> = {\n          fn: () => {\n            try {\n              if (!isResetting) {\n                isResetting = true;\n                usedKeys.current = new Set();\n                usedClassPropKeys.current = new Set();\n                isResetting = false;\n              }\n\n              listener(currentInstance.state);\n            } catch (e) {\n              // Log any errors that occur during the listener callback\n              // This ensures errors in listeners don't break the entire application\n              console.error({\n                e,\n                blocInstance: currentInstance,\n                dependencyArray,\n              });\n            }\n          },\n          // Pass the dependency array to control when the subscription is updated\n          dependencyArray,\n          // Use the provided id to identify this subscription\n          id: rid,\n        }\n\n        Blac.activateBloc(currentInstance);\n\n        // Subscribe to the bloc's observer with the provided listener function\n        // This will trigger the callback whenever the bloc's state changes\n        const unSub = currentInstance._observer.subscribe(observer);\n\n        // Return an unsubscribe function that can be called to clean up the subscription\n        return () => {\n          unSub();\n        };\n      },\n      // Return an immutable snapshot of the current bloc state\n      getSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current?.state || ({} as BlocState<InstanceType<B>>),\n      // Server snapshot mirrors the client snapshot in this implementation\n      getServerSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current?.state || ({} as BlocState<InstanceType<B>>),\n    }\n  }, [blocInstance.current?.uid]); // Re-create store when instance changes\n\n  return {\n    usedKeys,\n    usedClassPropKeys,\n    externalStore: state,\n    instance: blocInstance,\n    rid,\n  };\n};\n\nexport default useExternalBlocStore;\n","import {\n  BlocBase,\n  BlocConstructor,\n  BlocHookDependencyArrayFn,\n  BlocState,\n  InferPropsFromGeneric,\n} from '@blac/core';\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore\n} from 'react';\nimport useExternalBlocStore from './useExternalBlocStore';\n\n/**\n * Type definition for the return type of the useBloc hook\n * @template B - Bloc constructor type\n */\ntype HookTypes<B extends BlocConstructor<BlocBase<any>>> = [\n  BlocState<InstanceType<B>>,\n  InstanceType<B>,\n];\n\n/**\n * Configuration options for the useBloc hook\n */\nexport interface BlocHookOptions<B extends BlocBase<any>> {\n  id?: string;\n  selector?: BlocHookDependencyArrayFn<BlocState<B>>;\n  props?: InferPropsFromGeneric<B>;\n  onMount?: (bloc: B) => void;\n  onUnmount?: (bloc: B) => void;\n}\n\n/**\n * Default dependency selector that wraps the entire state in an array\n * @template T - State type\n * @param {T} s - Current state\n * @returns {Array<Array<T>>} Dependency array containing the entire state\n */\n\nconst log = (...args: unknown[]) => {\n  console.log('useBloc', ...args);\n};\n\n/**\n * React hook for integrating with Blac state management\n *\n * This hook connects a React component to a Bloc state container, providing\n * automatic re-rendering when relevant state changes, dependency tracking,\n * and proper lifecycle management.\n *\n * @template B - Bloc constructor type\n * @template O - BlocHookOptions type\n * @param {B} bloc - Bloc constructor class\n * @param {O} [options] - Configuration options for the hook\n * @returns {HookTypes<B>} Tuple containing [state, bloc instance]\n *\n * @example\n * const [state, counterBloc] = useBloc(CounterBloc);\n * // Access state\n * console.log(state.count);\n * // Call bloc methods\n * counterBloc.increment();\n */\nexport default function useBloc<B extends BlocConstructor<BlocBase<any>>>(\n  bloc: B,\n  options?: BlocHookOptions<InstanceType<B>>,\n): HookTypes<B> {\n  // Determine ID for isolated or shared blocs\n  // const base = bloc as unknown as BlocBaseAbstract;\n  // const isIsolated = base.isolated;\n  // const effectiveBlocId = isIsolated ? rid : blocId;\n  const {\n    externalStore,\n    usedKeys,\n    usedClassPropKeys,\n    instance,\n    rid,\n  } = useExternalBlocStore(bloc, options);\n\n  // Subscribe to state changes using React's external store API\n  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(\n    externalStore.subscribe,\n    externalStore.getSnapshot,\n    externalStore.getServerSnapshot,\n  );\n\n  // Cache proxies to avoid recreation on every render\n  const stateProxyCache = useRef<WeakMap<object, object>>(new WeakMap());\n  const classProxyCache = useRef<WeakMap<object, object>>(new WeakMap());\n\n  const returnState = useMemo(() => {\n    if (typeof state !== 'object' || state === null) {\n      return state;\n    }\n\n    // Check cache first\n    let proxy = stateProxyCache.current.get(state);\n    if (!proxy) {\n      proxy = new Proxy(state, {\n        get(target, prop) {\n          usedKeys.current.add(prop as string);\n          const value = target[prop as keyof typeof target];\n          return value;\n        },\n        // Handle symbols and non-enumerable properties\n        has(target, prop) {\n          return prop in target;\n        },\n        ownKeys(target) {\n          return Reflect.ownKeys(target);\n        },\n        getOwnPropertyDescriptor(target, prop) {\n          return Reflect.getOwnPropertyDescriptor(target, prop);\n        }\n      });\n      stateProxyCache.current.set(state as object, proxy as object);\n    }\n    return proxy;\n  }, [state]);\n\n  const returnClass = useMemo(() => {\n    if (!instance.current) {\n      return null;\n    }\n\n    // Check cache first\n    let proxy = classProxyCache.current.get(instance.current);\n    if (!proxy) {\n      proxy = new Proxy(instance.current, {\n        get(target, prop) {\n          if (!target) {\n            return null;\n          }\n          const value = target[prop as keyof InstanceType<B>];\n          if (typeof value !== 'function') {\n            usedClassPropKeys.current.add(prop as string);\n          }\n          return value;\n        },\n      });\n      classProxyCache.current.set(instance.current, proxy);\n    }\n    return proxy;\n  }, [instance.current?.uid]);\n\n  // Set up bloc lifecycle management\n  useEffect(() => {\n    const currentInstance = instance.current;\n    if (!currentInstance) return;\n    \n    currentInstance._addConsumer(rid);\n\n    // Call onMount callback if provided\n    options?.onMount?.(currentInstance);\n\n    // Cleanup: remove this component as a consumer using the captured instance\n    return () => {\n      if (!currentInstance) {\n        return;\n      }\n      options?.onUnmount?.(currentInstance);\n      currentInstance._removeConsumer(rid);\n    };\n  }, [instance.current?.uid, rid]); // Use UID to ensure we re-run when instance changes\n\n  return [returnState as BlocState<InstanceType<B>>, returnClass as InstanceType<B>];\n}\n"],"names":["useExternalBlocStore","bloc","options","blocId","props","selector","rid","useMemo","effectiveBlocId","usedKeys","useRef","usedClassPropKeys","getBloc","useCallback","Blac","blocInstance","dependencyArray","newState","instance","usedStateValues","key","usedClassValues","value","error","state","listener","currentInstance","isResetting","observer","e","unSub","_a","useBloc","externalStore","useSyncExternalStore","stateProxyCache","classProxyCache","returnState","proxy","target","prop","returnClass","useEffect","_b"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blac/react",
-  "version": "2.0.0-rc-2",
+  "version": "2.0.0-rc-4",
   "license": "MIT",
   "author": "Brendan Mullins <jsnanigans@gmail.com>",
   "main": "dist/index.cjs.js",
@@ -30,7 +30,7 @@
     "@types/react-dom": "^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@blac/core": "2.0.0-rc-2"
+    "@blac/core": "2.0.0-rc-4"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -52,6 +52,7 @@
     "happy-dom": "^17.4.7",
     "jsdom": "^24.1.1",
     "prettier": "^3.5.3",
+    "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "^5.8.3",
     "vite": "^5.3.1",

package/src/index.ts

@@ -1,4 +1,4 @@
-import externalBlocStore from './externalBlocStore';
 import useBloc from './useBloc';
+import useExternalBlocStore from './useExternalBlocStore';
 
-export { externalBlocStore, useBloc };
+export { useExternalBlocStore as externalBlocStore, useBloc };

package/src/useBloc.tsx

@@ -1,9 +1,5 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
-  Blac,
   BlocBase,
-  BlocBaseAbstract,
   BlocConstructor,
   BlocHookDependencyArrayFn,
   BlocState,
@@ -11,12 +7,11 @@ import {
 } from '@blac/core';
 import {
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
-  useSyncExternalStore,
+  useSyncExternalStore
 } from 'react';
-import externalBlocStore from './externalBlocStore';
+import useExternalBlocStore from './useExternalBlocStore';
 
 /**
  * Type definition for the return type of the useBloc hook
@@ -45,6 +40,10 @@ export interface BlocHookOptions<B extends BlocBase<any>> {
  * @returns {Array<Array<T>>} Dependency array containing the entire state
  */
 
+const log = (...args: unknown[]) => {
+  console.log('useBloc', ...args);
+};
+
 /**
  * React hook for integrating with Blac state management
  *
@@ -69,196 +68,103 @@ export default function useBloc<B extends BlocConstructor<BlocBase<any>>>(
   bloc: B,
   options?: BlocHookOptions<InstanceType<B>>,
 ): HookTypes<B> {
-  const { selector: selector, id: blocId, props } = options ?? {};
-  const rid = useMemo(() => {
-    return Math.random().toString(36);
-  }, []);
-
-  // Track used state keys
-  const usedKeys = useRef<Set<string>>(new Set());
-  const instanceKeys = useRef<Set<string>>(new Set());
-
-  // Track used class properties
-  const usedClassPropKeys = useRef<Set<string>>(new Set());
-  const instanceClassPropKeys = useRef<Set<string>>(new Set());
-
-  const renderInstance = {};
-
   // Determine ID for isolated or shared blocs
-  const base = bloc as unknown as BlocBaseAbstract;
-  const isIsolated = base.isolated;
-  const effectiveBlocId = isIsolated ? rid : blocId;
+  // 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);
 
-  // Use useRef to hold the bloc instance reference consistently across renders
-  const blocRef = useRef<InstanceType<B> | null>(null);
-
-  // Initialize or get the bloc instance ONCE using useMemo based on the effective ID
-  // This avoids re-running Blac.getBloc on every render.
-  useMemo(() => {
-    blocRef.current = Blac.getBloc(bloc, {
-      id: effectiveBlocId,
-      props,
-      instanceRef: rid, // Pass component ID for consumer tracking
-    });
-  }, [bloc, effectiveBlocId, rid]); // Dependencies ensure this runs only when bloc type or ID changes
-
-  const resolvedBloc = blocRef.current;
+  // Subscribe to state changes using React's external store API
+  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(
+    externalStore.subscribe,
+    externalStore.getSnapshot,
+    externalStore.getServerSnapshot,
+  );
 
-  if (!resolvedBloc) {
-    // This should ideally not happen if Blac.getBloc works correctly
-    throw new Error(`useBloc: could not resolve bloc: ${bloc.name || bloc}`);
-  }
+  // Cache proxies to avoid recreation on every render
+  const stateProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
+  const classProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
 
-  // Update props ONLY if this hook instance created the bloc (or is the designated main instance)
-  // We rely on Blac.getBloc to handle initial props correctly during creation.
-  // Subsequent calls should not overwrite props.
-  // Check if this instanceRef matches the one stored on the bloc when it was created/first retrieved.
-  if (
-    rid === resolvedBloc._instanceRef &&
-    options?.props &&
-    Blac.instance.findRegisteredBlocInstance(bloc, effectiveBlocId) ===
-      resolvedBloc
-  ) {
-    // Avoid double-setting props if Blac.getBloc already set them during creation
-    if (resolvedBloc.props !== options.props) {
-      resolvedBloc.props = options.props;
+  const returnState = useMemo(() => {
+    if (typeof state !== 'object' || state === null) {
+      return state;
     }
-  }
-
-  // Configure dependency tracking for re-renders
-  const dependencyArray: BlocHookDependencyArrayFn<BlocState<InstanceType<B>>> =
-    useMemo(
-      () =>
-        (
-          newState,
-        ): ReturnType<
-          BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>
-        > => {
-          // Use custom dependency selector if provided
-          if (selector) {
-            return selector(newState);
-          }
-
-          // Fall back to bloc's default dependency selector if available
-          if (resolvedBloc.defaultDependencySelector) {
-            return resolvedBloc.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: string[] = [];
-          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 resolvedBloc) {
-              try {
-                const value = resolvedBloc[key as keyof InstanceType<B>];
-                switch (typeof value) {
-                  case 'function':
-                    continue;
-                  default:
-                    usedClassValues.push(value);
-                    continue;
-                }
-              } catch (error) {
-                Blac.instance.log('useBloc Error', error);
-              }
-            }
-          }
 
-          setTimeout(() => {
-            instanceKeys.current = new Set();
-            instanceClassPropKeys.current = new Set();
-          });
-
-          return [usedStateValues, usedClassValues];
+    // Check cache first
+    let proxy = stateProxyCache.current.get(state);
+    if (!proxy) {
+      proxy = new Proxy(state, {
+        get(target, prop) {
+          usedKeys.current.add(prop as string);
+          const value = target[prop as keyof typeof target];
+          return value;
         },
-      [],
-    );
-
-  // Set up external store subscription for state updates
-  const store = useMemo(
-    () => externalBlocStore(resolvedBloc, dependencyArray, rid),
-    [resolvedBloc, rid],
-  ); // dependencyArray removed as it changes frequently
-
-  // Subscribe to state changes using React's external store API
-  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(
-    store.subscribe,
-    store.getSnapshot,
-    store.getServerSnapshot,
-  );
-
-  // Create a proxy for state to track property access
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const returnState: BlocState<InstanceType<B>> = useMemo(() => {
-    try {
-      if (typeof state === 'object') {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return new Proxy(state as any, {
-          get(_, prop) {
-            instanceKeys.current.add(prop as string);
-            usedKeys.current.add(prop as string);
-            const value = state[prop as keyof typeof state];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-            return value;
-          },
-        });
-      }
-    } catch (error) {
-      Blac.instance.log('useBloc Error', error);
+        // 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 state;
+    return proxy;
   }, [state]);
 
-  // Create a proxy for the bloc instance to track property access
   const returnClass = useMemo(() => {
-    return new Proxy(resolvedBloc, {
-      get(_, prop) {
-        const value = resolvedBloc[prop as keyof InstanceType<B>];
-        // Track which class properties are accessed (excluding methods)
-        if (typeof value !== 'function') {
-          instanceClassPropKeys.current.add(prop as string);
-        }
-        return value;
-      },
-    });
-  }, [resolvedBloc]);
+    if (!instance.current) {
+      return null;
+    }
 
-  // Clean up tracked keys after each render
-  useLayoutEffect(() => {
-    // inherit the keys from the previous render
-    usedKeys.current = new Set(instanceKeys.current);
-    usedClassPropKeys.current = new Set(instanceClassPropKeys.current);
-  }, [renderInstance]);
+    // Check cache first
+    let proxy = classProxyCache.current.get(instance.current);
+    if (!proxy) {
+      proxy = new Proxy(instance.current, {
+        get(target, prop) {
+          if (!target) {
+            return null;
+          }
+          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]);
 
   // Set up bloc lifecycle management
   useEffect(() => {
-    const currentBlocInstance = blocRef.current; // Capture instance for cleanup
-    if (!currentBlocInstance) return;
-
-    currentBlocInstance._addConsumer(rid);
+    const currentInstance = instance.current;
+    if (!currentInstance) return;
+    
+    currentInstance._addConsumer(rid);
 
     // Call onMount callback if provided
-    options?.onMount?.(currentBlocInstance);
+    options?.onMount?.(currentInstance);
 
     // Cleanup: remove this component as a consumer using the captured instance
     return () => {
-      options?.onUnmount?.(currentBlocInstance);
-      currentBlocInstance._removeConsumer(rid);
+      if (!currentInstance) {
+        return;
+      }
+      options?.onUnmount?.(currentInstance);
+      currentInstance._removeConsumer(rid);
     };
-  }, [bloc, rid]); // Do not add options.onMount to deps, it will cause a loop
+  }, [instance.current?.uid, rid]); // Use UID to ensure we re-run when instance changes
 
-  return [returnState, returnClass];
+  return [returnState as BlocState<InstanceType<B>>, returnClass as InstanceType<B>];
 }

package/src/useExternalBlocStore.ts

@@ -0,0 +1,197 @@
+import { Blac, BlacObserver, BlocBase, BlocBaseAbstract, BlocConstructor, BlocHookDependencyArrayFn, BlocState } 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>>;
+
+  /**
+   * 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>>;
+}
+
+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>>;
+  rid: string;
+}
+
+/**
+ * Creates an external store that wraps a Bloc instance, providing a React-compatible interface
+ * for subscribing to and accessing bloc state.
+ */
+const 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 crypto.randomUUID();
+  }, []);
+
+  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());
+
+  const getBloc = useCallback(() => {
+    return Blac.getBloc(bloc, {
+      id: effectiveBlocId,
+      props,
+      instanceRef: rid
+    });
+  }, [bloc, props]);
+
+  const blocInstance = useRef<InstanceType<B>>(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: string[] = [];
+          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);
+              }
+            }
+          }
+
+          return [usedStateValues, usedClassValues];
+        },
+      [],
+    );
+
+  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
+        }
+
+        // Use a flag to prevent multiple resets during the same listener execution
+        let isResetting = false;
+
+        const observer: BlacObserver<BlocState<InstanceType<B>>> = {
+          fn: () => {
+            try {
+              if (!isResetting) {
+                isResetting = true;
+                usedKeys.current = new Set();
+                usedClassPropKeys.current = new Set();
+                isResetting = false;
+              }
+
+              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,
+              });
+            }
+          },
+          // 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();
+        };
+      },
+      // Return an immutable snapshot of the current bloc state
+      getSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current?.state || ({} as BlocState<InstanceType<B>>),
+      // Server snapshot mirrors the client snapshot in this implementation
+      getServerSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current?.state || ({} as BlocState<InstanceType<B>>),
+    }
+  }, [blocInstance.current?.uid]); // Re-create store when instance changes
+
+  return {
+    usedKeys,
+    usedClassPropKeys,
+    externalStore: state,
+    instance: blocInstance,
+    rid,
+  };
+};
+
+export default useExternalBlocStore;

package/src/externalBlocStore.ts

@@ -1,93 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { BlocBase, BlocConstructor, BlocHookDependencyArrayFn, BlocState } from '@blac/core';
-
-/**
- * Interface defining an external store that can be used to subscribe to and access bloc state.
- * This interface follows the React external store pattern for state management.
- * 
- * @template B - The type of the Bloc instance
- * @template S - The type of the Bloc state
- */
-export interface ExternalStore<
-  B extends InstanceType<BlocConstructor<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<B>) => void) => () => void;
-
-  /**
-   * Gets the current snapshot of the store state.
-   * @returns The current state of the store
-   */
-  getSnapshot: () => BlocState<B>;
-
-  /**
-   * 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<B>;
-}
-
-/**
- * Creates an external store that wraps a Bloc instance, providing a React-compatible interface
- * for subscribing to and accessing bloc state.
- * 
- * @template B - The type of the Bloc instance
- * @template S - The type of the Bloc state
- * @param bloc - The Bloc instance to wrap
- * @param dependencyArray - Function that returns an array of dependencies for the subscription
- * @param rid - Unique identifier for the subscription
- * @returns An ExternalStore instance that provides methods to subscribe to and access bloc state
- */
-const externalBlocStore = <
-  B extends InstanceType<BlocConstructor<any>>
->(
-  resolvedBloc: B,
-  dependencyArray: BlocHookDependencyArrayFn<BlocState<B>>,
-  rid: string,
-): ExternalStore<B> => {
-  // TODO: Revisit this type assertion. Ideally, 'resolvedBloc' should conform to a type
-  // that guarantees '_observer' and 'state' properties without needing 'as unknown as ...'.
-  // This might require adjustments in the core @blac/core types.
-  const asBlocBase = resolvedBloc as unknown as BlocBase<BlocState<B>>;
-  return {
-    subscribe: (listener: (state: BlocState<B>) => void) => {
-      // Subscribe to the bloc's observer with the provided listener function
-      // This will trigger the callback whenever the bloc's state changes
-      const unSub = asBlocBase._observer.subscribe({
-        fn: () => {
-          try {
-            listener(asBlocBase.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,
-              resolvedBloc,
-              dependencyArray,
-            });
-          }
-        },
-        // Pass the dependency array to control when the subscription is updated
-        dependencyArray,
-        // Use the provided id to identify this subscription
-        id: rid,
-      });
-
-      // Return an unsubscribe function that can be called to clean up the subscription
-      return () => {
-        unSub();
-      };
-    },
-    // Return an immutable snapshot of the current bloc state
-    getSnapshot: (): BlocState<B> => asBlocBase.state,
-    // Server snapshot mirrors the client snapshot in this implementation
-    getServerSnapshot: (): BlocState<B> => asBlocBase.state,
-  };
-};
-
-export default externalBlocStore;