cogsbox-state 0.5.472 → 0.5.473

package/src/PluginRunner.tsx

@@ -0,0 +1,208 @@
+import React, { useEffect, useMemo, useState, useRef, useReducer } from 'react';
+import { pluginStore } from './pluginStore';
+import { isDeepEqual } from './utility';
+import { createMetadataContext, toDeconstructedMethods } from './plugins';
+import type { CogsPlugin } from './plugins';
+import type { StateObject, UpdateTypeDetail } from './CogsState';
+import { FormEventType } from './store';
+
+const { setHookResult, removeHookResult } = pluginStore.getState();
+
+const PluginInstance = React.memo(
+  ({
+    stateKey,
+    plugin,
+    options,
+    stateHandler,
+  }: {
+    stateKey: string;
+    plugin: CogsPlugin<any, any, any, any, any>;
+    options: any;
+    stateHandler: StateObject<any>;
+  }) => {
+    const [isInitialMount, setIsInitialMount] = useState(true);
+    const metadataContext = useMemo(
+      () => createMetadataContext(stateKey, plugin.name),
+      [stateKey, plugin.name]
+    );
+
+    const deconstructed = useMemo(
+      () => toDeconstructedMethods(stateHandler),
+      [stateHandler]
+    );
+
+    const hookContext = useMemo(
+      () => ({
+        stateKey,
+        pluginName: plugin.name,
+        isInitialMount,
+        options,
+        ...deconstructed,
+        ...metadataContext,
+      }),
+      [
+        stateKey,
+        plugin.name,
+        isInitialMount,
+        options,
+        deconstructed,
+        metadataContext,
+      ]
+    );
+
+    const hookData = plugin.useHook ? plugin.useHook(hookContext) : undefined;
+
+    useEffect(() => {
+      setIsInitialMount(false);
+    }, []);
+
+    useEffect(() => {
+      if (plugin.useHook) setHookResult(stateKey, plugin.name, hookData);
+      else removeHookResult(stateKey, plugin.name);
+      return () => removeHookResult(stateKey, plugin.name);
+    }, [stateKey, plugin.name, !!plugin.useHook, hookData]);
+
+    const lastProcessedOptionsRef = useRef<any>();
+    const [isInitialTransform, setIsInitialTransform] = useState(true);
+
+    useEffect(() => {
+      if (plugin.transformState) {
+        if (!isDeepEqual(options, lastProcessedOptionsRef.current)) {
+          plugin.transformState({
+            stateKey,
+            pluginName: plugin.name,
+            options,
+            hookData,
+            isInitialTransform,
+            ...deconstructed,
+            ...metadataContext,
+          });
+          lastProcessedOptionsRef.current = options;
+          setIsInitialTransform(false);
+        }
+      }
+    }, [
+      stateKey,
+      plugin,
+      options,
+      hookData,
+      isInitialTransform,
+      deconstructed,
+      metadataContext,
+    ]);
+
+    const hookDataRef = useRef(hookData);
+    hookDataRef.current = hookData;
+
+    useEffect(() => {
+      if (!plugin.onUpdate) return;
+
+      const handleUpdate = (update: UpdateTypeDetail) => {
+        if (update.stateKey === stateKey) {
+          plugin.onUpdate!({
+            stateKey,
+            pluginName: plugin.name,
+            update,
+            path: update.path,
+            options,
+            hookData: hookDataRef.current,
+            ...deconstructed,
+            ...metadataContext,
+          });
+        }
+      };
+
+      const unsubscribe = pluginStore
+        .getState()
+        .subscribeToUpdates(handleUpdate);
+      return unsubscribe;
+    }, [stateKey, plugin, options, deconstructed, metadataContext]);
+
+    useEffect(() => {
+      if (!plugin.onFormUpdate) return;
+
+      const handleFormUpdate = (
+        event: FormEventType & { stateKey: string }
+      ) => {
+        if (event.stateKey === stateKey) {
+          const path = event.path;
+          plugin.onFormUpdate!({
+            stateKey,
+            pluginName: plugin.name,
+            path,
+            event: {
+              type: event.type,
+              value: event.value,
+              path,
+            },
+            options,
+            hookData: hookDataRef.current,
+            ...deconstructed,
+            ...metadataContext,
+          });
+        }
+      };
+
+      const unsubscribe = pluginStore
+        .getState()
+        .subscribeToFormUpdates(handleFormUpdate);
+      return unsubscribe;
+    }, [stateKey, plugin, options, deconstructed, metadataContext]);
+
+    return null;
+  }
+);
+/**
+ * The main orchestrator component. It reads from the central pluginStore
+ * and renders a `PluginInstance` controller for each active plugin.
+ */
+export function PluginRunner({ children }: { children: React.ReactNode }) {
+  // A simple way to force a re-render when the store changes.
+  const [, forceUpdate] = useReducer((c) => c + 1, 0);
+
+  // Subscribe to the store. When plugins or their options are added/removed,
+  // this component will re-render to update the list of PluginInstances.
+  useEffect(() => {
+    const unsubscribe = pluginStore.subscribe(forceUpdate);
+    return unsubscribe;
+  }, []);
+
+  const { pluginOptions, stateHandlers, registeredPlugins } =
+    pluginStore.getState();
+
+  return (
+    <>
+      {/*
+        This declarative mapping is the core of the solution.
+        React will now manage adding and removing `PluginInstance` components
+        as the application state changes, ensuring hooks are handled safely.
+      */}
+      {Array.from(pluginOptions.entries()).map(([stateKey, pluginMap]) => {
+        const stateHandler = stateHandlers.get(stateKey);
+        if (!stateHandler) {
+          return null; // Don't render a runner if the state handler isn't ready.
+        }
+
+        return Array.from(pluginMap.entries()).map(([pluginName, options]) => {
+          const plugin = registeredPlugins.find((p) => p.name === pluginName);
+          if (!plugin) {
+            return null; // Don't render if the plugin is not in the registered list.
+          }
+
+          // Render a dedicated, memoized controller for this specific plugin configuration.
+          return (
+            <PluginInstance
+              key={`${stateKey}:${pluginName}`}
+              stateKey={stateKey}
+              plugin={plugin}
+              options={options}
+              stateHandler={stateHandler}
+            />
+          );
+        });
+      })}
+
+      {children}
+    </>
+  );
+}

