Cleans up project, removing unneeded/unused code.

Refactors SSR state rehydration. It is now your responsibility to return and bind it to the client rendered `AsyncComponentsProvider`, via the `initialState` prop.

Author: ctrlplusb

src/AsyncComponentProvider.js

@@ -3,10 +3,9 @@ import React from 'react'
 import createContext from './createContext'
 
 class AsyncComponentProvider extends React.Component {
-  constructor(props, context) {
-    super(props, context)
-
-    this.execContext = props.execContext || createContext()
+  componentWillMount() {
+    this.execContext = this.props.execContext || createContext()
+    this.rehydrateState = this.props.initialState
   }
 
   getChildContext() {
@@ -17,6 +16,17 @@ class AsyncComponentProvider extends React.Component {
         getComponent: this.execContext.getComponent,
         registerError: this.execContext.registerError,
         getError: this.execContext.getError,
+        getRehydrate: (id) => {
+          const error = this.rehydrateState.errors[id]
+          const resolved = this.rehydrateState.resolved[id]
+          delete this.rehydrateState.errors[id]
+          delete this.rehydrateState.resolved[id]
+          return {
+            // eslint-disable-next-line no-nested-ternary
+            type: error ? 'error' : resolved ? 'resolved' : 'unresolved',
+            error,
+          }
+        },
       },
     }
   }
@@ -35,10 +45,18 @@ AsyncComponentProvider.propTypes = {
     registerError: React.PropTypes.func.isRequired,
     getError: React.PropTypes.func.isRequired,
   }),
+  initialState: React.PropTypes.shape({
+    resolved: React.PropTypes.object,
+    errors: React.PropTypes.object,
+  }),
 }
 
 AsyncComponentProvider.defaultProps = {
   execContext: undefined,
+  initialState: {
+    resolved: {},
+    errors: {},
+  },
 }
 
 AsyncComponentProvider.childContextTypes = {
@@ -48,6 +66,7 @@ AsyncComponentProvider.childContextTypes = {
     getComponent: React.PropTypes.func.isRequired,
     registerError: React.PropTypes.func.isRequired,
     getError: React.PropTypes.func.isRequired,
+    getRehydrate: React.PropTypes.func.isRequired,
   }).isRequired,
 }
 

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

@@ -27,6 +27,12 @@ exports[`integration tests render server and client 3`] = `
       "registerError": [Function],
     }
   }
+  initialState={
+    Object {
+      "errors": Object {},
+      "resolved": Object {},
+    }
+  }
 >
   <AsyncBob>
     <Bob>
@@ -86,6 +92,12 @@ exports[`integration tests render server and client 4`] = `
       "registerError": [Function],
     }
   }
+  initialState={
+    Object {
+      "errors": Object {},
+      "resolved": Object {},
+    }
+  }
 >
   <AsyncBob>
     <Bob>
@@ -155,6 +167,12 @@ exports[`integration tests renders the ErrorComponent 1`] = `
       "registerError": [Function],
     }
   }
+  initialState={
+    Object {
+      "errors": Object {},
+      "resolved": Object {},
+    }
+  }
 >
   <AsyncComponent>
     <ErrorComponent
@@ -180,6 +198,12 @@ exports[`integration tests renders the LoadingComponent 1`] = `
       "registerError": [Function],
     }
   }
+  initialState={
+    Object {
+      "errors": Object {},
+      "resolved": Object {},
+    }
+  }
 >
   <AsyncComponent>
     <LoadingComponent>

src/__tests__/integration.test.js

