Rips out the AsyncComponentProvider in prep for more flexibility.

Author: ctrlplusb

src/AsyncComponentProvider.js

@@ -3,21 +3,30 @@
 import React from 'react'
 import type { ExecContext, ProviderChildContext } from './types'
 
+import createContext from './createContext'
+
 type Props = {
   // eslint-disable-next-line
   children?: any,
-  execContext: ExecContext,
+  execContext?: ExecContext,
 };
 
 class AsyncComponentProvider extends React.Component {
   props: Props
+  execContext: ExecContext
+
+  constructor(props : Props, context : Object) {
+    super(props, context)
+
+    this.execContext = props.execContext || createContext()
+  }
 
   getChildContext() : ProviderChildContext {
     return {
       asyncComponents: {
-        getNextId: this.props.execContext.getNextId,
-        getComponent: this.props.execContext.getComponent,
-        registerComponent: this.props.execContext.registerComponent,
+        getNextId: this.execContext.getNextId,
+        getComponent: this.execContext.getComponent,
+        registerComponent: this.execContext.registerComponent,
       },
     }
   }
@@ -33,7 +42,11 @@ AsyncComponentProvider.propTypes = {
     getNextId: React.PropTypes.func.isRequired,
     getComponent: React.PropTypes.func.isRequired,
     registerComponent: React.PropTypes.func.isRequired,
-  }).isRequired,
+  }),
+}
+
+AsyncComponentProvider.defaultProps = {
+  execContext: undefined,
 }
 
 AsyncComponentProvider.childContextTypes = {

src/__tests__/__snapshots__/integration.test.js.snap

@@ -18,7 +18,7 @@ exports[`integration tests render server and client 3`] = `
     Object {
       "getComponent": [Function],
       "getNextId": [Function],
-      "getResolved": [Function],
+      "getState": [Function],
       "registerComponent": [Function],
     }
   }
@@ -60,7 +60,7 @@ exports[`integration tests render server and client 4`] = `
     Object {
       "getComponent": [Function],
       "getNextId": [Function],
-      "getResolved": [Function],
+      "getState": [Function],
       "registerComponent": [Function],
     }
   }

src/__tests__/integration.test.js

@@ -4,8 +4,13 @@ import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { mount } from 'enzyme'
 
