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

package/README.md

@@ -10,7 +10,8 @@ A powerful React integration for the Blac state management library, providing se
 - 🎨 TypeScript support with full type inference
 - ⚡️ Efficient state management with minimal boilerplate
 - 🔄 Support for isolated and shared bloc instances
-- 🎯 Custom dependency selectors for precise control
+- 🎯 Custom dependency selectors with access to state, previous state, and instance
+- 🚀 Optimized re-rendering with intelligent snapshot comparison
 
 ## Important: Arrow Functions Required
 
@@ -83,13 +84,13 @@ const [state, bloc] = useBloc(YourBloc, {
   id: 'custom-id', // Optional: Custom identifier for the bloc
   props: { /* ... */ }, // Optional: Props to pass to the bloc
   onMount: (bloc) => { /* ... */ }, // Optional: Callback when bloc is mounted (similar to useEffect(<>, []))
-  dependencySelector: (newState, oldState) => [/* ... */], // Optional: Custom dependency tracking
+  selector: (currentState, previousState, instance) => [/* ... */], // Optional: Custom dependency tracking
 });
 ```
 
-### Dependency Tracking
+### Automatic Dependency Tracking
 
-The hook automatically tracks which state properties are accessed in your component and only triggers re-renders when those specific properties change:
+The hook automatically tracks which state properties and bloc instance properties are accessed in your component and only triggers re-renders when those specific values change:
 
 ```tsx
 function UserProfile() {
@@ -100,30 +101,75 @@ function UserProfile() {
 }
 ```
 
-This also works for getters on the Bloc or Cubit class:
+This also works for getters and computed properties on the Bloc or Cubit class:
 
 ```tsx
 function UserProfile() {
-  const [, userBloc] = useBloc(UserBloc);
+  const [state, userBloc] = useBloc(UserBloc);
 
-  // Only re-renders when the return value from the getter formattedName changes
-  return <h1>{userBloc.formattedName}</h1>;
+  // Only re-renders when:
+  // - state.firstName changes, OR
+  // - state.lastName changes (because the getter accesses these properties)
+  return <h1>{userBloc.fullName}</h1>; // Assuming fullName is a getter
 }
 ```
 
+#### How It Works
+
+The dependency tracking system uses JavaScript Proxies to monitor property access during component renders:
+
+1. **State Properties**: When you access `state.propertyName`, it's automatically tracked
+2. **Instance Properties**: When you access `bloc.computedValue`, it's automatically tracked  
+3. **Intelligent Comparison**: The system separately tracks state dependencies and instance dependencies to handle edge cases where properties are dynamically added/removed
+4. **Optimized Updates**: Components only re-render when tracked dependencies actually change their values
+
 ### Custom Dependency Selector
 
-For more control over when your component re-renders, you can provide a custom dependency selector:
+For more control over when your component re-renders, you can provide a custom dependency selector. The selector function receives the current state, previous state, and bloc instance, and should return an array of values to track:
 
 ```tsx
 const [state, bloc] = useBloc(YourBloc, {
-  dependencySelector: (newState, oldState) => [
-    newState.specificField,
-    newState.anotherField
+  selector: (currentState, previousState, instance) => [
+    currentState.specificField,
+    currentState.anotherField,
+    instance.computedValue // You can also track computed properties from the bloc instance
   ]
 });
 ```
 
+The component will only re-render when any of the values in the returned array change (using `Object.is` comparison, similar to React's `useEffect` dependency array).
+
+#### Examples of Custom Selectors
+
+**Track only specific state properties:**
+```tsx
+const [state, userBloc] = useBloc(UserBloc, {
+  selector: (currentState) => [
+    currentState.name,
+    currentState.email
+  ] // Only re-render when name or email changes, ignore other properties
+});
+```
+
+**Track computed values:**
+```tsx
+const [state, shoppingCartBloc] = useBloc(ShoppingCartBloc, {
+  selector: (currentState, previousState, instance) => [
+    instance.totalPrice, // Computed getter
+    currentState.items.length // Number of items
+  ] // Only re-render when total price or item count changes
+});
+```
+
+**Compare with previous state:**
+```tsx
+const [state, chatBloc] = useBloc(ChatBloc, {
+  selector: (currentState, previousState) => [
+    currentState.messages.length > (previousState?.messages.length || 0) ? 'new-message' : 'no-change'
+  ] // Only re-render when new messages are added, not when existing messages change
+});
+```
+
 ## API Reference
 
 ### useBloc Hook
@@ -140,7 +186,7 @@ function useBloc<B extends BlocConstructor<BlocGeneric>>(
 - `id?: string` - Custom identifier for the bloc instance
 - `props?: InferPropsFromGeneric<B>` - Props to pass to the bloc
 - `onMount?: (bloc: B) => void` - Callback function invoked when the react component (the consumer) is connected to the bloc instance
-- `dependencySelector?: BlocHookDependencyArrayFn<B>` - Function to select dependencies for re-renders
+- `selector?: (currentState: BlocState<InstanceType<B>>, previousState: BlocState<InstanceType<B>> | undefined, instance: InstanceType<B>) => unknown[]` - Function to select dependencies for re-renders
 
 ## Best Practices
 
@@ -182,7 +228,10 @@ function useBloc<B extends BlocConstructor<BlocGeneric>>(
    }
    ```
 
-3. **Optimize Re-renders**: Let the hook track dependencies automatically unless you have a specific need for custom dependency tracking.
+3. **Choose the Right Dependency Strategy**: 
+   - **Use automatic tracking** (default) for most cases - it's efficient and requires no setup
+   - **Use custom selectors** when you need complex logic, computed comparisons, or want to ignore certain property changes
+   - **Avoid custom selectors** for simple property access - automatic tracking is more efficient
 
 4. **Type Safety**: Take advantage of TypeScript's type inference for better development experience and catch errors early.
 

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),x=require("@blac/core"),E=(u,s)=>{var r;const{id:h,props:p,selector:B}=s??{},c=n.useMemo(()=>x.generateUUID(),[]),m=u.isolated?c:h,l=n.useRef(new Set),f=n.useRef(new Set),y=n.useCallback(()=>x.Blac.getBloc(u,{id:m,props:p,instanceRef:c}),[u,m,p,c]),o=n.useRef(y());n.useMemo(()=>{o.current=y()},[y]);const S=n.useMemo(()=>e=>{const t=o.current;if(!t)return[];if(B)return B(e);if(t.defaultDependencySelector)return t.defaultDependencySelector(e);if(typeof e!="object")return[[e]];const i=[];for(const d of l.current)d in e&&i.push(e[d]);const v=[];for(const d of f.current)if(d in t)try{const g=t[d];switch(typeof g){case"function":continue;default:v.push(g);continue}}catch(g){x.Blac.instance.log("useBloc Error",g)}return l.current.size===0?f.current.size>0?[v]:[[]]:[i,v]},[]),w=n.useMemo(()=>({subscribe:e=>{const t=o.current;if(!t)return()=>{};const i={fn:()=>{try{l.current=new Set,f.current=new Set,e(t.state)}catch(d){console.error({e:d,blocInstance:t,dependencyArray:S})}},dependencyArray:S,id:c};x.Blac.activateBloc(t);const v=t._observer.subscribe(i);return()=>{v()}},getSnapshot:()=>{const e=o.current;return e?e.state:{}},getServerSnapshot:()=>{const e=o.current;return e?e.state:{}}}),[(r=o.current)==null?void 0:r.uid]);return{usedKeys:l,usedClassPropKeys:f,externalStore:w,instance:o,rid:c}};function I(u,s){var S,w;const{externalStore:h,usedKeys:p,usedClassPropKeys:B,instance:c,rid:b}=E(u,s),a=n.useSyncExternalStore(h.subscribe,()=>{const r=h.getSnapshot();if(r===void 0)throw new Error(`[useBloc] State snapshot is undefined for bloc ${u.name}. Bloc may not be properly initialized.`);return r},h.getServerSnapshot?()=>{const r=h.getServerSnapshot();if(r===void 0)throw new Error(`[useBloc] Server state snapshot is undefined for bloc ${u.name}. Bloc may not be properly initialized.`);return r}:void 0),m=n.useRef(new WeakMap),l=n.useRef(new WeakMap),f=n.useMemo(()=>{if(typeof a!="object"||a===null)return a;let r=m.current.get(a);return r||(r=new Proxy(a,{get(e,t){return setTimeout(()=>{p.current.add(t)},0),e[t]},has(e,t){return t in e},ownKeys(e){return Reflect.ownKeys(e)},getOwnPropertyDescriptor(e,t){return Reflect.getOwnPropertyDescriptor(e,t)}}),m.current.set(a,r)),r},[a]),y=n.useMemo(()=>{if(!c.current)throw new Error(`[useBloc] Bloc instance is null for ${u.name}. This should never happen - bloc instance must be defined.`);let r=l.current.get(c.current);return r||(r=new Proxy(c.current,{get(e,t){if(!e)throw new Error(`[useBloc] Bloc target is null for ${u.name}. This should never happen - bloc target must be defined.`);const i=e[t];return typeof i!="function"&&B.current.add(t),i}}),l.current.set(c.current,r)),r},[(S=c.current)==null?void 0:S.uid]),o=n.useRef({});if(n.useEffect(()=>{var e;const r=c.current;if(r)return r._addConsumer(b,o.current),(e=s==null?void 0:s.onMount)==null||e.call(s,r),()=>{var t;r&&((t=s==null?void 0:s.onUnmount)==null||t.call(s,r),r._removeConsumer(b))}},[(w=c.current)==null?void 0:w.uid,b]),f===void 0)throw new Error(`[useBloc] State is undefined for ${u.name}. This should never happen - state must be defined.`);if(!y)throw new Error(`[useBloc] Instance is null for ${u.name}. This should never happen - instance must be defined.`);return[f,y]}exports.externalBlocStore=E;exports.useBloc=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("@blac/core"),e=require("react");function I(c,t){const d=e.useRef(0);d.current++;const l=e.useRef({}),r=e.useMemo(()=>new S.BlacAdapter({componentRef:l,blocConstructor:c},t),[]);r.resetConsumerTracking();const s=e.useRef(0);e.useEffect(()=>{s.current++,r.options=t},[t]);const R=e.useRef(0);e.useEffect(()=>(R.current++,r.mount(),()=>{r.unmount()}),[r.blocInstance]);const m=e.useRef(0),n=e.useMemo(()=>(m.current++,o=>{const y=r.createSubscription({onChange:()=>{o()}});return()=>{y()}}),[r.blocInstance]),u=e.useRef(0),a=e.useRef(0),f=e.useSyncExternalStore(n,()=>(u.current++,r.blocInstance.state),()=>{const o=r.blocInstance;return a.current++,o.state}),b=e.useRef(0),i=e.useMemo(()=>(b.current++,r.getProxyState(f)),[f]),g=e.useRef(0),B=e.useMemo(()=>(g.current++,r.getProxyBlocInstance()),[r.blocInstance]);return e.useEffect(()=>{r.updateLastNotified(l.current)}),[i,B]}function x(c,t={}){const d=e.useRef(`external-${S.generateUUID()}`),l=e.useRef(new Set),r=e.useRef(new Set),s=e.useRef(null),R=e.useMemo(()=>{const n=S.Blac.getInstance();if(c.constructor.isolated||c.isolated){const a=new c(t==null?void 0:t.props),f=(t==null?void 0:t.id)||`${c.name}_${S.generateUUID()}`;return a._updateId(f),n.activateBloc(a),a}return n.getBloc(c,{id:t==null?void 0:t.id,props:t==null?void 0:t.props})},[c,t==null?void 0:t.id]),m=e.useMemo(()=>({getSnapshot:()=>{const n=s.current;return n?n.state:void 0},subscribe:n=>{const u=s.current;if(!u)return()=>{};const a=(b,i)=>{try{l.current.clear(),r.current.clear(),t.selector&&u&&t.selector(b,i,u),n.length>0?n(b):n()}catch(g){console.error("Listener error in useExternalBlocStore:",g)}};return u._observer.subscribe({id:d.current,fn:a})},getServerSnapshot:()=>{const n=s.current;return n?n.state:void 0}}),[]);return s.current=R,{externalStore:m,instance:s,usedKeys:l,usedClassPropKeys:r,rid:d.current}}exports.useBloc=I;exports.useExternalBlocStore=x;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/useExternalBlocStore.ts","../src/useBloc.tsx"],"sourcesContent":["import { Blac, BlacObserver, BlocBase, BlocBaseAbstract, BlocConstructor, BlocHookDependencyArrayFn, BlocState, generateUUID } 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>> | undefined;\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>> | undefined;\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 generateUUID();\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, effectiveBlocId, props, rid]);\n\n  const blocInstance = useRef<InstanceType<B>>(getBloc());\n\n  // Update the instance when dependencies change\n  useMemo(() => {\n    blocInstance.current = getBloc();\n  }, [getBloc]);\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: unknown[] = [];\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          // If no state properties have been accessed, return empty dependencies to prevent re-renders\n          // Class properties can change independently of state\n          if (usedKeys.current.size === 0) {\n            return usedClassPropKeys.current.size > 0 ? [usedClassValues] : [[]];\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        const observer: BlacObserver<BlocState<InstanceType<B>>> = {\n          fn: () => {\n            try {\n              // Reset dependency tracking before listener is called \n              // This ensures we only track properties accessed during the current render\n              usedKeys.current = new Set();\n              usedClassPropKeys.current = new Set();\n\n              // Only trigger listener if there are actual subscriptions\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>> | undefined => {\n        const instance = blocInstance.current;\n        if (!instance) {\n          return {} as BlocState<InstanceType<B>>;\n        }\n        return instance.state;\n      },\n      // Server snapshot mirrors the client snapshot in this implementation\n      getServerSnapshot: (): BlocState<InstanceType<B>> | undefined => {\n        const instance = blocInstance.current;\n        if (!instance) {\n          return {} as BlocState<InstanceType<B>>;\n        }\n        return instance.state;\n      },\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 * @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  // 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    () => {\n      const snapshot = externalStore.getSnapshot();\n      if (snapshot === undefined) {\n        throw new Error(`[useBloc] State snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`);\n      }\n      return snapshot;\n    },\n    externalStore.getServerSnapshot ? () => {\n      const serverSnapshot = externalStore.getServerSnapshot!();\n      if (serverSnapshot === undefined) {\n        throw new Error(`[useBloc] Server state snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`);\n      }\n      return serverSnapshot;\n    } : undefined,\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          // Use setTimeout to defer dependency tracking until after render\n          setTimeout(() => {\n            usedKeys.current.add(prop as string);\n          }, 0);\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      throw new Error(`[useBloc] Bloc instance is null for ${bloc.name}. This should never happen - bloc instance must be defined.`);\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            throw new Error(`[useBloc] Bloc target is null for ${bloc.name}. This should never happen - bloc target must be defined.`);\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  // Create a stable reference object for this component\n  const componentRef = useRef({});\n\n  // Set up bloc lifecycle management\n  useEffect(() => {\n    const currentInstance = instance.current;\n    if (!currentInstance) return;\n    \n    // Pass component reference for proper memory management\n    currentInstance._addConsumer(rid, componentRef.current);\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  // Ensure state and instance are never undefined/null\n  if (returnState === undefined) {\n    throw new Error(`[useBloc] State is undefined for ${bloc.name}. This should never happen - state must be defined.`);\n  }\n  if (!returnClass) {\n    throw new Error(`[useBloc] Instance is null for ${bloc.name}. This should never happen - instance must be defined.`);\n  }\n\n  // Safe return with proper typing\n  return [returnState, returnClass] as [BlocState<InstanceType<B>>, InstanceType<B>];\n}\n"],"names":["useExternalBlocStore","bloc","options","blocId","props","selector","rid","useMemo","generateUUID","effectiveBlocId","usedKeys","useRef","usedClassPropKeys","getBloc","useCallback","Blac","blocInstance","dependencyArray","newState","instance","usedStateValues","key","usedClassValues","value","error","state","listener","currentInstance","observer","e","unSub","_a","useBloc","externalStore","useSyncExternalStore","snapshot","serverSnapshot","stateProxyCache","classProxyCache","returnState","proxy","target","prop","returnClass","componentRef","useEffect","_b"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../src/useBloc.ts","../src/useExternalBlocStore.ts"],"sourcesContent":["import {\n  AdapterOptions,\n  BlacAdapter,\n  BlocBase,\n  BlocConstructor,\n  BlocState,\n} from '@blac/core';\nimport { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\n\n/**\n * Type definition for the return type of the useBloc hook\n */\ntype HookTypes<B extends BlocConstructor<BlocBase<any>>> = [\n  BlocState<InstanceType<B>>,\n  InstanceType<B>,\n];\n\n/**\n * React hook for integrating with Blac state management\n */\nfunction useBloc<B extends BlocConstructor<BlocBase<any>>>(\n  blocConstructor: B,\n  options?: AdapterOptions<InstanceType<B>>,\n): HookTypes<B> {\n  // Create a unique identifier for this hook instance\n  const renderCount = useRef(0);\n  renderCount.current++;\n\n  const componentRef = useRef<object>({});\n\n  // Track adapter creation\n  const adapter = useMemo(() => {\n    const newAdapter = new BlacAdapter<B>(\n      {\n        componentRef: componentRef,\n        blocConstructor,\n      },\n      options,\n    );\n    return newAdapter;\n  }, []);\n\n  // Reset tracking at the start of each render to ensure we only track\n  // properties accessed during the current render\n  adapter.resetConsumerTracking();\n\n  // Track options changes\n  const optionsChangeCount = useRef(0);\n  useEffect(() => {\n    optionsChangeCount.current++;\n    adapter.options = options;\n  }, [options]);\n\n  // Register as consumer and handle lifecycle\n  const mountEffectCount = useRef(0);\n  useEffect(() => {\n    mountEffectCount.current++;\n    adapter.mount();\n\n    return () => {\n      adapter.unmount();\n    };\n  }, [adapter.blocInstance]);\n\n  // Subscribe to state changes using useSyncExternalStore\n  const subscribeMemoCount = useRef(0);\n  const subscribe = useMemo(() => {\n    subscribeMemoCount.current++;\n    let subscriptionCount = 0;\n\n    return (onStoreChange: () => void) => {\n      subscriptionCount++;\n      const unsubscribe = adapter.createSubscription({\n        onChange: () => {\n          onStoreChange();\n        },\n      });\n\n      return () => {\n        unsubscribe();\n      };\n    };\n  }, [adapter.blocInstance]);\n\n  const snapshotCount = useRef(0);\n  const serverSnapshotCount = useRef(0);\n\n  const rawState: BlocState<InstanceType<B>> = useSyncExternalStore(\n    subscribe,\n    // Get snapshot\n    () => {\n      snapshotCount.current++;\n      const bloc = adapter.blocInstance;\n      const state = bloc.state;\n      return state;\n    },\n    // Get server snapshot (same as client for now)\n    () => {\n      const bloc = adapter.blocInstance;\n      serverSnapshotCount.current++;\n      const state = bloc.state;\n      return state;\n    },\n  );\n\n  // Create proxies for fine-grained tracking (if enabled)\n  const stateMemoCount = useRef(0);\n  const finalState = useMemo(() => {\n    stateMemoCount.current++;\n    const proxyState = adapter.getProxyState(rawState);\n    return proxyState;\n  }, [rawState]);\n\n  const blocMemoCount = useRef(0);\n  const finalBloc = useMemo(() => {\n    blocMemoCount.current++;\n    const proxyBloc = adapter.getProxyBlocInstance();\n    return proxyBloc;\n  }, [adapter.blocInstance]);\n\n  // Mark consumer as rendered after each render\n  useEffect(() => {\n    adapter.updateLastNotified(componentRef.current);\n  });\n\n  // Log final hook return\n  return [finalState, finalBloc];\n}\n\nexport default useBloc;\n","import {\n  Blac,\n  BlocBase,\n  BlocConstructor,\n  BlocState,\n  InferPropsFromGeneric,\n  generateUUID,\n} from '@blac/core';\nimport { useCallback, useMemo, useRef } from 'react';\n\ninterface ExternalStoreOptions<B extends BlocBase<any>> {\n  id?: string;\n  props?: InferPropsFromGeneric<B>;\n  selector?: (\n    currentState: BlocState<B>,\n    previousState: BlocState<B>,\n    instance: B,\n  ) => any[];\n}\n\ninterface ExternalStore<T> {\n  getSnapshot: () => T | undefined;\n  subscribe: (listener: () => void) => () => void;\n  getServerSnapshot?: () => T | undefined;\n}\n\ninterface ExternalBlocStoreResult<B extends BlocBase<any>> {\n  externalStore: ExternalStore<BlocState<B>>;\n  instance: { current: B | null };\n  usedKeys: { current: Set<string> };\n  usedClassPropKeys: { current: Set<string> };\n  rid: string;\n}\n\n/**\n * Hook for using an external bloc store\n * Provides low-level access to bloc instances for use with React's useSyncExternalStore\n */\nexport default function useExternalBlocStore<\n  B extends BlocConstructor<BlocBase<any>>,\n>(\n  blocConstructor: B,\n  options: ExternalStoreOptions<InstanceType<B>> = {},\n): ExternalBlocStoreResult<InstanceType<B>> {\n  const ridRef = useRef<string>(`external-${generateUUID()}`);\n  const usedKeysRef = useRef<Set<string>>(new Set());\n  const usedClassPropKeysRef = useRef<Set<string>>(new Set());\n  const instanceRef = useRef<InstanceType<B> | null>(null);\n\n  // Get or create bloc instance\n  const bloc = useMemo(() => {\n    const blac = Blac.getInstance();\n    const base = blocConstructor as unknown as BlocBase<any>;\n\n    // For isolated blocs, always create a new instance\n    if (\n      (base.constructor as any).isolated ||\n      (blocConstructor as any).isolated\n    ) {\n      const newBloc = new blocConstructor(options?.props) as InstanceType<B>;\n      const uniqueId =\n        options?.id || `${blocConstructor.name}_${generateUUID()}`;\n      newBloc._updateId(uniqueId);\n      blac.activateBloc(newBloc);\n      return newBloc;\n    }\n\n    // For shared blocs, use the existing getBloc logic\n    return blac.getBloc(blocConstructor, {\n      id: options?.id,\n      props: options?.props,\n    });\n  }, [blocConstructor, options?.id]);\n\n  // Create external store interface\n  const externalStore = useMemo<ExternalStore<BlocState<InstanceType<B>>>>(\n    () => ({\n      getSnapshot: () => {\n        const currentInstance = instanceRef.current;\n        return currentInstance ? currentInstance.state : undefined;\n      },\n      subscribe: (listener: () => void) => {\n        const currentInstance = instanceRef.current;\n        if (!currentInstance) {\n          // Return no-op unsubscribe if no instance\n          return () => {};\n        }\n\n        // Wrap listener to handle errors gracefully\n        const safeListener = (\n          newState: BlocState<InstanceType<B>>,\n          oldState: BlocState<InstanceType<B>>,\n        ) => {\n          try {\n            // Reset tracking keys on each listener call\n            usedKeysRef.current.clear();\n            usedClassPropKeysRef.current.clear();\n\n            // Call selector if provided\n            if (options.selector && currentInstance) {\n              options.selector(newState, oldState, currentInstance);\n            }\n\n            // Call listener with state if it expects it\n            if (listener.length > 0) {\n              (listener as any)(newState);\n            } else {\n              listener();\n            }\n          } catch (error) {\n            console.error('Listener error in useExternalBlocStore:', error);\n            // Don't rethrow to prevent breaking other listeners\n          }\n        };\n\n        const unsubscribe = currentInstance._observer.subscribe({\n          id: ridRef.current,\n          fn: safeListener,\n        });\n        return unsubscribe;\n      },\n      getServerSnapshot: () => {\n        const currentInstance = instanceRef.current;\n        return currentInstance ? currentInstance.state : undefined;\n      },\n    }),\n    [],\n  );\n\n  // Update instance ref\n  instanceRef.current = bloc;\n\n  return {\n    externalStore,\n    instance: instanceRef,\n    usedKeys: usedKeysRef,\n    usedClassPropKeys: usedClassPropKeysRef,\n    rid: ridRef.current,\n  };\n}\n"],"names":["useBloc","blocConstructor","options","renderCount","useRef","componentRef","adapter","useMemo","BlacAdapter","optionsChangeCount","useEffect","mountEffectCount","subscribeMemoCount","subscribe","onStoreChange","unsubscribe","snapshotCount","serverSnapshotCount","rawState","useSyncExternalStore","bloc","stateMemoCount","finalState","blocMemoCount","finalBloc","useExternalBlocStore","ridRef","generateUUID","usedKeysRef","usedClassPropKeysRef","instanceRef","blac","Blac","newBloc","uniqueId","externalStore","currentInstance","listener","safeListener","newState","oldState","error"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,57 +1,37 @@
+import { AdapterOptions } from '@blac/core';
 import { BlocBase } from '@blac/core';
 import { BlocConstructor } from '@blac/core';
