feat: add middleware for tracking and improve field validation readability

Author: Ohh-889

packages/ui/src/components/form/index.ts

@@ -12,7 +12,7 @@ export {
   useWatch
 } from 'skyroc-form';
 
-export type { FormInstance } from 'skyroc-form';
+export type { Action as FormAction, FormInstance } from 'skyroc-form';
 
 export { default as FormField } from './FormField';
 

playground/src/app/(demo)/form/modules/Middleware.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useEffect } from 'react';
+import type { FormAction } from 'soybean-react-ui';
+import { Button, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
+
+// ============ Analytics Middleware (logging/tracking) ============
+function analyticsMiddleware({ getState }: { dispatch: (a: FormAction) => void; getState: () => any }) {
+  return (next: (a: FormAction) => void) => (action: FormAction) => {
+    // the action before the middleware
+    console.log('[middleware] before', action, 'state:', getState());
+
+    next(action); // run default logic first
+
+    // the action after the middleware
+    console.log('[middleware] after', action, 'state:', getState());
+
+    if (action.type === 'setFieldValue') {
+      console.log(`[Analytics] User modified field: ${action.name}`, action.value);
+      // Report tracking event
+      // report({ field: action.name, value: action.value });
+    }
+  };
+}
+
+// ============ Form field types ============
+type Inputs = {
+  confirmPassword: string;
+  password: string;
+  username: string;
+};
+
+const initialValues: Inputs = {
+  confirmPassword: '123456',
+  password: '123456',
+  username: 'ohh'
+};
+
+const UseFormWithMiddleware = () => {
+  const [form] = useForm<Inputs>();
+
+  useEffect(() => {
+    // Register middleware: add analytics/tracing for form actions
+    form.use(analyticsMiddleware);
+  }, []);
+
+  return (
+    <Card title="UseForm with Middleware (Sync Password)">
+      <Form
+        className="w-[480px] max-sm:w-full space-y-4"
+        form={form}
+        initialValues={initialValues}
+      >
+        <FormField
+          label="Username"
+          name="username"
+        >
+          <Input />
+        </FormField>
+
+        <FormField
+          label="Password"
+          name="password"
+        >
+          <Input />
+        </FormField>
+
+        <FormField
+          label="Confirm Password"
+          name="confirmPassword"
+        >
+          <Input />
+        </FormField>
+
+        <div className="flex gap-2 flex-wrap">
+          <Button type="submit">Submit</Button>
+          <Button onClick={() => form.setFieldValue('username', 'ohh-889')}>Set Username</Button>
+        </div>
+      </Form>
+    </Card>
+  );
+};
+
+export default UseFormWithMiddleware;

playground/src/app/(demo)/form/page.tsx

@@ -3,6 +3,7 @@ import ComputedDemo from './modules/ComputedDemo';
 import Default from './modules/Default';
 import FieldChange from './modules/FieldChange';
 import List from './modules/List';
+import Middleware from './modules/Middleware';
 import Preserve from './modules/Preserve';
 import Reset from './modules/Reset';
 import UseForm from './modules/UseForm';
@@ -36,6 +37,8 @@ const FormPage = () => {
 
       <Preserve />
 
+      <Middleware />
+
       <ClearDestroy />
     </div>
   );

primitives/filed-form /src/form-core/createStore.ts

@@ -144,8 +144,6 @@ class FormStore {
   >();
   /** Reverse index mapping dependency keys to computed fields */
   private _depIndex = new Map<string, Set<string>>();
-  /** Queue for recomputation (reserved for future use) */
-  private _recomputeQueue = new Set<string>();
 
   // Field visibility management
   /** Set of disabled field keys */
@@ -266,12 +264,7 @@ class FormStore {
   /**
    * Enhanced dispatch function that processes actions through middleware chain
    */
-  private dispatch = (a: Action) => {
-    const ctx = { dispatch: (x: Action) => this.dispatch(x), getState: () => this._store };
-    const chain = this._middlewares.map(mw => mw(ctx));
-    const reduced = chain.reduceRight((next, mw) => mw(next), this.baseDispatch);
-    reduced(a);
-  };
+  private dispatch = (a: Action) => this.baseDispatch(a);
 
   // ------------------------------------------------
   // Store and Initial Values Management

primitives/filed-form /src/index.ts

@@ -1,3 +1,5 @@
 export type { AllPathsKeys, FieldElement } from 'skyroc-type-utils';
 
+export type { Action } from './form-core/middleware';
+
 export * from './react';

primitives/filed-form /src/react/components/Field.tsx

@@ -61,10 +61,12 @@ function Field<Values = any>(props: FieldProps<Values>) {
     getFieldsValue,
     getFieldValue,
     getInternalHooks,
+    setFieldValue,
+    validateField,
     validateTrigger: fieldValidateTrigger
   } = fieldContext as unknown as InternalFormInstance<Values>;
 
-  const { dispatch, registerField, setFieldRules } = getInternalHooks();
+  const { registerField, setFieldRules } = getInternalHooks();
 
   const isControlled = controlMode === 'controlled';
 
@@ -75,7 +77,7 @@ function Field<Values = any>(props: FieldProps<Values>) {
   const make =
     (evt: string) =>
     (..._args: any[]) =>
-      dispatch({ name, opts: { trigger: evt }, type: 'validateField' });
+      validateField(name, { trigger: evt });
 
   const restValidateTriggerList = validateTriggerList
     .filter(item => item !== trigger)
@@ -115,19 +117,11 @@ function Field<Values = any>(props: FieldProps<Values>) {
           }
 
           if (newValue !== oldValue) {
-            dispatch({
-              name,
-              type: 'setFieldValue',
-              value: newValue
-            });
+            setFieldValue(name, newValue);
           }
 
-          if (validateTriggerList.includes(trigger)) {
-            dispatch({
-              name,
-              opts: { trigger },
-              type: 'validateField'
-            });
+          if (validateTriggerList.includes(trigger) && rules) {
+            validateField(name, { trigger });
           }
         }
       : undefined

primitives/filed-form /src/react/hooks/FieldContext.ts

@@ -85,7 +85,7 @@ export interface OperationOptions<Values = any> {
   resetFields: (names?: AllPathsKeys<Values>[]) => void;
   submit: () => void;
   use: (mw: Middleware) => void;
-  validateField: (name: AllPathsKeys<Values>) => Promise<boolean>;
+  validateField: (name: AllPathsKeys<Values>, opts?: ValidateOptions) => Promise<boolean>;
   validateFields: (names?: AllPathsKeys<Values>[], opts?: ValidateFieldsOptions) => Promise<boolean>;
 }