@blac/react 2.0.0-rn-12 → 2.0.1

package/src/__tests__/useBloc.tracking.test.tsx

@@ -1,198 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { Cubit } from '@blac/core';
-import useBloc from '../useBloc';
-
-interface TestState {
-  count: number;
-  name: string;
-  unused: string;
-}
-
-class TestCubit extends Cubit<TestState> {
-  constructor() {
-    super({ count: 0, name: 'Alice', unused: 'not-used' });
-  }
-
-  increment = () => {
-    this.emit({ ...this.state, count: this.state.count + 1 });
-  };
-
-  changeName = (name: string) => {
-    this.emit({ ...this.state, name });
-  };
-
-  changeUnused = (value: string) => {
-    this.emit({ ...this.state, unused: value });
-  };
-}
-
-describe('useBloc dependency tracking', () => {
-  it('should only track properties accessed during current render', () => {
-    let renderCount = 0;
-    let accessedProperties: string[] = [];
-
-    const { result, rerender } = renderHook(() => {
-      const [state, cubit] = useBloc(TestCubit);
-      renderCount++;
-
-      // Reset tracked properties for this render
-      accessedProperties = [];
-
-      // First few renders: access both count and name
-      if (renderCount <= 2) {
-        // Access count and name
-        void state.count;
-        void state.name;
-        accessedProperties = ['count', 'name'];
-      } else {
-        // Later renders: only access count
-        void state.count;
-        accessedProperties = ['count'];
-      }
-
-      return { state, cubit, accessedProperties };
-    });
-
-    // Initial render - accessing count and name
-    expect(renderCount).toBe(1);
-    expect(result.current.accessedProperties).toEqual(['count', 'name']);
-
-    // Change name - should trigger re-render since we're tracking it
-    act(() => {
-      result.current.cubit.changeName('Bob');
-    });
-    expect(renderCount).toBe(2);
-    expect(result.current.state.name).toBe('Bob');
-
-    // Force a re-render (this will be render #3, where we stop accessing name)
-    rerender();
-    expect(renderCount).toBe(3);
-    expect(result.current.accessedProperties).toEqual(['count']); // Only accessing count now
-
-    // Change name again - should NOT trigger re-render since we're no longer tracking it
-    const prevRenderCount = renderCount;
-    act(() => {
-      result.current.cubit.changeName('Charlie');
-    });
-
-    // Render count should not increase
-    expect(renderCount).toBe(prevRenderCount);
-    // But state should still be updated if we check it
-    expect(result.current.cubit.state.name).toBe('Charlie');
-
-    // Change count - should trigger re-render since we're still tracking it
-    act(() => {
-      result.current.cubit.increment();
-    });
-    expect(renderCount).toBe(prevRenderCount + 1);
-    expect(result.current.state.count).toBe(1);
-  });
-
-  it('should not re-render when non-accessed properties change', () => {
-    let renderCount = 0;
-
-    const { result } = renderHook(() => {
-      const [state, cubit] = useBloc(TestCubit);
-      renderCount++;
-
-      // Only access count, never access unused
-      void state.count;
-
-      return { state, cubit };
-    });
-
-    expect(renderCount).toBe(1);
-
-    // Change unused property - should NOT trigger re-render
-    act(() => {
-      result.current.cubit.changeUnused('changed');
-    });
-
-    // Should not re-render
-    expect(renderCount).toBe(1);
-
-    // But the actual state should be updated
-    expect(result.current.cubit.state.unused).toBe('changed');
-  });
-
-  it('should track nested property access correctly', () => {
-    interface NestedState {
-      user: {
-        profile: {
-          name: string;
-          age: number;
-        };
-      };
-      settings: {
-        theme: string;
-      };
-    }
-
-    class NestedCubit extends Cubit<NestedState> {
-      constructor() {
-        super({
-          user: {
-            profile: {
-              name: 'Alice',
-              age: 25,
-            },
-          },
-          settings: {
-            theme: 'light',
-          },
-        });
-      }
-
-      updateName = (name: string) => {
-        this.emit({
-          ...this.state,
-          user: {
-            ...this.state.user,
-            profile: {
-              ...this.state.user.profile,
-              name,
-            },
-          },
-        });
-      };
-
-      updateTheme = (theme: string) => {
-        this.emit({
-          ...this.state,
-          settings: {
-            ...this.state.settings,
-            theme,
-          },
-        });
-      };
-    }
-
-    let renderCount = 0;
-
-    const { result } = renderHook(() => {
-      const [state, cubit] = useBloc(NestedCubit);
-      renderCount++;
-
-      // Only access user.profile.name
-      void state.user.profile.name;
-
-      return { state, cubit };
-    });
-
-    expect(renderCount).toBe(1);
-
-    // Change theme - should NOT trigger re-render
-    act(() => {
-      result.current.cubit.updateTheme('dark');
-    });
-    expect(renderCount).toBe(1);
-
-    // Change name - should trigger re-render
-    act(() => {
-      result.current.cubit.updateName('Bob');
-    });
-    expect(renderCount).toBe(2);
-    expect(result.current.state.user.profile.name).toBe('Bob');
-  });
-});