-import { BlocHookDependencyArrayFn } from '@blac/core';
 import { BlocState } from '@blac/core';
 import { InferPropsFromGeneric } from '@blac/core';
 
-/**
- * Configuration options for the useBloc hook
- */
-declare interface BlocHookOptions<B extends BlocBase<any>> {
-    id?: string;
-    selector?: BlocHookDependencyArrayFn<BlocState<B>>;
-    props?: InferPropsFromGeneric<B>;
-    onMount?: (bloc: B) => void;
-    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>>;
+declare interface ExternalBlocStoreResult<B extends BlocBase<any>> {
+    externalStore: ExternalStore<BlocState<B>>;
+    instance: {
+        current: B | null;
+    };
+    usedKeys: {
+        current: Set<string>;
+    };
+    usedClassPropKeys: {
+        current: Set<string>;
+    };
     rid: string;
 }
 
-/**
- * Creates an external store that wraps a Bloc instance, providing a React-compatible interface
- * for subscribing to and accessing bloc state.
- */
-export declare const externalBlocStore: <B extends BlocConstructor<BlocBase<any>>>(bloc: B, options: BlocHookOptions<InstanceType<B>> | undefined) => ExternalBlacStore<B>;
+declare interface ExternalStore<T> {
+    getSnapshot: () => T | undefined;
+    subscribe: (listener: () => void) => () => void;
+    getServerSnapshot?: () => T | undefined;
+}
 
-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<InstanceType<B>>) => void) => () => void;
-    /**
-     * Gets the current snapshot of the store state.
-     * @returns The current state of the store
-     */
-    getSnapshot: () => BlocState<InstanceType<B>> | undefined;
-    /**
-     * Gets the server snapshot of the store state.
-     * This is optional and defaults to the same value as getSnapshot.
-     * @returns The server state of the store
-     */
-    getServerSnapshot?: () => BlocState<InstanceType<B>> | undefined;
+declare interface ExternalStoreOptions<B extends BlocBase<any>> {
+    id?: string;
+    props?: InferPropsFromGeneric<B>;
+    selector?: (currentState: BlocState<B>, previousState: BlocState<B>, instance: B) => any[];
 }
 
 /**
  * Type definition for the return type of the useBloc hook
- * @template B - Bloc constructor type
  */
 declare type HookTypes<B extends BlocConstructor<BlocBase<any>>> = [
 BlocState<InstanceType<B>>,
@@ -59,30 +39,14 @@ InstanceType<B>
 ];
 
 /**
- * Default dependency selector that wraps the entire state in an array
- * @template T - State type
- * @returns {Array<Array<T>>} Dependency array containing the entire state
+ * React hook for integrating with Blac state management
  */
