added applyRouterMiddleware

[ryanflorence]

I'll add some docs in @knowbody's new docs site thing, but here's the quick version:

// end users put the middleware in the `render` prop
<Router render={applyRouterMiddleware(useFoo())}/>

// a middleware returns an object w/ two methods
const useFoo = () => ({
  // this will wrap `RouterContext` to participate in rendering at the top level of
  // the Router rendering tree
  renderRouterContext: (child, renderProps) => (
    <FooRootContainer>{child}</FooRootContainer>
  ),

  // this will wrap the route components when RouterContext renders them
  renderRouteComponent: (child, routeComponentProps) => (
    <FooContainer>{child}</FooContainer>
  )
})

// typically these things just add something to context
const FooRootContainer = React.createClass({
  propTypes: { children: React.PropTypes.node.isRequired },
  childContextTypes: { foo: React.PropTypes.string },
  getChildContext() { return { foo: FOO_ROOT_CONTAINER_TEXT } },
  render() {
    return this.props.children
  }
})

// so that the route component containers or other components anywhere in the tree
// can access it
const FooContainer = React.createClass({
  propTypes: { children: React.PropTypes.node.isRequired },
  contextTypes: { foo: React.PropTypes.string.isRequired },
  render() {
    const { children, ...props } = this.props
    const fooFromContext = this.context.foo
    return cloneElement(children, { ...props, fooFromContext })
  }
})

[taion]

Slightly more optimized to write this as

middlewares.map(m => m.renderRouteComponent).filter(f => f)

and then skip destructuring in the reduce callback below.

[taion]

What do you think of renaming the callbacks to:

• renderRouterContext
• renderRouteComponent

They're not constrained to be containers – e.g. useBaz specifically can just have

renderRouteComponent: child => cloneElement(child, { bazInjected })

[taion]

This should be Feature:, I think.

[ryanflorence]

done

[taion]

LGTM.

[edygar]

So, if I had a custom render previously, I would have to inject the enhanced RouterContext, right? Kind of as following:

const RouterContextFactory = applyRouterMiddleware(useFoo());

<Router
  render={renderProps =>
    <Fetcher {...renderProps}>
      {RouterContextFactory(renderProps)}
    </Fetcher>
  }
/>

[GGAlanSmithee]

@ryanflorence thanks for adding this. Do you know if this ended up being documentet anywhere? Could not find anything in the official docs or in the referenced @knowbody docs. Would you want a PR to either?