Bump deps and improve performance

gaearon · Oct 16, 2015 · 2fdfdd9 · 2fdfdd9
1 parent 9da6797
commit 2fdfdd9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "redux-devtools-log-monitor",
-  "version": "1.0.0-alpha-8",
+  "version": "1.0.0-beta-1",
   "description": "The default tree view monitor for Redux DevTools",
   "main": "lib/index.js",
   "scripts": {
@@ -9,7 +9,6 @@
     "lint": "eslint src test",
     "test": "NODE_ENV=test mocha --compilers js:babel/register --recursive",
     "test:watch": "NODE_ENV=test mocha --compilers js:babel/register --recursive --watch",
-    "test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
     "prepublish": "npm run lint && npm run test && npm run clean && npm run build"
   },
   "repository": {
@@ -40,22 +39,19 @@
     "eslint-config-airbnb": "0.0.6",
     "eslint-plugin-react": "^2.3.0",
     "expect": "^1.6.0",
-    "isparta": "^3.0.3",
-    "jsdom": "^6.5.1",
     "mocha": "^2.2.5",
     "mocha-jsdom": "^1.0.0",
-    "react": "^0.14.0-rc1",
-    "react-addons-test-utils": "^0.14.0-rc1",
-    "react-dom": "^0.14.0-rc1",
     "rimraf": "^2.3.4",
     "webpack": "^1.11.0"
   },
   "peerDependencies": {
-    "redux-devtools": "^3.0.0-alpha-8",
+    "react": "^0.14.0",
+    "redux-devtools": "^3.0.0-beta-1",
     "redux": "^3.0.0"
   },
   "dependencies": {
-    "react-json-tree": "^0.1.9",
+    "react-json-tree": "^0.2.0",
+    "react-pure-render": "^1.0.2",
     "redux-devtools-themes": "^1.0.0"
   }
 }
diff --git a/src/LogMonitor.js b/src/LogMonitor.js
@@ -1,6 +1,7 @@
 import React, { PropTypes, Component } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 import LogMonitorButton from './LogMonitorButton';
+import shouldPureComponentUpdate from 'react-pure-render/function';
 import * as themes from 'redux-devtools-themes';
 import { ActionCreators } from 'redux-devtools';
 import { updateScrollTop } from './actions';
@@ -63,6 +64,17 @@ export default class LogMonitor extends Component {
     preserveScrollTop: true
   };
 
+  shouldComponentUpdate = shouldPureComponentUpdate;
+
+  constructor(props) {
+    super(props);
+    this.handleToggleAction = this.handleToggleAction.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+    this.handleRollback = this.handleRollback.bind(this);
+    this.handleSweep = this.handleSweep.bind(this);
+    this.handleCommit = this.handleCommit.bind(this);
+  }
+
   componentDidMount() {
     const node = this.refs.container;
     if (!node) {
@@ -165,23 +177,35 @@ export default class LogMonitor extends Component {
                          previousState={previousState}
                          collapsed={skippedActions[i]}
                          error={error}
-                         onActionClick={::this.handleToggleAction} />
+                         onActionClick={this.handleToggleAction} />
       );
     }
 
     return (
       <div style={{...styles.container, backgroundColor: theme.base00}}>
         <div style={{...styles.buttonBar, borderColor: theme.base02}}>
-          <LogMonitorButton theme={theme} onClick={::this.handleReset} enabled>
+          <LogMonitorButton
+            theme={theme}
+            onClick={this.handleReset}
+            enabled>
             Reset
           </LogMonitorButton>
-          <LogMonitorButton theme={theme} onClick={::this.handleRollback} enabled={computedStates.length > 1}>
+          <LogMonitorButton
+            theme={theme}
+            onClick={this.handleRollback}
+            enabled={computedStates.length > 1}>
             Revert
           </LogMonitorButton>
-          <LogMonitorButton theme={theme} onClick={::this.handleSweep} enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>
+          <LogMonitorButton
+            theme={theme}
+            onClick={this.handleSweep}
+            enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>
             Sweep
           </LogMonitorButton>
-          <LogMonitorButton theme={theme} onClick={::this.handleCommit} enabled={computedStates.length > 1}>
+          <LogMonitorButton
+            theme={theme}
+            onClick={this.handleCommit}
+            enabled={computedStates.length > 1}>
             Commit
           </LogMonitorButton>
         </div>

diff --git a/src/LogMonitorButton.js b/src/LogMonitorButton.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import brighten from './brighten';
+import shouldPureComponentUpdate from 'react-pure-render/function';
 
 const styles = {
   base: {
@@ -20,8 +21,17 @@ const styles = {
 };
 
 export default class LogMonitorButton extends React.Component {
+  shouldComponentUpdate = shouldPureComponentUpdate;
+
   constructor(props) {
     super(props);
+
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.onClick = this.onClick.bind(this);
+
     this.state = {
       hovered: false,
       active: false
@@ -73,11 +83,12 @@ export default class LogMonitorButton extends React.Component {
       };
     }
     return (
-      <a onMouseEnter={::this.handleMouseEnter}
-          onMouseLeave={::this.handleMouseLeave}
-          onMouseDown={::this.handleMouseDown}
-          onMouseUp={::this.handleMouseUp}
-          style={style} onClick={::this.onClick}>
+      <a onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+          onClick={this.onClick}
+          style={style}>
         {this.props.children}
       </a>
     );

diff --git a/src/LogMonitorEntry.js b/src/LogMonitorEntry.js
@@ -1,6 +1,7 @@
 import React, { PropTypes, Component } from 'react';
 import JSONTree from 'react-json-tree';
 import LogMonitorEntryAction from './LogMonitorEntryAction';
+import shouldPureComponentUpdate from 'react-pure-render/function';
 
 const styles = {
   entry: {
@@ -23,20 +24,25 @@ export default class LogMonitorEntry extends Component {
     collapsed: PropTypes.bool
   };
 
+  shouldComponentUpdate = shouldPureComponentUpdate;
+
   printState(state, error) {
     let errorText = error;
     if (!errorText) {
       try {
-        return <JSONTree
-          theme={this.props.theme}
-          keyName={'state'}
-          data={this.props.select(state)}
-          previousData={this.props.select(this.props.previousState)}
-          style={styles.tree}/>;
+        return (
+          <JSONTree
+            theme={this.props.theme}
+            keyName={'state'}
+            data={this.props.select(state)}
+            previousData={this.props.select(this.props.previousState)}
+            style={styles.tree} />
+        );
       } catch (err) {
         errorText = 'Error selecting state.';
       }
     }
+
     return (
       <div style={{
         color: this.props.theme.base08,