Support react-router-relay via applyRouterMiddleware.

modules/RouteUtils.js

@@ -49,39 +49,71 @@ export function createRouteFromReactElement(
   return _createRouteFromReactElement(element);
 }
 
+function getPropsFromRoute(route: RouteDef): Object {
+  const {
+    childRoutes,
+    component,
+    overlayComponent,
+    path,
+    routeType,
+    transition,
+    reducer,
+    indexRoute,
+    ...rest,
+  } = route;
+  return rest;
+}
+
 function createNavigationTreeAtIndex(
   createElement: ElementProvider,
   routes: Array<RouteDef>,
   route: RouteDef,
   positionInParent: number
 ): ?PseudoElement {
-  const props = {};
+  const {
+    childRoutes,
+    component,
+    overlayComponent,
+    path,
+    routeType,
+    indexRoute,
+  } = route;
+
+  const props = {
+    ...getPropsFromRoute(route),
+    route,
+    routes,
+  };
 
   props.createElement = createElement;
-  props.path = route.path || `[visual]${positionInParent}`;
-  props.type = route.routeType;
-  props.component = route.component;
+  props.path = path || `[visual]${positionInParent}`;
+  props.type = routeType;
+  props.component = component;
 
-  if (route.overlayComponent) {
-    props.overlayComponent = route.overlayComponent;
+  if (overlayComponent) {
+    props.overlayComponent = overlayComponent;
   }
 
-  if (route.childRoutes) {
-    props.navigationSubtree = route.childRoutes.map(
+  if (childRoutes) {
+    props.navigationSubtree = childRoutes.map(
       (r, index) => createNavigationTreeAtIndex(createElement, routes, r, index)
     );
 
     // index route is given in `routes` but not in `childRoutes`
-    if (route.indexRoute) {
-      const indexRouteProps = {};
+    if (indexRoute) {
+      const indexRouteProps = {
+        ...getPropsFromRoute(indexRoute),
+        route: indexRoute,
+        routes,
+      };
 
       indexRouteProps.path = '[index]';
       indexRouteProps.type = 'index';
-      indexRouteProps.component = route.indexRoute.component;
+      indexRouteProps.component = indexRoute.component;
       indexRouteProps.createElement = createElement;
 
-      if (route.indexRoute.overlayComponent) {
-        indexRouteProps.overlayComponent = route.indexRoute.overlayComponent;
+      if (indexRoute.overlayComponent) {
+        indexRouteProps.overlayComponent = indexRoute.overlayComponent;
       }
 
       const indexRoutePseudoElement = {
@@ -94,13 +126,14 @@ function createNavigationTreeAtIndex(
   }
 
   let pseudoElement;
-  if (route.routeType === STACK_ROUTE) {
+  if (routeType === STACK_ROUTE) {
     pseudoElement = { routeViewComponent: StackRouteView, props };
-  } else if (route.routeType === TABS_ROUTE) {
+  } else if (routeType === TABS_ROUTE) {
     pseudoElement = { routeViewComponent: TabsRouteView, props };
   } else {
     pseudoElement = { routeViewComponent: RouteView, props };
   }
+
   return pseudoElement;
 }
 
@@ -109,7 +142,6 @@ export function createNavigationTree(
   routes: Array<RouteDef>
 ): ?PseudoElement {
   const rootRoute = routes && routes.length && routes[0];
-
   if (!rootRoute) {
     return null;
   }

modules/RouteView.js

@@ -72,6 +72,21 @@ class RouteView extends Component<any, Props, any> {
     );
   }
 
+  getComponentProps(props: Object): Object {
+    const {
+      path,
+      type,
+      component,
+      overlayComponent,
+      navigationSubtree,
+      navigationState,
+      createElement,
+      onNavigate,
+      ...rest,
+    } = props;
+    return rest;
+  }
+
   renderTransition(props: NavigationTransitionProps): ReactElement<any> {
     const scenes = props.scenes.map(
      scene => this.renderScene({
@@ -119,6 +134,7 @@ class RouteView extends Component<any, Props, any> {
     }
 
     const componentProps = {
+      ...this.getComponentProps(this.props),
       params,
       routeParams,
       location,

modules/RouterContext.js

@@ -88,6 +88,8 @@ class RouterContext extends Component<any, any, any> {
         navigationTree,
         navigationState,
         location,
+        route: {}, // TODO
+        routes: this.props.routes,
       };
 
       element = React.createElement(RootContainer, passProps);

modules/StackRouteView.js

@@ -68,6 +68,7 @@ class StackRouteView extends Component<any, Props, any> {
       const { location, params, routeParams } = scene.route;
 
       const overlayComponentProps = {
+        ...this.getComponentProps(navigationalElement.props),
         ...props,
         location,
         params,
@@ -140,6 +141,21 @@ class StackRouteView extends Component<any, Props, any> {
     );
   }
 
+  getComponentProps(props: Object): Object {
+    const {
+      path,
+      type,
+      component,
+      overlayComponent,
+      navigationSubtree,
+      navigationState,
+      createElement,
+      onNavigate,
+      ...rest,
+    } = props;
+    return rest;
+  }
+
   renderTransition(props: NavigationTransitionProps): ReactElement<any> {
     const overlay = this.renderOverlay({
       ...props,
@@ -203,6 +219,7 @@ class StackRouteView extends Component<any, Props, any> {
     }
 
     const componentProps = {
+      ...this.getComponentProps(this.props),
       params,
       routeParams,
       location,

modules/TabsRouteView.js

@@ -66,8 +66,8 @@ class TabsRouteView extends Component<any, Props, any> {
     const overlayComponent = navigationalElement.props.overlayComponent;
     if (overlayComponent) {
       const { location, params, routeParams } = scene.route;
-
       const overlayComponentProps = {
+        ...this.getComponentProps(navigationalElement.props),
         ...props,
         location,
         params,
@@ -140,6 +140,21 @@ class TabsRouteView extends Component<any, Props, any> {
     );
   }
 
+  getComponentProps(props: Object): Object {
+    const {
+      path,
+      type,
+      component,
+      overlayComponent,
+      navigationSubtree,
+      navigationState,
+      createElement,
+      onNavigate,
+      ...rest,
+    } = props;
+    return rest;
+  }
+
   renderTransition(props: NavigationTransitionProps): ReactElement<any> {
     const overlay = this.renderOverlay({
       ...props,
@@ -203,6 +218,7 @@ class TabsRouteView extends Component<any, Props, any> {
     }
 
     const componentProps = {
+      ...this.getComponentProps(this.props),
       params,
       routeParams,
       location,

modules/TypeDefinition.js

@@ -41,6 +41,7 @@ export type RouteDef = {
   routeType: ?RouteType,
   transition: ?string,
   reducer: Function,
+  indexRoute: ?Object,
 };
 
 export type IndexRouteDef = {

modules/applyRouterMiddleware.js

@@ -0,0 +1,37 @@
+/**
+ * This file is subject to the terms and conditions defined in the LICENSE file
+ * which is found in the in the root directory of React Router source tree.
+ *
+ * https://github.com/reactjs/react-router/blob/master/LICENSE.md
+ */
+
+import React, { createElement } from 'react';
+import RouterContext from './RouterContext';
+
+export default (...middlewares) => {
+  const withContext = middlewares.map(m => m.renderRouterContext).filter(f => f);
+  const withComponent = middlewares.map(m => m.renderRouteComponent).filter(f => f);
+  const makeCreateElement = (baseCreateElement = createElement) => (
+    (Component, props) => (
+      withComponent.reduceRight(
+        (previous, renderRouteComponent) => (
+          renderRouteComponent(previous, props)
+        ), baseCreateElement(Component, props)
+      )
+    )
+  );
+
+  return (renderProps) => (
+    withContext.reduceRight(
+      (previous, renderRouterContext) => (
+        renderRouterContext(previous, renderProps)
+      ), (
+        <RouterContext
+          {...renderProps}
+          createElement={makeCreateElement(renderProps.createElement)}
+        />
+      )
+    )
+  );
+};
+

modules/index.js

@@ -21,8 +21,9 @@ export { IndexRoute, Route, StackRoute, TabsRoute };
 import RouterContext from './RouterContext';
 import Reducer from './Reducer';
 import { render } from './render';
+import applyRouterMiddleware from './applyRouterMiddleware';
 
-export { RouterContext, Reducer, render };
+export { RouterContext, Reducer, render, applyRouterMiddleware };
 
 /* histories */
 import nativeHistory from './nativeHistory';