mobx-remotedev - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

dist/mobx-remotedev.js

@@ -80,3 +80,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	exports.__esModule = true;
-	exports.setValue = undefined;
+	exports.setValue = exports.silently = undefined;
 	exports.createAction = createAction;
@@ -97,3 +97,2 @@ exports.getName = getName;
 	  var removedCount = change.removedCount;
-	  var object = change.object;
 
@@ -123,3 +122,3 @@ return {
 	  }
-	  action.type = '@@' + name;
+	  action.type = '┃ ' + name;
 
@@ -137,11 +136,22 @@ return action;
 
-	var setValue = exports.setValue = _mobx2.default.action(function setValue(store, state) {
-	  if (store.importState) {
-	    store.importState(state);
-	  } else {
-	    Object.keys(state).forEach(function (key) {
-	      store[key] = state[key]; // eslint-disable-line no-param-reassign
-	    });
-	  }
+	/* eslint-disable no-param-reassign */
+	var silently = exports.silently = function silently(fn, store) {
+	  store.__isRemotedevAction = true;
+	  fn();
+	  delete store.__isRemotedevAction;
+	};
+
+	var setValue = exports.setValue = _mobx2.default.action('@@remotedev', function (store, state) {
+	  silently(function () {
+	    if (store.importState) {
+	      store.importState(state);
+	    } else {
+	      Object.keys(state).forEach(function (key) {
+	        store[key] = state[key];
+	      });
+	    }
+	  }, store);
+	  return state;
 	});
+	/* eslint-enable */
 
@@ -191,3 +201,3 @@ /***/ },
 
-	var _spy = __webpack_require__(6);
+	var _spy = __webpack_require__(7);
 
@@ -240,2 +250,21 @@ var _spy2 = _interopRequireDefault(_spy);
 /* 5 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	exports.__esModule = true;
+	exports.isFiltered = isFiltered;
+	function isFiltered(action, localFilter) {
+	  if (!localFilter && (!window.devToolsOptions.filter || window.devToolsOptions.filter === 'DO_NOT_FILTER')) return false;
+
+	  var _ref = localFilter || window.devToolsOptions;
+
+	  var whitelist = _ref.whitelist;
+	  var blacklist = _ref.blacklist;
+
+	  return whitelist && !action.type.match(whitelist) || blacklist && action.type.match(blacklist);
+	}
+
+/***/ },
+/* 6 */
 /***/ function(module, exports, __webpack_require__) {
@@ -246,8 +275,17 @@
 	exports.__esModule = true;
-	exports.dispatchMonitorAction = exports.isMonitorAction = undefined;
+	exports.isMonitorAction = undefined;
+	exports.dispatchMonitorAction = dispatchMonitorAction;
 
-	var _jsan = __webpack_require__(7);
+	var _mobx = __webpack_require__(1);
 
+	var _mobx2 = _interopRequireDefault(_mobx);
+
+	var _jsan = __webpack_require__(9);
+
+	var _remotedevUtils = __webpack_require__(13);
+
 	var _utils = __webpack_require__(2);
 
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 	var isMonitorAction = exports.isMonitorAction = function isMonitorAction(store) {
@@ -257,18 +295,84 @@ return store.__isRemotedevAction === true;
 
-	/* eslint-disable no-param-reassign */
-	var dispatchMonitorAction = exports.dispatchMonitorAction = function dispatchMonitorAction(store) {
+	function dispatch(store, _ref) {
+	  var type = _ref.type;
+	  var args = _ref.arguments;
+
+	  if (typeof store[type] === 'function') {
+	    (0, _utils.silently)(function () {
+	      store[type].apply(store, args);
+	    }, store);
+	  }
+	}
+
+	function dispatchRemotely(devTools, store, payload) {
+	  try {
+	    (0, _remotedevUtils.evalMethod)(payload, store);
+	  } catch (e) {
+	    devTools.error(e.message);
+	  }
+	}
+
+	function toggleAction(store, id, strState) {
+	  var liftedState = (0, _jsan.parse)(strState);
+	  var idx = liftedState.skippedActionIds.indexOf(id);
+	  var skipped = idx !== -1;
+	  var start = liftedState.stagedActionIds.indexOf(id);
+	  if (start === -1) return liftedState;
+
+	  (0, _utils.setValue)(store, liftedState.computedStates[start - 1].state);
+	  for (var i = skipped ? start : start + 1; i < liftedState.stagedActionIds.length; i++) {
+	    if (i !== start && liftedState.skippedActionIds.indexOf(liftedState.stagedActionIds[i]) !== -1) continue; // it's already skipped
+	    dispatch(store, liftedState.actionsById[liftedState.stagedActionIds[i]].action);
+	    liftedState.computedStates[i].state = _mobx2.default.toJS(store);
+	  }
+
+	  if (skipped) {
+	    liftedState.skippedActionIds.splice(idx, 1);
+	  } else {
+	    liftedState.skippedActionIds.push(id);
+	  }
+	  return liftedState;
+	}
+
+	function dispatchMonitorAction(store, devTools, onlyActions) {
+	  var initValue = _mobx2.default.toJS(store);
+	  devTools.init(initValue, (0, _remotedevUtils.getMethods)(store));
+
 	  return function (message) {
 	    if (message.type === 'DISPATCH') {
-	      if (message.payload.type === 'JUMP_TO_STATE') {
-	        store.__isRemotedevAction = true;
-	        (0, _utils.setValue)(store, (0, _jsan.parse)(message.state));
-	        store.__isRemotedevAction = false;
+	      switch (message.payload.type) {
+	        case 'RESET':
+	          devTools.init((0, _utils.setValue)(store, initValue));
+	          return;
+	        case 'COMMIT':
+	          devTools.init(_mobx2.default.toJS(store));
+	          return;
+	        case 'ROLLBACK':
+	          devTools.init((0, _utils.setValue)(store, (0, _jsan.parse)(message.state)));
+	          return;
+	        case 'JUMP_TO_STATE':
+	          (0, _utils.setValue)(store, (0, _jsan.parse)(message.state));
+	          return;
+	        case 'TOGGLE_ACTION':
+	          if (!onlyActions) {
+	            console.warn('`onlyActions` parameter should be `true` to skip actions: ' + 'https://github.com/zalmoxisus/mobx-remotedev#remotedevstore-config');
+	            return;
+	          }
+	          devTools.send(null, toggleAction(store, message.payload.id, message.state));
+	          return;
 	      }
+	    } else if (message.type === 'ACTION') {
+	      dispatchRemotely(devTools, store, message.payload);
+	    } else if (message.type === 'IMPORT') {
+	      var liftedState = (0, _jsan.parse)(message.state);
+	      var computedStates = liftedState.computedStates;
+
+	      (0, _utils.setValue)(store, computedStates[computedStates.length - 1].state);
+	      devTools.send(null, liftedState);
 	    }
 	  };
-	};
-	/* eslint-enable */
+	}
 
 /***/ },
-/* 6 */
+/* 7 */
 /***/ function(module, exports, __webpack_require__) {
@@ -279,2 +383,5 @@
 	exports.__esModule = true;
+
+	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 	exports.default = spy;
@@ -288,4 +395,6 @@
 
-	var _monitorActions = __webpack_require__(5);
+	var _filters = __webpack_require__(5);
 
+	var _monitorActions = __webpack_require__(6);
+
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -295,13 +404,20 @@
 	var stores = {};
+	var onlyActions = {};
+	var filters = {};
 	var monitors = {};
-	var scheduled = {};
+	var scheduled = [];
 
+	function configure(name, config) {
+	  if (!config) return;
+	  onlyActions[name] = config.onlyActions;
+	  filters[name] = config.filters;
+	}
+
 	function init(store, config) {
 	  var name = _mobx2.default.extras.getDebugName(store);
+	  configure(name, config);
 	  stores[name] = store;
-	  scheduled[name] = [];
 
 	  var devTools = window.devToolsExtension.connect(config);
-	  devTools.init(_mobx2.default.toJS(store));
-	  devTools.subscribe((0, _monitorActions.dispatchMonitorAction)(store));
+	  devTools.subscribe((0, _monitorActions.dispatchMonitorAction)(store, devTools, onlyActions[name]));
 	  monitors[name] = devTools;
@@ -311,12 +427,15 @@ }
 	function schedule(name, action) {
-	  scheduled[name].push(function () {
-	    monitors[name].send(action, _mobx2.default.toJS(stores[name]));
-	  });
+	  var toSend = void 0;
+	  if (action && !(0, _filters.isFiltered)(action, filters[name])) {
+	    toSend = function toSend() {
+	      monitors[name].send(action, _mobx2.default.toJS(stores[name]));
+	    };
+	  }
+	  scheduled.push(toSend);
 	}
 
-	function send(name) {
-	  var toSend = scheduled[name];
-	  if (!toSend) return;
-	  while (toSend.length) {
-	    toSend.shift()();
+	function send() {
+	  if (scheduled.length) {
+	    var toSend = scheduled.pop();
+	    if (toSend) toSend();
 	  }
@@ -333,14 +452,27 @@ }
 	    if (change.spyReportStart) {
-	      if (change.type === 'reaction') return; // TODO: show reactions
 	      objName = (0, _utils.getName)(change.object || change.target);
-	      if (!scheduled[objName] || stores[objName].__isRemotedevAction) return;
+	      if (change.type === 'reaction') {
+	        // TODO: show reactions
+	        schedule(objName);
+	        return;
+	      }
+	      if (!stores[objName] || stores[objName].__isRemotedevAction) {
+	        schedule(objName);
+	        return;
+	      }
 	      if (change.type === 'action') {
 	        var action = (0, _utils.createAction)(change.name);
 	        if (change.arguments && change.arguments.length) action.arguments = change.arguments;
-	        schedule(objName, action);
+	        if (!onlyActions[objName]) {
+	          schedule(objName, _extends({}, action, { type: '┏ ' + action.type }));
+	          send();
+	          schedule(objName, _extends({}, action, { type: '┗ ' + action.type }));
+	        } else {
+	          schedule(objName, action);
+	        }
 	      } else if (change.type && _mobx2.default.isObservable(change.object)) {
-	        schedule(objName, (0, _utils.createAction)(change.type, change));
+	        schedule(objName, !onlyActions[objName] && (0, _utils.createAction)(change.type, change));
 	      }
 	    } else if (change.spyReportEnd) {
-	      send(objName);
+	      send();
 	    }
@@ -351,14 +483,56 @@ });
 /***/ },
-/* 7 */
+/* 8 */
+/***/ function(module, exports) {
+
+	/* global window */
+	var GetParams = function (func) {
+		'use strict';
+
+		if (typeof func !== 'function') {
+			return [];
+		}
+
+		var patternComments = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
+		var patternArguments = /([^\s,]+)/g;
+
+		var funcString = func
+			.toString()
+			.replace(patternComments, '');
+
+		var result = funcString
+			.slice(
+				funcString.indexOf('(') + 1,
+				funcString.indexOf(')')
+			)
+			.match(patternArguments);
+
+		if (result === null) {
+			return [];
+		}
+
+		return result;
+	};
+
+	if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+		module.exports = GetParams;
+	}
+
+	if (typeof window !== 'undefined') {
+		window.GetParams = GetParams;
+	}
+
+
+/***/ },
+/* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(9);
+	module.exports = __webpack_require__(11);
 
 
 /***/ },
