cogsbox-state 0.5.474 → 0.5.475-canary.1

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 &&
@@ -540,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>
   );
 }
@@ -568,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 => {
@@ -718,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,7 +1,11 @@
 import React, { useEffect, useMemo, useState, useRef, useReducer } from 'react';
 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 { ClientActivityState, FormEventType } from './store';
@@ -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,7 +127,7 @@ const PluginInstance = React.memo(
         .getState()
         .subscribeToUpdates(handleUpdate);
       return unsubscribe;
-    }, [stateKey, plugin, options, deconstructed, metadataContext]);
+    }, [stateKey, plugin, options, deconstructed]);
 
     useEffect(() => {
       if (!plugin.onFormUpdate) return;
@@ -125,15 +136,22 @@ const PluginInstance = React.memo(
         event: ClientActivityEvent // Use the proper type
       ) => {
         if (event.stateKey === stateKey) {
+          // 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.path,
-            event: event, // Pass the whole event through, not a transformed version
+            event: event,
             options,
             hookData: hookDataRef.current,
             ...deconstructed,
-            ...metadataContext,
+            ...scopedMetadata, // <-- Use the new scoped context
           });
         }
       };
@@ -142,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/plugins.ts

@@ -54,28 +54,36 @@ export function toDeconstructedMethods(stateHandler: StateObject<any>) {
     },
   };
 }
+type ScopedMetadataMethods<TFieldMetaData> = {
+  getFieldMetaData: () => TFieldMetaData | undefined;
+  setFieldMetaData: (data: Partial<TFieldMetaData>) => void;
+  removeFieldMetaData: () => void;
+};
 
+// These are the existing global methods that still require a path.
+type GlobalMetadataMethods<TFieldMetaData> = {
+  getFieldMetaData: (path: string[]) => TFieldMetaData | undefined;
+  setFieldMetaData: (path: string[], data: Partial<TFieldMetaData>) => void;
+  removeFieldMetaData: (path: string[]) => void;
+};
 // Simplified: All params use the same TFieldMetaData type
 export type UseHookParams<
   TOptions,
   TPluginMetaData,
   TFieldMetaData,
   TStateSlice = any,
-> = DeconstructedCogsMethods<TStateSlice> & {
-  stateKey: string;
+> = DeconstructedCogsMethods<TStateSlice> &
+  GlobalMetadataMethods<TFieldMetaData> & {
+    stateKey: string;
 
-  getPluginMetaData: () => TPluginMetaData | undefined;
-  setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
-  removePluginMetaData: () => void;
-
-  getFieldMetaData: (path: string[]) => TFieldMetaData | undefined;
-  setFieldMetaData: (path: string[], data: Partial<TFieldMetaData>) => void;
-  removeFieldMetaData: (path: string[]) => void;
+    getPluginMetaData: () => TPluginMetaData | undefined;
+    setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
+    removePluginMetaData: () => void;
 
-  options: TOptions;
-  pluginName: string;
-  isInitialMount: boolean;
-};
+    options: TOptions;
+    pluginName: string;
+    isInitialMount: boolean;
+  };
 
 export type TransformStateParams<
   TOptions,
@@ -83,23 +91,20 @@ export type TransformStateParams<
   TPluginMetaData,
   TFieldMetaData,
   TStateSlice = any,
-> = DeconstructedCogsMethods<TStateSlice> & {
-  stateKey: string;
-
-  getPluginMetaData: () => TPluginMetaData | undefined;
-  setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
-  removePluginMetaData: () => void;
-
-  getFieldMetaData: (path: string[]) => TFieldMetaData | undefined;
-  setFieldMetaData: (path: string[], data: Partial<TFieldMetaData>) => void;
-  removeFieldMetaData: (path: string[]) => void;
-
-  options: TOptions;
-  hookData?: THookReturn;
-  previousState?: TStateSlice;
-  isInitialTransform: boolean;
-  pluginName: string;
-};
+> = DeconstructedCogsMethods<TStateSlice> &
+  GlobalMetadataMethods<TFieldMetaData> & {
+    stateKey: string;
+
+    getPluginMetaData: () => TPluginMetaData | undefined;
+    setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
+    removePluginMetaData: () => void;
+
+    options: TOptions;
+    hookData?: THookReturn;
+    previousState?: TStateSlice;
+    isInitialTransform: boolean;
+    pluginName: string;
+  };
 
 export type OnUpdateParams<
   TOptions,
@@ -107,55 +112,49 @@ export type OnUpdateParams<
   TPluginMetaData,
   TFieldMetaData,
   TStateSlice = any,
