chore(release): v1.3.5

.dumi/metadata/apis/docs_apiDemos_Form.json

@@ -19,7 +19,8 @@
     },
     "tags": {
       "description": "Error prompt class name.",
-      "localKey": "API.form.global.props.form.share.errorClass"
+      "localKey": "API.form.global.props.form.share.errorClass",
+      "version": "1.3.4"
     }
   },
   "labelPosition": {
@@ -66,7 +67,8 @@
     },
     "tags": {
       "description": "Label class name",
-      "localKey": "API.form.global.props.form.share.labelClass"
+      "localKey": "API.form.global.props.form.share.labelClass",
+      "version": "1.3.4"
     }
   },
   "formItemStyle": {
@@ -88,7 +90,8 @@
     },
     "tags": {
       "description": "Form item class",
-      "localKey": "API.form.global.props.form.share.formItemClass"
+      "localKey": "API.form.global.props.form.share.formItemClass",
+      "version": "1.3.4"
     }
   },
   "trigger": {
@@ -115,6 +118,18 @@
       "description": "Form item content style, supports object nesting writing method"
     }
   },
+  "contentClassName": {
+    "defaultValue": null,
+    "name": "contentClassName",
+    "type": {
+      "name": "string"
+    },
+    "tags": {
+      "description": "Content area style class name",
+      "localKey": "API.form.global.props.form.share.contentClass",
+      "version": "1.3.4"
+    }
+  },
   "fullWidth": {
     "defaultValue": {
       "value": "false"
@@ -197,7 +212,8 @@
     },
     "tags": {
       "description": "Form container class name.",
-      "localKey": "API.form.global.props.form.formClass"
+      "localKey": "API.form.global.props.form.formClass",
+      "version": "1.3.4"
     }
   },
   "direction": {

.dumi/metadata/apis/docs_apiDemos_FormItem.json

@@ -125,7 +125,8 @@
     },
     "tags": {
       "description": "Error prompt class name.",
-      "localKey": "API.form.global.props.form.share.errorClass"
+      "localKey": "API.form.global.props.form.share.errorClass",
+      "version": "1.3.4"
     }
   },
   "labelPosition": {
@@ -172,7 +173,8 @@
     },
     "tags": {
       "description": "Label class name",
-      "localKey": "API.form.global.props.form.share.labelClass"
+      "localKey": "API.form.global.props.form.share.labelClass",
+      "version": "1.3.4"
     }
   },
   "formItemStyle": {
@@ -194,7 +196,8 @@
     },
     "tags": {
       "description": "Form item class",
-      "localKey": "API.form.global.props.form.share.formItemClass"
+      "localKey": "API.form.global.props.form.share.formItemClass",
+      "version": "1.3.4"
     }
   },
   "trigger": {
@@ -221,6 +224,18 @@
       "description": "Form item content style, supports object nesting writing method"
     }
   },
+  "contentClassName": {
+    "defaultValue": null,
+    "name": "contentClassName",
+    "type": {
+      "name": "string"
+    },
+    "tags": {
+      "description": "Content area style class name",
+      "localKey": "API.form.global.props.form.share.contentClass",
+      "version": "1.3.4"
+    }
+  },
   "fullWidth": {
     "defaultValue": {
       "value": "false"

.dumi/metadata/apis/docs_apiDemos_useForm.json

@@ -43,7 +43,8 @@
     },
     "tags": {
       "description": "Error prompt class name.",
-      "localKey": "API.form.global.props.form.share.errorClass"
+      "localKey": "API.form.global.props.form.share.errorClass",
+      "version": "1.3.4"
     }
   },
   "labelPosition": {
@@ -90,7 +91,8 @@
     },
     "tags": {
       "description": "Label class name",
-      "localKey": "API.form.global.props.form.share.labelClass"
+      "localKey": "API.form.global.props.form.share.labelClass",
+      "version": "1.3.4"
     }
   },
   "formItemStyle": {
@@ -112,7 +114,8 @@
     },
     "tags": {
       "description": "Form item class",
-      "localKey": "API.form.global.props.form.share.formItemClass"
+      "localKey": "API.form.global.props.form.share.formItemClass",
+      "version": "1.3.4"
     }
   },
   "trigger": {
@@ -139,6 +142,18 @@
       "description": "Form item content style, supports object nesting writing method"
     }
   },
