Better serialization

Author: zalmoxisus

package.json

@@ -70,7 +70,7 @@
   },
   "dependencies": {
     "codemirror": "^5.16.0",
-    "jsan": "^3.1.3",
+    "jsan": "^3.1.5",
     "lodash": "^4.17.2",
     "react": "^15.2.1",
     "react-dom": "^15.2.1",

src/app/api/index.js

@@ -3,14 +3,24 @@ import jsan from 'jsan';
 const listeners = {};
 export const source = '@devtools-page';
 
+function tryCatchStringify(obj) {
+  try {
+    return JSON.stringify(obj);
+  } catch (err) {
+    /* eslint-disable no-console */
+    if (process.env.NODE_ENV !== 'production') console.log('Failed to stringify', err);
+    /* eslint-enable no-console */
+    return jsan.stringify(obj, null, null, { circular: '[CIRCULAR]' });
+  }
+}
+
 function stringify(obj, serialize) {
   if (typeof serialize === 'undefined') {
-    return jsan.stringify(obj);
+    return tryCatchStringify(obj);
   }
   if (serialize === true) {
     return jsan.stringify(obj, function(key, value) {
       if (value && typeof value.toJS === 'function') return value.toJS();
-      if (typeof value === 'symbol') return String(value);
       return value;
     }, null, true);
   }
@@ -25,7 +35,7 @@ function post(message) {
   window.postMessage(message, '*');
 }
 
-export function toContentScript(message, serializeState, serializeAction, shouldSerialize) {
+export function toContentScript(message, serializeState, serializeAction) {
   if (message.type === 'ACTION') {
     message.action = stringify(message.action, serializeAction);
     message.payload = stringify(message.payload, serializeState);
@@ -41,7 +51,6 @@ export function toContentScript(message, serializeState, serializeAction, should
       message.committedState = stringify(message.committedState, serializeState);
     }
   }
-  message.serialize = shouldSerialize;
   post(message);
 }
 

src/browser/extension/inject/pageScript.js

@@ -35,7 +35,6 @@ const devToolsExtension = function(reducer, preloadedState, config) {
   let errorOccurred = false;
   let maxAge;
   let actionCreators;
-  let shouldSerialize;
   let serializeState;
   let serializeAction;
   let sendingActionId = 1;
@@ -58,12 +57,10 @@ const devToolsExtension = function(reducer, preloadedState, config) {
   if (typeof config.serializeState !== 'undefined') {
     serializeState = config.serializeState;
     if (typeof serializeState === 'function') serializeState = { replacer: serializeState };
-    else shouldSerialize = true;
   }
   if (typeof config.serializeAction !== 'undefined') {
     serializeAction = config.serializeAction;
     if (typeof serializeAction === 'function') serializeAction = { replacer: serializeAction };
-    else shouldSerialize = true;
   }
 
   const monitor = new Monitor(relayState);
@@ -79,7 +76,7 @@ const devToolsExtension = function(reducer, preloadedState, config) {
     });
     toContentScript({
       type: 'EXPORT', payload, committedState: liftedState.committedState, source, instanceId
-    }, serializeState, serializeAction, shouldSerialize);
+    }, true, true);
   }
 
   function relay(type, state, action, nextActionId, shouldInit) {
@@ -101,7 +98,7 @@ const devToolsExtension = function(reducer, preloadedState, config) {
       message.name = config.name || document.title;
     }
 
-    toContentScript(message, serializeState, serializeAction, shouldSerialize);
+    toContentScript(message, serializeState, serializeAction);
   }
 
   const relayState = throttle((liftedState, actions, shouldInit) => {
@@ -149,7 +146,7 @@ const devToolsExtension = function(reducer, preloadedState, config) {
       source,
       instanceId,
       maxAge
-    }, serializeState, serializeAction, shouldSerialize);
+    }, serializeState, serializeAction);
   }, latency);
 
   function dispatchRemotely(action) {

test/app/inject/api.spec.js

@@ -70,7 +70,6 @@ describe('API', () => {
     expect(message).toEqual({
       type: 'STATE',
       payload: { counter: 1 },
-      serialize: undefined,
       actionsById: undefined,
       computedStates: undefined,
       committedState: false,

test/app/inject/enhancer.spec.js

@@ -101,7 +101,7 @@ describe('Redux enhancer', () => {
     let message = await listenMessage(() => {
       window.postMessage({
         type: 'DISPATCH',
-        payload: {type: 'JUMP_TO_STATE', index: 2},
+        payload: {type: 'JUMP_TO_STATE', index: 2, actionId: 2},
         source: '@devtools-extension'
       }, '*');
     });
@@ -111,7 +111,7 @@ describe('Redux enhancer', () => {
     message = await listenMessage(() => {
       window.postMessage({
         type: 'DISPATCH',
-        payload: {type: 'JUMP_TO_STATE', index: 3},
+        payload: {type: 'JUMP_TO_STATE', index: 3, actionId: 3},
         source: '@devtools-extension'
       }, '*');
     });