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

package/src/DependencyTracker.ts

@@ -1,350 +0,0 @@
-
-export interface DependencyMetrics {
-  stateAccessCount: number;
-  classAccessCount: number;
-  proxyCreationCount: number;
-  batchFlushCount: number;
-  averageResolutionTime: number;
-  memoryUsageKB: number;
-}
-
-export interface DependencyTrackerConfig {
-  enableBatching: boolean;
-  batchTimeout: number;
-  enableMetrics: boolean;
-  maxCacheSize: number;
-  enableDeepTracking: boolean;
-}
-
-export type DependencyChangeCallback = (changedKeys: Set<string>) => void;
-
-export class DependencyTracker {
-  private stateKeys = new Set<string>();
-  private classKeys = new Set<string>();
-  private batchedCallbacks = new Set<DependencyChangeCallback>();
-  private flushScheduled = false;
-  private flushTimeoutId: ReturnType<typeof setTimeout> | undefined;
-  
-  private metrics: DependencyMetrics = {
-    stateAccessCount: 0,
-    classAccessCount: 0,
-    proxyCreationCount: 0,
-    batchFlushCount: 0,
-    averageResolutionTime: 0,
-    memoryUsageKB: 0,
-  };
-  
-  private resolutionTimes: number[] = [];
-  
-  private config: DependencyTrackerConfig;
-  
-  private stateProxyCache = new WeakMap<object, object>();
-  private classProxyCache = new WeakMap<object, object>();
-  
-  private lastStateSnapshot: unknown = null;
-  private lastClassSnapshot: unknown = null;
-  
-  constructor(config: Partial<DependencyTrackerConfig> = {}) {
-    this.config = {
-      enableBatching: true,
-      batchTimeout: 0, // Use React's scheduler
-      enableMetrics: process.env.NODE_ENV === 'development',
-      maxCacheSize: 1000,
-      enableDeepTracking: false,
-      ...config,
-    };
-  }
-
-  public trackStateAccess(key: string): void {
-    if (this.config.enableMetrics) {
-      this.metrics.stateAccessCount++;
-    }
-    
-    this.stateKeys.add(key);
-    
-    if (this.config.enableBatching) {
-      this.scheduleFlush();
-    }
-  }
-
-  public trackClassAccess(key: string): void {
-    if (this.config.enableMetrics) {
-      this.metrics.classAccessCount++;
-    }
-    
-    this.classKeys.add(key);
-    
-    if (this.config.enableBatching) {
-      this.scheduleFlush();
-    }
-  }
-
-  public createStateProxy<T extends object>(target: T, onAccess?: (prop: string) => void): T {
-    const cachedProxy = this.stateProxyCache.get(target);
-    if (cachedProxy) {
-      return cachedProxy as T;
-    }
-
-    const startTime = this.config.enableMetrics ? performance.now() : 0;
-
-    const proxy = new Proxy(target, {
-      get: (obj: T, prop: string | symbol) => {
-        if (typeof prop === 'string') {
-          this.trackStateAccess(prop);
-          onAccess?.(prop);
-        }
-        
-        const value = obj[prop as keyof T];
-        
-        if (
-          this.config.enableDeepTracking &&
-          value &&
-          typeof value === 'object' &&
-          !Array.isArray(value)
-        ) {
-          return this.createStateProxy(value as object);
-        }
-        
-        return value;
-      },
-      
-      has: (obj: T, prop: string | symbol) => {
-        return prop in obj;
-      },
-      
-      ownKeys: (obj: T) => {
-        return Reflect.ownKeys(obj);
-      },
-      
-      getOwnPropertyDescriptor: (obj: T, prop: string | symbol) => {
-        return Reflect.getOwnPropertyDescriptor(obj, prop);
-      },
-    });
-
-    this.stateProxyCache.set(target, proxy);
-    
-    if (this.config.enableMetrics) {
-      this.metrics.proxyCreationCount++;
-      const endTime = performance.now();
-      this.resolutionTimes.push(endTime - startTime);
-      this.updateAverageResolutionTime();
-    }
-
-    return proxy;
-  }
-
-  public createClassProxy<T extends object>(target: T, onAccess?: (prop: string) => void): T {
-    const cachedProxy = this.classProxyCache.get(target);
-    if (cachedProxy) {
-      return cachedProxy as T;
-    }
-
-    const startTime = this.config.enableMetrics ? performance.now() : 0;
-
-    const proxy = new Proxy(target, {
-      get: (obj: T, prop: string | symbol) => {
-        const value = obj[prop as keyof T];
-        
-        if (typeof prop === 'string' && typeof value !== 'function') {
-          this.trackClassAccess(prop);
-          onAccess?.(prop);
-        }
-        
-        return value;
-      },
-    });
-
-    this.classProxyCache.set(target, proxy);
-    
-    if (this.config.enableMetrics) {
-      this.metrics.proxyCreationCount++;
-      const endTime = performance.now();
-      this.resolutionTimes.push(endTime - startTime);
-      this.updateAverageResolutionTime();
-    }
-
-    return proxy;
-  }
-
-  public getStateKeys(): Set<string> {
-    return new Set(this.stateKeys);
-  }
-
-  public getClassKeys(): Set<string> {
-    return new Set(this.classKeys);
-  }
-
-  public reset(): void {
-    this.stateKeys.clear();
-    this.classKeys.clear();
-    this.cancelScheduledFlush();
-  }
-
-  public subscribe(callback: DependencyChangeCallback): () => void {
-    this.batchedCallbacks.add(callback);
-    
-    return () => {
-      this.batchedCallbacks.delete(callback);
-    };
-  }
-
-  public computeDependencyArray<TState, TClass>(
-    state: TState,
-    classInstance: TClass,
-  ): unknown[] {
-    const startTime = this.config.enableMetrics ? performance.now() : 0;
-    
-    if (typeof state !== 'object' || state === null) {
-      return [[state]];
-    }
-
-    const stateValues: unknown[] = [];
-    for (const key of this.stateKeys) {
-      if (key in (state as object)) {
-        stateValues.push((state as any)[key]);
-      }
-    }
-
-    const classValues: unknown[] = [];
-    for (const key of this.classKeys) {
-      if (key in (classInstance as object)) {
-        try {
-          const value = (classInstance as any)[key];
-          if (typeof value !== 'function') {
-            classValues.push(value);
-          }
-        } catch (error) {
-        }
-      }
-    }
-
-    if (this.config.enableMetrics) {
-      const endTime = performance.now();
-      this.resolutionTimes.push(endTime - startTime);
-      this.updateAverageResolutionTime();
-    }
-
-    if (stateValues.length === 0 && classValues.length === 0) {
-      return [[]];
-    }
-    
-    if (classValues.length === 0) {
-      return [stateValues];
-    }
-    
-    if (stateValues.length === 0) {
-      return [classValues];
-    }
-    
-    return [stateValues, classValues];
-  }
-
-  public getMetrics(): DependencyMetrics {
-    if (!this.config.enableMetrics) {
-      return {
-        stateAccessCount: 0,
-        classAccessCount: 0,
-        proxyCreationCount: 0,
-        batchFlushCount: 0,
-        averageResolutionTime: 0,
-        memoryUsageKB: 0,
-      };
-    }
-
-    const estimatedMemory = 
-      (this.stateKeys.size * 50) +
-      (this.classKeys.size * 50) +
-      (this.stateProxyCache instanceof WeakMap ? 100 : 0) +
-      (this.classProxyCache instanceof WeakMap ? 100 : 0);
-
-    return {
-      ...this.metrics,
-      memoryUsageKB: Math.round(estimatedMemory / 1024),
-    };
-  }
-
-  public clearCaches(): void {
-    this.stateProxyCache = new WeakMap();
-    this.classProxyCache = new WeakMap();
-    this.resolutionTimes = [];
-    
-    if (this.config.enableMetrics) {
-      this.metrics = {
-        stateAccessCount: 0,
-        classAccessCount: 0,
-        proxyCreationCount: 0,
-        batchFlushCount: 0,
-        averageResolutionTime: 0,
-        memoryUsageKB: 0,
-      };
-    }
-  }
-
-  private scheduleFlush(): void {
-    if (this.flushScheduled) {
-      return;
-    }
-
-    this.flushScheduled = true;
-
-    if (this.config.batchTimeout > 0) {
-      this.flushTimeoutId = setTimeout(() => {
-        this.flushBatchedChanges();
-      }, this.config.batchTimeout);
-    } else {
-      Promise.resolve().then(() => this.flushBatchedChanges());
-    }
-  }
-
-  private cancelScheduledFlush(): void {
-    if (this.flushTimeoutId) {
-      clearTimeout(this.flushTimeoutId);
-      this.flushTimeoutId = undefined;
-    }
-    this.flushScheduled = false;
-  }
-
-  private flushBatchedChanges(): void {
-    if (!this.flushScheduled) {
-      return;
-    }
-
-    this.flushScheduled = false;
-    this.flushTimeoutId = undefined;
-
-    if (this.config.enableMetrics) {
-      this.metrics.batchFlushCount++;
-    }
-
-    const allChangedKeys = new Set([...this.stateKeys, ...this.classKeys]);
-    
-    for (const callback of this.batchedCallbacks) {
-      try {
-        callback(allChangedKeys);
-      } catch (error) {
-        console.error('Error in dependency change callback:', error);
-      }
-    }
-  }
-
-  private updateAverageResolutionTime(): void {
-    if (this.resolutionTimes.length === 0) {
-      return;
-    }
-
-    if (this.resolutionTimes.length > 100) {
-      this.resolutionTimes = this.resolutionTimes.slice(-100);
-    }
-
-    const sum = this.resolutionTimes.reduce((a, b) => a + b, 0);
-    this.metrics.averageResolutionTime = sum / this.resolutionTimes.length;
-  }
-}
-
-export function createDependencyTracker(
-  config?: Partial<DependencyTrackerConfig>,
-): DependencyTracker {
-  return new DependencyTracker(config);
-}
-
-export const defaultDependencyTracker = createDependencyTracker();

