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

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 x=require("@blac/core"),n=require("react"),I=(d,t)=>{const{id:f,props:S,selector:b}=t??{},r=n.useMemo(()=>crypto.randomUUID(),[]),h=d.isolated?r:f,i=n.useRef(new Set),o=n.useRef(new Set),a=n.useCallback(()=>x.Blac.getBloc(d,{id:h,props:S,instanceRef:r}),[d,S]),e=n.useRef(a()),l=n.useMemo(()=>c=>{const u=e.current;if(!u)return[];if(b)return b(c);if(u.defaultDependencySelector)return u.defaultDependencySelector(c);if(typeof c!="object")return[[c]];const v=[];for(const y of i.current)y in c&&v.push(c[y]);const g=[];for(const y of o.current)if(y in u)try{const m=u[y];switch(typeof m){case"function":continue;default:g.push(m);continue}}catch(m){x.Blac.instance.log("useBloc Error",m)}return[v,g]},[]),M=n.useMemo(()=>({subscribe:c=>{const u={fn:()=>{try{i.current=new Set,o.current=new Set,c(e.current.state)}catch(g){console.error({e:g,blocInstance:e,dependencyArray:l})}},dependencyArray:l,id:r};x.Blac.activateBloc(e.current);const v=e.current._observer.subscribe(u);return()=>{v()}},getSnapshot:()=>e.current.state,getServerSnapshot:()=>e.current.state}),[]);return{usedKeys:i,usedClassPropKeys:o,externalStore:M,instance:e,rid:r}},C=I;function E(d,t){var o;const{externalStore:f,usedKeys:S,usedClassPropKeys:b,instance:r,rid:B}=C(d,t),s=n.useSyncExternalStore(f.subscribe,f.getSnapshot,f.getServerSnapshot),h=n.useMemo(()=>typeof s=="object"?new Proxy(s,{get(a,e){return S.current.add(e),s[e]}}):s,[s]),i=n.useMemo(()=>new Proxy(r.current,{get(a,e){if(!r.current)return null;const l=r.current[e];return typeof l!="function"&&b.current.add(e),l}}),[(o=r.current)==null?void 0:o.uid]);return n.useEffect(()=>{var a;return r.current._addConsumer(B),(a=t==null?void 0:t.onMount)==null||a.call(t,r.current),()=>{var e;r.current&&((e=t==null?void 0:t.onUnmount)==null||e.call(t,r.current),r.current._removeConsumer(B))}},[r.current,B]),[h,i]}exports.externalBlocStore=C;exports.useBloc=E;
 //# 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/externalBlocStore.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 * \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 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 observer: BlacObserver<BlocState<InstanceType<B>>> = {\n          fn: () => {\n            try {\n              usedKeys.current = new Set();\n              usedClassPropKeys.current = new Set();\n\n              listener(blocInstance.current.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,\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(blocInstance.current);\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 = blocInstance.current._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,\n      // Server snapshot mirrors the client snapshot in this implementation\n      getServerSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current.state,\n    }\n  }, []);\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  useSyncExternalStore\n} from 'react';\nimport useExternalBlocStore 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\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  const returnState = useMemo(() => {\n    return typeof state === 'object'\n      ? new Proxy(state, {\n          get(_, prop) {\n            usedKeys.current.add(prop as string);\n            const value = state[prop as keyof typeof state];\n            return value;\n          },\n        })\n      : state;\n  }, [state]);\n\n  const returnClass = useMemo(() => {\n    return new Proxy(instance.current, {\n      get(_, prop) {\n        if (!instance.current) {\n          return null;\n        }\n        const value = instance.current[prop as keyof InstanceType<B>];\n        if (typeof value !== 'function') {\n          usedClassPropKeys.current.add(prop as string);\n        }\n        return value;\n      },\n    });\n  }, [instance.current?.uid]);\n\n  // Set up bloc lifecycle management\n  useEffect(() => {\n    instance.current._addConsumer(rid);\n\n    // Call onMount callback if provided\n    options?.onMount?.(instance.current);\n\n    // Cleanup: remove this component as a consumer using the captured instance\n    return () => {\n      if (!instance.current) {\n        return;\n      }\n      options?.onUnmount?.(instance.current);\n      instance.current._removeConsumer(rid);\n    };\n  }, [instance.current, rid]); // Do not add options.onMount to deps, it will cause a loop\n\n  return [returnState, returnClass];\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","observer","e","unSub","useExternalBlocStore$1","useBloc","externalStore","useSyncExternalStore","returnState","_","prop","returnClass","_a","useEffect"],"mappings":"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"}

