Merge pull request #1428 from ryuapp/deep-equal-adapt-vnode

fix: deepEqual exceed maximum call stack size

Author: afshinm

src/util/deepEqual.ts

@@ -31,6 +31,31 @@ export function deepEqual<A, B>(obj1: A, obj2: B) {
     }
     return true;
   }
+  // If objects are VNodes, compare their props only
+  if (
+    // eslint-disable-next-line no-prototype-builtins
+    obj1.hasOwnProperty('constructor') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj2.hasOwnProperty('constructor') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj1.hasOwnProperty('props') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj2.hasOwnProperty('props') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj1.hasOwnProperty('key') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj2.hasOwnProperty('key') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj1.hasOwnProperty('ref') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj2.hasOwnProperty('ref') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj1.hasOwnProperty('type') &&
+    // eslint-disable-next-line no-prototype-builtins
+    obj2.hasOwnProperty('type')
+  ) {
+    return deepEqual(obj1['props'], obj2['props']);
+  }
   // If objects are both objects, compare their properties recursively
   const keys1 = Object.keys(obj1);
   const keys2 = Object.keys(obj2);

tests/jest/util/deepEqual.test.ts

@@ -1,4 +1,5 @@
 import { deepEqual } from '../../../src/util/deepEqual';
+import { html } from '../../../src/util/html';
 
 describe('deepEqual', () => {
   it('should return true when objects are the same', () => {
@@ -31,4 +32,12 @@ describe('deepEqual', () => {
     const result = deepEqual({ a: 42, c: fn }, { a: 42, c: fn });
     expect(result).toBeTrue();
   });
+
+  it('should return true when objects are VNodes', () => {
+    const result = deepEqual(
+      html('<span>Grid.js</span>'),
+      html('<span>Grid.js</span>'),
+    );
+    expect(result).toBeTrue();
+  });
 });