New serializeState and serializeAction parameters

Author: zalmoxisus

docs/API/Arguments.md

@@ -26,8 +26,10 @@ Use `window.__REDUX_DEVTOOLS_EXTENSION__([config])` or `window.__REDUX_DEVTOOLS_
       ```
   - **deserializeAction(action): transformedAction** (*function*) - optional transformation of actions deserialized from debug session (useful if actions are not plain object. Example: immutable-js action payload)
     - action, transformedAction - Redux action objects
-  - **serializeState(key, value): transformedState** (*function*) - optional serialization function (useful if state is not plain object. Example: for mori data structures)
-      Example of usage:
+  - **serializeState** (*boolean or function or object*) - specify how and what should be handled during serialization (useful if state is not plain object). Could be:
+    - `false` - handle only circular references.
+    - `true` - handle also dates, regexes, undefined, error objects, and functions.
+    - `function(key, value)` - JSON replacer. Example of usage with mori data structures:
 
       ```js
       const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
@@ -36,7 +38,20 @@ Use `window.__REDUX_DEVTOOLS_EXTENSION__([config])` or `window.__REDUX_DEVTOOLS_
         )
       }));
       ```
-  - **serializeAction(key, value): transformedAction** (*function*) - optional serialization function (useful if actions are not plain object. Example: for mori data structures in actions payload)
+
+    - object (`{ replacer: function, options: object } `) - in addition to the replacer function, specify an options object, which contains `date`, `regexe`, `undefined`, `error`, and `function` keys. Fo each of them you can indicate whether to include (if set as `true`). For `function` key you can also specify a custom function which handles serialization. See [`jsan`](https://github.com/kolodny/jsan) for more details. Example:
+      ```js
+      const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
+        serializeState: { 
+          options: {
+           undefined: true,
+           function: function(fn) { return fn.toString() }
+          }
+        }
+      }));
+      ```       
+
+  - **serializeAction** (*boolean or function or object*) - same as `serializeState` but used for actions payloads.
   - **actionsBlacklist** (*array*) - actions to be hidden in DevTools. Overwrites corresponding global setting in the options page.
   - **actionsWhitelist** (*array*) - all other actions will be hidden in DevTools. Overwrites corresponding global setting in the options page.
   - **actionSanitizer** (*function*) - function which takes `action` object and id number as arguments, and should return `action` object back. See the example bellow.

src/app/api/index.js

@@ -1,8 +1,21 @@
-import { stringify } from 'jsan';
+import jsan from 'jsan';
 
 const listeners = {};
 export const source = '@devtools-page';
 
+function stringify(obj, serialize) {
+  if (typeof serialize === 'undefined') {
+    return jsan.stringify(obj);
+  }
+  if (serialize === true) {
+    return jsan.stringify(obj, function(key, value) {
+      if (value && value.toJS) { return value.toJS(); }
+      return value;
+    }, null, true);
+  }
+  return jsan.stringify(obj, serialize.replacer, null, serialize.options);
+}
+
 export function generateId(instanceId) {
   return instanceId || Math.random().toString(36).substr(2);
 }
@@ -11,17 +24,22 @@ function post(message) {
   window.postMessage(message, '*');
 }
 
-export function toContentScript(message, serializeState, serializeAction) {
+export function toContentScript(message, serializeState, serializeAction, shouldSerialize) {
   if (message.type === 'ACTION') {
     message.action = stringify(message.action, serializeAction);
     message.payload = stringify(message.payload, serializeState);
   } else if (message.type === 'STATE') {
-    const { actionsById, computedStates, committedState, ...rest } = message.payload;
-    message.payload = rest;
-    message.actionsById = stringify(actionsById, serializeAction);
-    message.computedStates = stringify(computedStates, serializeState);
-    message.committedState = stringify(committedState, serializeState);
+    if (serializeState === false) {
+      message.payload = jsan.stringify(message.payload, null, null, false);
+    } else {
+      const { actionsById, computedStates, committedState, ...rest } = message.payload;
+      message.payload = rest;
+      message.actionsById = stringify(actionsById, serializeAction);
+      message.computedStates = stringify(computedStates, serializeState);
+      message.committedState = stringify(committedState, serializeState);
+    }
   }
+  message.serialize = shouldSerialize;
   post(message);
 }
 

src/browser/extension/inject/pageScript.js

@@ -34,6 +34,9 @@ const devToolsExtension = function(reducer, preloadedState, config) {
   let maxAge;
   let isExcess;
   let actionCreators;
+  let shouldSerialize;
+  let serializeState;
+  let serializeAction;
   const instanceId = generateId(config.instanceId);
   const localFilter = getLocalFilter(config);
   let { statesFilter, actionsFilter, stateSanitizer, actionSanitizer, predicate } = config;
@@ -48,6 +51,17 @@ const devToolsExtension = function(reducer, preloadedState, config) {
     actionSanitizer = actionsFilter; // eslint-disable-line no-param-reassign
   }
 
+  if (config.serializeState) {
+    serializeState = config.serializeState;
+    if (typeof serializeState === 'function') serializeState = { replacer: serializeState };
+    else shouldSerialize = true;
+  }
+  if (config.serializeAction) {
+    serializeAction = config.serializeAction;
+    if (typeof serializeAction === 'function') serializeAction = { replacer: serializeAction };
+    else shouldSerialize = true;
+  }
+
   const monitor = new Monitor(relayState);
   if (config.getMonitor) config.getMonitor(monitor);
 
@@ -70,7 +84,7 @@ const devToolsExtension = function(reducer, preloadedState, config) {
       message.name = config.name || document.title;
     }
 
-    toContentScript(message, config.serializeState, config.serializeAction);
+    toContentScript(message, serializeState, serializeAction, shouldSerialize);
   }
 
   function relayState(actions, shouldInit) {

test/app/inject/api.spec.js

@@ -41,7 +41,7 @@ describe('API', () => {
     });
 
     message = await listenMessage(() => {
-      window.devToolsExtension.send({ type: 'hi' }, { counter: 1 }, false, 1);
+      window.devToolsExtension.send({ type: 'hi' }, { counter: 1 }, 1);
     });
     expect(message).toInclude({
       type: 'ACTION',
@@ -53,7 +53,7 @@ describe('API', () => {
     });
 
     message = await listenMessage(() => {
-      window.devToolsExtension.send({ type: 'hi' }, { counter: 1 }, true, 1);
+      window.devToolsExtension.send({ type: 'hi' }, { counter: 1 }, 1);
     });
     expect(message).toInclude({
       type: 'ACTION',
@@ -65,11 +65,12 @@ describe('API', () => {
     expect(message.action).toBe('{"action":{"type":"hi"}}');
 
     message = await listenMessage(() => {
-      window.devToolsExtension.send(undefined, { counter: 1 }, false, 1);
+      window.devToolsExtension.send(undefined, { counter: 1 }, 1);
     });
     expect(message).toEqual({
       type: 'STATE',
       payload: { counter: 1 },
+      serialize: undefined,
       actionsById: undefined,
       computedStates: undefined,
       committedState: undefined,