package/dist/index.d.ts

@@ -15,6 +15,14 @@ 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.
@@ -26,33 +34,26 @@ declare interface BlocHookOptions<B extends BlocBase<any>> {
  * @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 +65,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,114 @@
-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 { Blac as x } from "@blac/core";
+import { useMemo as y, useRef as C, useCallback as E, useSyncExternalStore as _, useEffect as K } from "react";
+const P = (l, t) => {
+  const { id: f, props: S, selector: b } = t ?? {}, r = y(() => crypto.randomUUID(), []), h = l.isolated ? r : f, d = C(/* @__PURE__ */ new Set()), s = C(/* @__PURE__ */ new Set()), o = E(() => x.getBloc(l, {
+    id: h,
+    props: S,
+    instanceRef: r
+  }), [l, S]), e = C(o()), a = y(
+    () => (n) => {
+      const c = e.current;
+      if (!c)
+        return [];
+      if (b)
+        return b(n);
+      if (c.defaultDependencySelector)
+        return c.defaultDependencySelector(n);
+      if (typeof n != "object")
+        return [[n]];
+      const m = [];
+      for (const i of d.current)
+        i in n && m.push(n[i]);
+      const B = [];
+      for (const i of s.current)
+        if (i in c)
+          try {
+            const g = c[i];
+            switch (typeof g) {
+              case "function":
+                continue;
+              default:
+                B.push(g);
+                continue;
+            }
+          } catch (g) {
+            x.instance.log("useBloc Error", g);
+          }
+      return [m, B];
+    },
+    []
+  ), I = y(() => ({
+    subscribe: (n) => {
+      const c = {
         fn: () => {
           try {
-            h(o.state);
-          } catch (l) {
+            d.current = /* @__PURE__ */ new Set(), s.current = /* @__PURE__ */ new Set(), n(e.current.state);
+          } catch (B) {
             console.error({
-              e: l,
-              resolvedBloc: s,
-              dependencyArray: e
+              e: B,
+              blocInstance: e,
+              dependencyArray: a
             });
           }
         },
         // Pass the dependency array to control when the subscription is updated
-        dependencyArray: e,
+        dependencyArray: a,
         // Use the provided id to identify this subscription
-        id: y
-      });
+        id: r
+      };
+      x.activateBloc(e.current);
+      const m = e.current._observer.subscribe(c);
       return () => {
-        c();
+        m();
       };
     },
     // Return an immutable snapshot of the current bloc state
-    getSnapshot: () => o.state,
+    getSnapshot: () => e.current.state,
     // Server snapshot mirrors the client snapshot in this implementation
-    getServerSnapshot: () => o.state
+    getServerSnapshot: () => e.current.state
+  }), []);
+  return {
+    usedKeys: d,
+    usedClassPropKeys: s,
+    externalStore: I,
+    instance: e,
+    rid: r
   };
