Use Babel 6

Use Redux-devtools 3
Remove umd build
Update deps

Author: romseguy

.babelrc

@@ -1,4 +1,4 @@
 {
-  "stage": 0,
-  "loose": "all"
+  "plugins": ["transform-react-jsx"],
+  "presets": ["es2015", "stage-0"]
 }

.eslintignore

@@ -1,4 +1,2 @@
 lib
 **/node_modules
-**/webpack.config.js
-examples/**/server.js

.eslintrc

@@ -8,7 +8,11 @@
   "rules": {
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
-    "react/react-in-jsx-scope": 2
+    "react/react-in-jsx-scope": 2,
+    "no-console": 0,
+    // Temporarily disabled due to babel-eslint issues:
+    "block-scoped-var": 0,
+    "padded-blocks": 0
   },
   "plugins": [
     "react"

.gitignore

@@ -1,7 +1,6 @@
 node_modules
 *.log
 .DS_Store
-dist
 lib
 coverage
 .idea

.npmignore

@@ -4,3 +4,4 @@ src
 test
 examples
 coverage
+.idea

package.json

@@ -1,22 +1,23 @@
 {
   "name": "redux-devtools-chart-monitor",
   "version": "0.1.0",
-  "description": "Monitor for Redux dev tools to visualize your store as a chart",
-  "main": "lib/ChartMonitor.js",
+  "description": "Chart monitor for Redux DevTools",
+  "main": "lib/index.js",
   "scripts": {
     "clean": "rimraf lib dist",
     "build": "babel src --out-dir lib",
-    "build:umd": "webpack src/ChartMonitor.js dist/redux-devtools-chart-monitor.js && NODE_ENV=production webpack src/ChartMonitor.js dist/redux-devtools-chart-monitor.min.js",
     "lint": "eslint src examples",
-    "prepublish": "npm run lint && npm run clean && npm run build && npm run build:umd"
+    "prepublish": "npm run lint && npm run clean && npm run build"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/romseguy/redux-devtools-chart-monitor.git"
   },
   "keywords": [
     "redux",
-    "monitor",
+    "devtools",
+    "flux",
+    "react",
     "chart"
   ],
   "author": "romseguy",
@@ -26,20 +27,27 @@
   },
   "homepage": "https://github.com/romseguy/redux-devtools-chart-monitor",
   "devDependencies": {
-    "babel": "^5.5.8",
-    "babel-core": "^5.6.18",
-    "babel-eslint": "^3.1.15",
-    "babel-loader": "^5.1.4",
-    "eslint": "^0.23",
-    "eslint-config-airbnb": "0.0.6",
-    "eslint-plugin-react": "^2.3.0",
+    "babel-cli": "^6.1.2",
+    "babel-core": "^6.1.2",
+    "babel-eslint": "^4.1.4",
+    "babel-loader": "^6.0.1",
+    "babel-plugin-transform-react-jsx": "^6.0.18",
+    "babel-preset-es2015": "^6.1.2",
+    "babel-preset-stage-0": "^6.1.2",
+    "eslint": "^1.10",
+    "eslint-config-airbnb": "2.0.0",
+    "eslint-plugin-react": "^3.11.3",
     "rimraf": "^2.3.4",
-    "webpack": "^1.9.6"
+    "webpack": "^1.11.0"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0",
+    "redux-devtools": "^3.0.0-beta-3"
   },
   "dependencies": {
-    "d3-state-visualizer": "^0.4.4",
+    "d3-state-visualizer": "^0.5.0",
     "deepmerge": "^0.2.10",
-    "react": "^0.13.3",
-    "redux-devtools": "^2.1.2"
+    "react-pure-render": "^1.0.2",
+    "redux-devtools-themes": "^1.0.0"
   }
 }

src/ChartMonitor.js

@@ -1,7 +1,12 @@
 import React, { PropTypes, Component } from 'react';
-import * as themes from 'redux-devtools/lib/react/themes';
+import shouldPureComponentUpdate from 'react-pure-render/function';
+import * as themes from 'redux-devtools-themes';
+import { ActionCreators } from 'redux-devtools';
 import deepmerge from 'deepmerge';
