Second attempt, still ongoing

Author: acdlite

modules/__tests__/Router-test.js

@@ -1,7 +1,7 @@
 import expect from 'expect';
 import React from 'react';
 import { createLocation } from 'history';
-import Router from '../Router';
+import Router from '../take-2/Router';
 import Route from '../Route';
 
 describe('Router', function () {

modules/addNavigation.js

@@ -5,8 +5,8 @@
  * @returns {CreateHistory}
  */
 export default function addNavigation(createHistory) {
-  return (...args) => {
-    const history = createHistory(...args);
+  return options => {
+    const history = createHistory(options);
 
     /**
      * Pushes a new Location onto the history stack.

modules/take-2/Router.js

@@ -0,0 +1,205 @@
+import invariant from 'invariant';
+import React, { Component, PropTypes } from 'react';
+import * as RouterPropTypes from '../PropTypes';
+import BaseRouterRenderer from '../RouterRenderer';
+import createReactRouter from './createReactRouter';
+import routerContext from './routerContext';
+import compose from '../compose';
+import { parseQueryString } from '../QueryUtils';
+import createMemoryHistory from 'history/lib/createMemoryHistory';
+import useQueries from 'history/lib/useQueries';
+import disableListen from './disableListen';
+import matchUntilResolved from './matchUntilResolved';
+
+function noop() {}
+
+/**
+ * For backwards compatibiliy, when no history is provided, use this history-
+ * creating function
+ */
+ const createFallbackHistory = compose(
+   disableListen,
+   useQueries,
+   createMemoryHistory
+ );
+
+export default class Router extends Component {
+  static propTypes = {
+    createElement: PropTypes.func,
+    parseQueryString: PropTypes.func,
+    onError: PropTypes.func,
+    onUpdate: PropTypes.func,
+    routes: RouterPropTypes.routes,
+    // Routes may also be given as children (JSX)
+    children: RouterPropTypes.routes,
+
+    // Unit testing, simple server
+    location: RouterPropTypes.location,
+
+    // Flux, data fetching
+    // @deprecated, use <RouterRenderer {...initialState} /> instead
+    initialState: PropTypes.object
+  }
+
+  static defaultProps = {
+    parseQueryString,
+    onError: error => { throw error; },
+    onUpdate: noop
+  }
+
+  /**
+   * Server-side shortcut for `router.match()`. Use `router.match()`
+   * directly instead.
+   * @deprecated
+   * @param {Array<Route>} routes
+   * @param {Location} location
+   * @param {Function} callback
+   * @param {Object} [initialState]
+   */
+  static run(routes, location, callback, initialState) {
+    const router = createReactRouter(createFallbackHistory)({
+      routes,
+      initialState
+    });
+    router.match(initialState, location, callback);
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    const {
+      history,
+      routes,
+      children,
+      location,
+      parseQueryString,
+      onError,
+      initialState // Initial router state, not initial <Router> component state
+    } = props;
+
+    this.state = {
+      isTransitioning: false,
+      location
+    };
+
+    if (history) {
+      this.router = createReactRouter(() => history)({
+        routes: routes || children,
+        initialState
+      });
+      this.unlisten = this.router.listen(this.handleRouterChange);
+    } else if (location) {
+      this.router = createReactRouter(createFallbackHistory)({
+        routes: routes || children,
+        initialState
+      });
+      matchUntilResolved(this.router.match)(
+        this.router.getState(),
+        location,
+        (error, newState) => {
+          if (error) {
+            onError(error);
+          }
+          this.setState(newState);
+        }
+      );
+    }
+
+    this.RouterRenderer = routerContext(this.router)(BaseRouterRenderer);
+  }
+
+  setState(state, onUpdate) {
+    if (!this.componentHasMounted) {
+      this.state = { ...this.state, ...state };
+      return;
+    }
+    super.setState(state, onUpdate);
+  }
+
+  componentDidMount() {
+    this.componentHasMounted = true;
+  }
+
+  componentWillUnmount() {
+    if (this.unlisten) {
+      this.unlisten();
+    }
+  }
+
+  handleRouterChange = state => {
+    this.setState({
+      isTransitioning: state.pendingLocation ? true : false,
+      ...state
+    });
+  }
+
+
+  // Below are deprecated methods that are added here for 1.0
+  // compatibility. Future versions should access these on either the router
+  // directly. Outside modules (like <Link>) should not use these methods — they
+  // should use the correct methods, and rely on their own fallbacks
+  // for compatibility.
+
+  transitionTo(...args) {
+    const { router } = this;
+
+    invariant(
+      history,
+      'Router#transitionTo needs history'
+    );
+
+    return router.transitionTo(...args);
+  }
+
+
+  replaceWith(...args) {
+    const { router } = this;
+
+    invariant(
+      history,
+      'Router#replaceWith needs history'
+    );
+
+    return router.replaceWith(...args);
+  }
+
+  go(n) {
+    const { router } = this;
+
+    invariant(
+      router,
+      'Router#go needs history'
+    );
+
+    return router.go(n);
+  }
+
+  goBack() {
+    return this.go(-1);
+  }
+
+  goForward() {
+    return this.go(1);
+  }
+
+  isActive(...args) {
+    return this.router.isActive(...args);
+  }
+
+  createHref(...args) {
+    return this.router.createHref(...args);
+  }
+
+  render() {
+    const { router, history, RouterRenderer } = this;
+    const { createElement, initialState } = this.props;
+
+    const state = initialState || this.state;
+
+    return (
+      <RouterRenderer
+        createElement={createElement}
+        {...state}
+      />
+    );
+  }
+}

modules/take-2/addRouting.js

@@ -0,0 +1,73 @@
+function identity(t) {
+  return t;
+}
+
+/**
+ * History enhancer that adds routing capabilities. Takes middleware and
+ * an initial state.
+ *   const createRouter = addRouting(middleware, initialState)(createHistory)
+ * @param {Middleware} middleware - defaults to identity function
+ * @param {Object} initialState
+ */
+export default function addRouting(middleware = identity, initialState) {
+  return createHistory => historyOptions => {
+    const history = createHistory(historyOptions);
+    let state = initialState;
+    let listeners = [];
+
+    const match = middleware((prevState, location, callback) => {
+      callback(null, prevState);
+    });
+
+    function listen(listener) {
+      listeners.push(listener);
+      listener(state);
+      return function unlisten() {
+        listeners = listeners.filter(l => l !== listener);
+      };
+    }
+
+    function getState() {
+      return state;
+    }
+
+    /**
+     * @private
+     */
+    function replaceState(nextState) {
+      state = nextState;
+      listeners.forEach(l => l(state));
+    }
+
+    history.listen(location => {
+      replaceState({ ...getState(), pendingLocation: location });
+
+      match(prevState, location, (err, nextState, redirectInfo) => {
+        if (error) {
+          throw error;
+        }
+
+        if (redirectInfo) {
+          history.pushState(
+            redirectInfo.pathname,
+            redirectInfo.query,
+            redirectInfo.state
+          );
+          return;
+        }
+
+        // Ensure this is the latest location
+        if (location === getState().pendingLocation) {
+          replaceState(nextState);
+        }
+      });
+    });
+
+    return {
+      ...history,
+      listen,
+      getState,
+      match
+    };
+  };
+}

modules/take-2/composeMiddleware.js

@@ -0,0 +1,11 @@
+import compose from '../compose';
+
+export default function composeMiddleware(...middlewares) {
+  return routes => {
+    middlewares = middlewares.map(m => m(routes));
+    return match => compose(
+      ...middlewares,
+      match
+    );
+  };
+}

modules/take-2/createReactRouter.js

@@ -0,0 +1,35 @@
+import createRouter from './createRouter';
+import addNavigation from '../addNavigation';
+import { createRoutes } from '../RouteUtils';
+import useTransitionHooks from './useTransitionHooks';
+import useRoutes from './useRoutes';
+import useComponents from './useComponents';
+import composeMiddleware from './composeMiddleware';
+import compose from '../compose';
+
+function identityMiddleware() {
+  return match => match
+}
+
+export default function createReactRouter(createHistory) {
+  return options => {
+    const { middleware, routes } = options;
+
+    const nextOptions = {
+      ...options,
+      middleware: composeMiddleware(
+        middleware || identityMiddleware,
+        useTransitionHooks,
+        useRoutes,
+        useComponents
+      ),
+      routes: createRoutes(routes),
+    };
+
+    return compose(
+      addNavigation,
+      createRouter,
+      createHistory
+    )(nextOptions);
+  };
+}