-}, 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];
-    },
-    []
-  ), 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);
+}, k = P;
+function j(l, t) {
+  var s;
+  const {
+    externalStore: f,
+    usedKeys: S,
+    usedClassPropKeys: b,
+    instance: r,
+    rid: v
+  } = k(l, t), u = _(
+    f.subscribe,
+    f.getSnapshot,
+    f.getServerSnapshot
+  ), h = y(() => typeof u == "object" ? new Proxy(u, {
+    get(o, e) {
+      return S.current.add(e), u[e];
     }
-    return f;
-  }, [f]), _ = a(() => new Proxy(t, {
-    get(r, n) {
-      const u = t[n];
-      return typeof u != "function" && g.current.add(n), u;
+  }) : u, [u]), d = y(() => new Proxy(r.current, {
+    get(o, e) {
+      if (!r.current)
+        return null;
+      const a = r.current[e];
+      return typeof a != "function" && b.current.add(e), a;
     }
-  }), [t]);
+  }), [(s = r.current) == null ? void 0 : s.uid]);
   return K(() => {
-    l.current = new Set(m.current), x.current = new Set(g.current);
-  }, [I]), P(() => {
-    var n;
-    const r = b.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);
-      };
-  }, [s, c]), [E, _];
+    var o;
+    return r.current._addConsumer(v), (o = t == null ? void 0 : t.onMount) == null || o.call(t, r.current), () => {
+      var e;
+      r.current && ((e = t == null ? void 0 : t.onUnmount) == null || e.call(t, r.current), r.current._removeConsumer(v));
+    };
+  }, [r.current, v]), [h, d];
 }
 export {
-  j as externalBlocStore,
-  L as useBloc
+  k as externalBlocStore,
+  j 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":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/externalBlocStore.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 * \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 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 observer: BlacObserver<BlocState<InstanceType<B>>> = {\n          fn: () => {\n            try {\n              usedKeys.current = new Set();\n              usedClassPropKeys.current = new Set();\n\n              listener(blocInstance.current.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,\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(blocInstance.current);\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 = blocInstance.current._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,\n      // Server snapshot mirrors the client snapshot in this implementation\n      getServerSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current.state,\n    }\n  }, []);\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  useSyncExternalStore\n} from 'react';\nimport useExternalBlocStore 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\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  const returnState = useMemo(() => {\n    return typeof state === 'object'\n      ? new Proxy(state, {\n          get(_, prop) {\n            usedKeys.current.add(prop as string);\n            const value = state[prop as keyof typeof state];\n            return value;\n          },\n        })\n      : state;\n  }, [state]);\n\n  const returnClass = useMemo(() => {\n    return new Proxy(instance.current, {\n      get(_, prop) {\n        if (!instance.current) {\n          return null;\n        }\n        const value = instance.current[prop as keyof InstanceType<B>];\n        if (typeof value !== 'function') {\n          usedClassPropKeys.current.add(prop as string);\n        }\n        return value;\n      },\n    });\n  }, [instance.current?.uid]);\n\n  // Set up bloc lifecycle management\n  useEffect(() => {\n    instance.current._addConsumer(rid);\n\n    // Call onMount callback if provided\n    options?.onMount?.(instance.current);\n\n    // Cleanup: remove this component as a consumer using the captured instance\n    return () => {\n      if (!instance.current) {\n        return;\n      }\n      options?.onUnmount?.(instance.current);\n      instance.current._removeConsumer(rid);\n    };\n  }, [instance.current, rid]); // Do not add options.onMount to deps, it will cause a loop\n\n  return [returnState, returnClass];\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","observer","e","unSub","useExternalBlocStore$1","useBloc","externalStore","useSyncExternalStore","returnState","_","prop","returnClass","_a","useEffect"],"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-3",
   "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-3"
   },
   "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/externalBlocStore.ts

@@ -1,35 +1,39 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { BlocBase, BlocConstructor, BlocHookDependencyArrayFn, BlocState } from '@blac/core';
+import { Blac, BlacObserver, BlocBase, BlocBaseAbstract, BlocConstructor, BlocHookDependencyArrayFn, BlocState } from '@blac/core';
+import { useCallback, useMemo, useRef } from 'react';
+import { BlocHookOptions } from './useBloc';
 
