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

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

@@ -0,0 +1,198 @@
+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,4 +1,2 @@
-import useBloc from './useBloc';
-import useExternalBlocStore from './useExternalBlocStore';
-
-export { useExternalBlocStore as externalBlocStore, useBloc };
+export { default as useBloc } from './useBloc';
+export { default as useExternalBlocStore } from './useExternalBlocStore';

package/src/useBloc.ts

@@ -0,0 +1,130 @@
+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?: AdapterOptions<InstanceType<B>>,
+): 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,
+      },
+      options,
+    );
+    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
+  const optionsChangeCount = useRef(0);
+  useEffect(() => {
+    optionsChangeCount.current++;
+    adapter.options = options;
+  }, [options]);
+
+  // 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;