Support more options for compatible redux-devtools-extension API

* deserializeState * deserializeAction * serializeState * serializeAction * predicate
jhen0409 · Nov 26, 2016 · e55ce2c · e55ce2c
1 parent e1acfb0
commit e55ce2c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 19 deletions.
diff --git a/app/worker/reduxAPI.js b/app/worker/reduxAPI.js
@@ -1,9 +1,18 @@
 // Edit from https://github.com/zalmoxisus/remote-redux-devtools/blob/master/src/devTools.js
 
-import { stringify, parse } from 'jsan';
 import instrument from 'redux-devtools-instrument';
-import { evalAction, getActionsArray } from 'remotedev-utils';
-import { isFiltered, filterStagedActions, filterState } from 'remotedev-utils/lib/filters';
+import {
+  evalAction,
+  getActionsArray,
+  generateId,
+  stringify,
+} from 'remotedev-utils';
+import importState from 'remotedev-utils/lib/importState';
+import {
+  isFiltered,
+  filterStagedActions,
+  filterState,
+} from 'remotedev-utils/lib/filters';
 
 function configureStore(next, subscriber, options) {
   return instrument(subscriber, options)(next);
@@ -17,16 +26,16 @@ let listenerAdded;
 let locked;
 let paused;
 
-function generateId(id) {
-  return id || Math.random().toString(36).substr(2);
-}
-
 function getLiftedState(store) {
   return filterStagedActions(store.liftedStore.getState());
 }
 
 function relay(type, state, instance, action, nextActionId) {
-  const { filters, stateSanitizer, actionSanitizer } = instance;
+  const {
+    filters, predicate,
+    stateSanitizer, actionSanitizer,
+    serializeState, serializeAction,
+  } = instance;
 
   const message = {
     type,
@@ -36,16 +45,20 @@ function relay(type, state, instance, action, nextActionId) {
   if (state) {
     message.payload = type === 'ERROR' ?
       state :
-      stringify(filterState(state, type, filters, stateSanitizer, actionSanitizer, nextActionId));
+      stringify(
+        filterState(state, type, filters, stateSanitizer, actionSanitizer, nextActionId, predicate),
+        serializeState
+      );
   }
   if (type === 'ACTION') {
     message.action = stringify(
-      !actionSanitizer ? action : actionSanitizer(action.action, nextActionId - 1)
+      !actionSanitizer ? action : actionSanitizer(action.action, nextActionId - 1),
+      serializeAction
     );
     message.isExcess = isExcess;
     message.nextActionId = nextActionId;
   } else if (action) {
-    message.action = stringify(action);
+    message.action = stringify(action, serializeAction);
   }
   postMessage({ __IS_REDUX_NATIVE_MESSAGE__: true, content: message });
 }
@@ -60,6 +73,17 @@ function dispatchRemotely(action, id) {
   }
 }
 
+function importPayloadFrom(store, state, instance) {
+  try {
+    const nextLiftedState = importState(state, instance);
+    if (!nextLiftedState) return;
+    store.liftedStore.dispatch({ type: 'IMPORT_STATE', ...nextLiftedState });
+    relay('STATE', getLiftedState(store), instance);
+  } catch (e) {
+    relay('ERROR', e.message);
+  }
+}
+
 function handleMessages(message) {
   const { id, instanceId, type, action, state, toAll } = message;
   if (toAll) {
@@ -69,17 +93,15 @@ function handleMessages(message) {
     return;
   }
 
-  const { store } = instances[id || instanceId];
+  const instance = instances[id || instanceId];
+  const { store } = instance;
   if (!store) return;
 
   if (type === 'IMPORT') {
-    store.liftedStore.dispatch({
-      type: 'IMPORT_STATE',
-      nextLiftedState: parse(state),
-    });
+    importPayloadFrom(store, state, instance);
   }
-  if (type === 'UPDATE' || type === 'IMPORT') {
-    relay('STATE', getLiftedState(store), instances[id]);
+  if (type === 'UPDATE') {
+    relay('STATE', getLiftedState(store), instance);
   }
   if (type === 'ACTION') {
     dispatchRemotely(action, id);
@@ -158,6 +180,11 @@ export default function devToolsEnhancer(options = {}) {
     actionsWhitelist,
     actionSanitizer,
     stateSanitizer,
+    deserializeState,
+    deserializeAction,
+    serializeState,
+    serializeAction,
+    predicate,
   } = options;
   const id = generateId(options.instanceId);
 
@@ -185,6 +212,11 @@ export default function devToolsEnhancer(options = {}) {
       actionCreators: actionCreators && (() => getActionsArray(actionCreators)),
       stateSanitizer,
       actionSanitizer,
+      deserializeState,
+      deserializeAction,
+      serializeState,
+      serializeAction,
+      predicate,
     };
 
     start(instances[id]);

diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "remotedev-app": "^0.10.1",
     "remotedev-monitor-components": "0.0.4",
     "remotedev-slider": "^1.1.1",
-    "remotedev-utils": "0.0.5",
+    "remotedev-utils": "^0.1.0",
     "ws": "^1.1.1"
   }
 }
diff --git a/webpack/renderer.dev.babel.js b/webpack/renderer.dev.babel.js
@@ -29,5 +29,9 @@ export default {
       'process.env.NODE_ENV': JSON.stringify('development'),
     }),
   ],
+  resolve: {
+    ...baseConfig.resolve,
+    packageAlias: 'browser',
+  },
   target: 'electron-renderer',
 };
diff --git a/webpack/renderer.prod.babel.js b/webpack/renderer.prod.babel.js
@@ -26,5 +26,9 @@ export default {
       __REACT_DEVTOOLS_GLOBAL_HOOK__: 'false',
     }),
   ],
+  resolve: {
+    ...baseConfig.resolve,
+    packageAlias: 'browser',
+  },
   target: 'electron-renderer',
 };