-> = DeconstructedCogsMethods<TStateSlice> & {
-  stateKey: string;
-
-  getPluginMetaData: () => TPluginMetaData | undefined;
-  setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
-  removePluginMetaData: () => void;
+> = DeconstructedCogsMethods<TStateSlice> &
+  ScopedMetadataMethods<TFieldMetaData> & {
+    stateKey: string;
 
-  getFieldMetaData: (path: string[]) => TFieldMetaData | undefined;
-  setFieldMetaData: (path: string[], data: Partial<TFieldMetaData>) => void;
-  removeFieldMetaData: (path: string[]) => void;
+    getPluginMetaData: () => TPluginMetaData | undefined;
+    setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
+    removePluginMetaData: () => void;
 
-  update: UpdateTypeDetail;
-  path?: string[];
+    update: UpdateTypeDetail;
+    path?: string[];
 
-  options: TOptions;
-  hookData?: THookReturn;
+    options: TOptions;
+    hookData?: THookReturn;
 
-  previousValue?: any;
-  nextValue?: any;
-  updateSource?: 'user' | 'plugin' | 'system';
+    previousValue?: any;
+    nextValue?: any;
+    updateSource?: 'user' | 'plugin' | 'system';
 
-  pluginName: string;
-};
+    pluginName: string;
+  };
 export type OnFormUpdateParams<
   TOptions,
   THookReturn,
   TPluginMetaData,
   TFieldMetaData,
   TStateSlice = any,
-> = DeconstructedCogsMethods<TStateSlice> & {
-  stateKey: string;
-
-  getPluginMetaData: () => TPluginMetaData | undefined;
-  setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
-  removePluginMetaData: () => void;
+> = DeconstructedCogsMethods<TStateSlice> &
+  ScopedMetadataMethods<TFieldMetaData> & {
+    stateKey: string;
 
-  getFieldMetaData: (path: string[]) => TFieldMetaData | undefined;
-  setFieldMetaData: (path: string[], data: Partial<TFieldMetaData>) => void;
-  removeFieldMetaData: (path: string[]) => void;
+    getPluginMetaData: () => TPluginMetaData | undefined;
+    setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
+    removePluginMetaData: () => void;
 
-  path: string[];
-  event: ClientActivityEvent; // Update this to use the full event type
+    path: string[];
+    event: ClientActivityEvent; // Update this to use the full event type
 
-  options: TOptions;
-  hookData?: THookReturn;
+    options: TOptions;
+    hookData?: THookReturn;
 
-  formState?: 'pristine' | 'dirty' | 'submitting' | 'submitted';
-  pluginName: string;
-};
+    formState?: 'pristine' | 'dirty' | 'submitting' | 'submitted';
+    pluginName: string;
+  };
 
 export type FormWrapperParams<
   TOptions,
@@ -163,7 +162,7 @@ export type FormWrapperParams<
   TPluginMetaData,
   TFieldMetaData,
   TStateSlice = any,
-> = {
+> = ScopedMetadataMethods<TFieldMetaData> & {
   element: React.ReactNode;
   path: string[];
   stateKey: string;
@@ -184,10 +183,6 @@ export type FormWrapperParams<
   setPluginMetaData: (data: Partial<TPluginMetaData>) => void;
   removePluginMetaData: () => void;
 
-  getFieldMetaData: (path: string[]) => TFieldMetaData | undefined;
-  setFieldMetaData: (path: string[], data: Partial<TFieldMetaData>) => void;
-  removeFieldMetaData: (path: string[]) => void;
-
   pluginName: string;
 };
 
@@ -246,21 +241,6 @@ export type CogsPlugin<
   ) => React.ReactNode;
 };
 
-// Extract plugin options helper
-export type ExtractPluginOptions<
-  TPlugins extends readonly CogsPlugin<any, any, any, any, any>[],
-> = {
-  [P in TPlugins[number] as P['name']]?: P extends CogsPlugin<
-    any,
-    infer O,
-    any,
-    any,
-    any
-  >
-    ? O
-    : never;
-};
-
 // Metadata helpers
 export function createMetadataContext<TPluginMetaData, TFieldMetaData>(
   stateKey: string,
@@ -299,6 +279,29 @@ export function createMetadataContext<TPluginMetaData, TFieldMetaData>(
   };
 }
 
+export function createScopedMetadataContext<TPluginMetaData, TFieldMetaData>(
+  stateKey: string,
+  pluginName: string,
+  path: string[]
+) {
+  const globalContext = createMetadataContext<TPluginMetaData, TFieldMetaData>(
+    stateKey,
+    pluginName
+  );
+
+  return {
+    // Return the global methods for plugin metadata
+    ...globalContext,
+    // Override the field methods with new, path-scoped versions
+    getFieldMetaData: (): TFieldMetaData | undefined =>
+      globalContext.getFieldMetaData(path),
+
+    setFieldMetaData: (data: Partial<TFieldMetaData>) =>
+      globalContext.setFieldMetaData(path, data),
+
+    removeFieldMetaData: () => globalContext.removeFieldMetaData(path),
+  };
+}
 type ZodObjOutput<T extends z.ZodObject<any>> = {
   [K in keyof T['shape']]: z.output<T['shape'][K]>;
 };