@@ -7,7 +7,6 @@ import {
   createContext,
   createAsyncComponent,
   asyncBootstrapper,
-  STATE_IDENTIFIER,
 } from '../'
 
 function Bob({ children }) {
@@ -54,8 +53,11 @@ const ErrorAsyncComponent = createAsyncComponent({
   ErrorComponent: ({ message }) => <div>{message}</div>,
 })
 
-const createApp = execContext => (
-  <AsyncComponentProvider execContext={execContext}>
+const createApp = (execContext, stateForClient) => (
+  <AsyncComponentProvider
+    execContext={execContext}
+    initialState={stateForClient}
+  >
     <AsyncBob>
       <div>
         <AsyncBobTwo>
@@ -79,13 +81,9 @@ const createApp = execContext => (
 )
 
 describe('integration tests', () => {
-  afterEach(() => {
-    delete global.window[STATE_IDENTIFIER]
-  })
-
   it('render server and client', () => {
-    const windowTemp = global.window
     // we have to delete the window to emulate a server only environment
+    const windowTemp = global.window
     delete global.window
 
     // "Server" side render...
@@ -95,17 +93,17 @@ describe('integration tests', () => {
       .then(() => {
         const serverString = renderToStaticMarkup(serverApp)
         expect(serverString).toMatchSnapshot()
-        expect(serverContext.getState()).toMatchSnapshot()
+        const stateForClient = serverContext.getState()
+        expect(stateForClient).toMatchSnapshot()
         // Restore the window and attach the state to the "window" for the
         // client
         global.window = windowTemp
-        global.window[STATE_IDENTIFIER] = serverContext.getState()
-        return serverString
+        return { serverHTML: serverString, stateForClient }
       })
-      .then((serverHTML) => {
+      .then(({ serverHTML, stateForClient }) => {
         // "Client" side render...
         const clientContext = createContext()
-        const clientApp = createApp(clientContext)
+        const clientApp = createApp(clientContext, stateForClient)
         return (
           asyncBootstrapper(clientApp)
             .then(() => {

src/constants.js

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import { STATE_IDENTIFIER } from './constants'
-
 const validSSRModes = ['render', 'defer', 'boundary']
 
 function createAsyncComponent(args) {
@@ -72,29 +70,34 @@ function createAsyncComponent(args) {
       }
     }
 
+    // @see react-async-bootstrapper
     asyncBootstrapperTarget() {
       const { asyncComponents } = this.context
-      const { registerError } = asyncComponents
+      const {
+        registerError,
+        getRehydrate,
+      } = asyncComponents
+
+      const doResolve = () =>
+        this.resolveComponent().then(
+          Component => typeof Component === 'function',
+        )
 
       if (typeof window !== 'undefined') {
-        // Browser based logic
-        if (window[STATE_IDENTIFIER]) {
-          if (window[STATE_IDENTIFIER].errors[id]) {
-            registerError(id, window[STATE_IDENTIFIER].errors[id])
-          } else if (window[STATE_IDENTIFIER].resolved[id]) {
-            return this.resolveComponent().then((Component) => {
-              if (typeof Component === 'function') {
-                delete window[STATE_IDENTIFIER].resolved[id]
-                return true
-              }
-              return false
-            })
-          }
+        // BROWSER BASED LOGIC
+
+        const { type, error } = getRehydrate(id)
+        if (type === 'unresolved') {
+          return false
         }
-        return false
+        if (type === 'error') {
+          registerError(id, error)
+          return false
+        }
+        return doResolve()
       }
 
-      // Node based logic
+      // NODE BASED LOGIC
 
       const { asyncComponentsAncestor } = this.context
       const isChildOfBoundary = asyncComponentsAncestor &&
@@ -104,9 +107,7 @@ function createAsyncComponent(args) {
         return false
       }
 
-      return this.resolveComponent().then(
-        Component => typeof Component === 'function',
-      )
+      return doResolve()
     }
 
     resolveComponent() {

src/createAsyncComponent.js

@@ -1,4 +1,4 @@
-export default function createExecContext() {
+export default function createContext() {
   let idPointer = 0
   const registry = {}
   const errorRegistry = {}

src/createContext.js

@@ -2,12 +2,10 @@ import asyncBootstrapper from 'react-async-bootstrapper'
 import AsyncComponentProvider from './AsyncComponentProvider'
 import createContext from './createContext'
 import createAsyncComponent from './createAsyncComponent'
-import { STATE_IDENTIFIER } from './constants'
 
 export {
   AsyncComponentProvider,
   createContext,
   createAsyncComponent,
-  STATE_IDENTIFIER,
   asyncBootstrapper,
 }