neilff · hally9k · Jun 4, 2017 · Sep 6, 2016 · Sep 6, 2016 · Sep 7, 2016
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"] 
+  "presets": ["es2015", "stage-0"]
 }
diff --git a/example/devTools.js b/example/devTools.js
@@ -0,0 +1,35 @@
+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 SliderMonitor from 'redux-slider-monitor';
+import React from 'react'
+import { Provider } from 'react-redux';
+
+const DevTools = createDevTools(
+  <DockMonitor toggleVisibilityKey='ctrl-h'
+               changePositionKey='ctrl-q'
+               changeMonitorKey='ctrl-m'>
+    <LogMonitor theme='tomorrow' />
+    <SliderMonitor keyboardEnabled />
+  </DockMonitor>
+);
+
+export function runDevTools($ngRedux, $rootScope) {
+  render(
+    <Provider store={$ngRedux}>
+      <div>
+        <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;
+
diff --git a/example/index.html b/example/index.html
@@ -6,6 +6,7 @@
   </head>
   <body>
     <main ui-view="main"></main>
+    <div id="devTools"></div>
   </body>
   <script src="/static/bundle.js"></script>
 </html>
diff --git a/example/index.js b/example/index.js
@@ -1,33 +1,24 @@
 import angular from 'angular';
-import uiRouter from 'angular-ui-router';
+import uiRouter from '@uirouter/angularjs';
 
 import ngRedux from 'ng-redux';
-import {combineReducers} from 'redux';
+import { combineReducers } from 'redux';
 import thunk from 'redux-thunk';
 import createLogger from 'redux-logger';
+import { default as DevTools, runDevTools } from './devTools';
 
 import ngReduxRouter from '../src';
 
-import {
-  router,
-  stateGo,
-  stateReload,
-  stateTransitionTo
-}
-from '../src';
+import { router, stateGo, stateReload, stateTransitionTo } from '../src';
 
 const routerActions = {
   stateGo,
   stateReload,
-  stateTransitionTo
+  stateTransitionTo,
 };
 
 export default angular
-  .module('demoApp', [
-    uiRouter,
-    ngRedux,
-    ngReduxRouter
-  ])
+  .module('demoApp', [uiRouter, ngRedux, ngReduxRouter])
   .config(($urlRouterProvider, $stateProvider) => {
     $urlRouterProvider.otherwise('/app');
 
@@ -60,21 +51,24 @@ export default angular
 
               $ngRedux.connect(state => {
                 return {
-                  globalState: state
+                  globalState: state,
                 };
-              })($scope)
-            }
-          }
-        }
+              })($scope);
+            },
+          },
+        },
       })
       .state('app.child1', {
         url: '/child1?hello?optional',
         views: {
           child: {
             controller: ($scope, $ngRedux) => {
-              let disconnect = $ngRedux.connect((state) => state, routerActions)($scope);
+              const disconnect = $ngRedux.connect(
+                state => state,
+                routerActions
+              )($scope);
 
-              $scope.$on('$destroy', disconnect)
+              $scope.$on('$destroy', disconnect);
             },
             template: `
               <div class="child-view">
@@ -83,18 +77,21 @@ export default angular
                 <button ng-click="stateTransitionTo('app.child2')">stateTransitionTo View 2</button>
                 <button ng-click="stateTransitionTo('app.child3', {id: '4'})">stateTransitionTo View 3, ID: 4</button>
               </div>
-            `
-          }
-        }
+            `,
+          },
+        },
       })
       .state('app.child2', {
         url: '/child2',
         views: {
           child: {
             controller: ($scope, $ngRedux) => {
-              let disconnect = $ngRedux.connect((state) => state, routerActions)($scope);
+              const disconnect = $ngRedux.connect(
+                state => state,
+                routerActions
+              )($scope);
 
-              $scope.$on('$destroy', disconnect)
+              $scope.$on('$destroy', disconnect);
             },
             template: `
               <div class="child-view">
@@ -103,22 +100,25 @@ export default angular
                 <button ng-click="stateReload('app.child1')">$state.reload</button>
                 <button ng-click="stateGo('app.child1',{hello: 'world', optional: true})">$state.go to View 1 with Params</button>
               </div>
-            `
-          }
-        }
+            `,
+          },
+        },
       })
       .state('app.child3', {
         url: '/child3?id',
         params: {
-          hello: 'world'
+          hello: 'world',
         },
         reloadOnSearch: false,
         views: {
           child: {
             controller: ($scope, $ngRedux) => {
-              let disconnect = $ngRedux.connect((state) => state, routerActions)($scope);
+              const disconnect = $ngRedux.connect(
+                state => state,
+                routerActions
+              )($scope);
 
-              $scope.$on('$destroy', disconnect)
+              $scope.$on('$destroy', disconnect);
             },
             template: `
               <div class="child-view">
@@ -128,9 +128,9 @@ export default angular
                 <button ng-click="stateGo('app.child3', {id: '2'})">$state.go View 3, ID: 2</button>
                 <button ng-click="stateGo('app.child3', {id: '3'})">$state.go View 3, ID: 3</button>
               </div>
-            `
-          }
-        }
+            `,
+          },
+        },
       })
       .state('app.child4', {
         url: '/child4',
@@ -142,42 +142,41 @@ export default angular
               <h2>Child View 4</h2>
               <div>This state is prohibited. You should've been redirected to the root.</div>
             </div>
-          `
-          }
-        }
-      })
+          `,
+          },
+        },
+      });
   })
-  .config(($ngReduxProvider) => {
+  .config($ngReduxProvider => {
     const logger = createLogger({
       level: 'info',
-      collapsed: true
+      collapsed: true,
     });
 
     const reducers = combineReducers({
-      router
+      router,
     });
 
-    $ngReduxProvider.createStoreWith(reducers, ['ngUiRouterMiddleware', logger, thunk]);
-  })
-  .run(($rootScope, $state, $ngRedux, $urlRouter) => {
+    const middlewares = ['ngUiRouterMiddleware', thunk, logger];
+    const enhancers = [DevTools.instrument()];
 
+    $ngReduxProvider.createStoreWith(reducers, middlewares, enhancers);
+  })
+  .run(runDevTools)
+  .run(($transitions, $state, $ngRedux) => {
     // If save something to the store, dispatch will force state change update
     console.log('will do dispatch');
-    $ngRedux.dispatch({type: 'SOME_ACTION'});
+    $ngRedux.dispatch({ type: 'SOME_ACTION' });
     console.log('did dispatch');
 
-    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
-      if (to.prohibited) {
-        evt.preventDefault();
+    const matchCriteria = { to: state => state.prohibited };
+
+    $transitions.onBefore(matchCriteria, $transition$ => {
+      if ($transition$.to().prohibited) {
         console.log('prohibited state change cancelled');
-        $state.go('app');
+        return $state.target('app', { location: 'replace' });
       }
     });
 
-    console.log('$stateChangeStart callback is ready');
-    console.log('enable $urlRouter listening');
-
-    $urlRouter.sync();
-    $urlRouter.listen();
-  })
-  .name;
+    console.log('$transitions.onBefore callback is ready');
+  }).name;
diff --git a/example/package.json b/example/package.json
@@ -7,22 +7,29 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
+    "babel-core": "6.13.1",
     "babel-loader": "6.2.4",
-    "babel-core": "6.5.2",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
     "redux-batched-updates": "0.1.0",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.11",
+    "redux-slider-monitor": "^1.0.7",
     "webpack": "1.13.1",
     "webpack-dev-server": "1.14.1"
   },
   "license": "MIT",
   "dependencies": {
+    "@uirouter/angularjs": "^1.0.3",
     "angular": "^1.5.1",
-    "angular-ui-router": "0.4.2",
     "ng-redux": "^3.3.3",
+    "react-redux": "^4.4.5",
     "redux": "^3.5.2",
+    "redux-devtools": "^3.3.1",
     "redux-logger": "2.6.1",
     "redux-thunk": "2.1.0"
   },
-  "engines" : {
-    "node" : ">=6.0.0"
+  "engines": {
+    "node": ">=6.0.0"
   }
 }
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -6,7 +6,9 @@ module.exports = {
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     'webpack/hot/dev-server',
-    './index'
+    './index',
+    //Remove the following line to remove devTools
+    './devTools.js'
   ],
   output: {
     path: path.join(__dirname, 'dist'),
@@ -17,17 +19,14 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],
-  resolve: {
-    extensions: ['', '.js'],
-    alias: {
-      'react': path.join(__dirname, '..', '..', 'node_modules', 'react')
-    }
-  },
   module: {
     loaders: [{
       test: /\.js$/,
-      loaders: ['babel'],
-      exclude: /node_modules/
+      loader: 'babel',
+      exclude: /node_modules/,
+      query: {
+        presets: ['es2015', 'stage-0', 'react']
+      }
     }, {
       test: /\.css?$/,
       loaders: ['style', 'raw'],