Updated counter sample

Author: wbuchwalter

.babelrc

@@ -1,30 +1,32 @@
-import { persistState } from 'redux-devtools';
-import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
-import React, { Component } from 'react';
-
-angular.module('counter')
-  .run(($ngRedux, $rootScope) => {
-    React.render(
-      <App store={ $ngRedux }/>,
-      document.getElementById('devTools')
-    );
-    //Hack to reflect state changes when disabling/enabling actions via the monitor
-    $ngRedux.subscribe(_ => {
-        setTimeout($rootScope.$apply.bind($rootScope), 100);
-    });
-  });
+import { createDevTools} from 'redux-devtools';
+import { render } from 'react-dom';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+import React from 'react'
+import { Provider } from 'react-redux';
 
+const DevTools = createDevTools(
+  <DockMonitor toggleVisibilityKey='ctrl-h'
+               changePositionKey='ctrl-q'>
+    <LogMonitor theme='tomorrow' />
+  </DockMonitor>
+);
 
-class App extends Component {
-  render() {
-    return (
+export function runDevTools($ngRedux, $rootScope) {
+  render(
+    <Provider store={$ngRedux}>
       <div>
-        <DebugPanel top right bottom>
-          <DevTools store={ this.props.store } monitor = { LogMonitor } />
-        </DebugPanel>
+        <DevTools />
       </div>
-    );
-  }
+    </Provider>,
+    document.getElementById('devTools')
+  );
+  //Hack to reflect state changes when disabling/enabling actions via the monitor
+  $ngRedux.subscribe(_ => {
+      setTimeout($rootScope.$apply.bind($rootScope), 100);
+  });
 }
 
+export default DevTools;
+
 

examples/counter/devTools.js

@@ -3,10 +3,11 @@ import ngRedux from 'ng-redux';
 import rootReducer from './reducers';
 import thunk from 'redux-thunk';
 import counter from './components/counter';
-import { devTools } from 'redux-devtools';
+import { default as DevTools, runDevTools} from './devTools';
 
 angular.module('counter', [ngRedux])
   .config(($ngReduxProvider) => {
-    $ngReduxProvider.createStoreWith(rootReducer, [thunk], [devTools()]);
+    $ngReduxProvider.createStoreWith(rootReducer, [thunk], [DevTools.instrument()]);
   })
-  .directive('ngrCounter', counter);
+  .directive('ngrCounter', counter)
+  .run(runDevTools);

examples/counter/index.js

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES6"
+  }
+}

examples/counter/jsconfig.json

@@ -17,19 +17,25 @@
   },
   "homepage": "https://github.com/wbuchwalter/ngRedux#readme",
   "devDependencies": {
-    "babel-core": "^5.8.22",
-    "babel-loader": "^5.3.2",
+    "babel-core": "^6.3.21",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "html-loader": "^0.3.0",
     "html-webpack-plugin": "^1.6.1",
-    "react": "^0.13.3",
-    "webpack": "^1.11.0",
-    "webpack-dev-server": "^1.10.1"
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "redux-devtools-dock-monitor": "^1.0.1",
+    "redux-devtools-log-monitor": "^1.0.1",
+    "webpack": "^1.12.9",
+    "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
     "angular": "^1.4.4",
     "ng-redux": "^3.0.0",
+    "react-redux": "^4.0.1",
     "redux": "^3.0.0",
-    "redux-devtools": "^2.1.0",
-    "redux-thunk": "^0.1.0"
+    "redux-devtools": "^3.0.0",
+    "redux-thunk": "^1.0.2"
   }
 }

examples/counter/package.json

@@ -26,7 +26,11 @@ module.exports = {
       {
         test: /\.js$/,
         loader: "babel",
-        exclude: /node_modules/
+        exclude: /node_modules/,
+        query:
+        {
+          presets:['es2015','react']
+        }
       },
       {
         test: /\.html$/,