cogsbox-state 0.5.481 → 0.5.483

package/src/CogsState.tsx

@@ -15,6 +15,10 @@ import {
   useRef,
   useState,
   type CSSProperties,
+  type ChangeEvent,
+  type FocusEvent,
+  type JSX,
+  type MutableRefObject,
   type ReactNode,
   type RefObject,
 } from 'react';
@@ -61,15 +65,15 @@ export type SyncInfo = {
 
 export type FormElementParams<T> = StateObject<T> & {
   $inputProps: {
-    ref?: React.RefObject<any>;
+    ref?: RefObject<any>;
     value?: T extends boolean ? never : T;
     onChange?: (
-      event: React.ChangeEvent<
+      event: ChangeEvent<
         HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
       >
     ) => void;
     onBlur?: (
-      event: React.FocusEvent<
+      event: FocusEvent<
         HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
       >
     ) => void;
@@ -165,11 +169,11 @@ export type EndType<
   $_stateKey: string;
   $isolate: {
     (
-      renderFn: (state: StateObject<T, TPlugins>) => React.ReactNode
+      renderFn: (state: StateObject<T, TPlugins>) => ReactNode
     ): JSX.Element;
     (
       dependencies: any[],
-      renderFn: (state: StateObject<T, TPlugins>) => React.ReactNode
+      renderFn: (state: StateObject<T, TPlugins>) => ReactNode
     ): JSX.Element;
   };
   $formElement: (
@@ -202,7 +206,7 @@ export type EndType<
     children,
     hideMessage,
   }: {
-    children: React.ReactNode;
+    children: ReactNode;
     hideMessage?: boolean;
   }) => JSX.Element;
   $lastSynced?: SyncInfo;
@@ -542,7 +546,7 @@ export type FormsElementsType<
 > = {
   // These optional, built-in wrappers are unchanged.
   validation?: (options: {
-    children: React.ReactNode;
+    children: ReactNode;
     status: ValidationStatus;
     severity: ValidationSeverity;
     hasErrors: boolean;
@@ -564,13 +568,13 @@ export type FormsElementsType<
           ScopedPluginApi<THookReturn, TFieldMetaData>
         : never;
     };
-  }) => React.ReactNode;
+  }) => ReactNode;
   syncRender?: (options: {
-    children: React.ReactNode;
+    children: ReactNode;
     time: number;
     data?: TState;
     key?: string;
-  }) => React.ReactNode;
+  }) => ReactNode;
 };
 const {
   getInitialOptions,
@@ -824,31 +828,42 @@ type KeyedKeys<P> = {
     : never;
 }[keyof P];
 
+type PluginOptionEntry<
+  P,
+  StateKey extends PropertyKey,
+> = P extends undefined
+  ? never
+  : P extends Record<string, any>
+    ? Prettify<
+        Partial<Pick<P, Exclude<keyof P, KeyedKeys<P>>>> & {
+          [K in KeyedKeys<P> as StateKey extends keyof NonNullable<
+            P[K]
+          >['map']
+            ? NonNullable<P[K]>['map'][StateKey] extends undefined
+              ? never
+              : keyof NonNullable<P[K]>['map'][StateKey] extends never
+                ? never
+                : K
+            : never]: CleanIntersection<
+            StateKey extends keyof NonNullable<P[K]>['map']
+              ? NonNullable<P[K]>['map'][StateKey]
+              : never
+          >;
+        }
+      >
+    : P extends object
+      ? Partial<P> extends P
+        ? Partial<P>
+        : P
+      : P;
+
 type PluginOptionsForState<
   PluginOptions,
   StateKey extends PropertyKey,
 > = {
-  [PName in keyof PluginOptions]?: PluginOptions[PName] extends infer P
-    ? P extends Record<string, any>
-      ? Prettify<
-          Partial<Pick<P, Exclude<keyof P, KeyedKeys<P>>>> & {
-            [K in KeyedKeys<P> as StateKey extends keyof NonNullable<
-              P[K]
-            >['map']
-              ? NonNullable<P[K]>['map'][StateKey] extends undefined
-                ? never
-                : keyof NonNullable<P[K]>['map'][StateKey] extends never
-                  ? never
-                  : K
-              : never]: CleanIntersection<
-              StateKey extends keyof NonNullable<P[K]>['map']
-                ? NonNullable<P[K]>['map'][StateKey]
-                : never
-            >;
-          }
-        >
-      : P
-    : never;
+  [PName in keyof PluginOptions as PluginOptions[PName] extends undefined
+    ? never
+    : PName]?: PluginOptionEntry<PluginOptions[PName], StateKey>;
 };
 
 type UseCogsStateOptions<
@@ -983,29 +998,8 @@ export const createCogsState = <
   const useCogsState = <StateKey extends StateKeys>(
     stateKey: StateKey,
     options?: Prettify<
-      OptionsType<StateSlice<StateKey>, never> & {
-        [PName in keyof PluginOptions]?: PluginOptions[PName] extends infer P
-          ? P extends Record<string, any>
-            ? Prettify<
-                Partial<Pick<P, Exclude<keyof P, KeyedKeys<P>>>> & {
-                  [K in KeyedKeys<P> as StateKey extends keyof NonNullable<
-                    P[K]
-                  >['map']
-                    ? NonNullable<P[K]>['map'][StateKey] extends undefined
-                      ? never
-                      : keyof NonNullable<P[K]>['map'][StateKey] extends never
-                        ? never
-                        : K
-                    : never]: CleanIntersection<
-                    StateKey extends keyof NonNullable<P[K]>['map']
-                      ? NonNullable<P[K]>['map'][StateKey]
-                      : never
-                  >;
-                }
-              >
-            : P
-          : never;
-      }
+      OptionsType<StateSlice<StateKey>, never> &
+        PluginOptionsForState<PluginOptions, StateKey>
     >
   ): StateObject<StateSlice<StateKey>> => {
     const [componentId] = useState(options?.componentId ?? uuidv4());
@@ -1046,10 +1040,10 @@ export const createCogsState = <
     useEffect(() => {
       pluginStore
         .getState()
-        .stateHandlers.set(stateKey as string, updater as any);
+        .registerStateHandler(stateKey as string, updater as any);
 
       return () => {
-        pluginStore.getState().stateHandlers.delete(stateKey as string);
+        pluginStore.getState().unregisterStateHandler(stateKey as string);
       };
     }, [stateKey, updater]);
 
@@ -1630,7 +1624,7 @@ function flushQueue() {
 function createEffectiveSetState<T>(
   thisKey: string,
   sessionId: string | undefined,
-  latestInitialOptionsRef: React.MutableRefObject<OptionsType<T> | null>
+  latestInitialOptionsRef: MutableRefObject<OptionsType<T> | null>
 ): EffectiveSetState<T> {
   return (newStateOrFunction, path, updateObj) => {
     executeUpdate(thisKey, path, newStateOrFunction, updateObj);
@@ -1733,7 +1727,7 @@ export function useCogsStateFn<
     defaultState?: TStateObject;
     syncOptions?: SyncOptionsType<any>;
   } & OptionsType<TStateObject> = {}
-) {
+): StateObject<TStateObject, TPlugins> {
   const [reactiveForce, forceUpdate] = useState({}); //this is the key to reactivity
   const { sessionId } = useCogsConfig();
   let noStateKey = stateKey ? false : true;
@@ -3556,7 +3550,7 @@ function createProxyHandler<
             children,
             hideMessage,
           }: {
-            children: React.ReactNode;
+            children: ReactNode;
             hideMessage?: boolean;
           }) => (
             <ValidationWrapper
@@ -3618,8 +3612,8 @@ function createProxyHandler<
         if (prop === '$isolate') {
           // We accept (renderFn) OR (deps, renderFn)
           return (
-            arg1: any[] | ((state: any) => React.ReactNode),
-            arg2?: (state: any) => React.ReactNode
+            arg1: any[] | ((state: any) => ReactNode),
+            arg2?: (state: any) => ReactNode
           ) => {
             // Check if the first argument is the dependency array
             const hasDependencies = Array.isArray(arg1);

package/src/CogsStateClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, type ReactNode } from "react";
 type ConfigType = { sessionId?: string };
 export const config: ConfigType = {
   sessionId: undefined,
@@ -14,7 +14,7 @@ export function CogsStateClient({
   children,
   sessionId,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   sessionId?: string;
 }) {
   return (

package/src/Components.tsx

@@ -20,6 +20,7 @@ import React, {
   useRef,
   useState,
   useMemo,
+  type ReactNode,
 } from 'react';
 import { getGlobalStore, ValidationError, ValidationSeverity } from './store';
 import { useInView } from 'react-intersection-observer';
@@ -46,7 +47,7 @@ export type ValidationWrapperProps = {
   formOpts?: FormOptsType;
   path: string[];
   stateKey: string;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export function ValidationWrapper({
@@ -241,7 +242,7 @@ export function FormElementWrapper({
     componentId: string;
     meta?: any;
   }) => any;
-  renderFn: (params: FormElementParams<any>) => React.ReactNode;
+  renderFn: (params: FormElementParams<any>) => ReactNode;
   formOpts?: FormOptsType;
   setState: any;
 }) {
@@ -626,7 +627,7 @@ export function IsolatedComponentWrapper({
 }
 // 1. Define the MINIMAL props needed.
 type PluginWrapperProps = {
-  children: React.ReactNode;
+  children: ReactNode;
   stateKey: string;
   path: string[];
   pluginName: string;

package/src/PluginRunner.tsx

@@ -1,4 +1,11 @@
-import React, { useEffect, useMemo, useState, useRef, useReducer } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
 import { ClientActivityEvent, pluginStore } from './pluginStore';
 import { isDeepEqual } from './utility';
 import {
@@ -168,52 +175,42 @@ const PluginInstance = React.memo(
  * 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;
-  }, []);
-
+export function PluginRunner({ children }: { children: ReactNode }) {
   const { pluginOptions, stateHandlers, registeredPlugins } =
-    pluginStore.getState();
+    useSyncExternalStore(
+      pluginStore.subscribe,
+      () => pluginStore.getState(),
+      () => pluginStore.getState()
+    );
+
+  const pluginNeedsRunner = (
+    plugin: CogsPlugin<any, any, any, any, any, any, any>
+  ) =>
+    !!(
+      plugin.useHook ||
+      plugin.transformState ||
+      plugin.onUpdate ||
+      plugin.onFormUpdate
+    );
 
   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.
-          }
+      {Array.from(stateHandlers.entries()).flatMap(([stateKey, stateHandler]) =>
+        registeredPlugins.filter(pluginNeedsRunner).map((plugin) => {
+          const options =
+            pluginOptions.get(stateKey)?.get(plugin.name) ?? {};
 
-          // Render a dedicated, memoized controller for this specific plugin configuration.
           return (
             <PluginInstance
-              key={`${stateKey}:${pluginName}`}
+              key={`${stateKey}:${plugin.name}`}
               stateKey={stateKey}
               plugin={plugin}
               options={options}
               stateHandler={stateHandler}
             />
           );
-        });
-      })}
+        })
+      )}
 
       {children}
     </>

package/src/pluginStore.ts

@@ -39,6 +39,7 @@ export type ClientActivityEvent = {
 type PluginRegistryStore = {
   stateHandlers: Map<string, StateObject<any>>; // stateKey -> handler
   registerStateHandler: (stateKey: string, handler: StateObject<any>) => void;
+  unregisterStateHandler: (stateKey: string) => void;
   registeredPlugins: readonly CogsPlugin<any, any, any, any, any>[];
   setRegisteredPlugins: (
     plugins: readonly CogsPlugin<any, any, any, any, any>[]
@@ -78,7 +79,12 @@ export const pluginStore = create<PluginRegistryStore>((set, get) => ({
     set((state) => {
       const newMap = new Map(state.stateHandlers);
       newMap.set(stateKey, handler);
-      console.log('addign handler', stateKey, handler);
+      return { stateHandlers: newMap };
+    }),
+  unregisterStateHandler: (stateKey) =>
+    set((state) => {
+      const newMap = new Map(state.stateHandlers);
+      newMap.delete(stateKey);
       return { stateHandlers: newMap };
     }),
   registeredPlugins: [],

package/src/plugins.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import type React from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { StateObject, UpdateTypeDetail } from './CogsState';
 import {
   getGlobalStore,
@@ -7,7 +7,6 @@ import {
   setAllFieldsDisabled,
 } from './store';
 import { ClientActivityEvent } from './pluginStore';
-import { RefObject } from 'react';
 
 type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
@@ -228,7 +227,7 @@ export type FormWrapperParams<
   TFieldMetaData,
   TStateSlice = any,
 > = ScopedMetadataMethods<TFieldMetaData> & {
-  element: React.ReactNode;
+  element: ReactNode;
   path: string[];
   stateKey: string;
   options: TOptions;
@@ -307,7 +306,7 @@ export type CogsPlugin<
       TFieldMetaData,
       any
     >
-  ) => React.ReactNode;
+  ) => ReactNode;
 
   chainMethods?: TChainMethods;
 };
@@ -602,7 +601,7 @@ export type PluginFormWrapperFn<
     TFieldMetaData,
     any
   >
-) => React.ReactNode;
+) => ReactNode;
 
 export type CogsPluginBuilder<
   TName extends string,
@@ -774,7 +773,7 @@ export type CogsPluginBuilder<
           true,
           TNewState
         >;
-      });
+      });
 
 export type CreatePluginStart<
   TName extends string,

package/src/store.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import type { RefObject } from 'react';
 
 import type {
   OptionsType,
@@ -79,7 +80,7 @@ export type ClientActivityState = {
     string,
     {
       // componentId -> element info
-      domRef: React.RefObject<HTMLElement>;
+      domRef: RefObject<HTMLElement>;
       elementType:
         | 'input'
         | 'textarea'