@@ -343,15 +346,6 @@ export function createPluginContext<
       >
     ) => void;
 
-    type FormWrapperFn<THookReturn> = (
-      params: FormWrapperParams<
-        Options,
-        THookReturn,
-        PluginMetaData,
-        FieldMetaData
-      >
-    ) => React.ReactNode;
-
     type Plugin<THookReturn> = Prettify<
       CogsPlugin<TName, Options, THookReturn, PluginMetaData, FieldMetaData>
     >;
@@ -362,8 +356,7 @@ export function createPluginContext<
       ) => THookReturn,
       transformFn?: TransformFn<THookReturn>,
       updateHandler?: UpdateFn<THookReturn>,
-      formUpdateHandler?: FormUpdateFn<THookReturn>,
-      formWrapper?: FormWrapperFn<THookReturn>
+      formUpdateHandler?: FormUpdateFn<THookReturn>
     ): Plugin<THookReturn> => {
       return {
         name,
@@ -371,7 +364,6 @@ export function createPluginContext<
         transformState: transformFn as any,
         onUpdate: updateHandler as any,
         onFormUpdate: formUpdateHandler as any,
-        formWrapper: formWrapper as any,
       };
     };
 
@@ -414,19 +406,6 @@ export function createPluginContext<
             onFormUpdate(
               fn: FormUpdateFn<THookReturn>
             ): BuildRet<THookReturn, HasTransform, HasUpdate, true, HasWrapper>;
-          }) &
-      (HasWrapper extends true
-        ? {}
-        : {
-            formWrapper(
-              fn: FormWrapperFn<THookReturn>
-            ): BuildRet<
-              THookReturn,
-              HasTransform,
-              HasUpdate,
-              HasFormUpdate,
-              true
-            >;
           });
 
     function createBuilder<
@@ -441,8 +420,7 @@ export function createPluginContext<
       ) => THookReturn,
       transformFn?: TransformFn<THookReturn>,
       updateHandler?: UpdateFn<THookReturn>,
-      formUpdateHandler?: FormUpdateFn<THookReturn>,
-      formWrapper?: FormWrapperFn<THookReturn>
+      formUpdateHandler?: FormUpdateFn<THookReturn>
     ): BuildRet<
       THookReturn,
       HasTransform,
@@ -454,8 +432,7 @@ export function createPluginContext<
         hookFn,
         transformFn,
         updateHandler,
-        formUpdateHandler,
-        formWrapper
+        formUpdateHandler
       );
 
       const methods = {} as Partial<
@@ -476,7 +453,7 @@ export function createPluginContext<
             HasUpdate,
             HasFormUpdate,
             HasWrapper
-          >(hookFn, fn, updateHandler, formUpdateHandler, formWrapper);
+          >(hookFn, fn, updateHandler, formUpdateHandler);
       }
       if (!updateHandler) {
         (methods as any).onUpdate = (fn: UpdateFn<THookReturn>) =>
@@ -486,7 +463,7 @@ export function createPluginContext<
             true,
             HasFormUpdate,
             HasWrapper
-          >(hookFn, transformFn, fn, formUpdateHandler, formWrapper);
+          >(hookFn, transformFn, fn, formUpdateHandler);
       }
       if (!formUpdateHandler) {
         (methods as any).onFormUpdate = (fn: FormUpdateFn<THookReturn>) =>
@@ -494,20 +471,9 @@ export function createPluginContext<
             hookFn,
             transformFn,
             updateHandler,
-            fn,
-            formWrapper
+            fn
           );
       }
-      if (!formWrapper) {
-        (methods as any).formWrapper = (fn: FormWrapperFn<THookReturn>) =>
-          createBuilder<
-            THookReturn,
-            HasTransform,
-            HasUpdate,
-            HasFormUpdate,
-            true
-          >(hookFn, transformFn, updateHandler, formUpdateHandler, fn);
-      }
 
       return Object.assign(plugin, methods) as BuildRet<
         THookReturn,

package/src/store.ts

@@ -1232,7 +1232,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
         `Array not found at path: ${[key, ...arrayPath].join('.')}`
       );
     }
-    console.log('OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO');
+
     const newItemId = itemId || `${generateId(key)}`;
 
     // BUILD AND ADD the node directly - no need for addItemsToArrayNode