Make the Vue/Vue3 wrappers' simpleEqual helper correctly recognize the same objects.

.changelogs/10896.json

@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "private",
+  "title": "Fixed a problem where the Vue/Vue3 wrappers' `simpleEqual` helper return incorrect result when comparing identical objects.",
+  "type": "fixed",
+  "issueOrPR": 10896,
+  "breaking": false,
+  "framework": "vue"
+}

wrappers/vue/src/helpers.ts

@@ -253,18 +253,22 @@ export function createVueComponent(vNode: VNode, parent: Vue, props: object, dat
  * @returns {boolean} `true` if they're the same, `false` otherwise.
  */
 function simpleEqual(objectA, objectB) {
-  const circularReplacer = (function() {
-    const seen = new WeakSet();
+  const stringifyToJSON = (val) => {
+    const circularReplacer = (function() {
+      const seen = new WeakSet();
 
-    return function(key, value) {
-      if (typeof value === 'object' && value !== null) {
-        if (seen.has(value)) return;
-        seen.add(value);
-      }
+      return function(key, value) {
+        if (typeof value === 'object' && value !== null) {
+          if (seen.has(value)) return;
+          seen.add(value);
+        }
 
-      return value;
-    };
-  }());
+        return value;
+      };
+    }());
+
+    return JSON.stringify(val, circularReplacer);
+  };
 
   if (typeof objectA === 'function' && typeof objectB === 'function') {
     return objectA.toString() === objectB.toString();
@@ -273,6 +277,6 @@ function simpleEqual(objectA, objectB) {
     return false;
 
   } else {
-    return JSON.stringify(objectA, circularReplacer) === JSON.stringify(objectB, circularReplacer);
+    return stringifyToJSON(objectA) === stringifyToJSON(objectB);
   }
 }

wrappers/vue/test/hotTableHelpers.spec.ts

@@ -1,3 +1,4 @@
+import { GridSettings } from 'handsontable/settings';
 import {
   rewriteSettings,
   prepareSettings,
@@ -87,4 +88,15 @@ describe('prepareSettings', () => {
     expect(preparedSettings.whatever.foo).toBe('bar');
     expect(preparedSettings.whatever.myself.foo).toBe('bar');
   });
+
+  it('should not recognize passing of the same array twice as a changed object', () => {
+    const settings1: GridSettings = {
+      mergeCells: [{ row: 1, col: 1, colspan: 1, rowspan: 1 }],
+    };
+
+    const preparedSettings = prepareSettings({ settings: settings1 }, settings1);
+
+    expect(preparedSettings.mergeCells).toBe(undefined);
+    expect(Object.keys(preparedSettings).length).toBe(0);
+  });
 });

wrappers/vue3/src/helpers.ts

@@ -139,18 +139,22 @@ export function prepareSettings(props: HotTableProps, currentSettings?: Handsont
  * @returns {boolean} `true` if they're the same, `false` otherwise.
  */
 function simpleEqual(objectA, objectB) {
-  const circularReplacer = (function() {
-    const seen = new WeakSet();
+  const stringifyToJSON = (val) => {
+    const circularReplacer = (function() {
+      const seen = new WeakSet();
 
-    return function(key, value) {
-      if (typeof value === 'object' && value !== null) {
-        if (seen.has(value)) return;
-        seen.add(value);
-      }
+      return function(key, value) {
+        if (typeof value === 'object' && value !== null) {
+          if (seen.has(value)) return;
+          seen.add(value);
+        }
 
-      return value;
-    };
-  }());
+        return value;
+      };
+    }());
+
+    return JSON.stringify(val, circularReplacer);
+  };
 
   if (typeof objectA === 'function' && typeof objectB === 'function') {
     return objectA.toString() === objectB.toString();
@@ -159,6 +163,6 @@ function simpleEqual(objectA, objectB) {
     return false;
 
   } else {
-    return JSON.stringify(objectA, circularReplacer) === JSON.stringify(objectB, circularReplacer);
+    return stringifyToJSON(objectA) === stringifyToJSON(objectB);
   }
 }

wrappers/vue3/test/hotTableHelpers.spec.ts

@@ -1,3 +1,4 @@
+import { GridSettings } from 'handsontable/settings';
 import {
   prepareSettings,
   propFactory
@@ -60,4 +61,15 @@ describe('prepareSettings', () => {
     expect(preparedSettings.whatever.foo).toBe('bar');
     expect(preparedSettings.whatever.myself.foo).toBe('bar');
   });
+
+  it('should not recognize passing of the same array twice as a changed object', () => {
+    const settings1: GridSettings = {
+      mergeCells: [{ row: 1, col: 1, colspan: 1, rowspan: 1 }],
+    };
+
+    const preparedSettings = prepareSettings({ settings: settings1 }, settings1);
+
+    expect(preparedSettings.mergeCells).toBe(undefined);
+    expect(Object.keys(preparedSettings).length).toBe(0);
+  });
 });