+export declare function useBloc<B extends BlocConstructor<BlocBase<any>>>(blocConstructor: B, options?: AdapterOptions<InstanceType<B>>): HookTypes<B>;
+
 /**
- * React hook for integrating with Blac state management
- *
- * This hook connects a React component to a Bloc state container, providing
- * automatic re-rendering when relevant state changes, dependency tracking,
- * and proper lifecycle management.
- *
- * @template B - Bloc constructor type
- * @template O - BlocHookOptions type
- * @param {B} bloc - Bloc constructor class
- * @param {O} [options] - Configuration options for the hook
- * @returns {HookTypes<B>} Tuple containing [state, bloc instance]
- *
- * @example
- * const [state, counterBloc] = useBloc(CounterBloc);
- * // Access state
- * console.log(state.count);
- * // Call bloc methods
- * counterBloc.increment();
+ * Hook for using an external bloc store
+ * Provides low-level access to bloc instances for use with React's useSyncExternalStore
  */
-export declare function useBloc<B extends BlocConstructor<BlocBase<any>>>(bloc: B, options?: BlocHookOptions<InstanceType<B>>): HookTypes<B>;
+export declare function useExternalBlocStore<B extends BlocConstructor<BlocBase<any>>>(blocConstructor: B, options?: ExternalStoreOptions<InstanceType<B>>): ExternalBlocStoreResult<InstanceType<B>>;
 
 export { }

