@blac/react 0.1.1 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,195 @@
+# @blac/react
+
+A powerful React integration for the Blac state management library, providing seamless integration between React components and Blac's reactive state management system.
+
+## Features
+
+- 🔄 Automatic re-rendering when relevant state changes
+- 🎯 Fine-grained dependency tracking
+- 🔍 Property access tracking for optimized updates
+- 🎨 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
+
+## Important: Arrow Functions Required
+
+All methods in Bloc or Cubit classes must use arrow function syntax (`method = () => {}`) instead of the traditional method syntax (`method() {}`). This is because arrow functions automatically bind `this` to the class instance. Without this binding, methods called from React components would lose their context and could not access instance properties like `this.state` or `this.emit()`.
+
+```tsx
+// Correct way to define methods in your Bloc/Cubit classes
+class CounterBloc extends Cubit<CounterState> {
+  increment = () => {
+    this.emit({ ...this.state, count: this.state.count + 1 });
+  }
+
+  decrement = () => {
+    this.emit({ ...this.state, count: this.state.count - 1 });
+  }
+}
+
+// Incorrect way (will cause issues when called from React):
+class CounterBloc extends Cubit<CounterState> {
+  increment() { // ❌ Will lose 'this' context when called from components
+    this.emit({ ...this.state, count: this.state.count + 1 });
+  }
+}
+```
+
+## Installation
+
+```bash
+npm install @blac/react
+# or
+yarn add @blac/react
+# or
+pnpm add @blac/react
+```
+
+## Quick Start
+
+```tsx
+import { useBloc } from '@blac/react';
+import { CounterBloc } from './CounterBloc';
+
+function Counter() {
+  const [state, counterBloc] = useBloc(CounterBloc);
+
+  return (
+    <div>
+      <p>Count: {state.count}</p>
+      <button onClick={() => counterBloc.increment()}>Increment</button>
+    </div>
+  );
+}
+```
+
+## Usage
+
+### Basic Usage
+
+The `useBloc` hook provides a simple way to connect your React components to Blac's state management system:
+
+```tsx
+const [state, bloc] = useBloc(YourBloc);
+```
+
+### Advanced Configuration
+
+The hook accepts configuration options for more control:
+
+```tsx
+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
+});
+```
+
+### Dependency Tracking
+
+The hook automatically tracks which state properties are accessed in your component and only triggers re-renders when those specific properties change:
+
+```tsx
+function UserProfile() {
+  const [state, userBloc] = useBloc(UserBloc);
+
+  // Only re-renders when state.name changes
+  return <h1>{state.name}</h1>;
+}
+```
+
+This also works for getters on the Bloc or Cubit class:
+
+```tsx
+function UserProfile() {
+  const [, userBloc] = useBloc(UserBloc);
+
+  // Only re-renders when the return value from the getter formattedName changes
+  return <h1>{userBloc.formattedName}</h1>;
+}
+```
+
+### Custom Dependency Selector
+
+For more control over when your component re-renders, you can provide a custom dependency selector:
+
+```tsx
+const [state, bloc] = useBloc(YourBloc, {
+  dependencySelector: (newState, oldState) => [
+    newState.specificField,
+    newState.anotherField
+  ]
+});
+```
+
+## API Reference
+
+### useBloc Hook
+
+```typescript
+function useBloc<B extends BlocConstructor<BlocGeneric>>(
+  bloc: B,
+  options?: BlocHookOptions<InstanceType<B>>
+): [BlocState<InstanceType<B>>, InstanceType<B>]
+```
+
+#### Options
+
+- `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
+
+## Best Practices
+
+1. **Use Isolated Blocs**: When you need component-specific state, use isolated blocs:
+   ```tsx
+   class MyIsolatedBloc extends BlocBase {
+     static isolated = true;
+     // ... rest of your bloc implementation
+   }
+   ```
+
+2. **Use Custom Identifiers**: When you need multiple independent instances of the same Bloc type, use custom identifiers to manage different state contexts:
+   ```tsx
+   // In a chat application with multiple chat rooms
+   function ChatRoom({ roomId }: { roomId: string }) {
+     const [state, chatBloc] = useBloc(ChatBloc, {
+       id: `chat-${roomId}`, // Each room gets its own instance
+       props: { roomId }
+     });
+
+     return (
+       <div>
+         <h2>Room: {roomId}</h2>
+         {state.messages.map(msg => (
+           <Message key={msg.id} message={msg} />
+         ))}
+       </div>
+     );
+   }
+
+   // Usage:
+   function ChatApp() {
+     return (
+       <div>
+         <ChatRoom roomId="general" />
+         <ChatRoom roomId="support" />
+       </div>
+     );
+   }
+   ```
+
+3. **Optimize Re-renders**: Let the hook track dependencies automatically unless you have a specific need for custom dependency tracking.
+
+4. **Type Safety**: Take advantage of TypeScript's type inference for better development experience and catch errors early.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT

package/dist/index.cjs.js

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

package/dist/index.cjs.js.map

@@ -0,0 +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 * @template B - Bloc generic type\n * @property {string} [id] - Optional identifier for the Bloc instance\n * @property {BlocHookDependencyArrayFn<B>} [dependencySelector] - Function to select dependencies for re-renders\n * @property {InferPropsFromGeneric<B>} [props] - Props to pass to the Bloc\n * @property {(bloc: B) => void} [onMount] - Callback function invoked when the Bloc is mounted\n */\nexport interface BlocHookOptions<B extends BlocBase<any>> {\n  id?: string;\n  dependencySelector?: BlocHookDependencyArrayFn<BlocState<B>>;\n  props?: InferPropsFromGeneric<B>;\n  onMount?: (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 { dependencySelector, 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    newState,\n    oldState,\n  ): ReturnType<BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>> => {\n    // Use custom dependency selector if provided\n    if (dependencySelector) {\n      return dependencySelector(newState, oldState);\n    }\n\n    // Fall back to bloc's default dependency selector if available\n    if (resolvedBloc.defaultDependencySelector) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n      return resolvedBloc.defaultDependencySelector(newState, oldState);\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    return [usedStateValues, usedClassValues];\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      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","dependencySelector","blocId","props","useMemo","usedKeys","useRef","instanceKeys","usedClassPropKeys","instanceClassPropKeys","renderInstance","effectiveBlocId","blocRef","Blac","newState","oldState","usedStateValues","key","usedClassValues","value","error","store","state","useSyncExternalStore","returnState","_","prop","returnClass","useLayoutEffect","useEffect","currentBlocInstance","_a"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+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
+ * @template B - Bloc generic type
+ * @property {string} [id] - Optional identifier for the Bloc instance
+ * @property {BlocHookDependencyArrayFn<B>} [dependencySelector] - Function to select dependencies for re-renders
+ * @property {InferPropsFromGeneric<B>} [props] - Props to pass to the Bloc
+ * @property {(bloc: B) => void} [onMount] - Callback function invoked when the Bloc is mounted
+ */
+declare interface BlocHookOptions<B extends BlocBase<any>> {
+    id?: string;
+    dependencySelector?: BlocHookDependencyArrayFn<BlocState<B>>;
+    props?: InferPropsFromGeneric<B>;
+    onMount?: (bloc: B) => void;
+}
+
+/**
+ * Creates an external store that wraps a Bloc instance, providing a React-compatible interface
+ * for subscribing to and accessing bloc state.
+ *
+ * @template B - The type of the Bloc instance
+ * @template S - The type of the Bloc state
+ * @param bloc - The Bloc instance to wrap
+ * @param dependencyArray - Function that returns an array of dependencies for the subscription
+ * @param rid - Unique identifier for the subscription
+ * @returns An ExternalStore instance that provides methods to subscribe to and access bloc state
+ */
+export declare const externalBlocStore: <B extends InstanceType<BlocConstructor<any>>>(resolvedBloc: B, dependencyArray: BlocHookDependencyArrayFn<BlocState<B>>, rid: string) => ExternalStore<B>;
+
+/**
+ * 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>>> {
+    /**
+     * Subscribes to changes in the store and returns an unsubscribe function.
+     * @param onStoreChange - Callback function that will be called whenever the store changes
+     * @returns A function that can be called to unsubscribe from store changes
+     */
+    subscribe: (onStoreChange: (state: BlocState<B>) => void) => () => void;
+    /**
+     * Gets the current snapshot of the store state.
+     * @returns The current state of the store
+     */
+    getSnapshot: () => BlocState<B>;
+    /**
+     * Gets the server snapshot of the store state.
+     * This is optional and defaults to the same value as getSnapshot.
+     * @returns The server state of the store
+     */
+    getServerSnapshot?: () => BlocState<B>;
+}
+
+/**
+ * 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>>,
+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
+ *
+ * This hook connects a React component to a Bloc state container, providing
+ * automatic re-rendering when relevant state changes, dependency tracking,
+ * and proper lifecycle management.
+ *
+ * @template B - Bloc constructor type
+ * @template O - BlocHookOptions type
+ * @param {B} bloc - Bloc constructor class
+ * @param {O} [options] - Configuration options for the hook
+ * @returns {HookTypes<B>} Tuple containing [state, bloc instance]
+ *
+ * @example
+ * const [state, counterBloc] = useBloc(CounterBloc);
+ * // Access state
+ * console.log(state.count);
+ * // Call bloc methods
+ * counterBloc.increment();
+ */
+export declare function useBloc<B extends BlocConstructor<BlocBase<any>>>(bloc: B, options?: BlocHookOptions<InstanceType<B>>): HookTypes<B>;
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,116 @@
+import { Blac as B } from "@blac/core";
+import { useMemo as d, useRef as i, useSyncExternalStore as R, useLayoutEffect as K, useEffect as P } from "react";
+const M = (s, r, y) => {
+  const u = s;
+  return {
+    subscribe: (h) => {
+      const c = u._observer.subscribe({
+        fn: () => {
+          try {
+            h(u.state);
+          } catch (a) {
+            console.error({
+              e: a,
+              resolvedBloc: s,
+              dependencyArray: r
+            });
+          }
+        },
+        // Pass the dependency array to control when the subscription is updated
+        dependencyArray: r,
+        // Use the provided id to identify this subscription
+        id: y
+      });
+      return () => {
+        c();
+      };
+    },
+    // Return an immutable snapshot of the current bloc state
+    getSnapshot: () => u.state,
+    // Server snapshot mirrors the client snapshot in this implementation
+    getServerSnapshot: () => u.state
+  };
+}, j = M;
+function L(s, r) {
+  const { dependencySelector: y, id: u, props: h } = r ?? {}, c = d(() => Math.random().toString(36), []), a = i(/* @__PURE__ */ new Set()), g = i(/* @__PURE__ */ new Set()), w = i(/* @__PURE__ */ new Set()), m = i(/* @__PURE__ */ new Set()), I = {}, v = s.isolated ? c : u, b = i(null);
+  d(() => {
+    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 && (r != null && r.props) && B.instance.findRegisteredBlocInstance(s, v) === t && t.props !== r.props && (t.props = r.props);
+  const C = (e, n) => {
+    if (y)
+      return y(e, n);
+    if (t.defaultDependencySelector)
+      return t.defaultDependencySelector(e, n);
+    if (typeof e != "object")
+      return [[e]];
+    const o = [];
+    for (const l of a.current)
+      l in e && o.push(e[l]);
+    const x = [];
+    for (const l of w.current)
+      if (l in t)
+        try {
+          const S = t[l];
+          switch (typeof S) {
+            case "function":
+              continue;
+            default:
+              x.push(S);
+              continue;
+          }
+        } catch (S) {
+          B.instance.log("useBloc Error", S);
+        }
+    return setTimeout(() => {
+      g.current = /* @__PURE__ */ new Set(), m.current = /* @__PURE__ */ new Set();
+    }), [o, x];
+  }, p = d(
+    () => j(t, C, c),
+    [t, c]
+  ), f = R(
+    p.subscribe,
+    p.getSnapshot,
+    p.getServerSnapshot
+  ), E = d(() => {
+    try {
+      if (typeof f == "object")
+        return new Proxy(f, {
+          get(e, n) {
+            return g.current.add(n), a.current.add(n), f[n];
+          }
+        });
+    } catch (e) {
+      B.instance.log("useBloc Error", e);
+    }
+    return f;
+  }, [f]), _ = d(() => new Proxy(t, {
+    get(e, n) {
+      const o = t[n];
+      return typeof o != "function" && m.current.add(n), o;
+    }
+  }), [t]);
+  return K(() => {
+    a.current = new Set(g.current), w.current = new Set(m.current);
+  }, [I]), P(() => {
+    var n;
+    const e = b.current;
+    if (e)
+      return e._addConsumer(c), (n = r == null ? void 0 : r.onMount) == null || n.call(r, e), () => {
+        e._removeConsumer(c);
+      };
+  }, [s, c]), [E, _];
+}
+export {
+  j as externalBlocStore,
+  L as useBloc
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +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 * @template B - Bloc generic type\n * @property {string} [id] - Optional identifier for the Bloc instance\n * @property {BlocHookDependencyArrayFn<B>} [dependencySelector] - Function to select dependencies for re-renders\n * @property {InferPropsFromGeneric<B>} [props] - Props to pass to the Bloc\n * @property {(bloc: B) => void} [onMount] - Callback function invoked when the Bloc is mounted\n */\nexport interface BlocHookOptions<B extends BlocBase<any>> {\n  id?: string;\n  dependencySelector?: BlocHookDependencyArrayFn<BlocState<B>>;\n  props?: InferPropsFromGeneric<B>;\n  onMount?: (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 { dependencySelector, 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    newState,\n    oldState,\n  ): ReturnType<BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>> => {\n    // Use custom dependency selector if provided\n    if (dependencySelector) {\n      return dependencySelector(newState, oldState);\n    }\n\n    // Fall back to bloc's default dependency selector if available\n    if (resolvedBloc.defaultDependencySelector) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n      return resolvedBloc.defaultDependencySelector(newState, oldState);\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    return [usedStateValues, usedClassValues];\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      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","dependencySelector","blocId","props","useMemo","usedKeys","useRef","instanceKeys","usedClassPropKeys","instanceClassPropKeys","renderInstance","effectiveBlocId","blocRef","Blac","newState","oldState","usedStateValues","key","usedClassValues","value","error","store","state","useSyncExternalStore","returnState","_","prop","returnClass","useLayoutEffect","useEffect","currentBlocInstance","_a"],"mappings":"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"}

package/package.json

@@ -1,26 +1,58 @@
 {
   "name": "@blac/react",
-  "version": "0.1.1",
+  "version": "2.0.0",
+  "license": "MIT",
+  "author": "Brendan Mullins <jsnanigans@gmail.com>",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
   ],
-  "main": "./dist/blac-react.umd.js",
-  "module": "./dist/blac-react.mjs",
-  "exports": {
-    ".": {
-      "import": "./dist/blac-react.mjs",
-      "require": "./dist/blac-react.umd.js"
-    }
-  },
-  "scripts": {
-    "build": "vite build"
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "typescript",
+    "rxjs",
+    "state-management",
+    "reactjs",
+    "observer-pattern",
+    "bloc",
+    "bloc-pattern"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "@blac/core": "2.0.0"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
   "devDependencies": {
-    "@blac/core": "workspace:*",
-    "vite": "^6.0.5"
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.3",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.3",
+    "@vitest/coverage-v8": "^3.1.3",
+    "happy-dom": "^17.4.7",
+    "jsdom": "^24.1.1",
+    "prettier": "^3.5.3",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^1.6.0"
+  },
+  "scripts": {
+    "prettier": "prettier --write ./src",
+    "test": "vitest run --config vitest.config.ts",
+    "test:watch": "vitest --watch --config vitest.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "deploy": "pnpm run build && pnpm publish --access public"
   }
-}
+}

package/src/externalBlocStore.ts

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

package/src/index.ts

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

package/src/useBloc.tsx

@@ -0,0 +1,261 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Blac,
+  BlocBase,
+  BlocBaseAbstract,
+  BlocConstructor,
+  BlocHookDependencyArrayFn,
+  BlocState,
+  InferPropsFromGeneric,
+} from '@blac/core';
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from 'react';
+import externalBlocStore from './externalBlocStore';
+
+/**
+ * Type definition for the return type of the useBloc hook
+ * @template B - Bloc constructor type
+ */
+type HookTypes<B extends BlocConstructor<BlocBase<any>>> = [
+  BlocState<InstanceType<B>>,
+  InstanceType<B>,
+];
+
+/**
+ * Configuration options for the useBloc hook
+ * @template B - Bloc generic type
+ * @property {string} [id] - Optional identifier for the Bloc instance
+ * @property {BlocHookDependencyArrayFn<B>} [dependencySelector] - Function to select dependencies for re-renders
+ * @property {InferPropsFromGeneric<B>} [props] - Props to pass to the Bloc
+ * @property {(bloc: B) => void} [onMount] - Callback function invoked when the Bloc is mounted
+ */
+export interface BlocHookOptions<B extends BlocBase<any>> {
+  id?: string;
+  dependencySelector?: BlocHookDependencyArrayFn<BlocState<B>>;
+  props?: InferPropsFromGeneric<B>;
+  onMount?: (bloc: B) => void;
+}
+
+/**
+ * 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
+ *
+ * This hook connects a React component to a Bloc state container, providing
+ * automatic re-rendering when relevant state changes, dependency tracking,
+ * and proper lifecycle management.
+ *
+ * @template B - Bloc constructor type
+ * @template O - BlocHookOptions type
+ * @param {B} bloc - Bloc constructor class
+ * @param {O} [options] - Configuration options for the hook
+ * @returns {HookTypes<B>} Tuple containing [state, bloc instance]
+ *
+ * @example
+ * const [state, counterBloc] = useBloc(CounterBloc);
+ * // Access state
+ * console.log(state.count);
+ * // Call bloc methods
+ * counterBloc.increment();
+ */
+export default function useBloc<B extends BlocConstructor<BlocBase<any>>>(
+  bloc: B,
+  options?: BlocHookOptions<InstanceType<B>>,
+): HookTypes<B> {
+  const { dependencySelector, 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>>> = (
+    newState,
+    oldState,
+  ): ReturnType<BlocHookDependencyArrayFn<BlocState<InstanceType<B>>>> => {
+    // Use custom dependency selector if provided
+    if (dependencySelector) {
+      return dependencySelector(newState, oldState);
+    }
+
+    // Fall back to bloc's default dependency selector if available
+    if (resolvedBloc.defaultDependencySelector) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return resolvedBloc.defaultDependencySelector(newState, oldState);
+    }
+
+    // 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
+
+  // Subscribe to state changes using React's external store API
+  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot,
+  );
+
+  // Create a proxy for state to track property access
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const returnState: BlocState<InstanceType<B>> = useMemo(() => {
+    try {
+      if (typeof state === 'object') {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return new Proxy(state as any, {
+          get(_, prop) {
+            instanceKeys.current.add(prop as string);
+            usedKeys.current.add(prop as string);
+            const value = state[prop as keyof typeof state];
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+            return value;
+          },
+        });
+      }
+    } catch (error) {
+      Blac.instance.log('useBloc Error', error);
+    }
+    return state;
+  }, [state]);
+
+  // Create a proxy for the bloc instance to track property access
+  const returnClass = useMemo(() => {
+    return new Proxy(resolvedBloc, {
+      get(_, prop) {
+        const value = resolvedBloc[prop as keyof InstanceType<B>];
+        // Track which class properties are accessed (excluding methods)
+        if (typeof value !== 'function') {
+          instanceClassPropKeys.current.add(prop as string);
+        }
+        return value;
+      },
+    });
+  }, [resolvedBloc]);
+
+  // 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]);
+
+  // Set up bloc lifecycle management
+  useEffect(() => {
+    const currentBlocInstance = blocRef.current; // Capture instance for cleanup
+    if (!currentBlocInstance) return;
+
+    currentBlocInstance._addConsumer(rid);
+
+    // Call onMount callback if provided
+    options?.onMount?.(currentBlocInstance);
+
+    // Cleanup: remove this component as a consumer using the captured instance
+    return () => {
+      currentBlocInstance._removeConsumer(rid);
+    };
+  }, [bloc, rid]); // Do not add options.onMount to deps, it will cause a loop
+
+  return [returnState, returnClass];
+}

package/dist/blac-react.mjs

@@ -1,104 +0,0 @@
-import { Blac as v } from "@blac/core";
-import { useId as K, useRef as a, useState as D, useMemo as C, useSyncExternalStore as M, useLayoutEffect as O, useEffect as k } from "react";
-const A = (n, s, c) => ({
-  subscribe: (d) => {
-    const f = n._observer.subscribe({
-      fn: () => {
-        try {
-          d(Object.freeze(n.state));
-        } catch (y) {
-          console.error({
-            e: y,
-            bloc: n,
-            dependencyArray: s
-          });
-        }
-      },
-      dependencyArray: s,
-      id: c
-    });
-    return () => {
-      f();
-    };
-  },
-  getSnapshot: () => Object.freeze(n.state),
-  getServerSnapshot: () => Object.freeze(n.state)
-}), L = (n) => [[n]];
-class T {
-  static useBloc(s, c) {
-    let { dependencySelector: d, id: f, props: y } = c ?? {};
-    const o = K(), S = a(/* @__PURE__ */ new Set()), p = a(/* @__PURE__ */ new Set()), h = a(!1), B = a(/* @__PURE__ */ new Set()), g = a(/* @__PURE__ */ new Set()), m = a(!1), _ = /* @__PURE__ */ new Set();
-    s.isolated && (f = o);
-    const [e, w] = D(
-      v.getInstance().getBloc(s, {
-        id: f,
-        props: y,
-        instanceRef: o
-      })
-    );
-    if (!e)
-      throw new Error(`useBloc: could not resolve: ${s.name || s}`);
-    o === e._instanceRef && (c != null && c.props) && (e.props = c.props);
-    const j = (t, r) => {
-      if (d)
-        return d(t, r);
-      if (e.defaultDependencySelector)
-        return e.defaultDependencySelector(t, r);
-      if (typeof t != "object")
-        return L(t);
-      const u = [];
-      for (const i of S.current)
-        i in t && u.push(t[i]);
-      const I = [];
-      for (const i of B.current)
-        if (i in e) {
-          const b = e[i];
-          if (typeof b == "function")
-            continue;
-          I.push(b);
-        }
-      return [u, I];
-    }, { subscribe: x, getSnapshot: E, getServerSnapshot: P } = C(
-      () => A(e, j, o),
-      [e._createdAt]
-    ), l = M(
-      x,
-      E,
-      P
-    ), R = C(() => {
-      try {
-        if (typeof l == "object")
-          return new Proxy(l, {
-            get(t, r) {
-              const u = l[r];
-              return S.current.add(r), p.current.add(r), h.current = !0, u;
-            }
-          });
-      } catch (t) {
-        v.instance.log("useBloc Error", t);
-      }
-      return l;
-    }, [l, S, p]), z = C(() => new Proxy(e, {
-      get(t, r) {
-        const u = e[r];
-        return typeof u != "function" && (B.current.add(r), g.current.add(r), m.current = !0), u;
-      }
-    }), [e, B, g]);
-    return O(() => (S.current = new Set(p.current), B.current = new Set(g.current), () => {
-      setTimeout(() => {
-        m.current && (g.current.clear(), m.current = !1), h.current && (p.current.clear(), h.current = !1);
-      });
-    }), [_]), k(() => (e._addConsumer(o), e._consumers.size !== 0 && w(
-      v.getInstance().getBloc(s, {
-        id: f,
-        props: y,
-        instanceRef: o
-      })
-    ), () => e._removeConsumer(o)), []), [R, z];
-  }
-}
-const H = T.useBloc;
-export {
-  A as externalBlocStore,
-  H as useBloc
-};

package/dist/blac-react.umd.js

@@ -1 +0,0 @@
-(function(r,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@blac/core"),require("react")):typeof define=="function"&&define.amd?define(["exports","@blac/core","react"],o):(r=typeof globalThis<"u"?globalThis:r||self,o(r.BlacReact={},r.BlacCore,r.react))})(this,function(r,o,t){"use strict";const C=(c,u,f)=>({subscribe:S=>{const l=c._observer.subscribe({fn:()=>{try{S(Object.freeze(c.state))}catch(B){console.error({e:B,bloc:c,dependencyArray:u})}},dependencyArray:u,id:f});return()=>{l()}},getSnapshot:()=>Object.freeze(c.state),getServerSnapshot:()=>Object.freeze(c.state)}),_=c=>[[c]];class j{static useBloc(u,f){let{dependencySelector:S,id:l,props:B}=f??{};const a=t.useId(),p=t.useRef(new Set),h=t.useRef(new Set),g=t.useRef(!1),m=t.useRef(new Set),b=t.useRef(new Set),v=t.useRef(!1),x=new Set;u.isolated&&(l=a);const[e,M]=t.useState(o.Blac.getInstance().getBloc(u,{id:l,props:B,instanceRef:a}));if(!e)throw new Error(`useBloc: could not resolve: ${u.name||u}`);a===e._instanceRef&&(f!=null&&f.props)&&(e.props=f.props);const P=(n,s)=>{if(S)return S(n,s);if(e.defaultDependencySelector)return e.defaultDependencySelector(n,s);if(typeof n!="object")return _(n);const i=[];for(const y of p.current)y in n&&i.push(n[y]);const R=[];for(const y of m.current)if(y in e){const I=e[y];if(typeof I=="function")continue;R.push(I)}return[i,R]},{subscribe:E,getSnapshot:z,getServerSnapshot:K}=t.useMemo(()=>C(e,P,a),[e._createdAt]),d=t.useSyncExternalStore(E,z,K),O=t.useMemo(()=>{try{if(typeof d=="object")return new Proxy(d,{get(n,s){const i=d[s];return p.current.add(s),h.current.add(s),g.current=!0,i}})}catch(n){o.Blac.instance.log("useBloc Error",n)}return d},[d,p,h]),T=t.useMemo(()=>new Proxy(e,{get(n,s){const i=e[s];return typeof i!="function"&&(m.current.add(s),b.current.add(s),v.current=!0),i}}),[e,m,b]);return t.useLayoutEffect(()=>(p.current=new Set(h.current),m.current=new Set(b.current),()=>{setTimeout(()=>{v.current&&(b.current.clear(),v.current=!1),g.current&&(h.current.clear(),g.current=!1)})}),[x]),t.useEffect(()=>(e._addConsumer(a),e._consumers.size!==0&&M(o.Blac.getInstance().getBloc(u,{id:l,props:B,instanceRef:a})),()=>e._removeConsumer(a)),[]),[O,T]}}const w=j.useBloc;r.externalBlocStore=C,r.useBloc=w,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});