package/src/useBloc.tsx

@@ -1,218 +0,0 @@
-import {
-  BlocBase,
-  BlocConstructor,
-  BlocHookDependencyArrayFn,
-  BlocState,
-  InferPropsFromGeneric,
-} from '@blac/core';
-import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
-import useExternalBlocStore from './useExternalBlocStore';
-import { DependencyTracker } from './DependencyTracker';
-
-/**
- * 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
- */
-export interface BlocHookOptions<B extends BlocBase<any>> {
-  id?: string;
-  selector?: BlocHookDependencyArrayFn<BlocState<B>>;
-  props?: InferPropsFromGeneric<B>;
-  onMount?: (bloc: B) => void;
-  onUnmount?: (bloc: B) => void;
-}
-
-/**
- * Default dependency selector that wraps the entire state in an array
- * @template T - State type
- * @returns {Array<Array<T>>} Dependency array containing the entire state
- */
-
-/**
- * React hook for integrating with Blac state management
- *
- * 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 {
-    externalStore,
-    usedKeys,
-    usedClassPropKeys,
-    instance,
-    rid,
-    hasProxyTracking,
-  } = useExternalBlocStore(bloc, options);
-
-  const state = useSyncExternalStore<BlocState<InstanceType<B>>>(
-    externalStore.subscribe,
-    () => {
-      const snapshot = externalStore.getSnapshot();
-      if (snapshot === undefined) {
-        throw new Error(
-          `[useBloc] State snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`,
-        );
-      }
-      return snapshot;
-    },
-    externalStore.getServerSnapshot
-      ? () => {
-          const serverSnapshot = externalStore.getServerSnapshot!();
-          if (serverSnapshot === undefined) {
-            throw new Error(
-              `[useBloc] Server state snapshot is undefined for bloc ${bloc.name}. Bloc may not be properly initialized.`,
-            );
-          }
-          return serverSnapshot;
-        }
-      : undefined,
-  );
-
-  const dependencyTracker = useRef<DependencyTracker | null>(null);
-  if (!dependencyTracker.current) {
-    dependencyTracker.current = new DependencyTracker({
-      enableBatching: true,
-      enableMetrics: process.env.NODE_ENV === 'development',
-      enableDeepTracking: false,
-    });
-  }
-
-  const stateProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
-  const classProxyCache = useRef<WeakMap<object, object>>(new WeakMap());
-
-  const returnState = useMemo(() => {
-    // If a custom selector is provided, don't use proxy tracking
-    if (options?.selector) {
-      return state;
-    }
-
-    hasProxyTracking.current = true;
-
-    if (typeof state !== 'object' || state === null) {
-      return state;
-    }
-
-    let proxy = stateProxyCache.current.get(state);
-    if (!proxy) {
-      proxy = new Proxy(state, {
-        get(target, prop) {
-          if (typeof prop === 'string') {
-            usedKeys.current.add(prop);
-            dependencyTracker.current?.trackStateAccess(prop);
-          }
-          const value = target[prop as keyof typeof target];
-          return value;
-        },
-        has(target, prop) {
-          return prop in target;
-        },
-        ownKeys(target) {
-          return Reflect.ownKeys(target);
-        },
-        getOwnPropertyDescriptor(target, prop) {
-          return Reflect.getOwnPropertyDescriptor(target, prop);
-        },
-      });
-      stateProxyCache.current.set(state as object, proxy as object);
-    }
-    return proxy;
-  }, [state]);
-
-  const returnClass = useMemo(() => {
-    if (!instance.current) {
-      throw new Error(
-        `[useBloc] Bloc instance is null for ${bloc.name}. This should never happen - bloc instance must be defined.`,
-      );
-    }
-
-    let proxy = classProxyCache.current.get(instance.current);
-    if (!proxy) {
-      proxy = new Proxy(instance.current, {
-        get(target, prop) {
-          if (!target) {
-            throw new Error(
-              `[useBloc] Bloc target is null for ${bloc.name}. This should never happen - bloc target must be defined.`,
-            );
-          }
-          const value = target[prop as keyof InstanceType<B>];
-          if (typeof value !== 'function' && typeof prop === 'string') {
-            usedClassPropKeys.current.add(prop);
-            dependencyTracker.current?.trackClassAccess(prop);
-          }
-          return value;
-        },
-      });
-      classProxyCache.current.set(instance.current, proxy);
-    }
-    return proxy;
-  }, [instance.current?.uid]);
-
-  const componentRef = useRef({});
-
-  useEffect(() => {
-    const currentInstance = instance.current;
-    if (!currentInstance) return;
-
-    currentInstance._addConsumer(rid, componentRef.current);
-
-    options?.onMount?.(currentInstance);
-
-    return () => {
-      if (!currentInstance) {
-        return;
-      }
-      options?.onUnmount?.(currentInstance);
-      currentInstance._removeConsumer(rid);
-
-      dependencyTracker.current?.reset();
-    };
-  }, [instance.current?.uid, rid]);
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'development' && dependencyTracker.current) {
-      const metrics = dependencyTracker.current.getMetrics();
-      if (metrics.stateAccessCount > 0 || metrics.classAccessCount > 0) {
-        console.debug(`[useBloc] ${bloc.name} Performance Metrics:`, metrics);
-      }
-    }
-  });
-
-  if (returnState === undefined) {
-    throw new Error(
-      `[useBloc] State is undefined for ${bloc.name}. This should never happen - state must be defined.`,
-    );
-  }
-  if (!returnClass) {
-    throw new Error(
-      `[useBloc] Instance is null for ${bloc.name}. This should never happen - instance must be defined.`,
-    );
-  }
-
-  return [returnState, returnClass] as [
-    BlocState<InstanceType<B>>,
-    InstanceType<B>,
-  ];
-}