Removes hard dependency on react-async-bootstrapper. It is now up to the developer to install it should they wish to support server side rendering.

Updates the documentation.
Refactors the API somewhat.

Author: ctrlplusb

.nvmrc

@@ -1 +1 @@
-6.9.4
+6.10.0

README.md

@@ -56,9 +56,7 @@
     "react": "^0.14.0 || ^15.0.0-0",
     "react-dom": "^0.14.0 || ^15.0.0-0"
   },
-  "dependencies": {
-    "react-async-bootstrapper": "^0.0.2"
-  },
+  "dependencies": {},
   "devDependencies": {
     "app-root-dir": "1.0.2",
     "babel-cli": "6.24.0",
@@ -93,6 +91,7 @@
     "ramda": "0.23.0",
     "react": "15.4.2",
     "react-addons-test-utils": "15.4.2",
+    "react-async-bootstrapper": "0.0.5",
     "react-dom": "15.4.2",
     "readline-sync": "1.4.6",
     "rimraf": "2.6.1",

package.json

@@ -1,21 +1,21 @@
 import React from 'react'
 
-import createContext from './createContext'
+import createAsyncContext from './createAsyncContext'
 
 class AsyncComponentProvider extends React.Component {
   componentWillMount() {
-    this.execContext = this.props.execContext || createContext()
-    this.rehydrateState = this.props.initialState
+    this.asyncContext = this.props.asyncContext || createAsyncContext()
+    this.rehydrateState = this.props.rehydrateState
   }
 
   getChildContext() {
     return {
       asyncComponents: {
-        getNextId: this.execContext.getNextId,
-        registerComponent: this.execContext.registerComponent,
-        getComponent: this.execContext.getComponent,
-        registerError: this.execContext.registerError,
-        getError: this.execContext.getError,
+        getNextId: this.asyncContext.getNextId,
+        registerComponent: this.asyncContext.registerComponent,
+        getComponent: this.asyncContext.getComponent,
+        registerError: this.asyncContext.registerError,
+        getError: this.asyncContext.getError,
         getRehydrate: (id) => {
           const error = this.rehydrateState.errors[id]
           const resolved = this.rehydrateState.resolved[id]
@@ -38,22 +38,22 @@ class AsyncComponentProvider extends React.Component {
 
 AsyncComponentProvider.propTypes = {
   children: React.PropTypes.node.isRequired,
-  execContext: React.PropTypes.shape({
+  asyncContext: React.PropTypes.shape({
     getNextId: React.PropTypes.func.isRequired,
     registerComponent: React.PropTypes.func.isRequired,
     getComponent: React.PropTypes.func.isRequired,
     registerError: React.PropTypes.func.isRequired,
     getError: React.PropTypes.func.isRequired,
   }),
-  initialState: React.PropTypes.shape({
+  rehydrateState: React.PropTypes.shape({
     resolved: React.PropTypes.object,
     errors: React.PropTypes.object,
   }),
 }
 
 AsyncComponentProvider.defaultProps = {
-  execContext: undefined,
-  initialState: {
+  asyncContext: undefined,
+  rehydrateState: {
     resolved: {},
     errors: {},
   },

src/AsyncComponentProvider.js

@@ -17,7 +17,7 @@ Object {
 
 exports[`integration tests render server and client 3`] = `
 <AsyncComponentProvider
-  execContext={
+  asyncContext={
     Object {
       "getComponent": [Function],
       "getError": [Function],
@@ -27,7 +27,7 @@ exports[`integration tests render server and client 3`] = `
       "registerError": [Function],
     }
   }
-  initialState={
+  rehydrateState={
     Object {
       "errors": Object {},
       "resolved": Object {},
@@ -82,7 +82,7 @@ exports[`integration tests render server and client 3`] = `
 
 exports[`integration tests render server and client 4`] = `
 <AsyncComponentProvider
-  execContext={
+  asyncContext={
     Object {
       "getComponent": [Function],
       "getError": [Function],
@@ -92,7 +92,7 @@ exports[`integration tests render server and client 4`] = `
       "registerError": [Function],
     }
   }
-  initialState={
+  rehydrateState={
     Object {
       "errors": Object {},
       "resolved": Object {},
@@ -157,7 +157,7 @@ exports[`integration tests render server and client 4`] = `
 
 exports[`integration tests renders the ErrorComponent 1`] = `
 <AsyncComponentProvider
-  execContext={
+  asyncContext={
     Object {
       "getComponent": [Function],
       "getError": [Function],
@@ -167,7 +167,7 @@ exports[`integration tests renders the ErrorComponent 1`] = `
       "registerError": [Function],
     }
   }
-  initialState={
+  rehydrateState={
     Object {
       "errors": Object {},
       "resolved": Object {},
@@ -188,7 +188,7 @@ exports[`integration tests renders the ErrorComponent 1`] = `
 
 exports[`integration tests renders the LoadingComponent 1`] = `
 <AsyncComponentProvider
-  execContext={
+  asyncContext={
     Object {
       "getComponent": [Function],
       "getError": [Function],
@@ -198,7 +198,7 @@ exports[`integration tests renders the LoadingComponent 1`] = `
       "registerError": [Function],
     }
   }
-  initialState={
+  rehydrateState={
     Object {
       "errors": Object {},
       "resolved": Object {},

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

@@ -2,9 +2,9 @@ import React from 'react'
 import sinon from 'sinon'
 import { mount } from 'enzyme'
 
-import createAsyncComponent from '../createAsyncComponent'
+import asyncComponent from '../asyncComponent'
 
-describe('createAsyncComponent', () => {
+describe('asyncComponent', () => {
   const contextStub = {
     asyncComponents: {
       getNextId: () => 1,
@@ -17,7 +17,7 @@ describe('createAsyncComponent', () => {
 
   it('should handle unmounting ensuring that resolved promises do not call setState', () => {
     const resolveDelay = 10
-    const Bob = createAsyncComponent({
+    const Bob = asyncComponent({
       resolve: () =>
         new Promise(resolve =>
           setTimeout(() => resolve(() => <div>bob</div>), resolveDelay)),

src/__tests__/createAsyncComponent.test.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { mount } from 'enzyme'
+import asyncBootstrapper from 'react-async-bootstrapper'
 
 import {
   AsyncComponentProvider,
-  createContext,
-  createAsyncComponent,
-  asyncBootstrapper,
+  createAsyncContext,
+  asyncComponent,
 } from '../'
 
 function Bob({ children }) {
@@ -15,35 +15,35 @@ function Bob({ children }) {
 Bob.propTypes = { children: React.PropTypes.node }
 Bob.defaultProps = { children: null }
 
-const AsyncBob = createAsyncComponent({
+const AsyncBob = asyncComponent({
   resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
   name: 'AsyncBob',
 })
 
-const AsyncBobTwo = createAsyncComponent({
+const AsyncBobTwo = asyncComponent({
   resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
   name: 'AsyncBobTwo',
 })
 
-const AsyncBobThree = createAsyncComponent({
+const AsyncBobThree = asyncComponent({
   resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
   name: 'AsyncBobThree',
 })
 
-const DeferredAsyncBob = createAsyncComponent({
+const DeferredAsyncBob = asyncComponent({
   resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
   ssrMode: 'defer',
   name: 'DeferredAsyncBob',
   LoadingComponent: () => <div>DeferredAsyncBob Loading</div>,
 })
 
-const BoundaryAsyncBob = createAsyncComponent({
+const BoundaryAsyncBob = asyncComponent({
   resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
   ssrMode: 'boundary',
   name: 'BoundaryAsyncBob',
 })
 
-const ErrorAsyncComponent = createAsyncComponent({
+const ErrorAsyncComponent = asyncComponent({
   resolve: () =>
     new Promise(() => {
       throw new Error('This always errors')
@@ -53,10 +53,10 @@ const ErrorAsyncComponent = createAsyncComponent({
   ErrorComponent: ({ message }) => <div>{message}</div>,
 })
 
-const createApp = (execContext, stateForClient) => (
+const createApp = (asyncContext, stateForClient) => (
   <AsyncComponentProvider
-    execContext={execContext}
-    initialState={stateForClient}
+    asyncContext={asyncContext}
+    rehydrateState={stateForClient}
   >
     <AsyncBob>
       <div>
@@ -87,7 +87,7 @@ describe('integration tests', () => {
     delete global.window
 
     // "Server" side render...
-    const serverContext = createContext()
+    const serverContext = createAsyncContext()
     const serverApp = createApp(serverContext)
     return asyncBootstrapper(serverApp)
       .then(() => {
@@ -102,7 +102,7 @@ describe('integration tests', () => {
       })
       .then(({ serverHTML, stateForClient }) => {
         // "Client" side render...
-        const clientContext = createContext()
+        const clientContext = createAsyncContext()
         const clientApp = createApp(clientContext, stateForClient)
         return (
           asyncBootstrapper(clientApp)
@@ -126,17 +126,17 @@ describe('integration tests', () => {
   })
 
   it('renders the LoadingComponent', () => {
-    const Foo = createAsyncComponent({
+    const Foo = asyncComponent({
       resolve: () =>
         new Promise(resolve =>
           setTimeout(() => resolve(() => <div>foo</div>), 100)),
       LoadingComponent: () => <div>Loading...</div>,
     })
 
-    const execContext = createContext()
+    const asyncContext = createAsyncContext()
 
     const app = (
-      <AsyncComponentProvider execContext={execContext}>
+      <AsyncComponentProvider asyncContext={asyncContext}>
         <Foo />
       </AsyncComponentProvider>
     )
@@ -147,18 +147,18 @@ describe('integration tests', () => {
   })
 
   it('renders the ErrorComponent', () => {
-    const Foo = createAsyncComponent({
+    const Foo = asyncComponent({
       resolve: () => {
         throw new Error('An error occurred')
       },
       // eslint-disable-next-line react/prop-types
       ErrorComponent: ({ message }) => <div>{message}</div>,
     })
 
-    const execContext = createContext()
+    const asyncContext = createAsyncContext()
 
     const app = (
-      <AsyncComponentProvider execContext={execContext}>
+      <AsyncComponentProvider asyncContext={asyncContext}>
         <Foo />
       </AsyncComponentProvider>
     )
@@ -177,17 +177,17 @@ describe('integration tests', () => {
   it('a component only gets resolved once', () => {
     let resolveCount = 0
 
-    const Foo = createAsyncComponent({
+    const Foo = asyncComponent({
       resolve: () => {
         resolveCount += 1
         return () => <div>foo</div>
       },
     })
 
-    const execContext = createContext()
+    const asyncContext = createAsyncContext()
 
     const app = (
-      <AsyncComponentProvider execContext={execContext}>
+      <AsyncComponentProvider asyncContext={asyncContext}>
         <Foo />
       </AsyncComponentProvider>
     )

src/__tests__/integration.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 const validSSRModes = ['render', 'defer', 'boundary']
 
-function createAsyncComponent(args) {
+function asyncComponent(args) {
   const {
     name,
     resolve,
@@ -13,7 +13,7 @@ function createAsyncComponent(args) {
   } = args
 
   if (validSSRModes.indexOf(ssrMode) === -1) {
-    throw new Error('Invalid ssrMode provided to createAsyncComponent')
+    throw new Error('Invalid ssrMode provided to asyncComponent')
   }
 
   let id = null
@@ -182,4 +182,4 @@ function createAsyncComponent(args) {
   return AsyncComponent
 }
 
-export default createAsyncComponent
+export default asyncComponent

src/createAsyncComponent.js renamed to src/asyncComponent.js

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

src/createContext.js renamed to src/createAsyncContext.js

@@ -1,11 +1,5 @@
-import asyncBootstrapper from 'react-async-bootstrapper'
 import AsyncComponentProvider from './AsyncComponentProvider'
-import createContext from './createContext'
-import createAsyncComponent from './createAsyncComponent'
+import createAsyncContext from './createAsyncContext'
+import asyncComponent from './asyncComponent'
 
-export {
-  AsyncComponentProvider,
-  createContext,
-  createAsyncComponent,
-  asyncBootstrapper,
-}
+export { AsyncComponentProvider, createAsyncContext, asyncComponent }