package/dist/index.es.js

@@ -1,167 +1,98 @@
-import { useMemo as y, useRef as p, useCallback as I, useSyncExternalStore as C, useEffect as P } from "react";
-import { generateUUID as K, Blac as E } from "@blac/core";
-const $ = (c, n) => {
-  var r;
-  const { id: d, props: w, selector: b } = n ?? {}, s = y(() => K(), []), m = c.isolated ? s : d, i = p(/* @__PURE__ */ new Set()), l = p(/* @__PURE__ */ new Set()), h = I(() => E.getBloc(c, {
-    id: m,
-    props: w,
-    instanceRef: s
-  }), [c, m, w, s]), u = p(h());
-  y(() => {
-    u.current = h();
-  }, [h]);
-  const v = y(
-    () => (e) => {
-      const t = u.current;
-      if (!t)
-        return [];
-      if (b)
-        return b(e);
-      if (t.defaultDependencySelector)
-        return t.defaultDependencySelector(e);
-      if (typeof e != "object")
-        return [[e]];
-      const a = [];
-      for (const f of i.current)
-        f in e && a.push(e[f]);
-      const S = [];
-      for (const f of l.current)
-        if (f in t)
+import { BlacAdapter as C, generateUUID as g, Blac as w } from "@blac/core";
+import { useRef as n, useMemo as l, useEffect as B, useSyncExternalStore as v } from "react";
+function K(c, e) {
+  const f = n(0);
+  f.current++;
+  const d = n({}), t = l(() => new C(
+    {
+      componentRef: d,
+      blocConstructor: c
+    },
+    e
+  ), []);
+  t.resetConsumerTracking();
+  const s = n(0);
+  B(() => {
+    s.current++, t.options = e;
+  }, [e]);
+  const m = n(0);
+  B(() => (m.current++, t.mount(), () => {
+    t.unmount();
+  }), [t.blocInstance]);
+  const I = n(0), r = l(() => (I.current++, (o) => {
+    const y = t.createSubscription({
+      onChange: () => {
+        o();
+      }
+    });
+    return () => {
+      y();
+    };
+  }), [t.blocInstance]), u = n(0), a = n(0), b = v(
+    r,
+    // Get snapshot
+    () => (u.current++, t.blocInstance.state),
+    // Get server snapshot (same as client for now)
+    () => {
+      const o = t.blocInstance;
+      return a.current++, o.state;
+    }
+  ), S = n(0), i = l(() => (S.current++, t.getProxyState(b)), [b]), x = n(0), h = l(() => (x.current++, t.getProxyBlocInstance()), [t.blocInstance]);
+  return B(() => {
+    t.updateLastNotified(d.current);
+  }), [i, h];
+}
+function M(c, e = {}) {
+  const f = n(`external-${g()}`), d = n(/* @__PURE__ */ new Set()), t = n(/* @__PURE__ */ new Set()), s = n(null), m = l(() => {
+    const r = w.getInstance();
+    if (c.constructor.isolated || c.isolated) {
+      const a = new c(e == null ? void 0 : e.props), b = (e == null ? void 0 : e.id) || `${c.name}_${g()}`;
+      return a._updateId(b), r.activateBloc(a), a;
+    }
+    return r.getBloc(c, {
+      id: e == null ? void 0 : e.id,
+      props: e == null ? void 0 : e.props
+    });
+  }, [c, e == null ? void 0 : e.id]), I = l(
+    () => ({
+      getSnapshot: () => {
+        const r = s.current;
+        return r ? r.state : void 0;
+      },
+      subscribe: (r) => {
+        const u = s.current;
+        if (!u)
+          return () => {
+          };
+        const a = (S, i) => {
           try {
-            const x = t[f];
-            switch (typeof x) {
-              case "function":
-                continue;
-              default:
-                S.push(x);
-                continue;
-            }
+            d.current.clear(), t.current.clear(), e.selector && u && e.selector(S, i, u), r.length > 0 ? r(S) : r();
           } catch (x) {
-            E.instance.log("useBloc Error", x);
+            console.error("Listener error in useExternalBlocStore:", x);
           }
-      return i.current.size === 0 ? l.current.size > 0 ? [S] : [[]] : [a, S];
-    },
-    []
-  ), g = y(() => ({
-    subscribe: (e) => {
-      const t = u.current;
-      if (!t)
-        return () => {
         };
-      const a = {
-        fn: () => {
-          try {
-            i.current = /* @__PURE__ */ new Set(), l.current = /* @__PURE__ */ new Set(), e(t.state);
-          } catch (f) {
-            console.error({
-              e: f,
-              blocInstance: t,
-              dependencyArray: v
-            });
-          }
-        },
-        // Pass the dependency array to control when the subscription is updated
-        dependencyArray: v,
-        // Use the provided id to identify this subscription
-        id: s
-      };
-      E.activateBloc(t);
-      const S = t._observer.subscribe(a);
-      return () => {
-        S();
-      };
-    },
-    // Return an immutable snapshot of the current bloc state
-    getSnapshot: () => {
-      const e = u.current;
-      return e ? e.state : {};
-    },
-    // Server snapshot mirrors the client snapshot in this implementation
-    getServerSnapshot: () => {
-      const e = u.current;
-      return e ? e.state : {};
-    }
-  }), [(r = u.current) == null ? void 0 : r.uid]);
-  return {
-    usedKeys: i,
-    usedClassPropKeys: l,
-    externalStore: g,
-    instance: u,
-    rid: s
-  };
-};
-function R(c, n) {
-  var v, g;
-  const {
-    externalStore: d,
-    usedKeys: w,
-    usedClassPropKeys: b,
-    instance: s,
-    rid: B
-  } = $(c, n), o = C(
-    d.subscribe,
-    () => {
-      const r = d.getSnapshot();
-      if (r === void 0)
-        throw new Error(`[useBloc] State snapshot is undefined for bloc ${c.name}. Bloc may not be properly initialized.`);
-      return r;
-    },
-    d.getServerSnapshot ? () => {
-      const r = d.getServerSnapshot();
-      if (r === void 0)
-        throw new Error(`[useBloc] Server state snapshot is undefined for bloc ${c.name}. Bloc may not be properly initialized.`);
-      return r;
-    } : void 0
-  ), m = p(/* @__PURE__ */ new WeakMap()), i = p(/* @__PURE__ */ new WeakMap()), l = y(() => {
-    if (typeof o != "object" || o === null)
-      return o;
-    let r = m.current.get(o);
-    return r || (r = new Proxy(o, {
-      get(e, t) {
-        return setTimeout(() => {
-          w.current.add(t);
-        }, 0), e[t];
+        return u._observer.subscribe({
+          id: f.current,
+          fn: a
+        });
       },
-      // Handle symbols and non-enumerable properties
-      has(e, t) {
-        return t in e;
-      },
-      ownKeys(e) {
-        return Reflect.ownKeys(e);
-      },
-      getOwnPropertyDescriptor(e, t) {
-        return Reflect.getOwnPropertyDescriptor(e, t);
-      }
-    }), m.current.set(o, r)), r;
-  }, [o]), h = y(() => {
-    if (!s.current)
-      throw new Error(`[useBloc] Bloc instance is null for ${c.name}. This should never happen - bloc instance must be defined.`);
-    let r = i.current.get(s.current);
-    return r || (r = new Proxy(s.current, {
-      get(e, t) {
-        if (!e)
-          throw new Error(`[useBloc] Bloc target is null for ${c.name}. This should never happen - bloc target must be defined.`);
-        const a = e[t];
-        return typeof a != "function" && b.current.add(t), a;
+      getServerSnapshot: () => {
+        const r = s.current;
+        return r ? r.state : void 0;
       }
-    }), i.current.set(s.current, r)), r;
-  }, [(v = s.current) == null ? void 0 : v.uid]), u = p({});
-  if (P(() => {
-    var e;
-    const r = s.current;
-    if (r)
-      return r._addConsumer(B, u.current), (e = n == null ? void 0 : n.onMount) == null || e.call(n, r), () => {
-        var t;
-        r && ((t = n == null ? void 0 : n.onUnmount) == null || t.call(n, r), r._removeConsumer(B));
-      };
-  }, [(g = s.current) == null ? void 0 : g.uid, B]), l === void 0)
-    throw new Error(`[useBloc] State is undefined for ${c.name}. This should never happen - state must be defined.`);
-  if (!h)
-    throw new Error(`[useBloc] Instance is null for ${c.name}. This should never happen - instance must be defined.`);
-  return [l, h];
+    }),
+    []
+  );
+  return s.current = m, {
+    externalStore: I,
+    instance: s,
+    usedKeys: d,
+    usedClassPropKeys: t,
+    rid: f.current
+  };
 }
 export {
-  $ as externalBlocStore,
-  R as useBloc
+  K as useBloc,
+  M as useExternalBlocStore
 };
 //# sourceMappingURL=index.es.js.map