@blac/react 2.0.0-rc-16 → 2.0.0-rc.0

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

@@ -1,202 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { Cubit, Blac } from '@blac/core';
-import useBloc from '../useBloc';
-
-interface TestState {
-  count: number;
-  name: string;
-  unused: string;
-}
-
-class TestCubit extends Cubit<TestState> {
-  static isolated = true; // Make it isolated to avoid test interference
-
-  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);
-
-    // The component shouldn't re-render, so we can't check the state through result.current
-    // This is the expected behavior - component doesn't see changes to untracked properties
-  });
-
-  it('should track nested property access correctly', () => {
-    interface NestedState {
-      user: {
-        profile: {
-          name: string;
-          age: number;
-        };
-      };
-      settings: {
-        theme: string;
-      };
-    }
-
-    class NestedCubit extends Cubit<NestedState> {
-      static isolated = true;
-
-      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/useBloc.ts

@@ -1,227 +0,0 @@
-import {
-  BlacAdapter,
-  BlocBase,
-  BlocConstructor,
-  BlocState,
-  generateInstanceIdFromProps,
-  Blac,
-} 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?: {
-    staticProps?: ConstructorParameters<B>[0];
-    instanceId?: 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>({});
-
-  // Get component name for debugging
-  const componentName = useRef<string>('');
-  if (!componentName.current) {
-    // Try to get component name from stack trace
-    try {
-      const error = new Error();
-      const stack = error.stack || '';
-      const lines = stack.split('\n');
-
-      // Look for React component in stack - try multiple patterns
-      for (let i = 2; i < lines.length && i < 15; i++) {
-        const line = lines[i];
-
-        // Pattern 1: "at ComponentName" or "at Object.ComponentName"
-        let match = line.match(/at\s+(?:Object\.)?([A-Z][a-zA-Z0-9_$]*)/);
-
-        // Pattern 2: Look for component files like "ComponentName.tsx"
-        if (!match) {
-          match = line.match(/([A-Z][a-zA-Z0-9_$]*)\.tsx/);
-        }
-
-        // Pattern 3: Look for render functions
-        if (!match) {
-          match = line.match(/render([A-Z][a-zA-Z0-9_$]*)/);
-          if (match && match[1]) {
-            match[1] = match[1]; // Use the part after "render"
-          }
-        }
-
-        if (
-          match &&
-          match[1] !== 'Object' &&
-          !match[1].startsWith('use') &&
-          !match[1].startsWith('Use')
-        ) {
-          componentName.current = match[1];
-          break;
-        }
-      }
-
-      // If still no name, try to get it from the bloc constructor name
-      if (!componentName.current) {
-        const blocName = blocConstructor.name;
-        if (blocName && blocName !== 'Object') {
-          // Remove 'Cubit' or 'Bloc' suffix to guess component name
-          componentName.current =
-            blocName.replace(/(Cubit|Bloc)$/, '') || 'Component';
-        } else {
-          componentName.current = 'Component';
-        }
-      }
-    } catch (e) {
-      componentName.current = 'Component';
-    }
-  }
-
-  // Pass through options
-  const normalizedOptions = options;
-
-  // Generate instance id from static props if needed
-  const instanceKey = useMemo(() => {
-    if (normalizedOptions?.instanceId) {
-      return normalizedOptions.instanceId;
-    }
-    if (normalizedOptions?.staticProps) {
-      return generateInstanceIdFromProps(normalizedOptions.staticProps) || null;
-    }
-    return null;
-  }, [normalizedOptions?.instanceId, normalizedOptions?.staticProps]);
-
-  // Track adapter creation - recreate when instanceId/staticProps change
-  const adapter = useMemo(() => {
-    const newAdapter = new BlacAdapter<B>(
-      {
-        componentRef: componentRef,
-        blocConstructor,
-      },
-      {
-        instanceId: normalizedOptions?.instanceId,
-        dependencies: normalizedOptions?.dependencies,
-        staticProps: normalizedOptions?.staticProps,
-        onMount: normalizedOptions?.onMount,
-        onUnmount: normalizedOptions?.onUnmount,
-      },
-    );
-    // Set component name for rerender logging
-    if (componentName.current) {
-      newAdapter.setComponentName(componentName.current);
-    }
-    return newAdapter;
-  }, [blocConstructor, instanceKey]); // Recreate adapter when instance key changes
-
-  // Reset tracking at the start of each render to ensure we only track
-  // properties accessed during the current render
-  adapter.resetTracking();
-
-  // Notify plugins about render
-  adapter.notifyRender();
-
-  // Update adapter options when they change (except instanceId/staticProps which recreate the adapter)
-  const optionsChangeCount = useRef(0);
-  useEffect(() => {
-    optionsChangeCount.current++;
-    adapter.options = {
-      instanceId: normalizedOptions?.instanceId,
-      dependencies: normalizedOptions?.dependencies,
-      staticProps: normalizedOptions?.staticProps,
-      onMount: normalizedOptions?.onMount,
-      onUnmount: normalizedOptions?.onUnmount,
-    };
-  }, [
-    adapter,
-    normalizedOptions?.dependencies,
-    normalizedOptions?.onMount,
-    normalizedOptions?.onUnmount,
-  ]);
-
-  // Register as consumer and handle lifecycle
-  const mountEffectCount = useRef(0);
-  useEffect(() => {
-    mountEffectCount.current++;
-    adapter.mount();
-
-    return () => {
-      adapter.unmount();
-    };
-  }, [adapter]);
-
-  // 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]);
-
-  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++;
-    // Always return the proxy - it will handle whether to actually proxy or not
-    const proxyState = adapter.getStateProxy();
-    return proxyState;
-  }, [rawState, adapter]);
-
-  const blocMemoCount = useRef(0);
-  const finalBloc = useMemo(() => {
-    blocMemoCount.current++;
-    const proxyBloc = adapter.getBlocProxy();
-    return proxyBloc;
-  }, [adapter]);
-
-  // Log final hook return
-  return [finalState, finalBloc];
-}
-
-export default useBloc;

package/src/useExternalBlocStore.ts

@@ -1,145 +0,0 @@
-import {
-  Blac,
-  BlocBase,
-  BlocConstructor,
-  BlocState,
-  generateUUID,
-} from '@blac/core';
-import { useMemo, useRef } from 'react';
-
-interface ExternalStoreOptions<B extends BlocBase<any>> {
-  id?: string;
-  staticProps?: ConstructorParameters<BlocConstructor<B>>[0];
-  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?.staticProps,
-      ) as InstanceType<B>;
-      const uniqueId =
-        options?.id || `${blocConstructor.name}_${generateUUID()}`;
-      newBloc._id = uniqueId;
-      blac.activateBloc(newBloc);
-      return newBloc;
-    }
-
-    // For shared blocs, use the existing getBloc logic
-    return blac.getBloc(blocConstructor, {
-      id: options?.id,
-      constructorParams: options?.staticProps,
-    });
-  }, [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
-          }
-        };
-
-        // Store the previous state for the listener
-        let previousState = currentInstance.state;
-
-        const unsubscribe = currentInstance.subscribe((state) => {
-          const oldState = previousState;
-          previousState = state;
-          safeListener(state, oldState);
-        });
-        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,
-  };
-}