-/* 8 */
+/* 10 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var pathGetter = __webpack_require__(3);
-	var utils = __webpack_require__(10);
+	var utils = __webpack_require__(12);
 
@@ -402,4 +576,4 @@ // Based on https://github.com/douglascrockford/JSON-js/blob/master/cycle.js
 
-	    if (value && value.toJSON) {
-	      return value.toJSON();
+	    if (value && typeof value.toJSON === 'function') {
+	      value = value.toJSON();
 	    }
@@ -507,6 +681,6 @@
 /***/ },
-/* 9 */
+/* 11 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var cycle = __webpack_require__(8);
+	var cycle = __webpack_require__(10);
 
@@ -561,3 +735,3 @@ exports.stringify = function stringify(value, replacer, space, _options) {
 /***/ },
-/* 10 */
+/* 12 */
 /***/ function(module, exports, __webpack_require__) {
@@ -616,2 +790,100 @@
 
+/***/ },
+/* 13 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	exports.__esModule = true;
+
+	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
+	exports.getMethods = getMethods;
+	exports.getActionsArray = getActionsArray;
+	exports.evalAction = evalAction;
+	exports.evalMethod = evalMethod;
+
+	var _getParams = __webpack_require__(8);
+
+	var _getParams2 = _interopRequireDefault(_getParams);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function flatTree(obj) {
+	  var namespace = arguments.length <= 1 || arguments[1] === undefined ? '' : arguments[1];
+
+	  var functions = [];
+	  Object.keys(obj).forEach(function (key) {
+	    var prop = obj[key];
+	    if (typeof prop === 'function') {
+	      functions.push({
+	        name: namespace + (key || prop.name || 'anonymous'),
+	        func: prop,
+	        args: (0, _getParams2.default)(prop)
+	      });
+	    } else if ((typeof prop === 'undefined' ? 'undefined' : _typeof(prop)) === 'object') {
+	      functions = functions.concat(flatTree(prop, namespace + key + '.'));
+	    }
+	  });
+	  return functions;
+	}
+
+	function getMethods(obj) {
+	  if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object') return undefined;
+	  var functions = void 0;
+	  var m = void 0;
+	  if (obj.__proto__) m = obj.__proto__.__proto__;
+	  if (!m) m = obj;
+
+	  Object.getOwnPropertyNames(m).forEach(function (key) {
+	    var prop = m[key];
+	    if (typeof prop === 'function' && key !== 'constructor') {
+	      if (!functions) functions = [];
+	      functions.push({
+	        name: key || prop.name || 'anonymous',
+	        args: (0, _getParams2.default)(prop)
+	      });
+	    }
+	  });
+	  return functions;
+	}
+
+	function getActionsArray(actionCreators) {
+	  if (Array.isArray(actionCreators)) return actionCreators;
+	  return flatTree(actionCreators);
+	}
+
+	/* eslint-disable no-new-func */
+	var interpretArg = function interpretArg(arg) {
+	  return new Function('return ' + arg)();
+	};
+
+	function evalArgs(inArgs, restArgs) {
+	  var args = inArgs.map(interpretArg);
+	  if (!restArgs) return args;
+	  var rest = interpretArg(restArgs);
+	  if (Array.isArray(rest)) return args.concat.apply(args, rest);
+	  throw new Error('rest must be an array');
+	}
+
+	function evalAction(action, actionCreators) {
+	  if (typeof action === 'string') {
+	    return new Function('return ' + action)();
+	  }
+
+	  var actionCreator = actionCreators[action.selected].func;
+	  var args = evalArgs(action.args, action.rest);
+	  return actionCreator.apply(undefined, args);
+	}
+
+	function evalMethod(action, obj) {
+	  if (typeof action === 'string') {
+	    return new Function('return ' + action).call(obj);
+	  }
+
+	  var args = evalArgs(action.args, action.rest);
+	  return new Function('args', 'return this.' + action.name + '(args)').apply(obj, args);
+	}
+	/* eslint-enable */
+
 /***/ }
