feat: add force serialize

salvoravida · Sep 1, 2022 · c24aa4d · c24aa4d
1 parent a86295d
commit c24aa4d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/recoil-toolkit/package.json b/packages/recoil-toolkit/package.json
@@ -1,6 +1,6 @@
 {
    "name": "recoil-toolkit",
-   "version": "0.2.7",
+   "version": "0.2.9",
    "description": "recoil-toolkit",
    "main": "./build/es5/index.js",
    "module": "./build/es6/index.js",

diff --git a/packages/recoil-toolkit/src/devtools/RecoilDevTools.tsx b/packages/recoil-toolkit/src/devtools/RecoilDevTools.tsx
@@ -3,7 +3,21 @@ import { useRecoilSnapshot } from 'recoil';
 import { RecoilToolkitDevTools } from './consts';
 import { getSnapshotState } from './getSnapshotState';
 
-export const RecoilDevTools: React.FC<{ enableConsole?: boolean }> = ({ enableConsole }) => {
+const stringifyCircularJSON = obj => {
+   const seen = new WeakSet();
+   return JSON.stringify(obj, (k, v) => {
+      if (v !== null && typeof v === 'object') {
+         if (seen.has(v)) return '[Circular]';
+         seen.add(v);
+      }
+      return v;
+   });
+};
+
+export const RecoilDevTools: React.FC<{ enableConsole?: boolean; forceSerialize?: boolean }> = ({
+   enableConsole,
+   forceSerialize,
+}) => {
    const snapshot = useRecoilSnapshot();
 
    useEffect(() => {
@@ -17,10 +31,13 @@ export const RecoilDevTools: React.FC<{ enableConsole?: boolean }> = ({ enableCo
    useEffect(() => {
       const snapState = getSnapshotState(snapshot);
       window.postMessage(
-         { type: RecoilToolkitDevTools.eventMessageFromPage, data: snapState },
+         {
+            type: RecoilToolkitDevTools.eventMessageFromPage,
+            data: forceSerialize ? JSON.parse(stringifyCircularJSON(snapState)) : snapState,
+         },
          '*',
       );
-   }, [snapshot]);
+   }, [snapshot]); //eslint-disable-line
 
    /** Listen messages from DevTools **/
    useEffect(() => {