package/src/index.ts

@@ -1,3 +0,0 @@
-export { default as useBloc } from './useBloc';
-export { default as useBlocNext } from './useBloc';
-export { default as useExternalBlocStore } from './useExternalBlocStore';

package/src/useBloc.ts

@@ -1,152 +0,0 @@
-import {
-  AdapterOptions,
-  BlacAdapter,
-  BlocBase,
-  BlocConstructor,
-  BlocState,
-} from '@blac/core';
-import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
-
-/**
- * Type definition for the return type of the useBloc hook
- */
-type HookTypes<B extends BlocConstructor<BlocBase<any>>> = [
-  BlocState<InstanceType<B>>,
-  InstanceType<B>,
-];
-
-/**
- * React hook for integrating with Blac state management
- */
-function useBloc<B extends BlocConstructor<BlocBase<any>>>(
-  blocConstructor: B,
-  options?: {
-    props?: ConstructorParameters<B>[0];
-    id?: string;
-    dependencies?: (bloc: InstanceType<B>) => unknown[];
-    onMount?: (bloc: InstanceType<B>) => void;
-    onUnmount?: (bloc: InstanceType<B>) => void;
-  },
-): HookTypes<B> {
-  // Create a unique identifier for this hook instance
-  const renderCount = useRef(0);
-  renderCount.current++;
-
-  const componentRef = useRef<object>({});
-
-  // Track adapter creation
-  const adapter = useMemo(() => {
-    const newAdapter = new BlacAdapter<B>(
-      {
-        componentRef: componentRef,
-        blocConstructor,
-      },
-      {
-        id: options?.id,
-        dependencies: options?.dependencies,
-        props: options?.props,
-        onMount: options?.onMount,
-        onUnmount: options?.onUnmount,
-      },
-    );
-    return newAdapter;
-  }, []);
-
-  // Reset tracking at the start of each render to ensure we only track
-  // properties accessed during the current render
-  adapter.resetConsumerTracking();
-
-  // Track options changes and update props
-  const optionsChangeCount = useRef(0);
-  useEffect(() => {
-    optionsChangeCount.current++;
-    adapter.options = {
-      id: options?.id,
-      dependencies: options?.dependencies,
-      props: options?.props,
-      onMount: options?.onMount,
-      onUnmount: options?.onUnmount,
-    };
-
-    if (options?.props !== undefined) {
-      adapter.updateProps(options.props);
-    }
-  }, [options?.props, options?.id, options?.dependencies, options?.onMount, options?.onUnmount]);
-
-  // Register as consumer and handle lifecycle
-  const mountEffectCount = useRef(0);
-  useEffect(() => {
-    mountEffectCount.current++;
-    adapter.mount();
-
-    return () => {
-      adapter.unmount();
-    };
-  }, [adapter.blocInstance]);
-
-  // Subscribe to state changes using useSyncExternalStore
-  const subscribeMemoCount = useRef(0);
-  const subscribe = useMemo(() => {
-    subscribeMemoCount.current++;
-    let subscriptionCount = 0;
-
-    return (onStoreChange: () => void) => {
-      subscriptionCount++;
-      const unsubscribe = adapter.createSubscription({
-        onChange: () => {
-          onStoreChange();
-        },
-      });
-
-      return () => {
-        unsubscribe();
-      };
-    };
-  }, [adapter.blocInstance]);
-
-  const snapshotCount = useRef(0);
-  const serverSnapshotCount = useRef(0);
-
-  const rawState: BlocState<InstanceType<B>> = useSyncExternalStore(
-    subscribe,
-    // Get snapshot
-    () => {
-      snapshotCount.current++;
-      const bloc = adapter.blocInstance;
-      const state = bloc.state;
-      return state;
-    },
-    // Get server snapshot (same as client for now)
-    () => {
-      const bloc = adapter.blocInstance;
-      serverSnapshotCount.current++;
-      const state = bloc.state;
-      return state;
-    },
-  );
-
-  // Create proxies for fine-grained tracking (if enabled)
-  const stateMemoCount = useRef(0);
-  const finalState = useMemo(() => {
-    stateMemoCount.current++;
-    const proxyState = adapter.getProxyState(rawState);
-    return proxyState;
-  }, [rawState]);
-
-  const blocMemoCount = useRef(0);
-  const finalBloc = useMemo(() => {
-    blocMemoCount.current++;
-    const proxyBloc = adapter.getProxyBlocInstance();
-    return proxyBloc;
-  }, [adapter.blocInstance]);
-
-  // Mark consumer as rendered after each render
-  useEffect(() => {
-    adapter.updateLastNotified(componentRef.current);
-  });
-
-  // Log final hook return
-  return [finalState, finalBloc];
-}
-
-export default useBloc;