-/**
- * 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>>
+  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>>;
+}
+
+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;
 }
 
 /**
@@ -43,51 +47,146 @@ export interface ExternalStore<
  * @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>>
+const useExternalBlocStore = <
+  B extends BlocConstructor<BlocBase<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,
-            });
+  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];
         },
-        // 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,
+      [],
+    );
+
+  const state: ExternalStore<B> = useMemo(() => {
+    return {
+      subscribe: (listener: (state: BlocState<InstanceType<B>>) => void) => {
+        const observer: BlacObserver<BlocState<InstanceType<B>>> = {
+          fn: () => {
+            try {
+              usedKeys.current = new Set();
+              usedClassPropKeys.current = new Set();
+
+              listener(blocInstance.current.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,
+                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(blocInstance.current);
+
+        // Subscribe to the bloc's observer with the provided listener function
+        // This will trigger the callback whenever the bloc's state changes
+        const unSub = blocInstance.current._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,
+      // Server snapshot mirrors the client snapshot in this implementation
+      getServerSnapshot: (): BlocState<InstanceType<B>> => blocInstance.current.state,
+    }
+  }, []);
+
+  return {
+    usedKeys,
+    usedClassPropKeys,
+    externalStore: state,
+    instance: blocInstance,
+    rid,
   };
 };
 
-export default externalBlocStore;
+export default useExternalBlocStore;

package/src/index.ts

@@ -1,4 +1,4 @@
-import externalBlocStore from './externalBlocStore';
+import useExternalBlocStore from './externalBlocStore';
 import useBloc from './useBloc';
 
-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,10 @@ import {
 } from '@blac/core';
 import {
   useEffect,
-  useLayoutEffect,
   useMemo,
-  useRef,
-  useSyncExternalStore,
+  useSyncExternalStore
 } from 'react';
-import externalBlocStore from './externalBlocStore';
+import useExternalBlocStore from './externalBlocStore';
 
 /**
  * Type definition for the return type of the useBloc hook
@@ -45,6 +39,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 +67,68 @@ 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;
-
-  // 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;
-
-  if (!resolvedBloc) {
-    // This should ideally not happen if Blac.getBloc works correctly
-    throw new Error(`useBloc: could not resolve bloc: ${bloc.name || bloc}`);
-  }
-
-  // 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;
-    }
-  }
-
-  // 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];
-        },
-      [],
-    );
-
-  // Set up external store subscription for state updates
-  const store = useMemo(
-    () => externalBlocStore(resolvedBloc, dependencyArray, rid),
-    [resolvedBloc, rid],
-  ); // dependencyArray removed as it changes frequently
+  // const base = bloc as unknown as BlocBaseAbstract;
+  // const isIsolated = base.isolated;
+  // const effectiveBlocId = isIsolated ? rid : blocId;
+  const {
+    externalStore,
+    usedKeys,
+    usedClassPropKeys,
+    instance,
+    rid,
+  } = useExternalBlocStore(bloc, options);
 
   // Subscribe to state changes using React's external store API
   const state = useSyncExternalStore<BlocState<InstanceType<B>>>(
-    store.subscribe,
-    store.getSnapshot,
-    store.getServerSnapshot,
+    externalStore.subscribe,
+    externalStore.getSnapshot,
+    externalStore.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, {
+  const returnState = useMemo(() => {
+    return typeof state === 'object'
+      ? new Proxy(state, {
           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);
-    }
-    return state;
+        })
+      : state;
   }, [state]);
 
-  // Create a proxy for the bloc instance to track property access
   const returnClass = useMemo(() => {
-    return new Proxy(resolvedBloc, {
+    return new Proxy(instance.current, {
       get(_, prop) {
-        const value = resolvedBloc[prop as keyof InstanceType<B>];
-        // Track which class properties are accessed (excluding methods)
+        if (!instance.current) {
+          return null;
+        }
+        const value = instance.current[prop as keyof InstanceType<B>];
         if (typeof value !== 'function') {
-          instanceClassPropKeys.current.add(prop as string);
+          usedClassPropKeys.current.add(prop as string);
         }
         return value;
       },
     });
-  }, [resolvedBloc]);
-
-  // 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]);
+  }, [instance.current?.uid]);
 
   // Set up bloc lifecycle management
   useEffect(() => {
-    const currentBlocInstance = blocRef.current; // Capture instance for cleanup
-    if (!currentBlocInstance) return;
-
-    currentBlocInstance._addConsumer(rid);
+    instance.current._addConsumer(rid);
 
     // Call onMount callback if provided
-    options?.onMount?.(currentBlocInstance);
+    options?.onMount?.(instance.current);
 
     // Cleanup: remove this component as a consumer using the captured instance
     return () => {
-      options?.onUnmount?.(currentBlocInstance);
-      currentBlocInstance._removeConsumer(rid);
+      if (!instance.current) {
+        return;
+      }
+      options?.onUnmount?.(instance.current);
+      instance.current._removeConsumer(rid);
     };
-  }, [bloc, rid]); // Do not add options.onMount to deps, it will cause a loop
+  }, [instance.current, rid]); // Do not add options.onMount to deps, it will cause a loop
 
   return [returnState, returnClass];
 }