@@ -618,0 +890,0 @@ /******/ ])

dist/mobx-remotedev.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("mobx")):"function"==typeof define&&define.amd?define(["mobx"],t):"object"==typeof exports?exports.RemoteDev=t(require("mobx")):e.RemoteDev=t(e.mobx)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";e.exports=n(4).default},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!t)return{type:e};var n=void 0;if("undefined"!=typeof t.newValue){var r;r={},r[t.name]=a.default.toJS(t.newValue),n=r}else n=f(t);return n.type="@@"+e,n}function i(e){if(!e)return"";var t=a.default.extras.getDebugName(e),n=t.indexOf(".");return n===-1&&(n=void 0),t.substr(0,n)}t.__esModule=!0,t.setValue=void 0,t.createAction=o,t.getName=i;var u=n(1),a=r(u),f=function(e){var t=e.added,n=e.addedCount,r=e.index,o=e.removed,i=e.removedCount;e.object;return{index:r,added:t&&a.default.toJS(t),addedCount:n,removed:o&&a.default.toJS(o),removedCount:i}};t.setValue=a.default.action(function(e,t){e.importState?e.importState(t):Object.keys(t).forEach(function(n){e[n]=t[n]})})},function(e,t){function n(e,t){if("$"!==t)for(var n=r(t),o=0;o<n.length;o++)t=n[o].toString().replace(/\\"/g,'"'),e=e[t];return e}function r(e){for(var t,n=/(?:\.(\w+))|(?:\[(\d+)\])|(?:\["((?:[^\\"]|\\.)*)"\])/g,r=[];t=n.exec(e);)r.push(t[1]||t[2]||t[3]);return r}e.exports=n},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e,t){return"undefined"!=typeof window&&window.devToolsExtension?(s.default.isObservable(e)?(0,d.default)(e,t):"function"==typeof e?e=function(e){function n(){o(this,n);for(var r=arguments.length,u=Array(r),a=0;a<r;a++)u[a]=arguments[a];var f=i(this,e.call.apply(e,[this].concat(u)));return(0,d.default)(f,t),f}return u(n,e),n}(e):console.warn("Passed "+("undefined"==typeof e?"undefined":f(e))+" to mobx-remotedev, which is not an observable."),e):e}t.__esModule=!0,t.default=void 0;var f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},c=n(1),s=r(c),l=n(6),d=r(l);t.default=a},function(e,t,n){"use strict";t.__esModule=!0,t.dispatchMonitorAction=t.isMonitorAction=void 0;var r=n(7),o=n(2);t.isMonitorAction=function(e){return e.__isRemotedevAction===!0},t.dispatchMonitorAction=function(e){return function(t){"DISPATCH"===t.type&&"JUMP_TO_STATE"===t.payload.type&&(e.__isRemotedevAction=!0,(0,o.setValue)(e,(0,r.parse)(t.state)),e.__isRemotedevAction=!1)}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){var n=c.default.extras.getDebugName(e);p[n]=e,v[n]=[];var r=window.devToolsExtension.connect(t);r.init(c.default.toJS(e)),r.subscribe((0,l.dispatchMonitorAction)(e)),y[n]=r}function i(e,t){v[e].push(function(){y[e].send(t,c.default.toJS(p[e]))})}function u(e){var t=v[e];if(t)for(;t.length;)t.shift()()}function a(e,t){if(o(e,t),!d){d=!0;var n=void 0;c.default.spy(function(e){if(e.spyReportStart){if("reaction"===e.type)return;if(n=(0,s.getName)(e.object||e.target),!v[n]||p[n].__isRemotedevAction)return;if("action"===e.type){var t=(0,s.createAction)(e.name);e.arguments&&e.arguments.length&&(t.arguments=e.arguments),i(n,t)}else e.type&&c.default.isObservable(e.object)&&i(n,(0,s.createAction)(e.type,e))}else e.spyReportEnd&&u(n)})}}t.__esModule=!0,t.default=a;var f=n(1),c=r(f),s=n(2),l=n(5),d=!1,p={},y={},v={}},function(e,t,n){e.exports=n(9)},function(e,t,n){var r=(n(3),n(10));t.decycle=function(e,t,n){"use strict";var o=[],i=[];return function u(e,a,f){var c,s,l,d=n?n(f||"",e):e;if(t.date&&d instanceof Date)return{$jsan:"d"+d.getTime()};if(t.regex&&d instanceof RegExp)return{$jsan:"r"+r.getRegexFlags(d)+","+d.source};if(t.function&&"function"==typeof d)return{$jsan:"f"+r.stringifyFunction(d,t.function)};if(t.undefined&&void 0===d)return{$jsan:"u"};if(t.error&&d instanceof Error)return{$jsan:"e"+d.message};if(d&&d.toJSON)return d.toJSON();if(!("object"!=typeof d||null===d||d instanceof Boolean||d instanceof Date||d instanceof Number||d instanceof RegExp||d instanceof String||d instanceof Error)){for(c=0;c<o.length;c+=1)if(o[c]===d)return{$jsan:i[c]};if(o.push(d),i.push(a),"[object Array]"===Object.prototype.toString.apply(d))for(l=[],c=0;c<d.length;c+=1)l[c]=u(d[c],a+"["+c+"]",c);else{l={};for(s in d)if(Object.prototype.hasOwnProperty.call(d,s)){var p=/^\w+$/.test(s)?"."+s:"["+JSON.stringify(s)+"]";l[s]="$jsan"===s?[u(d[s],a+p)]:u(d[s],a+p,s)}}return l}return d}(e,"$")},t.retrocycle=function(e){"use strict";return function t(n){var o,i,u;if(n&&"object"==typeof n)if("[object Array]"===Object.prototype.toString.apply(n))for(o=0;o<n.length;o+=1)i=n[o],i&&"object"==typeof i&&(i.$jsan?n[o]=r.restore(i.$jsan,e):t(i));else for(u in n)"$jsan"===u&&(n[u]=n[u][0]),"object"==typeof n[u]&&(i=n[u],i&&"object"==typeof i&&(i.$jsan?n[u]=r.restore(i.$jsan,e):t(i)))}(e),e}},function(e,t,n){var r=n(8);t.stringify=function(e,t,n,o){if(arguments.length<4)try{return 1===arguments.length?JSON.stringify(e):JSON.stringify.apply(JSON,arguments)}catch(i){}var u=o||!1;"boolean"==typeof u&&(u={date:u,"function":u,regex:u,undefined:u,error:u});var a=r.decycle(e,u,t);return 1===arguments.length?JSON.stringify(a):JSON.stringify(a,t,n)},t.parse=function(e,t){var n,o=/"\$jsan"/.test(e);return n=1===arguments.length?JSON.parse(e):JSON.parse(e,t),o&&(n=r.retrocycle(n)),n}},function(e,t,n){var r=n(3);t.getRegexFlags=function(e){var t="";return e.ignoreCase&&(t+="i"),e.global&&(t+="g"),e.multiline&&(t+="m"),t},t.stringifyFunction=function(e,t){if("function"==typeof t)return t(e);var n=e.toString(),r=n.match(/^[^{]*{|^[^=]*=>/),o=r?r[0]:"<function> ",i="}"===n[n.length-1]?"}":"";return o.replace(/\r\n|\n/g," ").replace(/\s+/g," ")+" /* ... */ "+i},t.restore=function(e,t){var n=e[0],o=e.slice(1);switch(n){case"$":return r(t,e);case"r":var i=o.indexOf(","),u=o.slice(0,i),a=o.slice(i+1);return RegExp(a,u);case"d":return new Date((+o));case"f":var f=function(){throw new Error("can't run jsan parsed function")};return f.toString=function(){return o},f;case"u":return;case"e":var c=new Error(o);return c.stack="Stack is unavailable for jsan parsed errors",c;default:return console.warn("unknown type",e),e}}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("mobx")):"function"==typeof define&&define.amd?define(["mobx"],t):"object"==typeof exports?exports.RemoteDev=t(require("mobx")):e.RemoteDev=t(e.mobx)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";e.exports=n(4).default},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!t)return{type:e};var n=void 0;if("undefined"!=typeof t.newValue){var r;r={},r[t.name]=a.default.toJS(t.newValue),n=r}else n=s(t);return n.type="┃ "+e,n}function i(e){if(!e)return"";var t=a.default.extras.getDebugName(e),n=t.indexOf(".");return n===-1&&(n=void 0),t.substr(0,n)}t.__esModule=!0,t.setValue=t.silently=void 0,t.createAction=o,t.getName=i;var u=n(1),a=r(u),s=function(e){var t=e.added,n=e.addedCount,r=e.index,o=e.removed,i=e.removedCount;return{index:r,added:t&&a.default.toJS(t),addedCount:n,removed:o&&a.default.toJS(o),removedCount:i}},f=t.silently=function(e,t){t.__isRemotedevAction=!0,e(),delete t.__isRemotedevAction};t.setValue=a.default.action("@@remotedev",function(e,t){return f(function(){e.importState?e.importState(t):Object.keys(t).forEach(function(n){e[n]=t[n]})},e),t})},function(e,t){function n(e,t){if("$"!==t)for(var n=r(t),o=0;o<n.length;o++)t=n[o].toString().replace(/\\"/g,'"'),e=e[t];return e}function r(e){for(var t,n=/(?:\.(\w+))|(?:\[(\d+)\])|(?:\["((?:[^\\"]|\\.)*)"\])/g,r=[];t=n.exec(e);)r.push(t[1]||t[2]||t[3]);return r}e.exports=n},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e,t){return"undefined"!=typeof window&&window.devToolsExtension?(c.default.isObservable(e)?(0,l.default)(e,t):"function"==typeof e?e=function(e){function n(){o(this,n);for(var r=arguments.length,u=Array(r),a=0;a<r;a++)u[a]=arguments[a];var s=i(this,e.call.apply(e,[this].concat(u)));return(0,l.default)(s,t),s}return u(n,e),n}(e):console.warn("Passed "+("undefined"==typeof e?"undefined":s(e))+" to mobx-remotedev, which is not an observable."),e):e}t.__esModule=!0,t.default=void 0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},f=n(1),c=r(f),d=n(7),l=r(d);t.default=a},function(e,t){"use strict";function n(e,t){if(!(t||window.devToolsOptions.filter&&"DO_NOT_FILTER"!==window.devToolsOptions.filter))return!1;var n=t||window.devToolsOptions,r=n.whitelist,o=n.blacklist;return r&&!e.type.match(r)||o&&e.type.match(o)}t.__esModule=!0,t.isFiltered=n},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){var n=t.type,r=t.arguments;"function"==typeof e[n]&&(0,l.silently)(function(){e[n].apply(e,r)},e)}function i(e,t,n){try{(0,d.evalMethod)(n,t)}catch(r){e.error(r.message)}}function u(e,t,n){var r=(0,c.parse)(n),i=r.skippedActionIds.indexOf(t),u=i!==-1,a=r.stagedActionIds.indexOf(t);if(a===-1)return r;(0,l.setValue)(e,r.computedStates[a-1].state);for(var s=u?a:a+1;s<r.stagedActionIds.length;s++)s!==a&&r.skippedActionIds.indexOf(r.stagedActionIds[s])!==-1||(o(e,r.actionsById[r.stagedActionIds[s]].action),r.computedStates[s].state=f.default.toJS(e));return u?r.skippedActionIds.splice(i,1):r.skippedActionIds.push(t),r}function a(e,t,n){var r=f.default.toJS(e);return t.init(r,(0,d.getMethods)(e)),function(o){if("DISPATCH"===o.type)switch(o.payload.type){case"RESET":return void t.init((0,l.setValue)(e,r));case"COMMIT":return void t.init(f.default.toJS(e));case"ROLLBACK":return void t.init((0,l.setValue)(e,(0,c.parse)(o.state)));case"JUMP_TO_STATE":return void(0,l.setValue)(e,(0,c.parse)(o.state));case"TOGGLE_ACTION":return n?void t.send(null,u(e,o.payload.id,o.state)):void console.warn("`onlyActions` parameter should be `true` to skip actions: https://github.com/zalmoxisus/mobx-remotedev#remotedevstore-config")}else if("ACTION"===o.type)i(t,e,o.payload);else if("IMPORT"===o.type){var a=(0,c.parse)(o.state),s=a.computedStates;(0,l.setValue)(e,s[s.length-1].state),t.send(null,a)}}}t.__esModule=!0,t.isMonitorAction=void 0,t.dispatchMonitorAction=a;var s=n(1),f=r(s),c=n(9),d=n(13),l=n(2);t.isMonitorAction=function(e){return e.__isRemotedevAction===!0}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){t&&(m[e]=t.onlyActions,b[e]=t.filters)}function i(e,t){var n=d.default.extras.getDebugName(e);o(n,t),g[n]=e;var r=window.devToolsExtension.connect(t);r.subscribe((0,y.dispatchMonitorAction)(e,r,m[n])),h[n]=r}function u(e,t){var n=void 0;t&&!(0,p.isFiltered)(t,b[e])&&(n=function(){h[e].send(t,d.default.toJS(g[e]))}),_.push(n)}function a(){if(_.length){var e=_.pop();e&&e()}}function s(e,t){if(i(e,t),!v){v=!0;var n=void 0;d.default.spy(function(e){if(e.spyReportStart){if(n=(0,l.getName)(e.object||e.target),"reaction"===e.type)return void u(n);if(!g[n]||g[n].__isRemotedevAction)return void u(n);if("action"===e.type){var t=(0,l.createAction)(e.name);e.arguments&&e.arguments.length&&(t.arguments=e.arguments),m[n]?u(n,t):(u(n,f({},t,{type:"┏ "+t.type})),a(),u(n,f({},t,{type:"┗ "+t.type})))}else e.type&&d.default.isObservable(e.object)&&u(n,!m[n]&&(0,l.createAction)(e.type,e))}else e.spyReportEnd&&a()})}}t.__esModule=!0;var f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.default=s;var c=n(1),d=r(c),l=n(2),p=n(5),y=n(6),v=!1,g={},m={},b={},h={},_=[]},function(e,t){var n=function(e){"use strict";if("function"!=typeof e)return[];var t=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,n=/([^\s,]+)/g,r=e.toString().replace(t,""),o=r.slice(r.indexOf("(")+1,r.indexOf(")")).match(n);return null===o?[]:o};"undefined"!=typeof e&&"undefined"!=typeof e.exports&&(e.exports=n),"undefined"!=typeof window&&(window.GetParams=n)},function(e,t,n){e.exports=n(11)},function(e,t,n){var r=(n(3),n(12));t.decycle=function(e,t,n){"use strict";var o=[],i=[];return function u(e,a,s){var f,c,d,l=n?n(s||"",e):e;if(t.date&&l instanceof Date)return{$jsan:"d"+l.getTime()};if(t.regex&&l instanceof RegExp)return{$jsan:"r"+r.getRegexFlags(l)+","+l.source};if(t.function&&"function"==typeof l)return{$jsan:"f"+r.stringifyFunction(l,t.function)};if(t.undefined&&void 0===l)return{$jsan:"u"};if(t.error&&l instanceof Error)return{$jsan:"e"+l.message};if(l&&"function"==typeof l.toJSON&&(l=l.toJSON()),!("object"!=typeof l||null===l||l instanceof Boolean||l instanceof Date||l instanceof Number||l instanceof RegExp||l instanceof String||l instanceof Error)){for(f=0;f<o.length;f+=1)if(o[f]===l)return{$jsan:i[f]};if(o.push(l),i.push(a),"[object Array]"===Object.prototype.toString.apply(l))for(d=[],f=0;f<l.length;f+=1)d[f]=u(l[f],a+"["+f+"]",f);else{d={};for(c in l)if(Object.prototype.hasOwnProperty.call(l,c)){var p=/^\w+$/.test(c)?"."+c:"["+JSON.stringify(c)+"]";d[c]="$jsan"===c?[u(l[c],a+p)]:u(l[c],a+p,c)}}return d}return l}(e,"$")},t.retrocycle=function(e){"use strict";return function t(n){var o,i,u;if(n&&"object"==typeof n)if("[object Array]"===Object.prototype.toString.apply(n))for(o=0;o<n.length;o+=1)i=n[o],i&&"object"==typeof i&&(i.$jsan?n[o]=r.restore(i.$jsan,e):t(i));else for(u in n)"$jsan"===u&&(n[u]=n[u][0]),"object"==typeof n[u]&&(i=n[u],i&&"object"==typeof i&&(i.$jsan?n[u]=r.restore(i.$jsan,e):t(i)))}(e),e}},function(e,t,n){var r=n(10);t.stringify=function(e,t,n,o){if(arguments.length<4)try{return 1===arguments.length?JSON.stringify(e):JSON.stringify.apply(JSON,arguments)}catch(i){}var u=o||!1;"boolean"==typeof u&&(u={date:u,"function":u,regex:u,undefined:u,error:u});var a=r.decycle(e,u,t);return 1===arguments.length?JSON.stringify(a):JSON.stringify(a,t,n)},t.parse=function(e,t){var n,o=/"\$jsan"/.test(e);return n=1===arguments.length?JSON.parse(e):JSON.parse(e,t),o&&(n=r.retrocycle(n)),n}},function(e,t,n){var r=n(3);t.getRegexFlags=function(e){var t="";return e.ignoreCase&&(t+="i"),e.global&&(t+="g"),e.multiline&&(t+="m"),t},t.stringifyFunction=function(e,t){if("function"==typeof t)return t(e);var n=e.toString(),r=n.match(/^[^{]*{|^[^=]*=>/),o=r?r[0]:"<function> ",i="}"===n[n.length-1]?"}":"";return o.replace(/\r\n|\n/g," ").replace(/\s+/g," ")+" /* ... */ "+i},t.restore=function(e,t){var n=e[0],o=e.slice(1);switch(n){case"$":return r(t,e);case"r":var i=o.indexOf(","),u=o.slice(0,i),a=o.slice(i+1);return RegExp(a,u);case"d":return new Date((+o));case"f":var s=function(){throw new Error("can't run jsan parsed function")};return s.toString=function(){return o},s;case"u":return;case"e":var f=new Error(o);return f.stack="Stack is unavailable for jsan parsed errors",f;default:return console.warn("unknown type",e),e}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e){var t=arguments.length<=1||void 0===arguments[1]?"":arguments[1],n=[];return Object.keys(e).forEach(function(r){var i=e[r];"function"==typeof i?n.push({name:t+(r||i.name||"anonymous"),func:i,args:(0,l.default)(i)}):"object"===("undefined"==typeof i?"undefined":c(i))&&(n=n.concat(o(i,t+r+".")))}),n}function i(e){if("object"===("undefined"==typeof e?"undefined":c(e))){var t=void 0,n=void 0;return e.__proto__&&(n=e.__proto__.__proto__),n||(n=e),Object.getOwnPropertyNames(n).forEach(function(e){var r=n[e];"function"==typeof r&&"constructor"!==e&&(t||(t=[]),t.push({name:e||r.name||"anonymous",args:(0,l.default)(r)}))}),t}}function u(e){return Array.isArray(e)?e:o(e)}function a(e,t){var n=e.map(p);if(!t)return n;var r=p(t);if(Array.isArray(r))return n.concat.apply(n,r);throw new Error("rest must be an array")}function s(e,t){if("string"==typeof e)return new Function("return "+e)();var n=t[e.selected].func,r=a(e.args,e.rest);return n.apply(void 0,r)}function f(e,t){if("string"==typeof e)return new Function("return "+e).call(t);var n=a(e.args,e.rest);return new Function("args","return this."+e.name+"(args)").apply(t,n)}t.__esModule=!0;var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};t.getMethods=i,t.getActionsArray=u,t.evalAction=s,t.evalMethod=f;var d=n(8),l=r(d),p=function(e){return new Function("return "+e)()}}])});

