Merge branch 'react-component:master' into master

Author: zerosrat

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-util",
-  "version": "5.32.2",
+  "version": "5.34.1",
   "description": "Common Utils For React Component",
   "keywords": [
     "react",

src/hooks/useLayoutEffect.ts

@@ -4,30 +4,39 @@ import canUseDom from '../Dom/canUseDom';
 /**
  * Wrap `React.useLayoutEffect` which will not throw warning message in test env
  */
-const useLayoutEffect =
+const useInternalLayoutEffect =
   process.env.NODE_ENV !== 'test' && canUseDom()
     ? React.useLayoutEffect
     : React.useEffect;
 
-export default useLayoutEffect;
-
-export const useLayoutUpdateEffect: typeof React.useEffect = (
-  callback,
-  deps,
+const useLayoutEffect = (
+  callback: (mount: boolean) => void | VoidFunction,
+  deps?: React.DependencyList,
 ) => {
   const firstMountRef = React.useRef(true);
 
-  useLayoutEffect(() => {
-    if (!firstMountRef.current) {
-      return callback();
-    }
+  useInternalLayoutEffect(() => {
+    return callback(firstMountRef.current);
   }, deps);
 
   // We tell react that first mount has passed
-  useLayoutEffect(() => {
+  useInternalLayoutEffect(() => {
     firstMountRef.current = false;
     return () => {
       firstMountRef.current = true;
     };
   }, []);
 };
+
+export const useLayoutUpdateEffect: typeof React.useEffect = (
+  callback,
+  deps,
+) => {
+  useLayoutEffect(firstMount => {
+    if (!firstMount) {
+      return callback();
+    }
+  }, deps);
+};
+
+export default useLayoutEffect;

src/utils/get.ts

@@ -1,6 +1,6 @@
 export default function get(
   entity: any,
-  path: (string | number)[] | readonly (string | number)[],
+  path: (string | number | symbol)[] | readonly (string | number | symbol)[],
 ) {
   let current = entity;
 

src/utils/set.ts

@@ -1,6 +1,6 @@
 import get from './get';
 
-export type Path = (string | number)[];
+export type Path = (string | number | symbol)[];
 
 function internalSet<Entity = any, Output = Entity, Value = any>(
   entity: Entity,
@@ -35,7 +35,7 @@ function internalSet<Entity = any, Output = Entity, Value = any>(
 
 export default function set<Entity = any, Output = Entity, Value = any>(
   entity: Entity,
-  paths: (string | number)[],
+  paths: Path,
   value: Value,
   removeIfUndefined: boolean = false,
 ): Output {
@@ -64,16 +64,18 @@ function createEmpty<T>(source: T) {
   return (Array.isArray(source) ? [] : {}) as T;
 }
 
+const keys = typeof Reflect === 'undefined' ? Object.keys : Reflect.ownKeys;
+
 /**
  * Merge objects which will create
  */
 export function merge<T extends object>(...sources: T[]) {
   let clone = createEmpty(sources[0]);
 
-  const loopSet = new Set<object>();
-
   sources.forEach(src => {
-    function internalMerge(path: Path) {
+    function internalMerge(path: Path, parentLoopSet?: Set<object>) {
+      const loopSet = new Set(parentLoopSet);
+
       const value = get(src, path);
 
       const isArr = Array.isArray(value);
@@ -93,8 +95,8 @@ export function merge<T extends object>(...sources: T[]) {
             clone = set(clone, path, createEmpty(value));
           }
 
-          Object.keys(value).forEach(key => {
-            internalMerge([...path, key]);
+          keys(value).forEach(key => {
+            internalMerge([...path, key], loopSet);
           });
         }
       } else {

tests/hooks.test.js

@@ -343,6 +343,30 @@ describe('hooks', () => {
       expect(errorSpy).not.toHaveBeenCalled();
       errorSpy.mockRestore();
     });
+
+    it('can get mount state', () => {
+      const Demo = () => {
+        const timesRef = React.useRef(0);
+        const [, forceUpdate] = React.useState(0);
+
+        useLayoutEffect(firstMount => {
+          if (timesRef.current === 0) {
+            expect(firstMount).toBeTruthy();
+            forceUpdate(1);
+          } else {
+            expect(firstMount).toBeFalsy();
+            forceUpdate(2);
+          }
+
+          timesRef.current += 1;
+        });
+
+        return <p>{timesRef.current}</p>;
+      };
+
+      const { container } = render(<Demo />);
+      expect(container.querySelector('p').textContent).toEqual('2');
+    });
   });
 
   describe('useState', () => {

tests/utils.test.js

@@ -192,6 +192,60 @@ describe('utils', () => {
           selector: ['K1', 'K2'],
         });
       });
+
+      it('shallow copy', () => {
+        const ori = {
+          list: [{ a: 1 }, { a: 2 }],
+        };
+
+        const cloneList = [...ori.list];
+        cloneList[0] = {
+          ...cloneList[0],
+          b: 3,
+        };
+
+        const merged = merge(ori, { list: cloneList });
+
+        expect(merged).toEqual({
+          list: [{ a: 1, b: 3 }, { a: 2 }],
+        });
+      });
+
+      it('skip class object', () => {
+        class User {
+          constructor(name, age) {
+            this.name = name;
+            this.age = age;
+          }
+        }
+
+        const user = new User('little', 2);
+
+        const merged = merge({}, { user }, {});
+
+        expect(merged.user).toBe(user);
+      });
+
+      it('ref object', () => {
+        const obj = { bamboo: 1 };
+
+        const merged = merge({}, { a: obj, b: obj }, {});
+
+        expect(merged).toEqual({
+          a: obj,
+          b: obj,
+        });
+      });
+
+      it('support Symbol', () => {
+        const symbol = Symbol();
+
+        const merged = merge({}, { [symbol]: 1 });
+
+        expect(merged).toEqual({
+          [symbol]: 1,
+        });
+      });
     });
   });