fix: fix setValue bug

Author: 97vack

docs/demos/_controller.tsx

@@ -2,18 +2,38 @@ import React, { useState } from 'react';
 import { useForm } from 'react-form-simple';
 
 export default function App() {
-  const { render, model } = useForm({ name: 'name' });
+  const { render, model, setValues, setValue } = useForm({
+    name: 'name',
+    arr: [{ name: 1 }],
+    originData: { name: 2 },
+  });
 
   const [modelState, setModelState] = useState('');
 
   const renderName = render('name')(<input />);
 
-  const onSubmit = () => setModelState(JSON.stringify(model));
+  const onSubmit = () => {
+    setValues({ arr: [{ name: 222 }], originData: { name: 33 } });
+    return;
+    const datas = {
+      name: 'name111',
+      arr: [{ name: 2 }],
+    };
+    setValues({
+      ...datas,
+      originData: {
+        ...datas,
+        name: 'originName',
+      },
+    });
+    console.log('model', model);
+  };
 
   return (
     <>
       {renderName}
       {modelState}
+      {render('originData.name')(<input />)}
       <button onClick={onSubmit}>submit</button>
     </>
   );

package.json

@@ -68,7 +68,6 @@
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "lodash": "^4.17.21",
-    "proxy-polyfill": "^0.3.2",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {

src/__tests__/form.test.tsx

@@ -47,11 +47,11 @@ describe('form', () => {
 
 describe.concurrent('form item', () => {
   test('contextProps', async ({ expect }) => {
-    let apiEffectOptionss = null;
+    let apiEffectOptions = null;
     const contextProps: FormItemProps['contextProps'] = {
       destroy() {},
       apiEffect(args) {
-        apiEffectOptionss = args;
+        apiEffectOptions = args;
       },
       mounted() {},
     };
@@ -88,9 +88,9 @@ describe.concurrent('form item', () => {
 
     expect(mockApiEffectFn).toHaveBeenCalled();
 
-    expect(apiEffectOptionss).not.toBeNull();
+    expect(apiEffectOptions).not.toBeNull();
 
-    expect(apiEffectOptionss).toBeTypeOf('object');
+    expect(apiEffectOptions).toBeTypeOf('object');
 
     expect(mockMounter).toHaveBeenCalled();
 
@@ -224,7 +224,7 @@ describe.concurrent('form item', () => {
   });
   // test('form item vaild test', async () => {
   //   const onError = vi.fn();
-  //   const comppnentRef = React.createRef();
+  //   const componentRef = React.createRef();
   //   const TestDemo = React.forwardRef<any, any>((props, ref) => {
   //     return (
   //       <FormItem
@@ -237,15 +237,15 @@ describe.concurrent('form item', () => {
   //       />
   //     );
   //   });
-  //   const { unmount } = testRender(<TestDemo ref={comppnentRef} />);
-  //   (comppnentRef.current as any).validate();
+  //   const { unmount } = testRender(<TestDemo ref={componentRef} />);
+  //   (componentRef.current as any).validate();
   //   await expect(onError).toHaveBeenCalled();
   //   unmount();
   // });
 });
 
 describe.concurrent('use Form Item api', () => {
-  test('clear vaild', async ({ expect }) => {
+  test('clear valid', async ({ expect }) => {
     const TestDemo = () => {
       const { render, clearValidate } = useForm({ clearName: 'default value' });
       useEffect(() => {
@@ -262,11 +262,11 @@ describe.concurrent('use Form Item api', () => {
 
     fireEvent.change(input, { target: { value: '' } });
     const getErrorText = () => {
-      const componet = container.querySelector(
+      const component = container.querySelector(
         '[data-error-id="clearName-PleaseInput"]',
       ) as HTMLElement;
-      if (componet) {
-        return componet.getAttribute('data-error-text');
+      if (component) {
+        return component.getAttribute('data-error-text');
       }
       return null;
     };
@@ -290,14 +290,14 @@ describe.concurrent('use Form Item api', () => {
   });
   test('reset', async ({ expect }) => {
     const TestDemo = () => {
-      const { render, reset, model } = useForm({ restVaild: '' });
+      const { render, reset, model } = useForm({ restValid: '' });
 
       useEffect(() => {
-        model.restVaild = 'test value';
+        model.restValid = 'test value';
         reset();
       }, []);
 
-      return <>{render('restVaild')(<input id="reset-value-test" />)}</>;
+      return <>{render('restValid')(<input id="reset-value-test" />)}</>;
     };
     const { container, unmount } = testRender(<TestDemo />);
 
@@ -319,15 +319,15 @@ describe.concurrent('use Form Item api', () => {
     expect(getInputValue()).toBe('');
     unmount();
   });
-  test('remove and reapply vaild', async ({ expect }) => {
-    const comppnentRef = React.createRef();
+  test('remove and reapply valid', async ({ expect }) => {
+    const componentRef = React.createRef();
     const TestDemo = React.forwardRef((props, ref) => {
       const { render, removeValidator, reapplyValidator, validate } = useForm({
         removeName: 'test value',
       });
 
       useImperativeHandle(ref, () => ({
-        vaild() {
+        validate() {
           return validate();
         },
       }));
@@ -345,7 +345,7 @@ describe.concurrent('use Form Item api', () => {
           click
         </button>
       );
-      const buttonVaild = (
+      const buttonValid = (
         <button
           type="button"
           id="valid-button"
@@ -357,15 +357,15 @@ describe.concurrent('use Form Item api', () => {
       return (
         <>
           {button}
-          {buttonVaild}
+          {buttonValid}
           {render('removeName', { rules: { required: 'Please Input' } })(
             <input id="remove-input" />,
           )}
         </>
       );
     });
 
-    const { container, unmount } = testRender(<TestDemo ref={comppnentRef} />);
+    const { container, unmount } = testRender(<TestDemo ref={componentRef} />);
 
     const input = container.querySelector('#remove-input') as HTMLInputElement;
     await vi.waitFor(() => Promise.resolve(), { timeout: 1000, interval: 100 });
@@ -380,7 +380,7 @@ describe.concurrent('use Form Item api', () => {
     fireEvent.click(button);
 
     await expect(() =>
-      (comppnentRef.current as any).vaild(),
+      (componentRef.current as any).validate(),
     ).rejects.toThrowError('Please Input');
 
     unmount();

src/driver/ControllerDriver/controller.ts

@@ -1,81 +1,17 @@
-import { cloneDeep } from 'lodash';
-import ProxyPolyfillBuilder from 'proxy-polyfill/src/proxy';
 import React from 'react';
 import type { DefaultRecord } from 'react-form-simple';
-import { isObject, isObjectOrArray } from 'react-form-simple/utils/util';
-
-const ProxyPolyfill = window.Proxy || ProxyPolyfillBuilder();
+import { isObjectOrArray } from 'react-form-simple/utils/util';
 
 export type ObserverOptions = {
   path?: string[];
-  onChangeLength?: () => void;
 };
 
 export type ObserverCb = { path: string; value: any };
 
-export const toTarget = (proxy: any) => cloneDeep(proxy);
-
-interface ProxyObject {
-  [key: string]: any;
-}
-
-const isSkippableType = (value: any) =>
-  value instanceof Date || value instanceof Blob || value instanceof File;
-
 export const replaceTarget = (proxyObject: any, values: any) => {
-  if (!isObject(values)) return proxyObject;
-  function setNestedValue(obj: ProxyObject, keys: string[], value: any): void {
-    const lastKey = keys.pop();
-    let currentObj = obj;
-
-    keys.forEach((key) => {
-      if (!currentObj[key] || typeof currentObj[key] !== 'object') {
-        currentObj[key] = {};
-      }
-      currentObj = currentObj[key];
-    });
-
-    currentObj[lastKey as string] = value;
-  }
-
-  function processArray(obj: ProxyObject, value: any[], path: string[]): void {
-    obj[path[0]] = value.map((item) => {
-      if (typeof item === 'object' && item !== null && !Array.isArray(item)) {
-        const nestedObj: ProxyObject = {};
-        processValues(nestedObj, item);
-        return nestedObj;
-      }
-      return item;
-    });
-  }
-
-  function processValues(
-    obj: ProxyObject,
-    values: Record<string, any>,
-    currentPath: string[] = [],
-  ): void {
-    for (const [key, value] of Object.entries(values)) {
-      const path = [...currentPath, key];
-
-      if (Array.isArray(value)) {
-        processArray(obj, value, path);
-      } else if (typeof value === 'object' && value !== null) {
-        if (isSkippableType(value)) {
-          setNestedValue(obj, path, value);
-        } else {
-          if (Object.keys(value).length === 0) {
-            setNestedValue(obj, path, { ...value });
-          } else {
-            processValues(obj, value, path);
-          }
-        }
-      } else {
-        setNestedValue(obj, path, value);
-      }
-    }
-  }
-
-  processValues(proxyObject, values);
+  Object.entries(values).forEach(([key, value]) => {
+    updateProxyValue(proxyObject, key, value);
+  });
 
   return proxyObject;
 };
@@ -92,6 +28,7 @@ export const getProxyValue = (
     if (currentObj?.[currentKey] === undefined) {
       return undefined; // Key path doesn't exist in the object
     }
+
     currentObj = currentObj[currentKey];
   }
 
@@ -100,37 +37,57 @@ export const getProxyValue = (
 
 export const updateProxyValue = (
   obj: any,
-  key: string | number | undefined | null | symbol,
+  path: string,
   newValue: any,
-) => {
-  if (!obj || !key) return;
-  const keys = String(key).split('.');
-  let currentObj = obj;
+  options: {
+    createPath?: boolean;
+    forceUpdate?: boolean;
+  } = {},
+): boolean => {
+  if (!obj || !path) return false;
+
+  const keys = path.split('.');
+  let current = obj;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+
+    if (current[key] === undefined) {
+      if (options.createPath) {
+        current[key] = {};
+      } else {
+        return false;
+      }
+    }
 
-  for (const currentKey of keys.slice(0, -1)) {
-    if (
-      currentObj?.[currentKey] === undefined ||
-      typeof currentObj[currentKey] !== 'object'
-    ) {
-      break;
+    if (typeof current[key] !== 'object' || current[key] === null) {
+      if (options.createPath) {
+        current[key] = {};
+      } else {
+        return false;
+      }
     }
-    currentObj = currentObj[currentKey];
+
+    current = current[key];
   }
 
   const lastKey = keys[keys.length - 1];
-  if (lastKey in currentObj) {
-    currentObj[lastKey] = newValue;
+  if (options.forceUpdate || lastKey in current) {
+    current[lastKey] = newValue;
+    return true;
   }
+
+  return false;
 };
 
 export const observer = <T extends DefaultRecord>(
   initialVal: T,
   cb?: (args: ObserverCb) => void,
   options?: ObserverOptions,
 ): T => {
-  const { path = [], onChangeLength } = (options || {}) as ObserverOptions;
+  const { path = [] } = (options || {}) as ObserverOptions;
 
-  const proxy = new ProxyPolyfill(initialVal, {
+  const proxy = new Proxy(initialVal, {
     get(target, key, receiver) {
       const ret = Reflect.get(target, key, receiver);
       if (React.isValidElement(ret)) return ret;
@@ -148,14 +105,6 @@ export const observer = <T extends DefaultRecord>(
 
       cb?.({ path: newPath.join('.'), value: val });
 
-      if (
-        Array.isArray(target) &&
-        key === 'length' &&
-        typeof onChangeLength === 'function'
-      ) {
-        onChangeLength();
-      }
-
       return ret;
     },
   });

src/driver/ObserverDriver/implementation/Watch.ts

@@ -6,13 +6,13 @@ import {
   CallbackType,
   KeyType,
   RequiredContextType,
-  SubscripeFunType,
+  SubscribeFunType,
 } from '../type';
 
 export class Watch<T> extends AbstractImp {
   private cb: CallbackType = () => {};
-  private preRet: UseWatchNamespace.SubscripeFunReturnType = null;
-  private subscribeFun: SubscripeFunType<T> = () => ({});
+  private preRet: UseWatchNamespace.SubscribeFunReturnType = null;
+  private subscribeFun: SubscribeFunType<T> = () => ({});
   constructor(
     public key: KeyType,
     public contextProps: RequiredContextType<T>,
@@ -41,7 +41,7 @@ export class Watch<T> extends AbstractImp {
     }
     this.preRet = cloneDeep(ret);
   }
-  public update(subscribeFun: SubscripeFunType<T>, cb: CallbackType) {
+  public update(subscribeFun: SubscribeFunType<T>, cb: CallbackType) {
     this.cb = cb;
     this.subscribeFun = subscribeFun;
   }