fix: Util: isSameObject

Author: ngduc

CHANGELOG.md

@@ -1,5 +1,6 @@
-## [0.14.8] - 2021-02-25
+## [0.15.0] - 2021-02-25
 - feat: when "options" prop changed, rebuild and rerender the table.
+- fix: Util: stringifyCensor to compare "options" props.
 - fix: take "layout" from prop - thanks @ViralLka
 - switched from yarn to npm as yarn build doesn't work anymore.
 - updated peerDependencies for React 17 - thanks @ApacheEx

lib/Utils.js

@@ -20,15 +20,30 @@ function isSameArray(a, b) {
     return true;
 }
 exports.isSameArray = isSameArray;
+// source: https://stackoverflow.com/questions/4816099/chrome-sendrequest-error-typeerror-converting-circular-structure-to-json
+function stringifyCensor(censor) {
+    var i = 0;
+    return function (key, value) {
+        if (i !== 0 && typeof censor === 'object' && typeof value == 'object' && censor == value) {
+            return '[Circular]';
+        }
+        if (i >= 29) {
+            // seems to be a harded maximum of 30 serialized objects?
+            return '[Unknown]';
+        }
+        ++i; // so we know we aren't using the original object anymore
+        return value;
+    };
+}
 function isSameObject(a, b) {
-    return JSON.stringify(a) === JSON.stringify(b);
+    return JSON.stringify(a, stringifyCensor(a)) === JSON.stringify(b, stringifyCensor(b));
 }
 exports.isSameObject = isSameObject;
 function reactFormatter(JSX) {
     return function customFormatter(cell, formatterParams, onRendered) {
-        //cell - the cell component
-        //formatterParams - parameters set for the column
-        //onRendered - function to call when the formatter has been rendered
+        // cell - the cell component
+        // formatterParams - parameters set for the column
+        // onRendered - function to call when the formatter has been rendered
         var renderFn = function () {
             var cellEl = cell.getElement();
             if (cellEl) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tabulator",
-  "version": "0.14.8",
+  "version": "0.15.0",
   "description": "React Tabulator is based on tabulator - a JS table library with many advanced features.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/Utils.tsx

@@ -18,32 +18,47 @@ export function isSameArray(a: any[], b: any[]) {
   return true;
 }
 
+// source: https://stackoverflow.com/questions/4816099/chrome-sendrequest-error-typeerror-converting-circular-structure-to-json
+function stringifyCensor(censor: any) {
+  let i = 0;
+  return function (key: string, value: any) {
+    if (i !== 0 && typeof censor === 'object' && typeof value == 'object' && censor == value) {
+      return '[Circular]';
+    }
+    if (i >= 29) {
+      // seems to be a harded maximum of 30 serialized objects?
+      return '[Unknown]';
+    }
+    ++i; // so we know we aren't using the original object anymore
+    return value;
+  };
+}
+
 export function isSameObject(a: any, b: any) {
-  return JSON.stringify(a) === JSON.stringify(b);
+  return JSON.stringify(a, stringifyCensor(a)) === JSON.stringify(b, stringifyCensor(b));
 }
 
 export function reactFormatter(JSX: any) {
-  return function customFormatter(cell: any, formatterParams: any, onRendered: (callback: () => void) => void){
-    //cell - the cell component
-    //formatterParams - parameters set for the column
-    //onRendered - function to call when the formatter has been rendered
-
+  return function customFormatter(cell: any, formatterParams: any, onRendered: (callback: () => void) => void) {
+    // cell - the cell component
+    // formatterParams - parameters set for the column
+    // onRendered - function to call when the formatter has been rendered
     const renderFn = () => {
       const cellEl = cell.getElement();
       if (cellEl) {
-        const formatterCell = cellEl.querySelector('.formatterCell')
+        const formatterCell = cellEl.querySelector('.formatterCell');
         if (formatterCell) {
           const CompWithMoreProps = React.cloneElement(JSX, { cell });
           render(CompWithMoreProps, cellEl.querySelector('.formatterCell'));
         }
       }
-    }
+    };
 
     onRendered(renderFn); // initial render only.
 
     setTimeout(() => {
       renderFn(); // render every time cell value changed.
-    }, 0)
+    }, 0);
     return '<div class="formatterCell"></div>';
-  }
-}
+  };
+}