feat: add form preserve demo

Author: Ohh-889

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

@@ -0,0 +1,45 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import { useState } from 'react';
+import { Button, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
+
+const CustomInput = (props: ComponentProps<typeof Input>) => {
+  console.log('props', props);
+  return <Input {...props} />;
+};
+
+const Preserve = () => {
+  const [form] = useForm();
+
+  const [show, setShow] = useState(true);
+
+  function toggle() {
+    setShow(!show);
+  }
+
+  return (
+    <Card title="Preserve">
+      <Form
+        className="w-[480px] max-sm:w-full space-y-4"
+        form={form}
+      >
+        {show && (
+          <FormField
+            label="Username"
+            name="username"
+          >
+            <CustomInput placeholder="Username" />
+          </FormField>
+        )}
+
+        <div className="flex gap-x-2">
+          <Button onClick={toggle}>Toggle</Button>
+          <Button type="submit">Reset</Button>
+        </div>
+      </Form>
+    </Card>
+  );
+};
+
+export default Preserve;

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Button, ButtonGroup, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
+import { Button, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
 
 type Inputs = {
   info: { city: string; company: string };

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

@@ -1,5 +1,6 @@
 import Default from './modules/Default';
 import FieldChange from './modules/FieldChange';
+import Preserve from './modules/Preserve';
 import Reset from './modules/Reset';
 import UseWatch from './modules/UseWatch';
 import Validate from './modules/validate';
@@ -19,6 +20,8 @@ const FormPage = () => {
       <UseWatch />
 
       <Reset />
+
+      <Preserve />
     </div>
   );
 };

primitives/filed-form /src/Field.tsx

@@ -46,14 +46,12 @@ function Field<Values = any>(props: InternalFieldProps<Values>) {
     validateTrigger: fieldValidateTrigger
   } = fieldContext as unknown as InternalFormInstance<Values>;
 
-  const { dispatch, getInitialValue, registerField } = getInternalHooks();
+  const { dispatch, registerField } = getInternalHooks();
 
   const isControlled = controlMode === 'controlled';
 
   const mergedValidateTrigger = validateTrigger || fieldValidateTrigger;
 
-  const initiValue = getInitialValue(name) || initialValue;
-
   const validateTriggerList: string[] = toArray(mergedValidateTrigger);
 
   const make =
@@ -72,11 +70,9 @@ function Field<Values = any>(props: InternalFieldProps<Values>) {
       {} as Record<string, (...args: any[]) => void>
     );
 
-  const value = getFieldValue(name);
+  const value = getFieldValue(name) || initialValue;
 
-  const valueProps = isControlled
-    ? { [valuePropName]: value }
-    : { [`default${capitalize(valuePropName)}`]: initiValue };
+  const valueProps = isControlled ? { [valuePropName]: value } : { [`default${capitalize(valuePropName)}`]: value };
 
   const controlledProps = omitUndefined({
     [trigger]: name

primitives/filed-form /src/Form.tsx

@@ -3,12 +3,12 @@
 
 import type { ComponentPropsWithoutRef, ComponentRef, ElementType, HTMLProps, Ref } from 'react';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import type { DeepPartial } from 'skyroc-type-utils';
 
 import type { FormInstance, InternalFormContext, InternalFormInstance, RegisterCallbackOptions } from './FieldContext';
 import { FieldContextProvider } from './FieldContext';
 import type { ValidateMessages } from './form-core/validate';
 import useForm from './useForm';
-import { DeepPartial } from 'skyroc-type-utils';
 
 interface FormBaseProps<Values = any> extends RegisterCallbackOptions<Values> {
   children?: React.ReactNode;

primitives/filed-form /src/createStore.ts

@@ -14,7 +14,7 @@ import type { FieldEntity } from './types/field';
 import type { Callbacks, Store, StoreValue } from './types/formStore';
 import NameMap from './utils/NameMap';
 import { get } from './utils/get';
-import { set } from './utils/set';
+import { set, unset } from './utils/set';
 import type { NamePath, PathTuple } from './utils/util';
 import { anyOn, isOn, isUnderPrefix, keyOfName, microtask } from './utils/util';
 
@@ -112,7 +112,7 @@ class FormStore {
   // ------------------------------------------------
   private isMergedPreserve = (fieldPreserve?: boolean) => {
     const mergedPreserve = fieldPreserve || this._preserve;
-    return mergedPreserve || true;
+    return mergedPreserve;
   };
 
   private setCallbacks = (c: Callbacks) => {
@@ -287,17 +287,22 @@ class FormStore {
   private registerField = (entity: FieldEntity) => {
     const name = keyOfName(entity.name);
 
-    this._fieldEntities.push({
-      ...entity,
-      name
-    });
+    const preserve = this.isMergedPreserve(entity.preserve);
+
+    const oldEntity = this._fieldEntities.find(e => e.name === name);
 
-    const initialValue = this.getInitialValue(name);
+    if (!oldEntity) {
+      this._fieldEntities.push({
+        ...entity,
+        name
+      });
 
-    if (isNil(initialValue)) {
-      this.updateStore(set(this._store, name, entity.initialValue));
+      const initialValue = this.getInitialValue(name);
 
-      this._initial = set(this._initial, name, entity.initialValue);
+      if (isNil(initialValue)) {
+        this.updateStore(set(this._store, name, entity.initialValue));
+        this._initial = set(this._initial, name, entity.initialValue);
+      }
     }
 
     const listeners = this._exactListeners.get(name);
@@ -309,9 +314,19 @@ class FormStore {
     }
 
     return () => {
-      this._fieldEntities = this._fieldEntities.filter(e => e.name !== name);
+      if (!preserve) {
+        this._fieldEntities = this._fieldEntities.filter(e => e.name !== name);
+        this._initial = unset(this._initial, name);
+        this._store = unset(this._store, name);
+      }
       this._exactListeners.delete(name);
       this._prefixListeners.delete(name);
+      this._errors.delete(name);
+      this._warnings.delete(name);
+      this._touched.delete(name);
+      this._dirty.delete(name);
+      this._validating.delete(name);
+      this._validated.delete(name);
     };
   };
 

primitives/type-utils/src/utils.ts

@@ -49,16 +49,23 @@ type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ...0[]];
  * type P1 = AllPaths<FormValues>;
  * // => "age" | "code" | "phone"|"info" | "info.age" | "info.city" | "info.name" | "info.pl" | "info.pl.age" | `info2.${number}.age` | `info2.${number}.city` | `info2.${number}.name`
  */
-export type AllPaths<T, Index extends number = number, P extends string = '', Depth extends number = 6> =
-  [Depth] extends [never] ? never :
-  T extends Primitive ? (P extends '' ? never : P) :
-  T extends readonly (infer U)[]
-    ? (P extends '' ? never : P) | AllPaths<U, Index, Join<P, `${Index}`>, Prev[Depth]>
-    : T extends object
-      ? (P extends '' ? never : P) | {
-          [K in Extract<keyof T, string>]: AllPaths<T[K], Index, Join<P, K>, Prev[Depth]>
-        }[Extract<keyof T, string>]
-      : never;
+export type AllPaths<T, Index extends number = number, P extends string = '', Depth extends number = 6> = [
+  Depth
+] extends [never]
+  ? never
+  : T extends Primitive
+    ? P extends ''
+      ? never
+      : P
+    : T extends readonly (infer U)[]
+      ? (P extends '' ? never : P) | AllPaths<U, Index, Join<P, `${Index}`>, Prev[Depth]>
+      : T extends object
+        ?
+            | (P extends '' ? never : P)
+            | {
+                [K in Extract<keyof T, string>]: AllPaths<T[K], Index, Join<P, K>, Prev[Depth]>;
+              }[Extract<keyof T, string>]
+        : never;
 
 type OptionalIfObject<T> = T extends object ? (T extends readonly any[] ? T : { [K in keyof T]?: T[K] }) : T;
 
@@ -140,9 +147,8 @@ type BuildShape<T, P extends string> = P extends `${infer K}.${infer R}`
     : never
   : P extends `${infer K}`
     ? K extends keyof T
-      ? T[K] extends readonly (infer U)[] // ← 命中数组本身
-        ? // 元素若是对象 => 深可选对象数组；若是原始类型 => 原样元素数组
-          Wrap<Extract<K, string>, Array<U extends object ? DeepOptional<U> : U>>
+      ? T[K] extends readonly (infer U)[]
+        ? Wrap<Extract<K, string>, Array<U extends object ? DeepOptional<U> : U>>
         : T[K] extends object
           ? Wrap<Extract<K, string>, DeepOptional<T[K]>>
           : Wrap<Extract<K, string>, T[K]>
@@ -167,20 +173,25 @@ export type ShapeFromPaths<T, Ps extends readonly string[]> = Ps extends []
   ? T
   : MergeUnion<Ps[number] extends infer P ? (P extends string ? BuildShape<T, P> : never) : never>;
 
-type PathsShape<T, Index extends number = number, P extends string = '', Depth extends number = 6> =
-  [Depth] extends [never] ? never :
-  T extends Primitive
-    ? (P extends '' ? {} : { [K in P]: true })
+type PathsShape<T, Index extends number = number, P extends string = '', Depth extends number = 6> = [Depth] extends [
+  never
+]
+  ? never
+  : T extends Primitive
+    ? P extends ''
+      ? {}
+      : { [K in P]: true }
     : T extends readonly (infer U)[]
-      ? (P extends '' ? {} : { [K in P]: true }) &
-        PathsShape<U, Index, Join<P, `${Index}`>, Prev[Depth]>
+      ? (P extends '' ? {} : { [K in P]: true }) & PathsShape<U, Index, Join<P, `${Index}`>, Prev[Depth]>
       : T extends object
         ? (P extends '' ? {} : { [K in P]: true }) &
-          MergeUnion<{ [K in Extract<keyof T, string>]: PathsShape<T[K], Index, Join<P, K>, Prev[Depth]> }[Extract<keyof T, string>]>
+            MergeUnion<
+              { [K in Extract<keyof T, string>]: PathsShape<T[K], Index, Join<P, K>, Prev[Depth]> }[Extract<
+                keyof T,
+                string
+              >]
+            >
         : {};
 
-
 export type AllPathsShape<T> = MergeUnion<PathsShape<T>>;
 export type AllPathsKeys<T> = keyof AllPathsShape<T> & string;
-
-