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 }