package/src/useExternalBlocStore.ts

@@ -1,140 +0,0 @@
-import {
-  Blac,
-  BlocBase,
-  BlocConstructor,
-  BlocState,
-  InferPropsFromGeneric,
-  generateUUID,
-} from '@blac/core';
-import { useCallback, useMemo, useRef } from 'react';
-
-interface ExternalStoreOptions<B extends BlocBase<any>> {
-  id?: string;
-  props?: InferPropsFromGeneric<B>;
-  selector?: (
-    currentState: BlocState<B>,
-    previousState: BlocState<B>,
-    instance: B,
-  ) => any[];
-}
-
-interface ExternalStore<T> {
-  getSnapshot: () => T | undefined;
-  subscribe: (listener: () => void) => () => void;
-  getServerSnapshot?: () => T | undefined;
-}
-
-interface ExternalBlocStoreResult<B extends BlocBase<any>> {
-  externalStore: ExternalStore<BlocState<B>>;
-  instance: { current: B | null };
-  usedKeys: { current: Set<string> };
-  usedClassPropKeys: { current: Set<string> };
-  rid: string;
-}
-
-/**
- * Hook for using an external bloc store
- * Provides low-level access to bloc instances for use with React's useSyncExternalStore
- */
-export default function useExternalBlocStore<
-  B extends BlocConstructor<BlocBase<any>>,
->(
-  blocConstructor: B,
-  options: ExternalStoreOptions<InstanceType<B>> = {},
-): ExternalBlocStoreResult<InstanceType<B>> {
-  const ridRef = useRef<string>(`external-${generateUUID()}`);
-  const usedKeysRef = useRef<Set<string>>(new Set());
-  const usedClassPropKeysRef = useRef<Set<string>>(new Set());
-  const instanceRef = useRef<InstanceType<B> | null>(null);
-
-  // Get or create bloc instance
-  const bloc = useMemo(() => {
-    const blac = Blac.getInstance();
-    const base = blocConstructor as unknown as BlocBase<any>;
-
-    // For isolated blocs, always create a new instance
-    if (
-      (base.constructor as any).isolated ||
-      (blocConstructor as any).isolated
-    ) {
-      const newBloc = new blocConstructor(options?.props) as InstanceType<B>;
-      const uniqueId =
-        options?.id || `${blocConstructor.name}_${generateUUID()}`;
-      newBloc._updateId(uniqueId);
-      blac.activateBloc(newBloc);
-      return newBloc;
-    }
-
-    // For shared blocs, use the existing getBloc logic
-    return blac.getBloc(blocConstructor, {
-      id: options?.id,
-      props: options?.props,
-    });
-  }, [blocConstructor, options?.id]);
-
-  // Create external store interface
-  const externalStore = useMemo<ExternalStore<BlocState<InstanceType<B>>>>(
-    () => ({
-      getSnapshot: () => {
-        const currentInstance = instanceRef.current;
-        return currentInstance ? currentInstance.state : undefined;
-      },
-      subscribe: (listener: () => void) => {
-        const currentInstance = instanceRef.current;
-        if (!currentInstance) {
-          // Return no-op unsubscribe if no instance
-          return () => {};
-        }
-
-        // Wrap listener to handle errors gracefully
-        const safeListener = (
-          newState: BlocState<InstanceType<B>>,
-          oldState: BlocState<InstanceType<B>>,
-        ) => {
-          try {
-            // Reset tracking keys on each listener call
-            usedKeysRef.current.clear();
-            usedClassPropKeysRef.current.clear();
-
-            // Call selector if provided
-            if (options.selector && currentInstance) {
-              options.selector(newState, oldState, currentInstance);
-            }
-
-            // Call listener with state if it expects it
-            if (listener.length > 0) {
-              (listener as any)(newState);
-            } else {
-              listener();
-            }
-          } catch (error) {
-            console.error('Listener error in useExternalBlocStore:', error);
-            // Don't rethrow to prevent breaking other listeners
-          }
-        };
-
-        const unsubscribe = currentInstance._observer.subscribe({
-          id: ridRef.current,
-          fn: safeListener,
-        });
-        return unsubscribe;
-      },
-      getServerSnapshot: () => {
-        const currentInstance = instanceRef.current;
-        return currentInstance ? currentInstance.state : undefined;
-      },
-    }),
-    [],
-  );
-
-  // Update instance ref
-  instanceRef.current = bloc;
-
-  return {
-    externalStore,
-    instance: instanceRef,
-    usedKeys: usedKeysRef,
-    usedClassPropKeys: usedClassPropKeysRef,
-    rid: ridRef.current,
-  };
-}