remote-redux-devtools - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

lib/constants.js

 'use strict';
 
 exports.__esModule = true;
-var socketOptions = exports.socketOptions = {
+var defaultSocketOptions = exports.defaultSocketOptions = {
   protocol: 'http',
@@ -6,0 +6,0 @@ hostname: 'remotedev.io',

lib/devTools.js

@@ -27,2 +27,3 @@ 'use strict';
 var instanceName = void 0;
+var socketOptions = void 0;
 var socket = void 0;
@@ -35,2 +36,5 @@ var channel = void 0;
 var isMonitored = void 0;
+var started = void 0;
+var startOn = void 0;
+var stopOn = void 0;
 
@@ -94,14 +98,30 @@ function isFiltered(action) {
 
+function str2array(str) {
+  return typeof str === 'string' ? [str] : str && str.length;
+}
+
 function init(options) {
-  if (channel) channel.unwatch();
-  if (socket) socket.disconnect();
-  if (options && options.port && !options.hostname) {
-    options.hostname = 'localhost';
+  instanceName = options.name;
+  if (options.filters) {
+    filters = options.filters;
   }
-  socket = _socketclusterClient2.default.connect(options && options.port ? options : _constants.socketOptions);
+  if (options.port) {
+    socketOptions = {
+      port: options.port,
+      host: options.hostname || 'localhost'
+    };
+  } else socketOptions = _constants.defaultSocketOptions;
 
+  startOn = str2array(options.startOn);
+  stopOn = str2array(options.stopOn);
+}
+
+function start() {
+  if (started) return;
+  started = true;
+
+  socket = _socketclusterClient2.default.connect(socketOptions);
   socket.on('error', function (err) {
     console.warn(err);
   });
-
   socket.emit('login', 'master', function (err, channelName) {
@@ -115,9 +135,18 @@ if (err) {
   });
-  if (options && options.filters) {
-    filters = options.filters;
-  }
-  if (options) instanceName = options.name;
   relay('STATE', store.liftedStore.getState());
 }
 
+function stop() {
+  started = false;
+  isMonitored = false;
+  if (channel) {
+    channel.unsubscribe();
+    channel.unwatch();
+  }
+  if (socket) {
+    socket.off();
+    socket.disconnect();
+  }
+}
+
 function monitorReducer() {
@@ -127,2 +156,5 @@ var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
+  if (action.action) {
+    if (startOn && !started && startOn.indexOf(action.action.type) !== -1) start();else if (stopOn && started && stopOn.indexOf(action.action.type) !== -1) stop();
+  }
   lastAction = action.type;
@@ -147,8 +179,17 @@ return state;
 
-function devTools(options) {
-  var maxAge = options && options.maxAge || 30;
+function devTools() {
+  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  init(options);
+  var realtime = typeof options.realtime === 'undefined' ? process.env.NODE_ENV === 'development' : options.realtime;
+  if (!realtime && !startOn) return function (f) {
+    return f;
+  };
+
+  var maxAge = options.maxAge || 30;
   return function (next) {
     return function (reducer, initialState) {
       store = (0, _configureStore2.default)(next, monitorReducer, { maxAge: maxAge })(reducer, initialState);
-      init(options);
+
+      if (realtime) start();
       store.subscribe(function () {
@@ -155,0 +196,0 @@ if (isMonitored) handleChange(store.getState(), store.liftedStore.getState(), maxAge);

package.json

 {
   "name": "remote-redux-devtools",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Relay Redux actions to remote Redux DevTools.",
@@ -57,4 +57,4 @@ "main": "lib/index.js",
     "redux-devtools-instrument": "^1.0.0",
-    "socketcluster-client": "^4.3.7"
+    "socketcluster-client": "^4.3.14"
   }
 }

README.md

@@ -45,8 +45,9 @@ Remote Redux DevTools
 
-It also included in following projects:
+It is also included in the following projects, which you can use:
 
-* [atom-redux-devtools](https://github.com/zalmoxisus/atom-redux-devtools) - Used in Atom editor.
-* [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) - Also included `remotedev-app`.
+* [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) - Click "Remote" button (or press [`Cmd+Ctrl+Arrow up`](https://github.com/zalmoxisus/redux-devtools-extension#keyboard-shortcuts)) to open remote monitoring.
 * [remotedev-extension](https://github.com/jhen0409/remotedev-extension) - Used in Electron/Browser DevTools.
 * [remote-redux-devtools-on-debugger](https://github.com/jhen0409/remote-redux-devtools-on-debugger) - Used in React Native debugger as a dock monitor.
+* [atom-redux-devtools](https://github.com/zalmoxisus/atom-redux-devtools) - Used in Atom editor.
+* [redux-dispatch-cli](https://github.com/jhen0409/redux-dispatch-cli) - A CLI tool for Redux remote dispatch.
 
@@ -62,9 +63,11 @@ ### Communicate via local server
 -------------         | -------------
-`name`                | Instance name to be showed in the app.
-`hostname`            | If `port` is specified, default value is `localhost`.
-`port`                | Local host's port.
-`filters`             | Map of arrays named `whitelist` or `blacklist` to filter action types.
-`maxAge`              | Number of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is `30`.
+`name`                | *String* representing the instance name to be shown on the remote monitor.
+`realtime`            | *Boolean* specifies whether to allow remote monitoring. By default is `process.env.NODE_ENV === 'development'`. 
+`hostname`            | *String* used for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server). If `port` is specified, default value is `localhost`.
+`port`                | *Number* used for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server). Local host's port.
+`filters`             | *Map of arrays* named `whitelist` or `blacklist` to filter action types.
+`maxAge`              | *Number* of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is `30`.
+`startOn`             | *String* or *Array of strings* indicating an action or a list of actions, which should start remote monitoring (when `realtime` is `false`). 
+`stopOn`              | *String* or *Array of strings* indicating an action or a list of actions, which should stop remote monitoring. 
 
-
 All props are optional. You have to provide at least `port` property to use `localhost` instead of `remotedev.io` server.
@@ -79,3 +82,7 @@
     initialState,
-    devTools({ name: 'Android app', hostname: 'localhost', port: 8000, maxAge: 30, filters: { blacklist: ['EFFECT_RESOLVED'] }})
+    devTools({
+      name: 'Android app', realtime: true,
+      hostname: 'localhost', port: 8000,
+      maxAge: 30, filters: { blacklist: ['EFFECT_RESOLVED'] }
+      })
   );
@@ -85,14 +92,11 @@ }
 
+### Demo
+- [Toggle monitoring](http://zalmoxisus.github.io/monitoring/)
+
 ### Examples
 - [Web](https://github.com/zalmoxisus/remote-redux-devtools/tree/master/examples)
-- [React Native](https://github.com/zalmoxisus/react-native-counter-ios-android).
+- [React Native](https://github.com/chentsulin/react-native-counter-ios-android)
 
-### Limitations
-
-- Use it only for development, **NOT in production!**
-- The app and the monitor should be under the same external IP address.
-- For web apps it's easier and way faster to use [Chrome extension](https://github.com/zalmoxisus/redux-devtools-extension) instead. The remote monitoring is meant to be used for React Native, hybrid, desktop and server side apps. 
-
 ### License
 
 MIT

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13968

increased by13.06%

Lines of code

181

increased by23.97%

Number of lines in readme file

99

increased by4.21%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedsocketcluster-client@^4.3.14