-import { createAsyncComponent, withAsyncComponents } from '../'
-import { STATE_IDENTIFIER } from '../constants'
+import {
+  AsyncComponentProvider,
+  createContext,
+  createAsyncComponent,
+  withAsyncComponents,
+  STATE_IDENTIFIER,
+} from '../'
 
 function Bob({ children }) {
   return (<div>{children}</div>)
@@ -40,23 +45,25 @@ const BoundaryAsyncBob = createAsyncComponent({
   name: 'BoundaryAsyncBob',
 })
 
-const app = (
-  <AsyncBob>
-    <div>
-      <AsyncBobTwo>
-        <span>In Render.</span>
-      </AsyncBobTwo>
-      <DeferredAsyncBob>
-        <span>In Defer.</span>
-      </DeferredAsyncBob>
-      <BoundaryAsyncBob>
-        <span>In Boundary but outside an AsyncComponent, server render me!</span>
-        <AsyncBobThree>
-          <span>In Boundary - Do not server render me!</span>
-        </AsyncBobThree>
-      </BoundaryAsyncBob>
-    </div>
-  </AsyncBob>
+const app = execContext => (
+  <AsyncComponentProvider execContext={execContext}>
+    <AsyncBob>
+      <div>
+        <AsyncBobTwo>
+          <span>In Render.</span>
+        </AsyncBobTwo>
+        <DeferredAsyncBob>
+          <span>In Defer.</span>
+        </DeferredAsyncBob>
+        <BoundaryAsyncBob>
+          <span>In Boundary but outside an AsyncComponent, server render me!</span>
+          <AsyncBobThree>
+            <span>In Boundary - Do not server render me!</span>
+          </AsyncBobThree>
+        </BoundaryAsyncBob>
+      </div>
+    </AsyncBob>
+  </AsyncComponentProvider>
 )
 
 describe('integration tests', () => {
@@ -70,23 +77,27 @@ describe('integration tests', () => {
     delete global.window
 
     // "Server" side render...
-    return withAsyncComponents(app)
-      .then(({ appWithAsyncComponents, state, STATE_IDENTIFIER: STATE_ID }) => {
-        const serverString = renderToStaticMarkup(appWithAsyncComponents)
+    const serverContext = createContext()
+    const serverApp = app(serverContext)
+    return withAsyncComponents(serverApp)
+      .then(() => {
+        const serverString = renderToStaticMarkup(serverApp)
         expect(serverString).toMatchSnapshot()
-        expect(state).toMatchSnapshot()
+        expect(serverContext.getState()).toMatchSnapshot()
         // Restore the window and attach the state to the "window" for the client
         global.window = windowTemp
-        global.window[STATE_ID] = state
+        global.window[STATE_IDENTIFIER] = serverContext.getState()
         return serverString
       })
-      .then(serverHTML =>
+      .then((serverHTML) => {
         // "Client" side render...
-        withAsyncComponents(app)
-          .then(({ appWithAsyncComponents }) => {
-            const clientRenderWrapper = mount(appWithAsyncComponents)
+        const clientContext = createContext()
+        const clientApp = app(clientContext)
+        return withAsyncComponents(clientApp)
+          .then(() => {
+            const clientRenderWrapper = mount(clientApp)
             expect(clientRenderWrapper).toMatchSnapshot()
-            expect(renderToStaticMarkup(appWithAsyncComponents)).toEqual(serverHTML)
+            expect(renderToStaticMarkup(clientApp)).toEqual(serverHTML)
             return clientRenderWrapper
           })
           // Now give the client side components time to resolve
@@ -96,8 +107,8 @@ describe('integration tests', () => {
           // Now a full render should have occured on client
           .then(clientRenderWrapper =>
             expect(clientRenderWrapper).toMatchSnapshot(),
-          ),
-      )
+          )
+      })
   })
 
   it('a component only gets resolved once', () => {

src/createContext.js

@@ -0,0 +1,24 @@
+export default function createExecContext() {
+  let idPointer = 0
+  const registry = {}
+  return {
+    getNextId: () => {
+      idPointer += 1
+      return idPointer
+    },
+    registerComponent(id, Component) {
+      registry[id] = Component
+    },
+    getComponent(id) {
+      return registry[id]
+    },
+    getState() {
+      return {
+        resolved: Object.keys(registry).reduce(
+          (acc, cur) => Object.assign(acc, { [cur]: true }),
+          {},
+        ),
+      }
+    },
+  }
+}

src/index.js

@@ -1,12 +1,15 @@
 /* @flow */
 
+import AsyncComponentProvider from './AsyncComponentProvider'
+import createContext from './createContext'
 import createAsyncComponent from './createAsyncComponent'
 import withAsyncComponents from './withAsyncComponents'
-
-// create context
-// pass context into createAsyncComponentFactory
+import { STATE_IDENTIFIER } from './constants'
 
 export {
+  AsyncComponentProvider,
+  createContext,
   createAsyncComponent,
   withAsyncComponents,
+  STATE_IDENTIFIER,
 }

src/withAsyncComponents.js

@@ -1,59 +1,18 @@
 /* @flow */
 
-import React from 'react'
 import reactTreeWalker from 'react-tree-walker'
-import AsyncComponentProvider from './AsyncComponentProvider'
 import { STATE_IDENTIFIER } from './constants'
 import type { React$Element } from './types'
 
-function createExecContext() {
-  let idPointer = 0
-  const registry = {}
-  return {
-    getNextId: () => {
-      idPointer += 1
-      return idPointer
-    },
-    registerComponent(id, Component) {
-      registry[id] = Component
-    },
-    getComponent(id) {
-      return registry[id]
-    },
-    getResolved() {
-      return Object.keys(registry).reduce(
-        (acc, cur) => Object.assign(acc, { [cur]: true }),
-        {},
-      )
-    },
-  }
-}
-
-type Result = {
-  appWithAsyncComponents : React$Element,
-  state? : { resolved: Array<number> },
-  STATE_IDENTIFIER? : string,
-}
-
-export default function withAsyncComponents(app : React$Element) : Promise<Result> {
-  const execContext = createExecContext()
-
+export default function withAsyncComponents(app : React$Element) : Promise<any> {
   const isBrowser = typeof window !== 'undefined'
   const rehydrateState = isBrowser
     && typeof window[STATE_IDENTIFIER] !== 'undefined'
     ? window[STATE_IDENTIFIER]
     : null
 
-  const appWithAsyncComponents = (
-    <AsyncComponentProvider execContext={execContext}>
-      {app}
-    </AsyncComponentProvider>
-  )
-
   if (isBrowser && !rehydrateState) {
-    return Promise.resolve({
-      appWithAsyncComponents,
-    })
+    return Promise.resolve()
   }
 
   const visitor = (element, instance, context) => {
@@ -77,14 +36,7 @@ export default function withAsyncComponents(app : React$Element) : Promise<Resul
     return true
   }
 
-  return reactTreeWalker(appWithAsyncComponents, visitor, {})
+  return reactTreeWalker(app, visitor, {})
     // Swallow errors.
     .catch(() => undefined)
-    // Ensure that state rehydration is killed
-    .then(() => { if (typeof window === 'object') { window[STATE_IDENTIFIER] = null } })
-    .then(() => ({
-      appWithAsyncComponents,
-      state: { resolved: execContext.getResolved() },
-      STATE_IDENTIFIER,
-    }))
 }