diff --git a/src/packages/form/__tests__/merge.spec.ts b/src/packages/form/__tests__/merge.spec.ts new file mode 100644 index 0000000000..773b44bbac --- /dev/null +++ b/src/packages/form/__tests__/merge.spec.ts @@ -0,0 +1,263 @@ +import { merge, clone, recursive, isPlainObject } from '@/utils/merge' + +describe('merge', () => { + it('merges two objects', () => { + expect(merge({ a: 1 }, { b: 2 })).toStrictEqual({ a: 1, b: 2 }) + }) + + it('merges nested levels', () => { + expect(merge({ a: 1 }, { b: { c: { d: 2 } } })).toStrictEqual({ + a: 1, + b: { c: { d: 2 } }, + }) + }) + it('clones the target', () => { + let input = { + a: 1, + b: { + c: { + d: 2, + e: ['x', 'y', { z: { w: ['k'] } }], + }, + }, + f: null, + g: undefined, + h: true, + } + + const original = { + a: 1, + b: { + c: { + d: 2, + e: ['x', 'y', { z: { w: ['k'] } }], + }, + }, + f: null, + g: undefined, + h: true, + } + + let output = merge(true, input) + + input.b.c.d++ + ;(input.b.c.e[2] as any).z.w = null + ;(input as any).h = null + + expect(output).toStrictEqual(original) + + input = original + + output = merge(true, input, { a: 2 }) + + expect(output.a).toBe(2) + expect(input.a).toBe(1) + }) + + it('ignores the sources', () => { + const values = createNonPlainObjects() + const $merge = vi.fn().mockImplementation(merge) + + for (const value of values) expect($merge(value)).toStrictEqual({}) + + expect(values.length).toBeGreaterThan(0) + expect($merge).toBeCalledTimes(values.length) + expect( + merge(...values, [0, 1, 2], ...values, { a: 1 }, ...values, { + b: 2, + }) + ).toStrictEqual({ a: 1, b: 2 }) + }) + + it('does not merge non plain objects', () => { + const values = createNonPlainObjects() + expect(values.length).toBeGreaterThan(0) + const input: any = {} + + for (const [index, value] of Object.entries(values)) { + input[`value${index}`] = value + } + + const output = merge({}, input) + + for (const [index] of Object.entries(values)) { + const key = `value${index}` + const inputValue = input[key] + const outputValue = output[key] + + // eslint-disable-next-line no-restricted-globals + if (typeof outputValue === 'number' && isNaN(outputValue)) { + // eslint-disable-next-line no-restricted-globals + expect(isNaN(inputValue), key).toBeTruthy() + } else { + expect(inputValue === outputValue, key).toBeTruthy() + } + } + }) + + it('is safe', () => { + expect( + merge({}, JSON.parse('{"__proto__": {"evil": true}}')) + ).toStrictEqual({}) + expect(({} as any).evil).toBeUndefined() + }) +}) + +describe('clone', () => { + it('clones the input', () => { + const object1 = { a: 1, b: { c: 2 } } + const object2 = clone(object1) + + expect(object1).toStrictEqual(object2) + expect(object1 === object2).toBeFalsy() + expect(object1.b === object2.b).toBeFalsy() + }) + + it('clones each item of the array', () => { + const object1 = [{ a: 1, b: { c: 2 } }] + const object2 = clone(object1) + + expect(object1).toStrictEqual(object2) + expect(object1 === object2).toBeFalsy() + expect(object1[0] === object2[0]).toBeFalsy() + expect(object1[0].b === object2[0].b).toBeFalsy() + }) + + it('returns the same input', () => { + const values = createNonPlainObjects() + const $clone = vi.fn().mockImplementation(clone) + for (const value of values) { + const cloned = $clone(value) + // eslint-disable-next-line no-restricted-globals + if (typeof cloned === 'number' && isNaN(cloned)) { + // eslint-disable-next-line no-restricted-globals + expect(isNaN(value)).toBeTruthy() + } else if (Array.isArray(cloned)) { + expect(Array.isArray(value)).toBeTruthy() + } else { + expect(cloned === value).toBeTruthy() + } + } + expect(values.length).toBeGreaterThan(0) + expect($clone).toBeCalledTimes(values.length) + }) +}) + +describe('recursive', () => { + it('merges recursively', () => { + expect(recursive({ a: { b: 1 } }, { a: { c: 1 } })).toStrictEqual({ + a: { b: 1, c: 1 }, + }) + + expect(recursive({ a: { b: 1, c: 1 } }, { a: { b: 2 } })).toStrictEqual({ + a: { b: 2, c: 1 }, + }) + + expect( + recursive({ a: { b: [1, 2, 3], c: 1 } }, { a: { b: ['a'] } }) + ).toStrictEqual({ a: { b: ['a'], c: 1 } }) + + expect( + recursive({ a: { b: { b: 2 }, c: 1 } }, { a: { b: 2 } }) + ).toStrictEqual({ + a: { b: 2, c: 1 }, + }) + }) + + it('clones recursively', () => { + const test1 = { a: { b: 1 } } + + expect(recursive(true, test1, { a: { c: 1 } })).toStrictEqual({ + a: { b: 1, c: 1 }, + }) + + expect(test1).toStrictEqual({ a: { b: 1 } }) + + const test2 = { a: { b: 1, c: 1 } } + + expect(recursive(true, test2, { a: { b: 2 } })).toStrictEqual({ + a: { b: 2, c: 1 }, + }) + + expect(test2).toStrictEqual({ a: { b: 1, c: 1 } }) + + const test3 = { a: { b: [1, 2, 3], c: 1 } } + + expect(recursive(true, test3, { a: { b: ['a'] } })).toStrictEqual({ + a: { b: ['a'], c: 1 }, + }) + + expect(test3).toStrictEqual({ a: { b: [1, 2, 3], c: 1 } }) + + const test4 = { a: { b: { b: 2 }, c: 1 } } + + expect(recursive(true, test4, { a: { b: 2 } })).toStrictEqual({ + a: { b: 2, c: 1 }, + }) + + expect(test4).toStrictEqual({ a: { b: { b: 2 }, c: 1 } }) + }) + + it('does not merge non plain objects', () => { + const object = recursive({ map: { length: 1 } }, { map: new Map() }) + expect(object.map).toBeInstanceOf(Map) + }) + + it('is safe', () => { + const payload = '{"__proto__": {"a": true}}' + expect(recursive({}, JSON.parse(payload))).toStrictEqual({}) + expect(({} as any).a).toBeUndefined() + expect(recursive({ deep: {} }, JSON.parse(payload))).toStrictEqual({ + deep: {}, + }) + expect(({} as any).b).toBeUndefined() + }) +}) + +describe('isPlainObject', () => { + it('returns true', () => { + expect(isPlainObject({})).toBeTruthy() + expect(isPlainObject({ v: 1 })).toBeTruthy() + expect(isPlainObject(Object.create(null))).toBeTruthy() + expect(isPlainObject({})).toBeTruthy() + }) + it('returns false', () => { + const values = createNonPlainObjects() + const $isPlainObject = vi.fn().mockImplementation(isPlainObject) + for (const value of values) expect($isPlainObject(value)).toBeFalsy() + expect(values.length).toBeGreaterThan(0) + expect($isPlainObject).toBeCalledTimes(values.length) + }) +}) + +function createNonPlainObjects(): any[] { + class SubObject extends Object {} + + return [ + null, + undefined, + 1, + '', + 'str', + [], + [1], + () => {}, + function () {}, + true, + false, + NaN, + Infinity, + class {}, + new (class {})(), + new Map(), + new Set(), + new Date(), + [], + new Date(), + /./, + /./, + SubObject, + new SubObject(), + Symbol(''), + ] +} diff --git a/src/packages/form/useform.taro.ts b/src/packages/form/useform.taro.ts index 193ad8bb6a..4ca2f92679 100644 --- a/src/packages/form/useform.taro.ts +++ b/src/packages/form/useform.taro.ts @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react' import Schema from 'async-validator' -import { merge } from '@/utils/merge' +import { merge, recursive } from '@/utils/merge' import { Callbacks, FormFieldEntity, @@ -98,7 +98,7 @@ class FormStore { * @param newStore { [name]: newValue } */ setFieldsValue = (newStore: any) => { - const nextStore = merge(this.store, newStore) + const nextStore = recursive(true, this.store, newStore) this.updateStore(nextStore) this.fieldEntities.forEach((entity: FormFieldEntity) => { const { name } = entity.props diff --git a/src/packages/form/useform.ts b/src/packages/form/useform.ts index 193ad8bb6a..4ca2f92679 100644 --- a/src/packages/form/useform.ts +++ b/src/packages/form/useform.ts @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react' import Schema from 'async-validator' -import { merge } from '@/utils/merge' +import { merge, recursive } from '@/utils/merge' import { Callbacks, FormFieldEntity, @@ -98,7 +98,7 @@ class FormStore { * @param newStore { [name]: newValue } */ setFieldsValue = (newStore: any) => { - const nextStore = merge(this.store, newStore) + const nextStore = recursive(true, this.store, newStore) this.updateStore(nextStore) this.fieldEntities.forEach((entity: FormFieldEntity) => { const { name } = entity.props diff --git a/src/utils/merge.ts b/src/utils/merge.ts index 0d6cb8ced6..fe2668ab92 100644 --- a/src/utils/merge.ts +++ b/src/utils/merge.ts @@ -1,29 +1,89 @@ -export function merge(...objects: any[]) { - const result: any = Array.isArray(objects[0]) ? [] : {} - - function mergeHelper(obj: any, path: string[] = []) { - for (const [key, value] of Object.entries(obj)) { - const newPath = [...path, key] - - if (Array.isArray(value)) { - // Arrays are always overridden - result[key] = [...value] - } else if (typeof value === 'object' && value !== null) { - // Check for circular references +export default main + +export function main(clone: boolean, ...items: any[]): any +export function main(...items: any[]): any +export function main(...items: any[]) { + return merge(...items) +} + +main.clone = clone +main.isPlainObject = isPlainObject +main.recursive = recursive + +export function merge(clone: boolean, ...items: any[]): any +export function merge(...items: any[]): any +export function merge(...items: any[]) { + return _merge(items[0] === true, false, items) +} + +export function recursive(clone: boolean, ...items: any[]): any +export function recursive(...items: any[]): any +export function recursive(...items: any[]) { + return _merge(items[0] === true, true, items) +} + +export function clone(input: T): T { + if (Array.isArray(input)) { + const output = [] + + for (let index = 0; index < input.length; ++index) + output.push(clone(input[index])) + + return output as any + } + if (isPlainObject(input)) { + const output: any = {} + + // eslint-disable-next-line guard-for-in + for (const index in input) output[index] = clone((input as any)[index]) + + return output as any + } + return input +} + +export function isPlainObject(input: unknown): input is NonNullable { + if (input === null || typeof input !== 'object') return false + if (Object.getPrototypeOf(input) === null) return true + let ref = input + while (Object.getPrototypeOf(ref) !== null) ref = Object.getPrototypeOf(ref) + return Object.getPrototypeOf(input) === ref +} + +function _recursiveMerge(base: any, extend: any) { + if (!isPlainObject(base) || !isPlainObject(extend)) return extend + for (const key in extend) { + if (key === '__proto__' || key === 'constructor' || key === 'prototype') + // eslint-disable-next-line no-continue + continue + base[key] = + isPlainObject(base[key]) && isPlainObject(extend[key]) + ? _recursiveMerge(base[key], extend[key]) + : extend[key] + } + + return base +} + +function _merge(isClone: boolean, isRecursive: boolean, items: any[]) { + let result + + if (isClone || !isPlainObject((result = items.shift()))) result = {} + + for (let index = 0; index < items.length; ++index) { + const item = items[index] + + // eslint-disable-next-line no-continue + if (!isPlainObject(item)) continue + + for (const key in item) { + if (key === '__proto__' || key === 'constructor' || key === 'prototype') // eslint-disable-next-line no-continue - if (path.some((p: any) => p === value)) continue - - // Recursively merge objects - if (!result[key]) result[key] = {} - mergeHelper(value, newPath) - } else { - // Set primitive values - result[key] = value - } + continue + const value = isClone ? clone(item[key]) : item[key] + result[key] = isRecursive ? _recursiveMerge(result[key], value) : value } } - objects.filter((obj) => !!obj).forEach((obj) => mergeHelper(obj)) - return result }