lib/monitorActions.js

 'use strict';
 
 exports.__esModule = true;
-exports.dispatchMonitorAction = exports.isMonitorAction = undefined;
+exports.isMonitorAction = undefined;
+exports.dispatchMonitorAction = dispatchMonitorAction;
 
+var _mobx = require('mobx');
+
+var _mobx2 = _interopRequireDefault(_mobx);
+
 var _jsan = require('jsan');
 
+var _remotedevUtils = require('remotedev-utils');
+
 var _utils = require('./utils');
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var isMonitorAction = exports.isMonitorAction = function isMonitorAction(store) {
@@ -14,14 +23,80 @@ return store.__isRemotedevAction === true;
 
-/* eslint-disable no-param-reassign */
-var dispatchMonitorAction = exports.dispatchMonitorAction = function dispatchMonitorAction(store) {
+function dispatch(store, _ref) {
+  var type = _ref.type;
+  var args = _ref.arguments;
+
+  if (typeof store[type] === 'function') {
+    (0, _utils.silently)(function () {
+      store[type].apply(store, args);
+    }, store);
+  }
+}
+
+function dispatchRemotely(devTools, store, payload) {
+  try {
+    (0, _remotedevUtils.evalMethod)(payload, store);
+  } catch (e) {
+    devTools.error(e.message);
+  }
+}
+
+function toggleAction(store, id, strState) {
+  var liftedState = (0, _jsan.parse)(strState);
+  var idx = liftedState.skippedActionIds.indexOf(id);
+  var skipped = idx !== -1;
+  var start = liftedState.stagedActionIds.indexOf(id);
+  if (start === -1) return liftedState;
+
+  (0, _utils.setValue)(store, liftedState.computedStates[start - 1].state);
+  for (var i = skipped ? start : start + 1; i < liftedState.stagedActionIds.length; i++) {
+    if (i !== start && liftedState.skippedActionIds.indexOf(liftedState.stagedActionIds[i]) !== -1) continue; // it's already skipped
+    dispatch(store, liftedState.actionsById[liftedState.stagedActionIds[i]].action);
+    liftedState.computedStates[i].state = _mobx2.default.toJS(store);
+  }
+
+  if (skipped) {
+    liftedState.skippedActionIds.splice(idx, 1);
+  } else {
+    liftedState.skippedActionIds.push(id);
+  }
+  return liftedState;
+}
+
+function dispatchMonitorAction(store, devTools, onlyActions) {
+  var initValue = _mobx2.default.toJS(store);
+  devTools.init(initValue, (0, _remotedevUtils.getMethods)(store));
+
   return function (message) {
     if (message.type === 'DISPATCH') {
-      if (message.payload.type === 'JUMP_TO_STATE') {
-        store.__isRemotedevAction = true;
-        (0, _utils.setValue)(store, (0, _jsan.parse)(message.state));
-        store.__isRemotedevAction = false;
+      switch (message.payload.type) {
+        case 'RESET':
+          devTools.init((0, _utils.setValue)(store, initValue));
+          return;
+        case 'COMMIT':
+          devTools.init(_mobx2.default.toJS(store));
+          return;
+        case 'ROLLBACK':
+          devTools.init((0, _utils.setValue)(store, (0, _jsan.parse)(message.state)));
+          return;
+        case 'JUMP_TO_STATE':
+          (0, _utils.setValue)(store, (0, _jsan.parse)(message.state));
+          return;
+        case 'TOGGLE_ACTION':
+          if (!onlyActions) {
+            console.warn('`onlyActions` parameter should be `true` to skip actions: ' + 'https://github.com/zalmoxisus/mobx-remotedev#remotedevstore-config');
+            return;
+          }
+          devTools.send(null, toggleAction(store, message.payload.id, message.state));
+          return;
       }
+    } else if (message.type === 'ACTION') {
+      dispatchRemotely(devTools, store, message.payload);
+    } else if (message.type === 'IMPORT') {
+      var liftedState = (0, _jsan.parse)(message.state);
+      var computedStates = liftedState.computedStates;
+
+      (0, _utils.setValue)(store, computedStates[computedStates.length - 1].state);
+      devTools.send(null, liftedState);
     }
   };
-};
-/* eslint-enable */
+}

lib/spy.js

 'use strict';
 
 exports.__esModule = true;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 exports.default = spy;
@@ -12,2 +15,4 @@
 
+var _filters = require('./filters');
+
 var _monitorActions = require('./monitorActions');
@@ -19,13 +24,20 @@
 var stores = {};
+var onlyActions = {};
+var filters = {};
 var monitors = {};
-var scheduled = {};
+var scheduled = [];
 
+function configure(name, config) {
+  if (!config) return;
+  onlyActions[name] = config.onlyActions;
+  filters[name] = config.filters;
+}
+
 function init(store, config) {
   var name = _mobx2.default.extras.getDebugName(store);
+  configure(name, config);
   stores[name] = store;
-  scheduled[name] = [];
 
   var devTools = window.devToolsExtension.connect(config);
-  devTools.init(_mobx2.default.toJS(store));
-  devTools.subscribe((0, _monitorActions.dispatchMonitorAction)(store));
+  devTools.subscribe((0, _monitorActions.dispatchMonitorAction)(store, devTools, onlyActions[name]));
   monitors[name] = devTools;
@@ -35,12 +47,15 @@ }
 function schedule(name, action) {
-  scheduled[name].push(function () {
-    monitors[name].send(action, _mobx2.default.toJS(stores[name]));
-  });
+  var toSend = void 0;
+  if (action && !(0, _filters.isFiltered)(action, filters[name])) {
+    toSend = function toSend() {
+      monitors[name].send(action, _mobx2.default.toJS(stores[name]));
+    };
+  }
+  scheduled.push(toSend);
 }
 
-function send(name) {
-  var toSend = scheduled[name];
-  if (!toSend) return;
-  while (toSend.length) {
-    toSend.shift()();
+function send() {
+  if (scheduled.length) {
+    var toSend = scheduled.pop();
+    if (toSend) toSend();
   }
@@ -57,16 +72,29 @@ }
     if (change.spyReportStart) {
-      if (change.type === 'reaction') return; // TODO: show reactions
       objName = (0, _utils.getName)(change.object || change.target);
-      if (!scheduled[objName] || stores[objName].__isRemotedevAction) return;
+      if (change.type === 'reaction') {
+        // TODO: show reactions
+        schedule(objName);
+        return;
+      }
+      if (!stores[objName] || stores[objName].__isRemotedevAction) {
+        schedule(objName);
+        return;
+      }
       if (change.type === 'action') {
         var action = (0, _utils.createAction)(change.name);
         if (change.arguments && change.arguments.length) action.arguments = change.arguments;
-        schedule(objName, action);
+        if (!onlyActions[objName]) {
+          schedule(objName, _extends({}, action, { type: '┏ ' + action.type }));
+          send();
+          schedule(objName, _extends({}, action, { type: '┗ ' + action.type }));
+        } else {
+          schedule(objName, action);
+        }
       } else if (change.type && _mobx2.default.isObservable(change.object)) {
-        schedule(objName, (0, _utils.createAction)(change.type, change));
+        schedule(objName, !onlyActions[objName] && (0, _utils.createAction)(change.type, change));
       }
     } else if (change.spyReportEnd) {
-      send(objName);
+      send();
     }
   });
 }

lib/utils.js

 'use strict';
 
 exports.__esModule = true;
-exports.setValue = undefined;
+exports.setValue = exports.silently = undefined;
 exports.createAction = createAction;
@@ -20,3 +20,2 @@ exports.getName = getName;
   var removedCount = change.removedCount;
-  var object = change.object;
 
@@ -46,3 +45,3 @@ return {
   }
-  action.type = '@@' + name;
+  action.type = '┃ ' + name;
 
@@ -60,10 +59,21 @@ return action;
 
-var setValue = exports.setValue = _mobx2.default.action(function setValue(store, state) {
-  if (store.importState) {
-    store.importState(state);
-  } else {
-    Object.keys(state).forEach(function (key) {
-      store[key] = state[key]; // eslint-disable-line no-param-reassign
-    });
-  }
-});
+/* eslint-disable no-param-reassign */
+var silently = exports.silently = function silently(fn, store) {
+  store.__isRemotedevAction = true;
+  fn();
+  delete store.__isRemotedevAction;
+};
+
+var setValue = exports.setValue = _mobx2.default.action('@@remotedev', function (store, state) {
+  silently(function () {
+    if (store.importState) {
+      store.importState(state);
+    } else {
+      Object.keys(state).forEach(function (key) {
+        store[key] = state[key];
+      });
+    }
+  }, store);
+  return state;
+});
+/* eslint-enable */

package.json

 {
   "name": "mobx-remotedev",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Remote debugging for mobx.",
@@ -73,4 +73,5 @@ "main": "lib/index.js",
   "dependencies": {
-    "jsan": "^3.1.2"
+    "jsan": "^3.1.3",
+    "remotedev-utils": "^0.0.3"
   }
 }

README.md

@@ -56,3 +56,7 @@ Remote debugging for MobX with [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension) (and [remotedev](https://github.com/zalmoxisus/remotedev) coming soon)
       - **name** *string* - the instance name to be showed on the monitor page. Default value is document.title.
+      - **onlyActions** *boolean* - set it to `true` to have a clear log only with actions. Usually you want to use it in strict mode. And don't forget about [async actions](https://github.com/zalmoxisus/mobx-remotedev#how-to-handle-async-actions).
       - **shouldStringify** *boolean* - set it to `true` when having circular references or special types like ImmutableJS. By default is `false`.
+      - **filters** *object* - map of arrays named `whitelist` or `blacklist` to filter action types. You can also set it globally in the extension settings.
+        - **blacklist** *array of (regex as string)* - actions to be hidden in DevTools.
+        - **whitelist** *array of (regex as string)* - all other actions will be hidden in DevTools (the `blacklist` parameter will be ignored).
 
@@ -76,2 +80,20 @@ Also see [the extension API](https://github.com/zalmoxisus/redux-devtools-extension#documentation) and [my presentation at React Europe](https://youtu.be/YU8jQ2HtqH4).
 
+## FAQ
+
+### How to monitor (show changes) for inner items
+
+Use `remotedev` function for them as well. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/simple-todo/index.js#L22) 
+
+### How to set data correctly when time traveling
+
+By default it will try to set the properties of the class or observable object, but, if you have an `importState` method, it will be used. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/todomvc/src/stores/TodoStore.js#L56)
+
+### How to disable computations when time traveling
+
+Check `__isRemotedevAction` of your class or observable object, which will be set to true when it's a monitor action. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/todomvc/src/stores/TodoStore.js#L22)  
+
+### How to handle async actions
+
+Use `runInAction` and don't forget about the second / third parameter which will be `this` if you're using arrow functions. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/counter/stores/appState.js#L14)  
+
 ## LICENSE
@@ -78,0 +100,0 @@

src/monitorActions.js

@@ -1,16 +0,85 @@
-import { parse } from 'jsan';
-import { setValue } from './utils';
+import mobx from 'mobx';
+import { stringify, parse } from 'jsan';
+import { getMethods, evalMethod } from 'remotedev-utils';
+import { silently, setValue } from './utils';
 
 export const isMonitorAction = (store) => store.__isRemotedevAction === true;
 
-/* eslint-disable no-param-reassign */
-export const dispatchMonitorAction = (store) => (message) => {
-  if (message.type === 'DISPATCH') {
-    if (message.payload.type === 'JUMP_TO_STATE') {
-      store.__isRemotedevAction = true;
-      setValue(store, parse(message.state));
-      store.__isRemotedevAction = false;
+function dispatch(store, { type, arguments: args }) {
+  if (typeof store[type] === 'function') {
+    silently(() => { store[type](...args); }, store);
+  }
+}
+
+function dispatchRemotely(devTools, store, payload) {
+  try {
+    evalMethod(payload, store);
+  } catch (e) {
+    devTools.error(e.message);
+  }
+}
+
+function toggleAction(store, id, strState) {
+  const liftedState = parse(strState);
+  const idx = liftedState.skippedActionIds.indexOf(id);
+  const skipped = idx !== -1;
+  const start = liftedState.stagedActionIds.indexOf(id);
+  if (start === -1) return liftedState;
+
+  setValue(store, liftedState.computedStates[start - 1].state);
+  for (let i = (skipped ? start : start + 1); i < liftedState.stagedActionIds.length; i++) {
+    if (
+      i !== start && liftedState.skippedActionIds.indexOf(liftedState.stagedActionIds[i]) !== -1
+    ) continue; // it's already skipped
+    dispatch(store, liftedState.actionsById[liftedState.stagedActionIds[i]].action);
+    liftedState.computedStates[i].state = mobx.toJS(store);
+  }
+
+  if (skipped) {
+    liftedState.skippedActionIds.splice(idx, 1);
+  } else {
+    liftedState.skippedActionIds.push(id);
+  }
+  return liftedState;
+}
+
+export function dispatchMonitorAction(store, devTools, onlyActions) {
+  const initValue = mobx.toJS(store);
+  devTools.init(initValue, getMethods(store));
+
+  return (message) => {
+    if (message.type === 'DISPATCH') {
+      switch (message.payload.type) {
+        case 'RESET':
+          devTools.init(setValue(store, initValue));
+          return;
+        case 'COMMIT':
+          devTools.init(mobx.toJS(store));
+          return;
+        case 'ROLLBACK':
+          devTools.init(setValue(store, parse(message.state)));
+          return;
+        case 'JUMP_TO_STATE':
+          setValue(store, parse(message.state));
+          return;
+        case 'TOGGLE_ACTION':
+          if (!onlyActions) {
+            console.warn(
+              '`onlyActions` parameter should be `true` to skip actions: ' +
+              'https://github.com/zalmoxisus/mobx-remotedev#remotedevstore-config'
+            );
+            return;
+          }
+          devTools.send(null, toggleAction(store, message.payload.id, message.state));
+          return;
+      }
+    } else if (message.type === 'ACTION') {
+      dispatchRemotely(devTools, store, message.payload);
+    } else if (message.type === 'IMPORT') {
+      const liftedState = parse(message.state);
+      const { computedStates } = liftedState;
+      setValue(store, computedStates[computedStates.length - 1].state);
+      devTools.send(null, liftedState);
     }
-  }
-};
-/* eslint-enable */
+  };
+}

src/spy.js

 import mobx from 'mobx';
 import { createAction, getName } from './utils';
+import { isFiltered } from './filters';
 import { dispatchMonitorAction } from './monitorActions';
@@ -7,13 +8,20 @@
 const stores = {};
+const onlyActions = {};
+const filters = {};
 const monitors = {};
-const scheduled = {};
+const scheduled = [];
 
+function configure(name, config) {
+  if (!config) return;
+  onlyActions[name] = config.onlyActions;
+  filters[name] = config.filters;
+}
+
 function init(store, config) {
   const name = mobx.extras.getDebugName(store);
+  configure(name, config);
   stores[name] = store;
-  scheduled[name] = [];
 
   const devTools = window.devToolsExtension.connect(config);
-  devTools.init(mobx.toJS(store));
-  devTools.subscribe(dispatchMonitorAction(store));
+  devTools.subscribe(dispatchMonitorAction(store, devTools, onlyActions[name]));
   monitors[name] = devTools;
@@ -23,12 +31,13 @@ }
 function schedule(name, action) {
-  scheduled[name].push(() => {
-    monitors[name].send(action, mobx.toJS(stores[name]));
-  });
+  let toSend;
+  if (action && !isFiltered(action, filters[name])) {
+    toSend = () => { monitors[name].send(action, mobx.toJS(stores[name])); };
+  }
+  scheduled.push(toSend);
 }
 
-function send(name) {
-  const toSend = scheduled[name];
-  if (!toSend) return;
-  while (toSend.length) {
-    toSend.shift()();
+function send() {
+  if (scheduled.length) {
+    const toSend = scheduled.pop();
+    if (toSend) toSend();
   }
@@ -45,16 +54,29 @@ }
     if (change.spyReportStart) {
-      if (change.type === 'reaction') return; // TODO: show reactions
       objName = getName(change.object || change.target);
-      if (!scheduled[objName] || stores[objName].__isRemotedevAction) return;
+      if (change.type === 'reaction') {
+        // TODO: show reactions
+        schedule(objName);
+        return;
+      }
+      if (!stores[objName] || stores[objName].__isRemotedevAction) {
+        schedule(objName);
+        return;
+      }
       if (change.type === 'action') {
         const action = createAction(change.name);
         if (change.arguments && change.arguments.length) action.arguments = change.arguments;
-        schedule(objName, action);
+        if (!onlyActions[objName]) {
+          schedule(objName, { ...action, type: `┏ ${action.type}` });
+          send();
+          schedule(objName, { ...action, type: `┗ ${action.type}` });
+        } else {
+          schedule(objName, action);
+        }
       } else if (change.type && mobx.isObservable(change.object)) {
-        schedule(objName, createAction(change.type, change));
+        schedule(objName, !onlyActions[objName] && createAction(change.type, change));
       }
     } else if (change.spyReportEnd) {
-      send(objName);
+      send();
     }
   });
 }

src/utils.js

 import mobx from 'mobx';
 
 const getPayload = (change) => {
-  const { added, addedCount, index, removed, removedCount, object } = change;
+  const { added, addedCount, index, removed, removedCount } = change;
   return {
@@ -25,3 +25,3 @@ index,
   }
-  action.type = `@@${name}`;
+  action.type = `┃ ${name}`;
 
@@ -39,10 +39,21 @@ return action;
 
-export const setValue = mobx.action(function setValue(store, state) {
-  if (store.importState) {
-    store.importState(state);
-  } else {
-    Object.keys(state).forEach((key) => {
-      store[key] = state[key]; // eslint-disable-line no-param-reassign
-    });
-  }
+/* eslint-disable no-param-reassign */
+export const silently = (fn, store) => {
+  store.__isRemotedevAction = true;
+  fn();
+  delete store.__isRemotedevAction;
+};
+
+export const setValue = mobx.action('@@remotedev', (store, state) => {
+  silently(() => {
+    if (store.importState) {
+      store.importState(state);
+    } else {
+      Object.keys(state).forEach((key) => {
+        store[key] = state[key];
+      });
+    }
+  }, store);
+  return state;
 });
+/* eslint-enable */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63458

increased by51.67%

Number of package files

17

increased by13.33%

Lines of code

1204

increased by55.35%

Number of lines in readme file

104

increased by26.83%

Worsened metrics

Dependency count

3

increased by50%

Number of medium supply chain risk alerts

8

increased byInfinity%

Dependency changes

• + Addedremotedev-utils@^0.0.3

• + Addedget-params@0.1.2(transitive)

• + Addedremotedev-utils@0.0.3(transitive)

• Updatedjsan@^3.1.3