+  "contentClassName": {
+    "defaultValue": null,
+    "name": "contentClassName",
+    "type": {
+      "name": "string"
+    },
+    "tags": {
+      "description": "Content area style class name",
+      "localKey": "API.form.global.props.form.share.contentClass",
+      "version": "1.3.4"
+    }
+  },
   "fullWidth": {
     "defaultValue": {
       "value": "false"

.dumi/metadata/apis/docs_apiDemos_useFormReturnType.json

@@ -51,7 +51,7 @@
     "defaultValue": null,
     "name": "setState",
     "type": {
-      "name": "() => Dispatch<unknown>"
+      "name": "() => void"
     },
     "tags": {
       "localKey": "API.useForm.setState.desc",

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [1.3.5](https://github.com/easy-form/react-form-simple/compare/v1.3.4...v1.3.5) (2023-12-26)
+
+### Bug Fixes
+
+- fix the bug that prompts setState() method type incompatibility when using type UseFormReturnType ([2386dc0](https://github.com/easy-form/react-form-simple/commit/2386dc01ef693b78c3f359836419e1d69a3a1422))
+- Fixed model type prompt error bug when using useWatch ([2801509](https://github.com/easy-form/react-form-simple/commit/2801509bd1c8b68e3d188cd1240e65d1828671fd))
+
+### Features
+
+- Optimize the release of memory resources after destruction when using useForm ([360f00b](https://github.com/easy-form/react-form-simple/commit/360f00b6ec1cc13872fab65a9ad3ff7edafcfa3b))
+
 ## [1.3.4](https://github.com/easy-form/react-form-simple/compare/v1.3.3...v1.3.4) (2023-12-25)
 
 ### Bug Fixes

docs/demos/_controller.tsx

@@ -1,10 +1,12 @@
 import Button from '@components/Button';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-form-simple';
 
 export default function App() {
   const { render, model } = useForm({ name: 'name' });
 
+  const [modelState, setModelState] = useState('');
+
   const renderName = render('name')(<input className="input" />);
 
   useEffect(() => {
@@ -13,11 +15,12 @@ export default function App() {
     }, 2000);
   }, []);
 
-  const onSubmit = () => void console.log(model);
+  const onSubmit = () => setModelState(JSON.stringify(model));
 
   return (
     <>
       {renderName}
+      {modelState}
       <Button onClick={onSubmit}>submit</Button>
     </>
   );

docs/demos/_example.tsx

@@ -1,23 +1,26 @@
 import Button from '@components/Button';
-import React from 'react';
+import React, { useState } from 'react';
 import { useForm } from 'react-form-simple';
 
 export default function App() {
   const { render, model } = useForm({
     name: '',
     age: '',
   });
+  const [modelState, setModelState] = useState('');
+
   const renderName = render('name')(<input className="input" />);
 
   const renderAge = render('age')(<input className="input" />);
 
   const renderSubmit = (
-    <Button onClick={() => void console.log(model)}>submit</Button>
+    <Button onClick={() => setModelState(JSON.stringify(model))}>submit</Button>
   );
   return (
     <>
       {renderName}
       {renderAge}
+      {modelState}
       {renderSubmit}
     </>
   );

docs/demos/_watch.tsx

@@ -8,7 +8,7 @@ export default function App() {
   const renderAge = render('age')(<input className="input" />);
 
   useWatch(
-    ({ model }) => [model?.name, model?.age],
+    ({ model }) => [model.name, model.age],
     (value, preValue) => {
       console.log({ value, preValue });
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-simple",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "A form library for quickly controlling react form input",
   "keywords": [
     "react",

src/types/form.ts

@@ -327,8 +327,10 @@ export namespace GlobalProps {
     contentStyle?: CSSInterpolation;
     /**
      * @description Content area style class name
+     * @localKey API.form.global.props.form.share.contentClass
+     * @version 1.3.4
      */
-    contentClassName?: string
+    contentClassName?: string;
     /**
      * @localKey API.form.global.props.form.share.fullWidth
      * @description Whether the width of the form item fills the entire row
@@ -374,6 +376,7 @@ export namespace GlobalProps {
     /**
      * @description Form container class name.
      * @localKey API.form.global.props.form.formClass
+     * @version 1.3.4
      */
     formClassName?: string;
     /**

src/types/use.ts

@@ -85,7 +85,7 @@ export namespace UseFormNamespace {
      * @description Manually re-render the view. If you need to re-render the view externally, you can call setState to re-render the current component tree.
      * @resetType Function
      */
-    setState: () => React.Dispatch<React.SetStateAction<unknown>>;
+    setState: () => void;
   } & Apis.FormApis &
     Pick<GlobalProps.FormItemProps, 'contextProps'>;
 }

src/use/useController.ts

@@ -5,9 +5,18 @@ export function useController<T extends Record<string, any>>(obj: T): T {
   const [, setState] = useState({});
   const proxyStateRef = useRef(obj);
 
-  return observer(proxyStateRef.current, () => {
-    setState({});
-  });
+  const { proxyMap, rawMap } = useRef({
+    proxyMap: new WeakMap(),
+    rawMap: new WeakMap(),
+  }).current;
+
+  return observer(
+    proxyStateRef.current,
+    () => {
+      setState({});
+    },
+    { proxyMap, rawMap },
+  );
 }
 
 export default useController;

src/use/useForm.ts

@@ -10,7 +10,7 @@ import { usePrivateSubscribe } from './useSubscribe';
 import { usePrivateWatch } from './useWatch';
 
 const useForm = <T extends Record<string, any>>(
-  model?: T,
+  model: T,
   config?: UseFormNamespace.ShareConfig,
 ) => {
   const proxyTarget = useRef(model || {});
@@ -27,6 +27,11 @@ const useForm = <T extends Record<string, any>>(
     [],
   );
 
+  const createObserverMap = useRef({
+    proxyMap: new WeakMap(),
+    rawMap: new WeakMap(),
+  }).current;
+
   const proxymodel = createObserverForm(
     proxyTarget.current as T,
     ({ path, value }) => {
@@ -36,6 +41,7 @@ const useForm = <T extends Record<string, any>>(
     },
     {
       path: [],
+      ...createObserverMap,
     },
   );
 
@@ -68,6 +74,7 @@ const useForm = <T extends Record<string, any>>(
     useWatch,
     setState: useFormExtraApis.setState,
     ...overlayApis,
+    ...createObserverMap,
   };
 };
 

src/utils/controller.ts

@@ -6,14 +6,21 @@ import { isObject, isObjectOrArray } from './util';
 export const proxyMap = new WeakMap();
 export const rawMap = new WeakMap();
 
+const _proxyMap = proxyMap;
+const _rawMap = rawMap;
+
 const proxyPolyfill = ProxyPolyfillBuilder();
 const Proxys = window.Proxy || proxyPolyfill;
 
-export type ObserverOptions = { path?: string[] };
+export type ObserverOptions = {
+  path?: string[];
+  proxyMap?: WeakMap<object, any>;
+  rawMap?: WeakMap<object, any>;
+};
 
 export type ObserverCb = { path: string; value: any };
 
-export const toTarget = (proxy: any) => rawMap.get(proxy);
+export const toTarget = (proxy: any) => cloneDeep(proxy);
 
 export const replaceTarget = (
   proxy: any,
@@ -80,6 +87,7 @@ export const observer = <T extends object>(
   cb?: (args: ObserverCb) => void,
   options?: ObserverOptions,
 ): T => {
+  const { path = [], rawMap = _rawMap, proxyMap = _proxyMap } = options || {};
   const existingProxy = proxyMap.get(initialVal);
   if (existingProxy) {
     return existingProxy;
@@ -89,8 +97,6 @@ export const observer = <T extends object>(
     return initialVal;
   }
 
-  const { path = [] } = options || {};
-
   const proxy = new Proxys(initialVal, {
     get(target, key, receiver) {
       const ret = Reflect.get(target, key, receiver);