redux-devtools - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/devTools.js

@@ -15,3 +15,4 @@ 'use strict';
   TOGGLE_ACTION: 'TOGGLE_ACTION',
-  JUMP_TO_STATE: 'JUMP_TO_STATE'
+  JUMP_TO_STATE: 'JUMP_TO_STATE',
+  SET_MONITOR_STATE: 'SET_MONITOR_STATE'
 };
@@ -90,3 +91,6 @@
     skippedActions: {},
-    currentStateIndex: 0
+    currentStateIndex: 0,
+    monitorState: {
+      isVisible: true
+    }
   };
@@ -104,2 +108,3 @@
     var currentStateIndex = liftedState.currentStateIndex;
+    var monitorState = liftedState.monitorState;
 
@@ -138,9 +143,10 @@ switch (liftedAction.type) {
       case ActionTypes.PERFORM_ACTION:
-        var action = liftedAction.action;
-
         if (currentStateIndex === stagedActions.length - 1) {
           currentStateIndex++;
         }
-        stagedActions = [].concat(stagedActions, [action]);
+        stagedActions = [].concat(stagedActions, [liftedAction.action]);
         break;
+      case ActionTypes.SET_MONITOR_STATE:
+        monitorState = liftedAction.monitorState;
+        break;
       default:
@@ -157,3 +163,4 @@ break;
       computedStates: computedStates,
-      currentStateIndex: currentStateIndex
+      currentStateIndex: currentStateIndex,
+      monitorState: monitorState
     };
@@ -185,3 +192,3 @@ };
  */
-function unliftStore(liftedStore) {
+function unliftStore(liftedStore, reducer) {
   return _extends({}, liftedStore, {
@@ -195,2 +202,8 @@ devToolsStore: liftedStore,
       return unliftState(liftedStore.getState());
+    },
+    getReducer: function getReducer() {
+      return reducer;
+    },
+    replaceReducer: function replaceReducer(nextReducer) {
+      liftedStore.replaceReducer(liftReducer(nextReducer));
     }
@@ -221,2 +234,5 @@ });
     return { type: ActionTypes.JUMP_TO_STATE, index: index };
+  },
+  setMonitorState: function setMonitorState(monitorState) {
+    return { type: ActionTypes.SET_MONITOR_STATE, monitorState: monitorState };
   }
@@ -235,3 +251,3 @@ };
       var liftedStore = next(liftedReducer);
-      var store = unliftStore(liftedStore);
+      var store = unliftStore(liftedStore, reducer);
       return store;
@@ -238,0 +254,0 @@ };

lib/react/DebugPanel.js

@@ -38,3 +38,2 @@ 'use strict';
     color: 'white',
-    padding: '1em',
     left: left ? 0 : undefined,
@@ -41,0 +40,0 @@ right: right ? 0 : undefined,

lib/react/LogMonitor.js

@@ -5,2 +5,4 @@ 'use strict';
 
+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; };
+
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -23,7 +25,12 @@
     _classCallCheck(this, LogMonitor);
+
+    window.addEventListener('keydown', this.handleKeyPress.bind(this));
   }
 
   LogMonitor.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if (this.props.stagedActions.length < nextProps.stagedActions.length) {
-      var scrollableNode = _react.findDOMNode(this).parentElement;
+    var node = _react.findDOMNode(this);
+    if (!node) {
+      this.scrollDown = true;
+    } else if (this.props.stagedActions.length < nextProps.stagedActions.length) {
+      var scrollableNode = node.parentElement;
       var scrollTop = scrollableNode.scrollTop;
@@ -39,5 +46,10 @@ var offsetHeight = scrollableNode.offsetHeight;
 
-  LogMonitor.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.stagedActions.length < this.props.stagedActions.length && this.scrollDown) {
-      var scrollableNode = _react.findDOMNode(this).parentElement;
+  LogMonitor.prototype.componentDidUpdate = function componentDidUpdate() {
+    var node = _react.findDOMNode(this);
+    if (!node) {
+      return;
+    }
+
+    if (this.scrollDown) {
+      var scrollableNode = node.parentElement;
       var offsetHeight = scrollableNode.offsetHeight;
@@ -71,5 +83,18 @@ var scrollHeight = scrollableNode.scrollHeight;
 
+  LogMonitor.prototype.handleKeyPress = function handleKeyPress(event) {
+    var monitorState = this.props.monitorState;
+
+    if (event.ctrlKey && event.keyCode === 72) {
+      // Ctrl+H
+      event.preventDefault();
+      this.props.setMonitorState(_extends({}, monitorState, {
+        isVisible: !monitorState.isVisible
+      }));
+    }
+  };
+
   LogMonitor.prototype.render = function render() {
     var elements = [];
     var _props = this.props;
+    var monitorState = _props.monitorState;
     var skippedActions = _props.skippedActions;
@@ -80,2 +105,6 @@ var stagedActions = _props.stagedActions;
 
+    if (!monitorState.isVisible) {
+      return null;
+    }
+
     for (var i = 0; i < stagedActions.length; i++) {
@@ -101,3 +130,4 @@ var action = stagedActions[i];
           fontFamily: 'monospace',
-          position: 'relative'
+          position: 'relative',
+          padding: '1rem'
         } },
@@ -108,6 +138,25 @@ _react2['default'].createElement(
         _react2['default'].createElement(
-          'a',
-          { onClick: this.handleReset.bind(this),
-            style: { textDecoration: 'underline', cursor: 'hand' } },
-          'Reset'
+          'div',
+          { style: {
+              paddingBottom: '.5rem'
+            } },
+          _react2['default'].createElement(
+            'small',
+            null,
+            'Press Ctrl+H to hide.'
+          )
+        ),
+        _react2['default'].createElement(
+          'div',
+          null,
+          _react2['default'].createElement(
+            'a',
+            { onClick: this.handleReset.bind(this),
+              style: { textDecoration: 'underline', cursor: 'hand' } },
+            _react2['default'].createElement(
+              'small',
+              null,
+              'Reset'
+            )
+          )
         )
@@ -162,2 +211,3 @@ ),
       currentStateIndex: _react.PropTypes.number.isRequired,
+      monitorState: _react.PropTypes.object.isRequired,
       stagedActions: _react.PropTypes.array.isRequired,
@@ -171,2 +221,3 @@ skippedActions: _react.PropTypes.object.isRequired,
       jumpToState: _react.PropTypes.func.isRequired,
+      setMonitorState: _react.PropTypes.func.isRequired,
       select: _react.PropTypes.func.isRequired
@@ -180,3 +231,4 @@ },
         return state;
-      }
+      },
+      monitorState: { isVisible: true }
     },
@@ -183,0 +235,0 @@ enumerable: true

package.json

 {
   "name": "redux-devtools",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Redux DevTools with hot reloading and time travel",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -14,2 +14,4 @@ Redux DevTools
 
+For example, in Webpack, you can use `ProvidePlugin` to turn magic constants like `__DEV__` into `true` or `false` depending on the environment, and import and render `redux-devtools` conditionally behind `if (__DEV__)`. Then, if you have an Uglify step before production, Uglify will eliminate dead `if (false)` branches with `redux-devtools` imports. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/compare/66bf63fb0f23a3c264a5d37c3acb4c047bf0c0c9...c6515236a1def8a3d2bfeb8f6cd6f0ccdb2f9e1b) of adding React DevTools to a project handling the production case correctly.
+
 ### Running Examples
@@ -16,0 +18,0 @@

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

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

35500

increased by8.21%

Lines of code

754

increased by8.96%

Number of lines in readme file

55

increased by3.77%

No dependency changes