first

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+
+.vscode
+
+node_modules
+_bundles
+lib
+lib-esm

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ui-router-redux",
+  "version": "0.1.0",
+  "description": "Simple Redux bindings for UI-Router",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "jsnext:main": "lib-esm/index.js",
+  "scripts": {
+    "clean": "shx rm -rf _bundles lib lib-esm build",
+    "build": "npm run clean && tsc && tsc -m es6 --outDir lib-esm && NODE_ENV=production webpack"
+  },
+  "author": "Marco Botto",
+  "license": "MIT",
+  "devDependencies": {
+    "awesome-typescript-loader": "^3.0.0-beta.18",
+    "jest": "^18.1.0",
+    "redux": "^3.6.0",
+    "shelljs": "^0.7.6",
+    "shx": "^0.2.2",
+    "ts-jest": "^18.0.1",
+    "typescript": "^2.1.5",
+    "ui-router-core": "^3.1.0",
+    "webpack": "2.2.0-rc.4"
+  },
+  "dependencies": {}
+}

src/actions.ts

@@ -0,0 +1,13 @@
+export const TRIGGER_TRANSITION = '@ui-router/TRIGGER_TRANSITION';
+export const START_TRANSITION = '@ui-router/START_TRANSITION';
+export const IGNORED_TRANSITION = '@ui-router/IGNORED_TRANSITION';
+export const REDIRECTED_TRANSITION = '@ui-router/REDIRECTED_TRANSITION';
+export const FINISH_TRANSITION = '@ui-router/FINISH_TRANSITION';
+
+export const triggerTransition = (to, params) => {
+  return {
+    type: TRIGGER_TRANSITION,
+    to,
+    params
+  }
+}

src/applyHooks.ts

@@ -0,0 +1,79 @@
+/**
+  * @module core
+  */ /** */
+import { UIRouter, Transition, HookResult, TransitionHookFn, State} from 'ui-router-core';
+import { Rejection, RejectType } from 'ui-router-core';
+import { Store, Action } from 'redux';
+
+import {
+  START_TRANSITION,
+  IGNORED_TRANSITION,
+  REDIRECTED_TRANSITION,
+  FINISH_TRANSITION
+} from './actions';
+
+/** @hidden */
+const hookResult: HookResult = true;
+
+/** @hidden */
+const noop = () => {};
+
+/**
+ * Dispatch Redux event
+ *
+ * Creates a function that when called dispatches a Redux action with the transition info.
+ *
+ * @param event The event name
+ * @param store The redux store
+ * @param trans The Transition
+ */
+function dispatch (event: string, store: Store<any>, trans: Transition): TransitionHookFn {
+  return function () {
+    store.dispatch({ type: event, transition: trans });
+  }
+}
+
+function handleTransitionError (trans: Transition, store: Store<any>): (err: Rejection) => void {
+  return function (err: Rejection) {
+    let dispatcher;
+    if(err.type === RejectType.SUPERSEDED && err.redirected === true) {
+      dispatcher = dispatch(REDIRECTED_TRANSITION, store, trans);
+    } else if (err.type = RejectType.IGNORED) {
+      dispatcher = dispatch(IGNORED_TRANSITION, store, trans);
+    } else {
+      dispatcher = noop;
+    }
+    dispatcher();
+  }
+}
+
+/**
+ * Applies hooks to Transitions
+ *
+ * Registers hooks for every Transition and dispatches Redux events to sync it.
+ *
+ * @param router The Router instance
+ * @param store The Redux store
+ * @returns A function for removing the event listeners
+ */
+export function applyHooks (router: UIRouter, store: Store<any>): Function {
+
+  const {transitionService} = router;
+  const removeHooksFunctions: Function[] = [];
+
+  const removeMainHook = transitionService.onBefore({}, (trans: Transition) => {
+    // Create a hook for the ends of the transition
+    const dispatchOnStart = dispatch(START_TRANSITION, store, trans);
+    const dispatchOnFinish = dispatch(FINISH_TRANSITION, store, trans);
+
+    removeHooksFunctions.push(trans.onStart({}, dispatchOnStart));
+    removeHooksFunctions.push(trans.onFinish({}, dispatchOnFinish));
+
+    trans.promise.then(noop, handleTransitionError(trans, store));
+  });
+
+  return function () {
+    removeMainHook();
+    removeHooksFunctions.forEach(fn => fn());
+  }
+}

