From ba1b25e7b46a571d65437e61d5f30df5aac45803 Mon Sep 17 00:00:00 2001
From: Joon Ho Cho <joonho1101@gmail.com>
Date: Fri, 17 Jun 2016 19:14:58 -0700
Subject: [PATCH 1/6] WIP integrate with react-router-relay

---
 modules/RootWrapper.js           | 15 ++++++-
 modules/RouteUtils.js            | 73 +++++++++++++++++++++++++-------
 modules/RouteView.js             | 31 +++++++++++++-
 modules/Router.js                | 11 +++--
 modules/RouterContext.js         | 12 ++++++
 modules/TabsRouteView.js         | 58 ++++++++++++++++++++++---
 modules/TypeDefinition.js        |  1 +
 modules/applyRouterMiddleware.js | 37 ++++++++++++++++
 modules/index.js                 |  3 +-
 9 files changed, 213 insertions(+), 28 deletions(-)
 create mode 100644 modules/applyRouterMiddleware.js

diff --git a/modules/RootWrapper.js b/modules/RootWrapper.js
index 64fd699..590f18b 100644
--- a/modules/RootWrapper.js
+++ b/modules/RootWrapper.js
@@ -93,17 +93,30 @@ class RootWrapper extends Component<any, Props, any> {
 
     const { routeViewComponent, props: routeViewComponentProps } = navigationTree;
 
-    return React.createElement(
+    console.log('RouterNative.RootWrapper.renderNavigation');
+    console.log('RouterNative.RootWrapper.renderNavigation.props', this.props);
+    console.log('RouterNative.RootWrapper.renderNavigation.routeViewComponent', routeViewComponent);
+    console.log('RouterNative.RootWrapper.renderNavigation.routeViewComponentProps', routeViewComponentProps);
+    console.log('RouterNative.RootWrapper.renderNavigation.createElement(routeViewComponent)');
+    console.log('RouterNative.RootWrapper.renderNavigation.createElement.props', {
+      ...routeViewComponentProps,
+      navigationState,
+    });
+    const element = React.createElement(
       routeViewComponent,
       {
         ...routeViewComponentProps,
         navigationState,
       }
     );
+    console.log('RouterNative.RootWrapper.renderNavigation.createElement.return', element);
+    return element;
   }
 
   render(): ReactElement {
     const { navigationState, addressBar: isShown, location } = this.props;
+    console.log('RouterNative.RootWrapper.render');
+    console.log('RouterNative.RootWrapper.render.props', this.props);
 
     // TODO react-native does not accept `-reverse` values for `flex-direction`. We need to render
     // <AddressBar /> after navigational components to keep it on top. See
diff --git a/modules/RouteUtils.js b/modules/RouteUtils.js
index 1814b63..57974cc 100644
--- a/modules/RouteUtils.js
+++ b/modules/RouteUtils.js
@@ -49,39 +49,75 @@ 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 createNavigationTree(
   createElement: ElementProvider,
   routes: Array<RouteDef>,
   route: RouteDef,
   positionInParent: number
 ): ?PseudoElement {
-  const props = {};
+  console.log('RouterNative.RouteUtils.createNavigationTree');
+  // console.log('createElement', createElement);
+  console.log('RouterNative.RouteUtils.createNavigationTree.route', route);
+  console.log('RouterNative.RouteUtils.createNavigationTree.positionInParent', positionInParent);
+  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) => createNavigationTree(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 = {
@@ -93,14 +129,18 @@ function createNavigationTree(
     }
   }
 
+  console.log(`RouterNative.RouteUtils.createNavigationTree.createElement(${routeType})`);
+  console.log('RouterNative.RouteUtils.createNavigationTree.createElement.props', props);
+
   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;
 }
 
@@ -108,7 +148,10 @@ export function createNavigation(
   createElement: ElementProvider,
   routes: Array<RouteDef>
 ): ?PseudoElement {
+  console.log('RouterNative.RouteUtils.createNavigation');
   const rootRoute = routes && routes.length && routes[0];
+  console.log('RouterNative.RouteUtils.createNavigation.rootRoute', rootRoute);
+  console.log('RouterNative.RouteUtils.createNavigation.routes', routes);
 
   if (!rootRoute) {
     return null;
diff --git a/modules/RouteView.js b/modules/RouteView.js
index c87a2d5..a9bdaf7 100644
--- a/modules/RouteView.js
+++ b/modules/RouteView.js
@@ -47,17 +47,21 @@ class RouteView extends Component<any, Props, any> {
   }
 
   renderScene(props: NavigationSceneRendererProps): ?ReactElement {
+    console.log('RouterNative.RouteView.renderScene');
+    console.log('RouterNative.RouteView.renderScene.props', props);
     const { scene } = props;
 
     const { navigationSubtree } = this.props;
+    console.log('RouterNative.RouteView.renderScene.this.props', this.props);
 
     if (!scene.route || !navigationSubtree) {
       return null;
     }
 
     const pseudoElement = navigationSubtree.find(
-      child => child.props.path === scene.route.path
+      child => child.props.routerProps.path === scene.route.path
     );
+    console.log(navigationSubtree, scene, pseudoElement);
 
     if (!pseudoElement) {
       warnOutOfSync('Cannot render scene', scene.route.path);
@@ -77,6 +81,21 @@ class RouteView extends Component<any, Props, any> {
     );
   }
 
+  getComponentProps() {
+    const {
+      path,
+      type,
+      component,
+      overlayComponent,
+      navigationSubtree,
+      navigationState,
+      createElement,
+      onNavigate,
+      ...rest,
+    } = this.props;
+    return rest;
+  }
+
   render(): ReactElement {
     const {
       onNavigate,
@@ -85,6 +104,8 @@ class RouteView extends Component<any, Props, any> {
       component,
       createElement,
     } = this.props;
+    console.log('RouterNative.RouteView.render');
+    console.log('RouterNative.RouteView.render.props', this.props);
 
     const {
       routes,
@@ -108,14 +129,20 @@ class RouteView extends Component<any, Props, any> {
       transitioner = React.createElement(NavigationTransitioner, transitionerProps);
     }
 
+    console.log('RouterNative.RouteView.render.transitioner', transitioner);
+    console.log('RouterNative.RouteView.render.component', component);
     const componentProps = {
+      ...this.getComponentProps(),
       params,
       routeParams,
       location,
       children: transitioner,
     };
+    console.log('RouterNative.RouteView.render.component.props', componentProps);
 
-    return createElement(component, componentProps);
+    const element = createElement(component, componentProps);
+    console.log('RouterNative.RouteView.render.return', element);
+    return element;
   }
 }
 
diff --git a/modules/Router.js b/modules/Router.js
index e13c21f..a6fb4a3 100644
--- a/modules/Router.js
+++ b/modules/Router.js
@@ -6,14 +6,19 @@ import nativeHistory from './nativeHistory';
 import createNativeContext from './createNativeContext';
 
 const NativeRouter = (props: any): ReactElement => {
-  const { routes, children, ...rest } = props;
+  const { routes, children, render, ...rest } = props;
 
   const computedRoutes = createRoutes(routes || children);
   // Leak route definition into native context
-  const nativeContext = createNativeContext(computedRoutes);
+  const nativeContext = (render || createNativeContext)(computedRoutes);
 
   return (
-    <Router history={nativeHistory} render={nativeContext} routes={computedRoutes} {...rest} />
+    <Router
+      history={nativeHistory}
+      render={nativeContext}
+      routes={computedRoutes}
+      {...rest}
+    />
   );
 };
 
diff --git a/modules/RouterContext.js b/modules/RouterContext.js
index 6035a2a..7fccdfc 100644
--- a/modules/RouterContext.js
+++ b/modules/RouterContext.js
@@ -74,8 +74,10 @@ class RouterContext extends Component<any, any, any> {
   };
 
   constructor(props: Props) {
+    console.log('new RouterNative.RouterContext');
     super(props);
     const { routes, location, params } = props;
+    console.log('RouterNative.RouterContext.props', props);
     const nextNavigationState = createState(routes, location, params);
     const action: NavigationAction = {
       type: LOCATION_CHANGE,
@@ -85,11 +87,13 @@ class RouterContext extends Component<any, any, any> {
       nextNavigationState,
     };
     const navigationState = reducer(null, action);
+    console.log('RouterNative.RouterContext.navigationState', navigationState);
 
     (this: any).createElement = this.createElement.bind(this);
 
     const navigationTree = createNavigation(this.createElement, routes);
 
+    console.log('RouterNative.RouterContext.navigationTree', navigationTree);
     this.state = { navigationState, navigationTree };
     backwardHistory.push(navigationState);
   }
@@ -279,6 +283,8 @@ class RouterContext extends Component<any, any, any> {
   }
 
   render(): ?ReactElement {
+    console.log('RouterNative.RouterContext.render');
+    console.log('RouterNative.RouterContext.render.props', this.props);
     const { location, addressBar } = this.props;
 
     const navigationTree = this.state.navigationTree;
@@ -291,7 +297,11 @@ class RouterContext extends Component<any, any, any> {
         navigationTree,
         navigationState,
         location,
+        route: {}, // TODO
+        routes: this.props.routes,
       };
+      console.log('RouterNative.RouterContext.render.createElement(RootWrapper)');
+      console.log('RouterNative.RouterContext.render.createElement.props', props);
 
       element = React.createElement(RootWrapper, props);
     }
@@ -301,6 +311,8 @@ class RouterContext extends Component<any, any, any> {
       'The root route must render a single element'
     );
 
+    console.log('RouterNative.RouterContext.render.element', element);
+
     return element;
   }
 }
diff --git a/modules/TabsRouteView.js b/modules/TabsRouteView.js
index 27ffd75..c333690 100644
--- a/modules/TabsRouteView.js
+++ b/modules/TabsRouteView.js
@@ -60,32 +60,43 @@ class TabsRouteView extends Component<any, Props, any> {
       return null;
     }
 
+    console.log('RouterNative.TabsRouteView.renderOverlay');
+    console.log('RouterNative.TabsRouteView.renderOverlay.navigationSubtree', navigationSubtree);
+    console.log('RouterNative.TabsRouteView.renderOverlay.scene', scene);
+    console.log('RouterNative.TabsRouteView.renderOverlay.props', props);
+
     const navigationalElement = navigationSubtree.find(
-      child => child.props.path === scene.route.path
+      child => child.props.routerProps.path === scene.route.path
     );
+    console.log('RouterNative.TabsRouteView.renderOverlay.navigationalElement', navigationalElement);
 
     if (!navigationalElement) {
+      console.error(new Error('out of sync').stack);
       warnOutOfSync('Cannot render overlay', scene.route.path);
     }
 
     const overlayComponent = navigationalElement.props.overlayComponent;
     if (overlayComponent) {
       const { location, params, routeParams } = scene.route;
-
       const overlayComponentProps = {
         ...props,
         location,
         params,
         routeParams,
       };
+      console.log('RouterNative.TabsRouteView.renderOverlay.createElement', overlayComponent);
+      console.log('RouterNative.TabsRouteView.renderOverlay.createElement.props', overlayComponentProps);
 
       return createElement(overlayComponent, overlayComponentProps);
+      console.log('RouterNative.TabsRouteView.renderOverlay.createElement.return');
     }
 
     return null;
   }
 
   renderScene(props: NavigationSceneRendererProps): ?ReactElement {
+    console.log('RouterNative.TabsRouteView.renderScene');
+    console.log('RouterNative.TabsRouteView.renderScene.props', props);
     const { scene } = props;
 
     if (!scene.route) {
@@ -112,36 +123,62 @@ class TabsRouteView extends Component<any, Props, any> {
       ...props,
       renderScene: this.renderCardScene,
     };
+    console.log('RouterNative.TabsRouteView.renderScene.key', scene.route.key);
 
-    return React.createElement(NavigationCard, navigationCardProps);
+    const element = React.createElement(NavigationCard, navigationCardProps);
+    console.log('RouterNative.TabsRouteView.renderScene.return', element);
+    return element;
   }
 
   renderCardScene(props: NavigationSceneRendererProps): ?ReactElement {
+    console.log('RouterNative.TabsRouteView.renderCardScene');
+    console.log('RouterNative.TabsRouteView.renderCardScene.props', props);
     const { scene } = props;
 
     const { navigationSubtree } = this.props;
+    console.log('RouterNative.TabsRouteView.renderCardScene.scene', scene);
 
     if (!navigationSubtree) {
       return null;
     }
 
     const pseudoElement = navigationSubtree.find(
-      child => child.props.path === scene.route.path
+      child => child.props.routerProps.path === scene.route.path
     );
+    console.log('RouterNative.TabsRouteView.renderCardScene.pseudoElement', pseudoElement);
 
     if (!pseudoElement) {
       warnOutOfSync('Cannot render card', scene.route.path);
     }
+    console.log('RouterNative.TabsRouteView.renderCardScene.cloneElement', pseudoElement);
+    console.log('RouterNative.TabsRouteView.renderCardScene.cloneElement.props', { navigationState: scene.route });
 
     const { routeViewComponent, props: routeViewComponentProps } = pseudoElement;
 
-    return React.createElement(
+    const element = React.createElement(
       routeViewComponent,
       {
         ...routeViewComponentProps,
         navigationState: scene.route,
       }
     );
+    console.log('RouterNative.TabsRouteView.renderCardScene.cloneElement.return', element);
+    return element;
+  }
+
+  getComponentProps() {
+    const {
+      path,
+      type,
+      component,
+      overlayComponent,
+      navigationSubtree,
+      navigationState,
+      createElement,
+      onNavigate,
+      ...rest,
+    } = this.props;
+    return rest;
   }
 
   render(): ReactElement {
@@ -153,6 +190,8 @@ class TabsRouteView extends Component<any, Props, any> {
       createElement,
     } = this.props;
 
+    console.log('RouterNative.TabsRouteView.render');
+    console.log('RouterNative.TabsRouteView.render.props', this.props);
     const {
       routes,
       params,
@@ -182,14 +221,21 @@ class TabsRouteView extends Component<any, Props, any> {
       transitioner = React.createElement(NavigationTransitioner, transitionerProps);
     }
 
+    console.log('RouterNative.TabsRouteView.render.wrappedChildren', wrappedChildren);
+
+    console.log('RouterNative.TabsRouteView.render.component', component);
     const componentProps = {
+      ...this.getComponentProps(),
       params,
       routeParams,
       location,
       children: transitioner,
     };
+    console.log('RouterNative.TabsRouteView.render.component.props', componentProps);
 
-    return createElement(component, componentProps);
+    const element = createElement(component, componentProps);
+    console.log('RouterNative.TabsRouteView.render.return', element);
+    return element;
   }
 
 }
diff --git a/modules/TypeDefinition.js b/modules/TypeDefinition.js
index 3f672ca..19b291e 100644
--- a/modules/TypeDefinition.js
+++ b/modules/TypeDefinition.js
@@ -36,6 +36,7 @@ export type RouteDef = {
   routeType: ?RouteType,
   transition: ?string,
   reducer: Function,
+  indexRoute: ?Object,
 };
 
 export type IndexRouteDef = {
diff --git a/modules/applyRouterMiddleware.js b/modules/applyRouterMiddleware.js
new file mode 100644
index 0000000..cfe10bd
--- /dev/null
+++ b/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 (routeDefinition) => (renderProps) => (
+    withContext.reduceRight(
+      (previous, renderRouterContext) => (
+        renderRouterContext(previous, renderProps)
+      ), (
+      <RouterContext
+        {...renderProps}
+        allRoutes={routeDefinition}
+        createElement={makeCreateElement(renderProps.createElement)}
+      />
+      )
+    )
+  );
+};
diff --git a/modules/index.js b/modules/index.js
index 70b0e53..43b168e 100644
--- a/modules/index.js
+++ b/modules/index.js
@@ -26,6 +26,7 @@ import { render } from './render';
 export { RouterContext, createNativeContext, Reducer, render };
 
 /* histories */
+import applyRouterMiddleware from './applyRouterMiddleware';
 import nativeHistory from './nativeHistory';
 
-export { nativeHistory };
+export { applyRouterMiddleware, nativeHistory };

From 07d38516a24c9af73e5f8c5b6e36138533573ded Mon Sep 17 00:00:00 2001
From: Joon Ho Cho <joonho1101@gmail.com>
Date: Fri, 17 Jun 2016 19:40:43 -0700
Subject: [PATCH 2/6] Working integration with react-router-relay

---
 modules/RouteView.js      |  8 ++++----
 modules/StackRouteView.js | 17 +++++++++++++++++
 modules/TabsRouteView.js  | 13 +++++++------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/modules/RouteView.js b/modules/RouteView.js
index a9bdaf7..0c09c71 100644
--- a/modules/RouteView.js
+++ b/modules/RouteView.js
@@ -59,7 +59,7 @@ class RouteView extends Component<any, Props, any> {
     }
 
     const pseudoElement = navigationSubtree.find(
-      child => child.props.routerProps.path === scene.route.path
+      child => child.props.path === scene.route.path
     );
     console.log(navigationSubtree, scene, pseudoElement);
 
@@ -81,7 +81,7 @@ class RouteView extends Component<any, Props, any> {
     );
   }
 
-  getComponentProps() {
+  getComponentProps(props) {
     const {
       path,
       type,
@@ -92,7 +92,7 @@ class RouteView extends Component<any, Props, any> {
       createElement,
       onNavigate,
       ...rest,
-    } = this.props;
+    } = props;
     return rest;
   }
 
@@ -132,7 +132,7 @@ class RouteView extends Component<any, Props, any> {
     console.log('RouterNative.RouteView.render.transitioner', transitioner);
     console.log('RouterNative.RouteView.render.component', component);
     const componentProps = {
-      ...this.getComponentProps(),
+      ...this.getComponentProps(this.props),
       params,
       routeParams,
       location,
diff --git a/modules/StackRouteView.js b/modules/StackRouteView.js
index 33123a0..7c4b4b3 100644
--- a/modules/StackRouteView.js
+++ b/modules/StackRouteView.js
@@ -73,6 +73,7 @@ class StackRouteView extends Component<any, Props, any> {
       const { location, params, routeParams } = scene.route;
 
       const overlayComponentProps = {
+        ...this.getComponentProps(navigationalElement.props),
         ...props,
         location,
         params,
@@ -143,6 +144,21 @@ class StackRouteView extends Component<any, Props, any> {
     );
   }
 
+  getComponentProps(props) {
+    const {
+      path,
+      type,
+      component,
+      overlayComponent,
+      navigationSubtree,
+      navigationState,
+      createElement,
+      onNavigate,
+      ...rest,
+    } = props;
+    return rest;
+  }
+
   render(): ReactElement {
     const {
       onNavigate,
@@ -182,6 +198,7 @@ class StackRouteView extends Component<any, Props, any> {
     }
 
     const componentProps = {
+      ...this.getComponentProps(this.props),
       params,
       routeParams,
       location,
diff --git a/modules/TabsRouteView.js b/modules/TabsRouteView.js
index c333690..f147d26 100644
--- a/modules/TabsRouteView.js
+++ b/modules/TabsRouteView.js
@@ -66,7 +66,7 @@ class TabsRouteView extends Component<any, Props, any> {
     console.log('RouterNative.TabsRouteView.renderOverlay.props', props);
 
     const navigationalElement = navigationSubtree.find(
-      child => child.props.routerProps.path === scene.route.path
+      child => child.props.path === scene.route.path
     );
     console.log('RouterNative.TabsRouteView.renderOverlay.navigationalElement', navigationalElement);
 
@@ -79,6 +79,7 @@ class TabsRouteView extends Component<any, Props, any> {
     if (overlayComponent) {
       const { location, params, routeParams } = scene.route;
       const overlayComponentProps = {
+        ...this.getComponentProps(navigationalElement.props),
         ...props,
         location,
         params,
@@ -143,7 +144,7 @@ class TabsRouteView extends Component<any, Props, any> {
     }
 
     const pseudoElement = navigationSubtree.find(
-      child => child.props.routerProps.path === scene.route.path
+      child => child.props.path === scene.route.path
     );
     console.log('RouterNative.TabsRouteView.renderCardScene.pseudoElement', pseudoElement);
 
@@ -166,7 +167,7 @@ class TabsRouteView extends Component<any, Props, any> {
     return element;
   }
 
-  getComponentProps() {
+  getComponentProps(props) {
     const {
       path,
       type,
@@ -177,7 +178,7 @@ class TabsRouteView extends Component<any, Props, any> {
       createElement,
       onNavigate,
       ...rest,
-    } = this.props;
+    } = props;
     return rest;
   }
 
@@ -221,11 +222,11 @@ class TabsRouteView extends Component<any, Props, any> {
       transitioner = React.createElement(NavigationTransitioner, transitionerProps);
     }
 
-    console.log('RouterNative.TabsRouteView.render.wrappedChildren', wrappedChildren);
+    console.log('RouterNative.TabsRouteView.render.transitioner', transitioner);
 
     console.log('RouterNative.TabsRouteView.render.component', component);
     const componentProps = {
-      ...this.getComponentProps(),
+      ...this.getComponentProps(this.props),
       params,
       routeParams,
       location,

From 8406233b40912f6eb9d81fc31cb85f3b577e7ca3 Mon Sep 17 00:00:00 2001
From: Joon Ho Cho <joonho1101@gmail.com>
Date: Fri, 17 Jun 2016 19:43:45 -0700
Subject: [PATCH 3/6] Remove console.log

---
 modules/RootWrapper.js   | 15 +--------------
 modules/RouteUtils.js    | 11 -----------
 modules/RouteView.js     | 13 +------------
 modules/RouterContext.js | 10 ----------
 modules/TabsRouteView.js | 39 +++------------------------------------
 5 files changed, 5 insertions(+), 83 deletions(-)

diff --git a/modules/RootWrapper.js b/modules/RootWrapper.js
index 590f18b..64fd699 100644
--- a/modules/RootWrapper.js
+++ b/modules/RootWrapper.js
@@ -93,30 +93,17 @@ class RootWrapper extends Component<any, Props, any> {
 
     const { routeViewComponent, props: routeViewComponentProps } = navigationTree;
 
-    console.log('RouterNative.RootWrapper.renderNavigation');
-    console.log('RouterNative.RootWrapper.renderNavigation.props', this.props);
-    console.log('RouterNative.RootWrapper.renderNavigation.routeViewComponent', routeViewComponent);
-    console.log('RouterNative.RootWrapper.renderNavigation.routeViewComponentProps', routeViewComponentProps);
-    console.log('RouterNative.RootWrapper.renderNavigation.createElement(routeViewComponent)');
-    console.log('RouterNative.RootWrapper.renderNavigation.createElement.props', {
-      ...routeViewComponentProps,
-      navigationState,
-    });
-    const element = React.createElement(
+    return React.createElement(
       routeViewComponent,
       {
         ...routeViewComponentProps,
         navigationState,
       }
     );
-    console.log('RouterNative.RootWrapper.renderNavigation.createElement.return', element);
-    return element;
   }
 
   render(): ReactElement {
     const { navigationState, addressBar: isShown, location } = this.props;
-    console.log('RouterNative.RootWrapper.render');
-    console.log('RouterNative.RootWrapper.render.props', this.props);
 
     // TODO react-native does not accept `-reverse` values for `flex-direction`. We need to render
     // <AddressBar /> after navigational components to keep it on top. See
diff --git a/modules/RouteUtils.js b/modules/RouteUtils.js
index 57974cc..a2b1e5b 100644
--- a/modules/RouteUtils.js
+++ b/modules/RouteUtils.js
@@ -70,10 +70,6 @@ function createNavigationTree(
   route: RouteDef,
   positionInParent: number
 ): ?PseudoElement {
-  console.log('RouterNative.RouteUtils.createNavigationTree');
-  // console.log('createElement', createElement);
-  console.log('RouterNative.RouteUtils.createNavigationTree.route', route);
-  console.log('RouterNative.RouteUtils.createNavigationTree.positionInParent', positionInParent);
   const {
     childRoutes,
     component,
@@ -129,9 +125,6 @@ function createNavigationTree(
     }
   }
 
-  console.log(`RouterNative.RouteUtils.createNavigationTree.createElement(${routeType})`);
-  console.log('RouterNative.RouteUtils.createNavigationTree.createElement.props', props);
-
   let pseudoElement;
   if (routeType === STACK_ROUTE) {
     pseudoElement = { routeViewComponent: StackRouteView, props };
@@ -148,11 +141,7 @@ export function createNavigation(
   createElement: ElementProvider,
   routes: Array<RouteDef>
 ): ?PseudoElement {
-  console.log('RouterNative.RouteUtils.createNavigation');
   const rootRoute = routes && routes.length && routes[0];
-  console.log('RouterNative.RouteUtils.createNavigation.rootRoute', rootRoute);
-  console.log('RouterNative.RouteUtils.createNavigation.routes', routes);
-
   if (!rootRoute) {
     return null;
   }
diff --git a/modules/RouteView.js b/modules/RouteView.js
index 0c09c71..a1b613b 100644
--- a/modules/RouteView.js
+++ b/modules/RouteView.js
@@ -47,12 +47,9 @@ class RouteView extends Component<any, Props, any> {
   }
 
   renderScene(props: NavigationSceneRendererProps): ?ReactElement {
-    console.log('RouterNative.RouteView.renderScene');
-    console.log('RouterNative.RouteView.renderScene.props', props);
     const { scene } = props;
 
     const { navigationSubtree } = this.props;
-    console.log('RouterNative.RouteView.renderScene.this.props', this.props);
 
     if (!scene.route || !navigationSubtree) {
       return null;
@@ -61,7 +58,6 @@ class RouteView extends Component<any, Props, any> {
     const pseudoElement = navigationSubtree.find(
       child => child.props.path === scene.route.path
     );
-    console.log(navigationSubtree, scene, pseudoElement);
 
     if (!pseudoElement) {
       warnOutOfSync('Cannot render scene', scene.route.path);
@@ -104,8 +100,6 @@ class RouteView extends Component<any, Props, any> {
       component,
       createElement,
     } = this.props;
-    console.log('RouterNative.RouteView.render');
-    console.log('RouterNative.RouteView.render.props', this.props);
 
     const {
       routes,
@@ -129,8 +123,6 @@ class RouteView extends Component<any, Props, any> {
       transitioner = React.createElement(NavigationTransitioner, transitionerProps);
     }
 
-    console.log('RouterNative.RouteView.render.transitioner', transitioner);
-    console.log('RouterNative.RouteView.render.component', component);
     const componentProps = {
       ...this.getComponentProps(this.props),
       params,
@@ -138,11 +130,8 @@ class RouteView extends Component<any, Props, any> {
       location,
       children: transitioner,
     };
-    console.log('RouterNative.RouteView.render.component.props', componentProps);
 
-    const element = createElement(component, componentProps);
-    console.log('RouterNative.RouteView.render.return', element);
-    return element;
+    return createElement(component, componentProps);
   }
 }
 
diff --git a/modules/RouterContext.js b/modules/RouterContext.js
index 7fccdfc..0ba927a 100644
--- a/modules/RouterContext.js
+++ b/modules/RouterContext.js
@@ -74,10 +74,8 @@ class RouterContext extends Component<any, any, any> {
   };
 
   constructor(props: Props) {
-    console.log('new RouterNative.RouterContext');
     super(props);
     const { routes, location, params } = props;
-    console.log('RouterNative.RouterContext.props', props);
     const nextNavigationState = createState(routes, location, params);
     const action: NavigationAction = {
       type: LOCATION_CHANGE,
@@ -87,13 +85,11 @@ class RouterContext extends Component<any, any, any> {
       nextNavigationState,
     };
     const navigationState = reducer(null, action);
-    console.log('RouterNative.RouterContext.navigationState', navigationState);
 
     (this: any).createElement = this.createElement.bind(this);
 
     const navigationTree = createNavigation(this.createElement, routes);
 
-    console.log('RouterNative.RouterContext.navigationTree', navigationTree);
     this.state = { navigationState, navigationTree };
     backwardHistory.push(navigationState);
   }
@@ -283,8 +279,6 @@ class RouterContext extends Component<any, any, any> {
   }
 
   render(): ?ReactElement {
-    console.log('RouterNative.RouterContext.render');
-    console.log('RouterNative.RouterContext.render.props', this.props);
     const { location, addressBar } = this.props;
 
     const navigationTree = this.state.navigationTree;
@@ -300,8 +294,6 @@ class RouterContext extends Component<any, any, any> {
         route: {}, // TODO
         routes: this.props.routes,
       };
-      console.log('RouterNative.RouterContext.render.createElement(RootWrapper)');
-      console.log('RouterNative.RouterContext.render.createElement.props', props);
 
       element = React.createElement(RootWrapper, props);
     }
@@ -311,8 +303,6 @@ class RouterContext extends Component<any, any, any> {
       'The root route must render a single element'
     );
 
-    console.log('RouterNative.RouterContext.render.element', element);
-
     return element;
   }
 }
diff --git a/modules/TabsRouteView.js b/modules/TabsRouteView.js
index f147d26..0f9464a 100644
--- a/modules/TabsRouteView.js
+++ b/modules/TabsRouteView.js
@@ -60,18 +60,11 @@ class TabsRouteView extends Component<any, Props, any> {
       return null;
     }
 
-    console.log('RouterNative.TabsRouteView.renderOverlay');
-    console.log('RouterNative.TabsRouteView.renderOverlay.navigationSubtree', navigationSubtree);
-    console.log('RouterNative.TabsRouteView.renderOverlay.scene', scene);
-    console.log('RouterNative.TabsRouteView.renderOverlay.props', props);
-
     const navigationalElement = navigationSubtree.find(
       child => child.props.path === scene.route.path
     );
-    console.log('RouterNative.TabsRouteView.renderOverlay.navigationalElement', navigationalElement);
 
     if (!navigationalElement) {
-      console.error(new Error('out of sync').stack);
       warnOutOfSync('Cannot render overlay', scene.route.path);
     }
 
@@ -85,19 +78,14 @@ class TabsRouteView extends Component<any, Props, any> {
         params,
         routeParams,
       };
-      console.log('RouterNative.TabsRouteView.renderOverlay.createElement', overlayComponent);
-      console.log('RouterNative.TabsRouteView.renderOverlay.createElement.props', overlayComponentProps);
 
       return createElement(overlayComponent, overlayComponentProps);
-      console.log('RouterNative.TabsRouteView.renderOverlay.createElement.return');
     }
 
     return null;
   }
 
   renderScene(props: NavigationSceneRendererProps): ?ReactElement {
-    console.log('RouterNative.TabsRouteView.renderScene');
-    console.log('RouterNative.TabsRouteView.renderScene.props', props);
     const { scene } = props;
 
     if (!scene.route) {
@@ -124,21 +112,14 @@ class TabsRouteView extends Component<any, Props, any> {
       ...props,
       renderScene: this.renderCardScene,
     };
-    console.log('RouterNative.TabsRouteView.renderScene.key', scene.route.key);
 
-    const element = React.createElement(NavigationCard, navigationCardProps);
-    console.log('RouterNative.TabsRouteView.renderScene.return', element);
-    return element;
+    return React.createElement(NavigationCard, navigationCardProps);
   }
 
   renderCardScene(props: NavigationSceneRendererProps): ?ReactElement {
-    console.log('RouterNative.TabsRouteView.renderCardScene');
-    console.log('RouterNative.TabsRouteView.renderCardScene.props', props);
     const { scene } = props;
 
     const { navigationSubtree } = this.props;
-    console.log('RouterNative.TabsRouteView.renderCardScene.scene', scene);
-
     if (!navigationSubtree) {
       return null;
     }
@@ -146,25 +127,20 @@ class TabsRouteView extends Component<any, Props, any> {
     const pseudoElement = navigationSubtree.find(
       child => child.props.path === scene.route.path
     );
-    console.log('RouterNative.TabsRouteView.renderCardScene.pseudoElement', pseudoElement);
 
     if (!pseudoElement) {
       warnOutOfSync('Cannot render card', scene.route.path);
     }
-    console.log('RouterNative.TabsRouteView.renderCardScene.cloneElement', pseudoElement);
-    console.log('RouterNative.TabsRouteView.renderCardScene.cloneElement.props', { navigationState: scene.route });
 
     const { routeViewComponent, props: routeViewComponentProps } = pseudoElement;
 
-    const element = React.createElement(
+    return React.createElement(
       routeViewComponent,
       {
         ...routeViewComponentProps,
         navigationState: scene.route,
       }
     );
-    console.log('RouterNative.TabsRouteView.renderCardScene.cloneElement.return', element);
-    return element;
   }
 
   getComponentProps(props) {
@@ -191,8 +167,6 @@ class TabsRouteView extends Component<any, Props, any> {
       createElement,
     } = this.props;
 
-    console.log('RouterNative.TabsRouteView.render');
-    console.log('RouterNative.TabsRouteView.render.props', this.props);
     const {
       routes,
       params,
@@ -222,9 +196,6 @@ class TabsRouteView extends Component<any, Props, any> {
       transitioner = React.createElement(NavigationTransitioner, transitionerProps);
     }
 
-    console.log('RouterNative.TabsRouteView.render.transitioner', transitioner);
-
-    console.log('RouterNative.TabsRouteView.render.component', component);
     const componentProps = {
       ...this.getComponentProps(this.props),
       params,
@@ -232,13 +203,9 @@ class TabsRouteView extends Component<any, Props, any> {
       location,
       children: transitioner,
     };
-    console.log('RouterNative.TabsRouteView.render.component.props', componentProps);
 
-    const element = createElement(component, componentProps);
-    console.log('RouterNative.TabsRouteView.render.return', element);
-    return element;
+    return createElement(component, componentProps);
   }
-
 }
 
 export default withOnNavigate(TabsRouteView);

From df268895e44a8b9f111f42d6f4690e6a00414202 Mon Sep 17 00:00:00 2001
From: Joon Ho Cho <joonho1101@gmail.com>
Date: Fri, 17 Jun 2016 21:08:16 -0700
Subject: [PATCH 4/6] fix lint

---
 modules/RouteView.js      | 2 +-
 modules/StackRouteView.js | 2 +-
 modules/TabsRouteView.js  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/RouteView.js b/modules/RouteView.js
index a1b613b..700fc6d 100644
--- a/modules/RouteView.js
+++ b/modules/RouteView.js
@@ -77,7 +77,7 @@ class RouteView extends Component<any, Props, any> {
     );
   }
 
-  getComponentProps(props) {
+  getComponentProps(props: Object): Object {
     const {
       path,
       type,
diff --git a/modules/StackRouteView.js b/modules/StackRouteView.js
index 7c4b4b3..cd9a7d4 100644
--- a/modules/StackRouteView.js
+++ b/modules/StackRouteView.js
@@ -144,7 +144,7 @@ class StackRouteView extends Component<any, Props, any> {
     );
   }
 
-  getComponentProps(props) {
+  getComponentProps(props: Object): Object {
     const {
       path,
       type,
diff --git a/modules/TabsRouteView.js b/modules/TabsRouteView.js
index 0f9464a..14cb3dc 100644
--- a/modules/TabsRouteView.js
+++ b/modules/TabsRouteView.js
@@ -143,7 +143,7 @@ class TabsRouteView extends Component<any, Props, any> {
     );
   }
 
-  getComponentProps(props) {
+  getComponentProps(props: Object): Object {
     const {
       path,
       type,

From 67266ca80ec3b403c211d985e6537a2b62252e6d Mon Sep 17 00:00:00 2001
From: Joon Ho Cho <joonho1101@gmail.com>
Date: Sat, 9 Jul 2016 03:28:02 -0700
Subject: [PATCH 5/6] apply middleware

---
 modules/applyRouterMiddleware.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/modules/applyRouterMiddleware.js b/modules/applyRouterMiddleware.js
index cfe10bd..d08f364 100644
--- a/modules/applyRouterMiddleware.js
+++ b/modules/applyRouterMiddleware.js
@@ -5,12 +5,12 @@
  * https://github.com/reactjs/react-router/blob/master/LICENSE.md
  */
 
-import React, { createElement } from 'react';
-import RouterContext from './RouterContext';
+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 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(
@@ -19,19 +19,19 @@ export default (...middlewares) => {
         ), baseCreateElement(Component, props)
       )
     )
-  );
+  )
 
-  return (routeDefinition) => (renderProps) => (
+  return (renderProps) => (
     withContext.reduceRight(
       (previous, renderRouterContext) => (
         renderRouterContext(previous, renderProps)
       ), (
-      <RouterContext
-        {...renderProps}
-        allRoutes={routeDefinition}
-        createElement={makeCreateElement(renderProps.createElement)}
-      />
+        <RouterContext
+          {...renderProps}
+          createElement={makeCreateElement(renderProps.createElement)}
+        />
       )
     )
-  );
-};
+  )
+}
+

From 323c85634fb08cb3b4c29bb203f1dbaf6f0f9f25 Mon Sep 17 00:00:00 2001
From: Joon Ho Cho <joonho1101@gmail.com>
Date: Sat, 9 Jul 2016 03:30:34 -0700
Subject: [PATCH 6/6] apply middleware

---
 modules/applyRouterMiddleware.js | 14 +++++++-------
 modules/index.js                 |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/modules/applyRouterMiddleware.js b/modules/applyRouterMiddleware.js
index d08f364..bd21650 100644
--- a/modules/applyRouterMiddleware.js
+++ b/modules/applyRouterMiddleware.js
@@ -5,12 +5,12 @@
  * https://github.com/reactjs/react-router/blob/master/LICENSE.md
  */
 
-import React, { createElement } from 'react'
-import RouterContext from './RouterContext'
+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 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(
@@ -19,7 +19,7 @@ export default (...middlewares) => {
         ), baseCreateElement(Component, props)
       )
     )
-  )
+  );
 
   return (renderProps) => (
     withContext.reduceRight(
@@ -32,6 +32,6 @@ export default (...middlewares) => {
         />
       )
     )
-  )
-}
+  );
+};
 
diff --git a/modules/index.js b/modules/index.js
index 74253aa..d19ddf2 100644
--- a/modules/index.js
+++ b/modules/index.js
@@ -21,11 +21,11 @@ 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 applyRouterMiddleware from './applyRouterMiddleware';
 import nativeHistory from './nativeHistory';
 
-export { applyRouterMiddleware, nativeHistory };
+export { nativeHistory };