cogsbox-state 0.5.473 → 0.5.475-canary.0

package/src/Components.tsx

@@ -5,7 +5,11 @@ import {
   type FormOptsType,
 } from './CogsState';
 import { pluginStore } from './pluginStore';
-import { createMetadataContext, toDeconstructedMethods } from './plugins';
+import {
+  createMetadataContext,
+  createScopedMetadataContext,
+  toDeconstructedMethods,
+} from './plugins';
 import React, {
   memo,
   RefObject,
@@ -78,6 +82,34 @@ export function ValidationWrapper({
       : warningMessages.length > 0
         ? 'warning'
         : undefined;
+  const { registeredPlugins } = pluginStore.getState();
+  const pluginsApi: any = {};
+
+  // We iterate over ALL registered plugins in the app.
+  registeredPlugins.forEach((plugin) => {
+    // A plugin is considered "active" for this state key if its name
+    // exists as a key in the options (e.g., options.syncPlugin exists).
+    if (thisStateOpts && thisStateOpts.hasOwnProperty(plugin.name)) {
+      const pluginName = plugin.name;
+
+      // Now we can safely build the API for this active plugin.
+      const hookData = pluginStore
+        .getState()
+        .getHookResult(stateKey, pluginName);
+
+      const scopedMetadata = createScopedMetadataContext(
+        stateKey,
+        pluginName,
+        path
+      );
+
+      pluginsApi[pluginName] = {
+        hookData,
+        getFieldMetaData: scopedMetadata.getFieldMetaData,
+        setFieldMetaData: scopedMetadata.setFieldMetaData,
+      };
+    }
+  });
   return (
     <>
       {thisStateOpts?.formElements?.validation &&
@@ -96,6 +128,7 @@ export function ValidationWrapper({
           allErrors: errors,
           path: path,
           getData: () => getShadowValue(stateKey!, path),
+          plugins: pluginsApi,
         })
       ) : (
         <React.Fragment key={path.toString()}>{children}</React.Fragment>
@@ -244,17 +277,6 @@ export function FormElementWrapper({
   const isCurrentlyDebouncing = useRef(false);
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  // 2. Memoize the list of active form wrappers to avoid re-calculating on every render.
-  const activeFormWrappers = useMemo(() => {
-    return (
-      pluginStore
-        .getState()
-        .getPluginConfigsForState(stateKey)
-        // We only care about plugins that have defined a formWrapper
-        .filter((config) => typeof config.plugin.formWrapper === 'function')
-    );
-  }, [stateKey]);
-
   useEffect(() => {
     if (
       !isCurrentlyDebouncing.current &&
@@ -375,15 +397,24 @@ export function FormElementWrapper({
           setShadowMetadata(stateKey, path, meta);
         }
       }
+      const element = meta?.clientActivityState?.elements?.get(componentId);
 
       // Notify plugins
       notifyFormUpdate({
         stateKey,
-        type: 'input',
+        activityType: 'input', // Changed from 'type'
         path,
-        value: newValue,
+        timestamp: Date.now(),
+        details: {
+          value: newValue,
+          inputLength:
+            typeof newValue === 'string' ? newValue.length : undefined,
+          isComposing: false, // You'd need to track this from the actual input event
+          isPasting: false, // You'd need to track this from paste events
+          keystrokeCount:
+            (element?.currentActivity?.details?.keystrokeCount || 0) + 1,
+        },
       });
-
       // Validation (keep existing)
       const virtualOperation: UpdateTypeDetail = {
         stateKey,
@@ -444,9 +475,12 @@ export function FormElementWrapper({
     // Notify plugins
     notifyFormUpdate({
       stateKey,
-      type: 'focus',
+      activityType: 'focus', // Changed from 'type'
       path,
-      value: localValue,
+      timestamp: Date.now(),
+      details: {
+        cursorPosition: formElementRef.current?.selectionStart,
+      },
     });
   }, [stateKey, path, componentId, localValue]);
   const handleBlur = useCallback(() => {
@@ -470,13 +504,20 @@ export function FormElementWrapper({
       element.currentActivity = undefined;
       setShadowMetadata(stateKey, path, meta);
     }
+    const focusStartTime =
+      meta?.clientActivityState?.elements?.get(componentId)?.currentActivity
+        ?.startTime;
 
     // Notify plugins
     notifyFormUpdate({
       stateKey,
-      type: 'blur',
+      activityType: 'blur', // Changed from 'type'
       path,
-      value: localValue,
+      timestamp: Date.now(),
+      duration: focusStartTime ? Date.now() - focusStartTime : undefined,
+      details: {
+        duration: focusStartTime ? Date.now() - focusStartTime : 0,
+      },
     });
 
     // Run validation if configured
@@ -521,23 +562,9 @@ export function FormElementWrapper({
 
   const initialElement = renderFn(stateWithInputProps);
 
-  const wrappedElement = activeFormWrappers.reduceRight(
-    (currentElement, config, index) => (
-      <PluginWrapper
-        stateKey={stateKey}
-        path={path}
-        pluginName={config.plugin.name}
-        wrapperDepth={activeFormWrappers.length - 1 - index}
-      >
-        {currentElement}
-      </PluginWrapper>
-    ),
-    initialElement
-  );
-
   return (
     <ValidationWrapper formOpts={formOpts} path={path} stateKey={stateKey}>
-      {wrappedElement}
+      {initialElement}
     </ValidationWrapper>
   );
 }
@@ -549,18 +576,15 @@ export function useRegisterComponent(
   const fullComponentId = `${stateKey}////${componentId}`;
 
   useLayoutEffect(() => {
-    // Call the safe, centralized function to register
     registerComponent(stateKey, fullComponentId, {
       forceUpdate: () => forceUpdate({}),
       paths: new Set(),
       reactiveType: ['component'],
     });
-
-    // The cleanup now calls the safe, centralized unregister function
     return () => {
       unregisterComponent(stateKey, fullComponentId);
     };
-  }, [stateKey, fullComponentId]); // Dependencies are stable and correct
+  }, [stateKey, fullComponentId]);
 }
 
 const useImageLoaded = (ref: RefObject<HTMLElement>): boolean => {
@@ -699,16 +723,20 @@ const PluginWrapper = memo(function PluginWrapper({
     return <>{children}</>;
   }
 
-  const metadataContext = createMetadataContext(stateKey, plugin.name);
   const deconstructed = toDeconstructedMethods(stateHandler);
-
+  const scopedMetadataContext = createScopedMetadataContext(
+    stateKey,
+    plugin.name,
+    path
+  );
   return plugin.formWrapper({
     element: children,
     path,
     stateKey,
     pluginName: plugin.name,
     ...deconstructed,
-    ...metadataContext,
+
+    ...scopedMetadataContext,
     options,
     hookData,
     fieldType: typeInfo?.type,

package/src/PluginRunner.tsx

@@ -1,10 +1,14 @@
 import React, { useEffect, useMemo, useState, useRef, useReducer } from 'react';
-import { pluginStore } from './pluginStore';
+import { ClientActivityEvent, pluginStore } from './pluginStore';
 import { isDeepEqual } from './utility';
-import { createMetadataContext, toDeconstructedMethods } from './plugins';
+import {
+  createMetadataContext,
+  createScopedMetadataContext,
+  toDeconstructedMethods,
+} from './plugins';
 import type { CogsPlugin } from './plugins';
 import type { StateObject, UpdateTypeDetail } from './CogsState';
-import { FormEventType } from './store';
+import { ClientActivityState, FormEventType } from './store';
 
 const { setHookResult, removeHookResult } = pluginStore.getState();
 
@@ -99,6 +103,13 @@ const PluginInstance = React.memo(
 
       const handleUpdate = (update: UpdateTypeDetail) => {
         if (update.stateKey === stateKey) {
+          // Create a new, SCOPED context for this specific path
+          const scopedMetadata = createScopedMetadataContext(
+            stateKey,
+            plugin.name,
+            update.path
+          );
+
           plugin.onUpdate!({
             stateKey,
             pluginName: plugin.name,
@@ -107,7 +118,7 @@ const PluginInstance = React.memo(
             options,
             hookData: hookDataRef.current,
             ...deconstructed,
-            ...metadataContext,
+            ...scopedMetadata, // <-- Use the new scoped context
           });
         }
       };
@@ -116,29 +127,31 @@ const PluginInstance = React.memo(
         .getState()
         .subscribeToUpdates(handleUpdate);
       return unsubscribe;
-    }, [stateKey, plugin, options, deconstructed, metadataContext]);
+    }, [stateKey, plugin, options, deconstructed]);
 
     useEffect(() => {
       if (!plugin.onFormUpdate) return;
 
       const handleFormUpdate = (
-        event: FormEventType & { stateKey: string }
+        event: ClientActivityEvent // Use the proper type
       ) => {
         if (event.stateKey === stateKey) {
-          const path = event.path;
+          // Create a new, SCOPED context for this specific path
+          const scopedMetadata = createScopedMetadataContext(
+            stateKey,
+            plugin.name,
+            event.path
+          );
+
           plugin.onFormUpdate!({
             stateKey,
             pluginName: plugin.name,
-            path,
-            event: {
-              type: event.type,
-              value: event.value,
-              path,
-            },
+            path: event.path,
+            event: event,
             options,
             hookData: hookDataRef.current,
             ...deconstructed,
-            ...metadataContext,
+            ...scopedMetadata, // <-- Use the new scoped context
           });
         }
       };
@@ -147,7 +160,7 @@ const PluginInstance = React.memo(
         .getState()
         .subscribeToFormUpdates(handleFormUpdate);
       return unsubscribe;
-    }, [stateKey, plugin, options, deconstructed, metadataContext]);
+    }, [stateKey, plugin, options, deconstructed]);
 
     return null;
   }

package/src/pluginStore.ts

@@ -1,6 +1,40 @@
 import { create } from 'zustand';
 import type { PluginData, StateObject, UpdateTypeDetail } from './CogsState';
 import type { CogsPlugin } from './plugins';
+export type ClientActivityEvent = {
+  stateKey: string;
+  path: string[];
+  timestamp: number;
+  duration?: number;
+} & (
+  | { activityType: 'focus'; details: { cursorPosition?: number } }
+  | { activityType: 'blur'; details: { duration: number } }
+  | {
+      activityType: 'input';
+      details: {
+        value: any;
+        inputLength?: number;
+        isComposing?: boolean;
+        isPasting?: boolean;
+        keystrokeCount?: number;
+      };
+    }
+  | {
+      activityType: 'select';
+      details: {
+        selectionStart: number;
+        selectionEnd: number;
+        selectedText?: string;
+      };
+    }
+  | { activityType: 'hover_enter'; details: { cursorPosition?: number } }
+  | { activityType: 'hover_exit'; details: { duration: number } }
+  | {
+      activityType: 'scroll';
+      details: { scrollTop: number; scrollLeft: number };
+    }
+  | { activityType: 'cursor_move'; details: { cursorPosition: number } }
+);
 
 type PluginRegistryStore = {
   stateHandlers: Map<string, StateObject<any>>; // stateKey -> handler
@@ -27,28 +61,11 @@ type PluginRegistryStore = {
     callback: (update: UpdateTypeDetail) => void
   ) => () => void;
   notifyUpdate: (update: UpdateTypeDetail) => void;
-  formUpdateSubscribers: Set<
-    (event: {
-      stateKey: string;
-      type: 'focus' | 'blur' | 'input';
-      path: string[];
-      value?: any;
-    }) => void
-  >;
+  formUpdateSubscribers: Set<(event: ClientActivityEvent) => void>;
   subscribeToFormUpdates: (
-    callback: (event: {
-      stateKey: string;
-      type: 'focus' | 'blur' | 'input';
-      path: string[];
-      value?: any;
-    }) => void
+    callback: (event: ClientActivityEvent) => void
   ) => () => void;
-  notifyFormUpdate: (event: {
-    stateKey: string;
-    type: 'focus' | 'blur' | 'input';
-    path: string[];
-    value?: any;
-  }) => void;
+  notifyFormUpdate: (event: ClientActivityEvent) => 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;