elementdrawing 1.0.0

package/src/jsx/hooks/index.js

@@ -0,0 +1,356 @@
+/**
+ * JSX Hooks Index
+ * ElementDrawing Framework - Re-exports all hooks from a single entry point,
+ * provides shared hook context management, component lifecycle coordination,
+ * development tools integration, and hook validation.
+ */
+
+'use strict';
+
+const { useState, useTransition, useDeferredValue, batchedUpdates, configurePersistence, deepEqual, shallowEqual, runWithPriority, startTransition, PRIORITY } = require('./useState');
+const { useEffect, useInsertionEffect, useDeepCompareEffect, useEffectOnce, useUpdateEffect, batchEffects, areDepsEqual, areDepsDeepEqual, cancelEffect, setStrictMode, isInStrictMode, getPendingEffectCounts } = require('./useEffect');
+const { useContext, createContext, useContextSelector, useContextObserver, useMergedContext, composeContexts, getContextVersion } = require('./useContext');
+const { useReducer, batchDispatches, createLoggerMiddleware, createValidationMiddleware, createTransformMiddleware, createThrottleMiddleware, createActionCreators, createAction } = require('./useReducer');
+const { useCallback, useDebouncedCallback, useThrottledCallback, useOnceCallback, useDeepCompareCallback, useComposedCallback, setCallbackProfiling, getCallbackProfile } = require('./useCallback');
+const { useMemo, useMemoWith, useMemoTTL, useDeepCompareMemo, useMemoLRU, invalidateMemo, invalidateAllMemos, setMemoProfiling, getMemoProfile } = require('./useMemo');
+const { useRef, usePrevious, usePreviousWithInit, createRef, useCallbackRef, forwardRef, isForwardRef, useMergedRefs, useMeasureRef, useInViewRef, useFocusRef, useScrollRef, processPendingPrevUpdates } = require('./useRef');
+const { useLayoutEffect, useIsomorphicLayoutEffect, usePriorityLayoutEffect, useMutationObserver, useResizeObserver, useAutoFocus, LAYOUT_PRIORITY } = require('./useLayoutEffect');
+
+// ─── Shared Hook Context ──────────────────────────────────────────────────────
+
+/**
+ * Set the currently rendering component for all hooks.
+ * Called by the framework before each component render.
+ * @param {Object} component
+ */
+function setCurrentComponent(component) {
+  // Propagate to all hook modules
+  const useStateModule = require('./useState');
+  const useEffectModule = require('./useEffect');
+  const useContextModule = require('./useContext');
+  const useReducerModule = require('./useReducer');
+  const useCallbackModule = require('./useCallback');
+  const useMemoModule = require('./useMemo');
+  const useRefModule = require('./useRef');
+  const useLayoutEffectModule = require('./useLayoutEffect');
+
+  useStateModule.setCurrentComponent(component);
+  useEffectModule.setCurrentComponent(component);
+  useContextModule.setCurrentComponent(component);
+  useReducerModule.setCurrentComponent(component);
+  useCallbackModule.setCurrentComponent(component);
+  useMemoModule.setCurrentComponent(component);
+  useRefModule.setCurrentComponent(component);
+  useLayoutEffectModule.setCurrentComponent(component);
+}
+
+/**
+ * Reset all hook indices after rendering is complete.
+ */
+function resetHookIndex() {
+  const useStateModule = require('./useState');
+  const useEffectModule = require('./useEffect');
+  const useContextModule = require('./useContext');
+  const useReducerModule = require('./useReducer');
+  const useCallbackModule = require('./useCallback');
+  const useMemoModule = require('./useMemo');
+  const useRefModule = require('./useRef');
+  const useLayoutEffectModule = require('./useLayoutEffect');
+
+  useStateModule.resetHookIndex();
+  useEffectModule.resetHookIndex();
+  useContextModule.resetHookIndex();
+  useReducerModule.resetHookIndex();
+  useCallbackModule.resetHookIndex();
+  useMemoModule.resetHookIndex();
+  useRefModule.resetHookIndex();
+  useLayoutEffectModule.resetHookIndex();
+}
+
+/**
+ * Clean up all hook state for a component on unmount.
+ * @param {Object} component
+ */
+function cleanupComponent(component) {
+  const useStateModule = require('./useState');
+  const useEffectModule = require('./useEffect');
+  const useContextModule = require('./useContext');
+  const useReducerModule = require('./useReducer');
+  const useMemoModule = require('./useMemo');
+  const useRefModule = require('./useRef');
+  const useLayoutEffectModule = require('./useLayoutEffect');
+
+  useStateModule.cleanupComponentState(component);
+  useEffectModule.cleanupComponentEffects(component);
+  useContextModule.cleanupContextSubscriptions(component);
+  useReducerModule.cleanupReducerState(component);
+  useMemoModule.cleanupMemoCache(component);
+  useRefModule.cleanupRefs(component);
+  useLayoutEffectModule.cleanupLayoutEffects(component);
+}
+
+/**
+ * Flush all pending effects in the correct order.
+ */
+function flushAllEffects() {
+  const useEffectModule = require('./useEffect');
+  const useLayoutEffectModule = require('./useLayoutEffect');
+
+  // Flush in correct order: insertion -> layout -> passive
+  useLayoutEffectModule.flushLayoutEffects();
+  useEffectModule.flushAllEffects();
+}
+
+// ─── Hook Validation (Development Mode) ───────────────────────────────────────
+
+let hookCallOrder = [];
+let validationEnabled = false;
+
+/**
+ * Enable hook order validation in development mode.
+ * Detects hooks called in different orders across renders.
+ * @param {boolean} enabled
+ */
+function setHookValidation(enabled) {
+  validationEnabled = enabled;
+  hookCallOrder = [];
+}
+
+/**
+ * Record a hook call for validation.
+ * @param {string} hookName - Name of the hook
+ * @param {Object} component - The component instance
+ */
+function recordHookCall(hookName, component) {
+  if (!validationEnabled) return;
+
+  const key = component._componentId || component;
+  if (!hookCallOrder[key]) {
+    hookCallOrder[key] = [];
+  }
+  hookCallOrder[key].push(hookName);
+}
+
+/**
+ * Validate hook call order for a component.
+ * Detects if hooks are called in a different order than previous render.
+ * @param {Object} component
+ * @returns {boolean} True if hook order is valid
+ */
+function validateHookOrder(component) {
+  if (!validationEnabled) return true;
+
+  const key = component._componentId || component;
+  const currentOrder = hookCallOrder[key];
+
+  if (!currentOrder || currentOrder.length === 0) return true;
+
+  if (!component._prevHookOrder) {
+    component._prevHookOrder = currentOrder.slice();
+    return true;
+  }
+
+  const prevOrder = component._prevHookOrder;
+
+  if (prevOrder.length !== currentOrder.length) {
+    console.error(
+      '[Hooks] Hook call order changed! ' +
+      `Previous: [${prevOrder.join(', ')}] ` +
+      `Current: [${currentOrder.join(', ')}]`
+    );
+    return false;
+  }
+
+  for (let i = 0; i < prevOrder.length; i++) {
+    if (prevOrder[i] !== currentOrder[i]) {
+      console.error(
+        '[Hooks] Hook call order changed at index ' + i + '! ' +
+        `Previous: ${prevOrder[i]} Current: ${currentOrder[i]}`
+      );
+      return false;
+    }
+  }
+
+  component._prevHookOrder = currentOrder.slice();
+  return true;
+}
+
+// ─── Development Tools Integration ────────────────────────────────────────────
+
+let devToolsCallback = null;
+
+/**
+ * Register a callback for development tools integration.
+ * Called with hook state changes for inspection.
+ * @param {Function} callback
+ */
+function registerDevTools(callback) {
+  devToolsCallback = callback;
+}
+
+/**
+ * Notify dev tools of a hook state change.
+ * @param {string} hookName
+ * @param {Object} component
+ * @param {*} newValue
+ * @param {*} oldValue
+ */
+function notifyDevTools(hookName, component, newValue, oldValue) {
+  if (devToolsCallback) {
+    try {
+      devToolsCallback({
+        type: 'hook-update',
+        hookName,
+        componentId: component._componentId,
+        componentName: component.displayName || component.name || 'Anonymous',
+        newValue,
+        oldValue,
+        timestamp: Date.now(),
+      });
+    } catch (error) {
+      // Dev tools errors should not break the app
+    }
+  }
+}
+
+// ─── Hook Profiling ───────────────────────────────────────────────────────────
+
+/**
+ * Get comprehensive profiling data for a component.
+ * @param {Object} component
+ * @returns {Object} Profiling data
+ */
+function getComponentProfile(component) {
+  return {
+    callbacks: getCallbackProfile(component),
+    memos: getMemoProfile(component),
+    effectCounts: getPendingEffectCounts(),
+  };
+}
+
+/**
+ * Enable all profiling.
+ * @param {boolean} enabled
+ */
+function setProfiling(enabled) {
+  setCallbackProfiling(enabled);
+  setMemoProfiling(enabled);
+}
+
+// ─── Post-Render Processing ───────────────────────────────────────────────────
+
+/**
+ * Process any post-render tasks like previous value updates.
+ * Called after the render phase completes but before commit.
+ * @param {Object} component
+ */
+function postRenderProcess(component) {
+  processPendingPrevUpdates(component);
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+module.exports = {
+  // ── Core hooks ──
+  useState,
+  useEffect,
+  useContext,
+  useReducer,
+  useCallback,
+  useMemo,
+  useRef,
+  useLayoutEffect,
+
+  // ── Extended hooks ──
+  useInsertionEffect,
+  useIsomorphicLayoutEffect,
+  usePriorityLayoutEffect,
+  useTransition,
+  useDeferredValue,
+  useDebouncedCallback,
+  useThrottledCallback,
+  useOnceCallback,
+  useDeepCompareCallback,
+  useComposedCallback,
+  useMemoWith,
+  useMemoTTL,
+  useDeepCompareMemo,
+  useMemoLRU,
+  useDeepCompareEffect,
+  useEffectOnce,
+  useUpdateEffect,
+  usePrevious,
+  usePreviousWithInit,
+  useMutationObserver,
+  useResizeObserver,
+  useAutoFocus,
+  useContextSelector,
+  useContextObserver,
+
+  // ── Context API ──
+  createContext,
+  useMergedContext,
+  composeContexts,
+
+  // ── Ref utilities ──
+  createRef,
+  useCallbackRef,
+  forwardRef,
+  isForwardRef,
+  useMergedRefs,
+  useMeasureRef,
+  useInViewRef,
+  useFocusRef,
+  useScrollRef,
+
+  // ── Batching ──
+  batchedUpdates,
+  batchDispatches,
+  runWithPriority,
+  startTransition,
+
+  // ── Persistence ──
+  configurePersistence,
+
+  // ── Middleware ──
+  createLoggerMiddleware,
+  createValidationMiddleware,
+  createTransformMiddleware,
+  createThrottleMiddleware,
+  createActionCreators,
+  createAction,
+
+  // ── Memo invalidation ──
+  invalidateMemo,
+  invalidateAllMemos,
+
+  // ── State comparison ──
+  deepEqual,
+  shallowEqual,
+  areDepsEqual,
+  areDepsDeepEqual,
+
+  // ── Framework integration ──
+  setCurrentComponent,
+  resetHookIndex,
+  cleanupComponent,
+  flushAllEffects,
+  postRenderProcess,
+
+  // ── Development tools ──
+  registerDevTools,
+  setHookValidation,
+  validateHookOrder,
+  recordHookCall,
+  setProfiling,
+  getComponentProfile,
+  setStrictMode,
+  isInStrictMode,
+  cancelEffect,
+  getContextVersion,
+  getPendingEffectCounts,
+
+  // ── Constants ──
+  PRIORITY,
+  LAYOUT_PRIORITY,
+};