add <Miss> support for <ServerRouter> 😓

So basically you do a two pass render, JavaScript will explain it better
than English so here’s the gist of it:

```jsx
const context = createServerRenderContext()

let html = renderToString(<ServerRouter context={context}/>)

const result = context.getResult()

if (result.missed) {
  // do it again
  html = renderToString(<ServerRouter context={context}/>)
}

res.send(result.missed ? 404 : 200, html)
```

Hopefully one day we’ll have `componentDidServerRender` and we’ll be
able to clean this up a bit.

Author: ryanflorence

modules/Match.js

@@ -9,10 +9,11 @@ class RegisterMatch extends React.Component {
   }
 
   static contextTypes = {
-    match: PropTypes.object
+    match: PropTypes.object,
+    serverRouter: PropTypes.object
   }
 
-  componentDidMount() {
+  registerMatch() {
     const { match:matchContext } = this.context
     const { match } = this.props
 
@@ -21,6 +22,18 @@ class RegisterMatch extends React.Component {
     }
   }
 
+  componentWillMount() {
+    if (this.context.serverRouter) {
+      this.registerMatch()
+    }
+  }
+
+  componentDidMount() {
+    if (!this.context.serverRouter) {
+      this.registerMatch()
+    }
+  }
+
   componentDidUpdate(prevProps) {
     const { match } = this.context
 

modules/MatchProvider.js

@@ -13,18 +13,25 @@ class MatchProvider extends React.Component {
     match: matchContextType.isRequired
   }
 
+  static contextTypes = {
+    serverRouter: PropTypes.object
+  }
+
   constructor(props) {
     super(props)
     this.parent = props.match
     // React doesn't support a parent calling `setState` from an descendant's
     // componentWillMount, so we use an instance property to track matches
+    // **IMPORTANT** we must mutate matches, never reassign, in order for
+    // server rendering to work
     this.matches = []
     this.subscribers = []
     this.hasMatches = null // use null for initial value
+    this.serverRouterIndex = null
   }
 
   addMatch = match => {
-    this.matches = this.matches.concat([match])
+    this.matches.push(match)
   }
 
   removeMatch = match => {
@@ -36,17 +43,15 @@ class MatchProvider extends React.Component {
       match: {
         addMatch: this.addMatch,
         removeMatch: this.removeMatch,
-
-        parent: this.parent,
         matches: this.matches,
-
+        parent: this.parent,
+        serverRouterIndex: this.serverRouterIndex,
         subscribe: (fn) => {
           this.subscribers.push(fn)
           return () => {
             this.subscribers.splice(this.subscribers.indexOf(fn), 1)
           }
         }
-
       }
     }
   }
@@ -55,6 +60,14 @@ class MatchProvider extends React.Component {
     this.notifySubscribers()
   }
 
+  componentWillMount() {
+    const { serverRouter } = this.context
+    if (serverRouter) {
+      this.serverRouterIndex =
+        serverRouter.registerMatchContext(this.matches)
+    }
+  }
+
   componentDidMount() {
     this.notifySubscribers()
   }

modules/Miss.js

@@ -15,19 +15,28 @@ class Miss extends React.Component {
     serverRouter: PropTypes.object
   }
 
-  state = {
-    noMatchesInContext: false
-  }
 
-  componentWillMount() {
+  constructor(props, context) {
+    super(props, context)
+
     // ignore if rendered out of context (probably for unit tests)
-    if (this.context.match) {
+    if (context.match && !context.serverRouter) {
       this.unsubscribe = this.context.match.subscribe((matchesFound) => {
         this.setState({
           noMatchesInContext: !matchesFound
         })
       })
     }
+
+    if (context.serverRouter) {
+      context.serverRouter.registerMissPresence(
+        context.match.serverRouterIndex
+      )
+    }
+
+    this.state = {
+      noMatchesInContext: false
+    }
   }
 
   componentWillUnmount() {
@@ -41,7 +50,10 @@ class Miss extends React.Component {
     const { noMatchesInContext } = this.state
     const { location:locationProp } = this.props
     const location = locationProp || this.context.location
-    if (noMatchesInContext) {
+    const { serverRouter, match } = this.context
+    const noMatchesOnServerContext = serverRouter &&
+      serverRouter.missedAtIndex(match.serverRouterIndex)
+    if (noMatchesInContext || noMatchesOnServerContext) {
       return (
         render ? (
           render({ location })

modules/Redirect.js

@@ -13,11 +13,11 @@ class Redirect extends React.Component {
 
   static contextTypes = {
     router: routerType,
-    serverResult: PropTypes.object
+    serverRouter: PropTypes.object
   }
 
   componentWillMount() {
-    if (this.context.serverResult)
+    if (this.context.serverRouter)
       this.redirect()
   }
 

modules/ServerRouter.js

@@ -1,34 +1,31 @@
 import React, { PropTypes } from 'react'
 import StaticRouter from './StaticRouter'
-import { location as locationType } from './PropTypes'
 
 class ServerRouter extends React.Component {
 
   static propTypes = {
-    result: PropTypes.object,
-    location: locationType,
+    context: PropTypes.object.isRequired,
+    location: PropTypes.string.isRequired,
     children: PropTypes.oneOfType([
       PropTypes.func,
       PropTypes.node
     ])
   }
 
   static childContextTypes = {
-    serverResult: PropTypes.object.isRequired
+    serverRouter: PropTypes.object.isRequired
   }
 
   getChildContext() {
     return {
-      serverResult: this.props.result
+      serverRouter: this.props.context
     }
   }
 
   render() {
-    const { result, ...rest } = this.props
-    const redirect = (location, state) => {
-      if (!result.redirect) {
-        result.redirect = { location, state }
-      }
+    const { context, ...rest } = this.props
+    const redirect = (location) => {
+      context.setRedirect(location)
     }
     return (
       <StaticRouter

modules/StaticRouter.js

@@ -19,7 +19,7 @@ class StaticRouter extends React.Component {
     blockTransitions: PropTypes.func,
     children: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
     createHref: PropTypes.func.isRequired,
-    location: PropTypes.oneOfType([ locationType, PropTypes.string ]).isRequired,
+    location: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]).isRequired,
     onPush: PropTypes.func.isRequired,
     onReplace: PropTypes.func.isRequired,
     stringifyQuery: PropTypes.func.isRequired,
@@ -38,31 +38,28 @@ class StaticRouter extends React.Component {
     location: locationType.isRequired
   }
 
+  createLocationForContext(loc) {
+    const { parseQuery, stringifyQuery } = this.props
+    return createRouterLocation(loc, parseQuery, stringifyQuery)
+  }
+
   getChildContext() {
     const createHref = (to) => {
       const path = createRouterPath(to, this.props.stringifyQuery)
       return this.props.createHref(path)
     }
 
-    const getPathAndState = (loc) => {
-      const path = createHref(loc)
-      const state = typeof loc === 'object' ? loc.state : null
-      return { path, state }
-    }
-
     const location = this.getLocation()
 
     return {
       location,
       router: {
         createHref,
         transitionTo: (loc) => {
-          const { path, state } = getPathAndState(loc)
-          this.props.onPush(path, state)
+          this.props.onPush(this.createLocationForContext(loc))
         },
         replaceWith: (loc) => {
-          const { path, state } = getPathAndState(loc)
-          this.props.onReplace(path, state)
+          this.props.onReplace(this.createLocationForContext(loc))
         },
         blockTransitions: (getPromptMessage) => {
           this.props.blockTransitions(getPromptMessage)
@@ -86,7 +83,7 @@ class StaticRouter extends React.Component {
         {typeof children === 'function' ? (
           children({ location, router: this.getChildContext().router })
         ) : React.Children.count(children) > 1 ? (
-          // #TODO get rid of all DOM stuff
+          // TODO: get rid of all DOM stuff
           <div>{children}</div>
         ) : (
           children

modules/__tests__/ServerRouter-test.js

@@ -1,18 +1,20 @@
 import expect from 'expect'
 import React from 'react'
 import ServerRouter from '../ServerRouter'
+import createServerRenderContext from '../createServerRenderContext'
 import Redirect from '../Redirect'
+import Match from '../Match'
 import Miss from '../Miss'
 import { renderToString } from 'react-dom/server'
 
 describe('ServerRouter', () => {
 
   it('puts redirects on server render result', () => {
-    const result = {}
+    const context = createServerRenderContext()
 
     renderToString(
       <ServerRouter
-        result={result}
+        context={context}
         location="/"
       >
         <Redirect to={{
@@ -21,47 +23,59 @@ describe('ServerRouter', () => {
         }}/>
       </ServerRouter>
     )
-    expect(result).toEqual({
-      redirect: {
-        location: '/somewhere-else',
-        state: { status: 302 }
-      }
+    expect(context.getResult().redirect).toEqual({
+      pathname: '/somewhere-else',
+      state: { status: 302 },
+      query: null,
+      search: '',
+      hash: ''
     })
   })
 
-  it.skip('puts misses on server render result', () => {
-    const result = {}
-
-    renderToString(
-      <ServerRouter
-        result={result}
-        location="/anywhere"
-      >
-        <Miss render={() => (
-          <div>hi</div>
+  it('renders misses on second pass with server render context result', (done) => {
+    const NO = 'NO'
+    const YES1 = 'YES1'
+    const YES2 = 'YES2'
+    const location = '/nowhere'
+    const App = () => (
+      <div>
+        <Match pattern="/" render={() => (
+          <div>
+            <Miss render={() => (
+              <div>{YES1}</div>
+            )}/>
+            <Miss render={() => (
+              <div>{YES2}</div>
+            )}/>
+          </div>
         )}/>
-      </ServerRouter>
+        <Miss render={() => <div>{NO}</div>}/>
+      </div>
     )
-    expect(result).toEqual({
-      misses: [ 0, 2 ]
-    })
-  })
 
-  it.skip('renders misses from server result', () => {
-    const result = { misses: [ 0 ] }
+    const context = createServerRenderContext()
 
-    const markup = renderToString(
-      <ServerRouter
-        result={result}
-        location="/anywhere"
-      >
-        <Miss render={() => (
-          <div>test</div>
-        )}/>
+    renderToString(
+      <ServerRouter context={context} location={location}>
+        <App/>
       </ServerRouter>
     )
 
-    expect(markup).toContain('test')
+    const result = context.getResult()
+    expect(result.missed).toBe(true)
+
+    if (result.missed) {
+      const markup = renderToString(
+        <ServerRouter context={context} location={location}>
+          <App/>
+        </ServerRouter>
+      )
+
+      expect(markup).toContain(YES1)
+      expect(markup).toContain(YES2)
+      expect(markup).toNotContain(NO)
+      done()
+    }
   })
 
 })