+
+import reducer from './reducers';
 import Chart from './Chart';
+const { reset, rollback, commit, sweep, toggleAction } = ActionCreators;
 
 const styles = {
   container: {
@@ -14,50 +19,76 @@ const styles = {
   }
 };
 
-export default class ChartMonitor extends Component {
-  constructor(props) {
-    super(props);
-  }
+class ChartMonitor extends Component {
+  static reducer = reducer;
 
   static propTypes = {
-    computedStates: PropTypes.array.isRequired,
-    currentStateIndex: PropTypes.number.isRequired,
-    monitorState: PropTypes.object.isRequired,
-    stagedActions: PropTypes.array.isRequired,
-    skippedActions: PropTypes.object.isRequired,
-    reset: PropTypes.func.isRequired,
-    commit: PropTypes.func.isRequired,
-    rollback: PropTypes.func.isRequired,
-    sweep: PropTypes.func.isRequired,
-    toggleAction: PropTypes.func.isRequired,
-    jumpToState: PropTypes.func.isRequired,
-    setMonitorState: PropTypes.func.isRequired,
+    dispatch: PropTypes.func,
+    computedStates: PropTypes.array,
+    actionsById: PropTypes.object,
+    stagedActionIds: PropTypes.array,
+    skippedActionIds: PropTypes.array,
+    monitorState: PropTypes.shape({
+      initialScrollTop: PropTypes.number
+    }),
+
+    preserveScrollTop: PropTypes.bool,
     select: PropTypes.func.isRequired,
-    visibleOnLoad: PropTypes.bool
+    theme: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ])
   };
 
   static defaultProps = {
     select: (state) => state,
-    monitorState: {isVisible: true},
     theme: 'nicinabox',
-    visibleOnLoad: true
+    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);
+  }
+
+  handleRollback() {
+    this.props.dispatch(rollback());
+  }
+
+  handleSweep() {
+    this.props.dispatch(sweep());
+  }
+
+  handleCommit() {
+    this.props.dispatch(commit());
+  }
+
+  handleToggleAction(id) {
+    this.props.dispatch(toggleAction(id));
+  }
+
+  handleReset() {
+    this.props.dispatch(reset());
+  }
+
   getTheme() {
-    let theme;
-
-    if (typeof this.props.theme === 'string') {
-      if (typeof themes[this.props.theme] !== 'undefined') {
-        theme = themes[this.props.theme];
-      } else {
-        console.warn('DevTools theme ' + this.props.theme + ' not found, defaulting to nicinabox');
-        theme = themes.nicinabox;
-      }
-    } else {
-      theme = this.props.theme;
+    let { theme } = this.props;
+    if (typeof theme !== 'string') {
+      return theme;
+    }
+
+    if (typeof themes[theme] !== 'undefined') {
+      return themes[theme];
     }
 
-    return theme;
+    console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox');
+    return themes.nicinabox;
   }
 
   getChartStyle() {
@@ -98,15 +129,6 @@ export default class ChartMonitor extends Component {
     return deepmerge(defaultOptions, props);
   }
 
-  componentWillMount() {
-    let visibleOnLoad = this.props.visibleOnLoad;
-    const { monitorState } = this.props;
-    this.props.setMonitorState({
-      ...monitorState,
-      isVisible: visibleOnLoad
-    });
-  }
-
   render() {
     const theme = this.getTheme();
 
@@ -117,3 +139,5 @@ export default class ChartMonitor extends Component {
     );
   }
 }
+
+export default ChartMonitor;

src/actions.js

@@ -0,0 +1,4 @@
+export const SOME_ACTION = '@@redux-devtools-chart-monitor/SOME_ACTION';
+export function someAction(data) {
+  return { type: SOME_ACTION, data };
+}

src/index.js

@@ -0,0 +1 @@
+export default from './ChartMonitor';

src/reducers.js

@@ -0,0 +1,13 @@
+import { SOME_ACTION } from './actions';
+
+function someAction(state = 0, action, props) {
+  return action.type === SOME_ACTION ?
+    action.data :
+    state;
+}
+
+export default function reducer(state = {}, action, props) {
+  return {
+    someState: someAction(state.someAction, action, props)
+  };
+}