src/index.ts

@@ -0,0 +1,2 @@
+export {createReduxPlugin} from './reduxPlugin';
+export {routerReducer} from './reducer';

src/interface.ts

@@ -0,0 +1,9 @@
+/**
+ * @internalapi
+ * @module core
+ */ /** */
+import { UIRouterPlugin } from 'ui-router-core';
+
+export interface ReduxPlugin extends UIRouterPlugin {
+  store: any
+}

src/middleware.ts

@@ -0,0 +1,12 @@
+import {TRIGGER_TRANSITION} from './actions';
+
+export default function routerMiddleware(router) {
+  return () => next => action => {
+    if (action.type !== TRIGGER_TRANSITION) {
+      return next(action);
+    }
+
+    const { to, params } = action;
+    // TODO: trigger transition
+  }
+}

src/reducer.ts

@@ -0,0 +1,37 @@
+import {
+  START_TRANSITION,
+  IGNORED_TRANSITION,
+  REDIRECTED_TRANSITION,
+  FINISH_TRANSITION
+} from './actions';
+
+const initialState = {
+  transitioning: false,
+  current: {}
+}
+
+export const routerReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case START_TRANSITION: {
+      return {
+        ...state,
+        transitioning: true
+      }
+    }
+    case FINISH_TRANSITION: {
+      return {
+        transitioning: false,
+        last: action.transition.to()
+      }
+    }
+    case IGNORED_TRANSITION: {
+      return {
+        ...state,
+        transitioning: false
+      }
+    }
+    default: {
+      return state;
+    }
+  }
+}

src/reduxPlugin.ts

@@ -0,0 +1,25 @@
+import { UIRouter } from 'ui-router-core';
+import { Store } from 'redux';
+import { ReduxPlugin } from './interface';
+
+import { applyHooks } from './applyHooks';
+
+export function reduxPluginFactory(
+  name: string,
+  store: Store<any>
+){
+  return function (router: UIRouter): ReduxPlugin {
+    // sync should return function to deregister hooks
+    const removeHooks = applyHooks(router, store);
+
+    function dispose(router: UIRouter) {
+      removeHooks();
+    }
+
+    return { name, store, dispose };
+  }
+}
+
+export const createReduxPlugin: (store: Store<any>) => (router: UIRouter) => ReduxPlugin = (store) => {
+  return reduxPluginFactory('redux', store);
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [ "es2015", "dom" ],
+    "outDir": "lib",
+    "allowSyntheticDefaultImports": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "forceConsistentCasingInFileNames": true,
+    "sourceMap": true,
+    "declaration": true,
+    "jsx": "react"
+  },
+  "files": [
+    "./src/index.ts"
+  ],
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "rules": {
+    "indent": [
+      true,
+      2
+    ]
+  }
+}

webpack.config.js

@@ -0,0 +1,40 @@
+var path = require("path");
+var webpack = require("webpack");
+
+var config = {
+  entry: {
+    "ui-router-redux": ["./src/index.ts"],
+    "ui-router-redux.min": ["./src/index.ts"]
+  },
+  output: {
+    path: path.resolve(__dirname, "_bundles"),
+    filename: "[name].js",
+    libraryTarget: "umd",
+    library: "UIRouterRedux",
+    umdNamedDefine: true
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+    alias: {
+      "ui-router-redux": "/Volumes/FILES/github/elboman/ui-router-redux/lib"
+    }
+  },
+  devtool: 'source-map',
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      minimize: true,
+      include: /\.min\.js$/,
+    })
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.tsx?$/,
+        loader: "awesome-typescript-loader",
+        exclude: /(node_modules|__tests__)/
+      }
+    ]
+  }
+};
+
+module.exports = config;