package/src/index.ts

@@ -3,3 +3,5 @@ export * from './CogsStateClient.js';
 export * from './utility.js';
 export * from './TRPCValidationLink.js';
 export * from './store.js';
+export * from './plugins.js';
+export * from './PluginRunner.js';

package/src/pluginStore.ts

@@ -0,0 +1,159 @@
+import { create } from 'zustand';
+import type { PluginData, StateObject, UpdateTypeDetail } from './CogsState';
+import type { CogsPlugin } from './plugins';
+
+type PluginRegistryStore = {
+  stateHandlers: Map<string, StateObject<any>>; // stateKey -> handler
+  registerStateHandler: (stateKey: string, handler: StateObject<any>) => void;
+  registeredPlugins: readonly CogsPlugin<any, any, any, any, any>[];
+  setRegisteredPlugins: (
+    plugins: readonly CogsPlugin<any, any, any, any, any>[]
+  ) => void;
+
+  // Store options keyed by stateKey and pluginName
+  pluginOptions: Map<string, Map<string, any>>; // stateKey -> pluginName -> options
+  setPluginOptionsForState: (
+    stateKey: string,
+    pluginOptions: Record<string, any>
+  ) => void;
+
+  // Get all plugin configs for a specific stateKey
+  getPluginConfigsForState: (stateKey: string) => Array<{
+    plugin: CogsPlugin<any, any, any, any, any>;
+    options: any;
+  }>;
+  updateSubscribers: Set<(update: UpdateTypeDetail) => void>;
+  subscribeToUpdates: (
+    callback: (update: UpdateTypeDetail) => void
+  ) => () => void;
+  notifyUpdate: (update: UpdateTypeDetail) => void;
+  formUpdateSubscribers: Set<
+    (event: {
+      stateKey: string;
+      type: 'focus' | 'blur' | 'input';
+      path: string[];
+      value?: any;
+    }) => void
+  >;
+  subscribeToFormUpdates: (
+    callback: (event: {
+      stateKey: string;
+      type: 'focus' | 'blur' | 'input';
+      path: string[];
+      value?: any;
+    }) => void
+  ) => () => void;
+  notifyFormUpdate: (event: {
+    stateKey: string;
+    type: 'focus' | 'blur' | 'input';
+    path: string[];
+    value?: any;
+  }) => void;
+  hookResults: Map<string, Map<string, any>>; // stateKey -> pluginName -> hook
+  setHookResult: (stateKey: string, pluginName: string, data: any) => void;
+  getHookResult: (stateKey: string, pluginName: string) => any | undefined;
+  removeHookResult: (stateKey: string, pluginName: string) => void;
+};
+
+export const pluginStore = create<PluginRegistryStore>((set, get) => ({
+  stateHandlers: new Map(),
+  registerStateHandler: (stateKey, handler) =>
+    set((state) => {
+      const newMap = new Map(state.stateHandlers);
+      newMap.set(stateKey, handler);
+      console.log('addign handler', stateKey, handler);
+      return { stateHandlers: newMap };
+    }),
+  registeredPlugins: [],
+  pluginOptions: new Map(),
+
+  setRegisteredPlugins: (plugins) => set({ registeredPlugins: plugins }),
+
+  setPluginOptionsForState: (stateKey, pluginOptions) =>
+    set((state) => {
+      const newMap = new Map(state.pluginOptions);
+      const statePluginMap = new Map();
+
+      // Store each plugin's options
+      Object.entries(pluginOptions).forEach(([pluginName, options]) => {
+        // Only store if this is actually a registered plugin
+        if (state.registeredPlugins.some((p) => p.name === pluginName)) {
+          statePluginMap.set(pluginName, options);
+        }
+      });
+
+      if (statePluginMap.size > 0) {
+        newMap.set(stateKey, statePluginMap);
+      }
+
+      return { pluginOptions: newMap };
+    }),
+
+  getPluginConfigsForState: (stateKey) => {
+    const state = get();
+    const stateOptions = state.pluginOptions.get(stateKey);
+    if (!stateOptions) return [];
+
+    return state.registeredPlugins
+      .map((plugin) => {
+        const options = stateOptions.get(plugin.name);
+        if (options !== undefined) {
+          return { plugin, options };
+        }
+        return null;
+      })
+      .filter(Boolean) as Array<{
+      plugin: CogsPlugin<any, any, any, any, any>;
+      options: any;
+    }>;
+  },
+  updateSubscribers: new Set(),
+  subscribeToUpdates: (callback) => {
+    const subscribers = get().updateSubscribers;
+    subscribers.add(callback);
+    // Return an unsubscribe function
+    return () => {
+      get().updateSubscribers.delete(callback);
+    };
+  },
+  notifyUpdate: (update) => {
+    // Call all registered subscribers with the update details
+    get().updateSubscribers.forEach((callback) => callback(update));
+  },
+  formUpdateSubscribers: new Set(),
+  subscribeToFormUpdates: (callback) => {
+    const subscribers = get().formUpdateSubscribers;
+    subscribers.add(callback);
+    return () => {
+      get().formUpdateSubscribers.delete(callback);
+    };
+  },
+  notifyFormUpdate: (event) => {
+    get().formUpdateSubscribers.forEach((callback) => callback(event));
+  },
+  hookResults: new Map(),
+
+  setHookResult: (stateKey, pluginName, data) =>
+    set((state) => {
+      const next = new Map(state.hookResults);
+      const byPlugin = new Map(next.get(stateKey) ?? new Map());
+      if (data === undefined) byPlugin.delete(pluginName);
+      else byPlugin.set(pluginName, data);
+      if (byPlugin.size > 0) next.set(stateKey, byPlugin);
+      else next.delete(stateKey);
+      return { hookResults: next };
+    }),
+
+  getHookResult: (stateKey, pluginName) =>
+    get().hookResults.get(stateKey)?.get(pluginName),
+
+  removeHookResult: (stateKey, pluginName) =>
+    set((state) => {
+      const next = new Map(state.hookResults);
+      const byPlugin = new Map(next.get(stateKey) ?? new Map());
+      byPlugin.delete(pluginName);
+      if (byPlugin.size > 0) next.set(stateKey, byPlugin);
+      else next.delete(stateKey);
+      return { hookResults: next };
+    }),
+}));