Huge refactor of the project.

We have dropped `withAsyncComponents` and replaced it with `asyncBootstrapper` that is sourced from the generalised `react-async-bootstrapper` library.  This gives us a greater degree of flexibility and interoperability with other libraries that have asynchronous bootstrapping needs.  You are now required to manually wrap your application with an instance of the `AsyncComponentProvider`.
The `Loading` component option for `createAsyncComponent` has been renamed to `LoadingComponent`.
An `ErrorComponent` component option has been added to the `createAsyncComponent` helper, allowing you to render a custom error should a component resolver fail.

Author: ctrlplusb

.eslintrc

@@ -13,6 +13,17 @@
     "defaultParams": true
   },
   "rules": {
+    "no-confusing-arrow": 0,
+
+    "max-len": [
+      "error",
+      {
+        "ignoreComments": false,
+        "ignoreStrings": true,
+        "code": 80
+      }
+    ],
+
     // Going hipster
     "semi": [2, "never"],
 

package.json

@@ -35,6 +35,17 @@
     "test:coverage": "yarn run test -- --coverage",
     "test:coverage:deploy": "yarn run test:coverage && codecov"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}"
+    ],
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/enzyme-to-json/serializer"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/(commonjs|coverage|flow-typed|node_modules|tools|umd)/"
+    ]
+  },
   "lint-staged": {
     "*.js": [
       "prettier-eslint --write",
@@ -46,7 +57,7 @@
     "react-dom": "^0.14.0 || ^15.0.0-0"
   },
   "dependencies": {
-    "react-tree-walker": "2.0.0-alpha.1"
+    "react-async-bootstrapper": "^0.0.2"
   },
   "devDependencies": {
     "app-root-dir": "1.0.2",
@@ -61,8 +72,8 @@
     "babel-preset-react": "6.23.0",
     "babel-preset-stage-3": "6.22.0",
     "babel-register": "6.24.0",
-    "codecov": "1.0.1",
-    "cross-env": "3.2.3",
+    "codecov": "2.0.1",
+    "cross-env": "3.2.4",
     "enzyme": "2.7.1",
     "enzyme-to-json": "1.5.0",
     "eslint": "3.17.1",
@@ -76,7 +87,7 @@
     "jest": "19.0.2",
     "lint-staged": "3.4.0",
     "prettier": "0.22.0",
-    "prettier-eslint": "4.2.1",
+    "prettier-eslint": "4.3.2",
     "prettier-eslint-cli": "^3.1.2",
     "pretty-bytes": "4.0.2",
     "ramda": "0.23.0",
@@ -85,20 +96,9 @@
     "react-dom": "15.4.2",
     "readline-sync": "1.4.6",
     "rimraf": "2.6.1",
-    "sinon": "1.17.7",
+    "sinon": "2.0.0",
     "webpack": "2.2.1",
     "webpack-dev-middleware": "1.10.1",
     "webpack-hot-middleware": "2.17.1"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}"
-    ],
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/enzyme-to-json/serializer"
-    ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/(commonjs|coverage|flow-typed|node_modules|tools|umd)/"
-    ]
   }
 }

src/AsyncComponentProvider.js

@@ -13,8 +13,10 @@ class AsyncComponentProvider extends React.Component {
     return {
       asyncComponents: {
         getNextId: this.execContext.getNextId,
-        getComponent: this.execContext.getComponent,
         registerComponent: this.execContext.registerComponent,
+        getComponent: this.execContext.getComponent,
+        registerError: this.execContext.registerError,
+        getError: this.execContext.getError,
       },
     }
   }
@@ -28,8 +30,10 @@ AsyncComponentProvider.propTypes = {
   children: React.PropTypes.node.isRequired,
   execContext: React.PropTypes.shape({
     getNextId: React.PropTypes.func.isRequired,
-    getComponent: React.PropTypes.func.isRequired,
     registerComponent: React.PropTypes.func.isRequired,
+    getComponent: React.PropTypes.func.isRequired,
+    registerError: React.PropTypes.func.isRequired,
+    getError: React.PropTypes.func.isRequired,
   }),
 }
 
@@ -40,8 +44,10 @@ AsyncComponentProvider.defaultProps = {
 AsyncComponentProvider.childContextTypes = {
   asyncComponents: React.PropTypes.shape({
     getNextId: React.PropTypes.func.isRequired,
-    getComponent: React.PropTypes.func.isRequired,
     registerComponent: React.PropTypes.func.isRequired,
+    getComponent: React.PropTypes.func.isRequired,
+    registerError: React.PropTypes.func.isRequired,
+    getError: React.PropTypes.func.isRequired,
   }).isRequired,
 }
 

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

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`integration tests render server and client 1`] = `"<div><div><div><span>In Render.</span></div><div><span>In Boundary but outside an AsyncComponent, server render me!</span></div></div></div>"`;
+exports[`integration tests render server and client 1`] = `"<div><div><div><span>In Render.</span></div><div>DeferredAsyncBob Loading</div><div><span>In Boundary but outside an AsyncComponent, server render me!</span></div><div>This always errors</div></div></div>"`;
 
 exports[`integration tests render server and client 2`] = `
 Object {
+  "errors": Object {
+    "6": "This always errors",
+  },
   "resolved": Object {
     "1": true,
     "2": true,
@@ -17,9 +20,11 @@ exports[`integration tests render server and client 3`] = `
   execContext={
     Object {
       "getComponent": [Function],
+      "getError": [Function],
       "getNextId": [Function],
       "getState": [Function],
       "registerComponent": [Function],
+      "registerError": [Function],
     }
   }
 >
@@ -36,7 +41,13 @@ exports[`integration tests render server and client 3`] = `
               </div>
             </Bob>
           </AsyncBobTwo>
-          <DeferredAsyncBob />
+          <DeferredAsyncBob>
+            <LoadingComponent>
+              <div>
+                DeferredAsyncBob Loading
+              </div>
+            </LoadingComponent>
+          </DeferredAsyncBob>
           <BoundaryAsyncBob>
             <Bob>
               <div>
@@ -47,6 +58,15 @@ exports[`integration tests render server and client 3`] = `
               </div>
             </Bob>
           </BoundaryAsyncBob>
+          <ErrorAsyncComponent>
+            <ErrorComponent
+              message="This always errors"
+            >
+              <div>
+                This always errors
+              </div>
+            </ErrorComponent>
+          </ErrorAsyncComponent>
         </div>
       </div>
     </Bob>
@@ -59,9 +79,11 @@ exports[`integration tests render server and client 4`] = `
   execContext={
     Object {
       "getComponent": [Function],
+      "getError": [Function],
       "getNextId": [Function],
       "getState": [Function],
       "registerComponent": [Function],
+      "registerError": [Function],
     }
   }
 >
@@ -105,9 +127,66 @@ exports[`integration tests render server and client 4`] = `
               </div>
             </Bob>
           </BoundaryAsyncBob>
+          <ErrorAsyncComponent>
+            <ErrorComponent
+              message="This always errors"
+            >
+              <div>
+                This always errors
+              </div>
+            </ErrorComponent>
+          </ErrorAsyncComponent>
         </div>
       </div>
     </Bob>
   </AsyncBob>
 </AsyncComponentProvider>
 `;
+
+exports[`integration tests renders the ErrorComponent 1`] = `
+<AsyncComponentProvider
+  execContext={
+    Object {
+      "getComponent": [Function],
+      "getError": [Function],
+      "getNextId": [Function],
+      "getState": [Function],
+      "registerComponent": [Function],
+      "registerError": [Function],
+    }
+  }
+>
+  <AsyncComponent>
+    <ErrorComponent
+      message="An error occurred"
+    >
+      <div>
+        An error occurred
+      </div>
+    </ErrorComponent>
+  </AsyncComponent>
+</AsyncComponentProvider>
+`;
+
+exports[`integration tests renders the LoadingComponent 1`] = `
+<AsyncComponentProvider
+  execContext={
+    Object {
+      "getComponent": [Function],
+      "getError": [Function],
+      "getNextId": [Function],
+      "getState": [Function],
+      "registerComponent": [Function],
+      "registerError": [Function],
+    }
+  }
+>
+  <AsyncComponent>
+    <LoadingComponent>
+      <div>
+        Loading...
+      </div>
+    </LoadingComponent>
+  </AsyncComponent>
+</AsyncComponentProvider>
+`;

src/__tests__/createAsyncComponent.test.js

@@ -8,26 +8,26 @@ describe('createAsyncComponent', () => {
   const contextStub = {
     asyncComponents: {
       getNextId: () => 1,
-      getComponent: () => undefined,
       registerComponent: () => undefined,
+      getComponent: () => undefined,
+      registerError: () => undefined,
+      getError: () => undefined,
     },
   }
 
   it('should handle unmounting ensuring that resolved promises do not call setState', () => {
     const resolveDelay = 10
     const Bob = createAsyncComponent({
-      resolve: () => new Promise(resolve =>
-        setTimeout(
-          () => resolve(() => <div>bob</div>),
-          resolveDelay,
-        ),
-      ),
+      resolve: () =>
+        new Promise(resolve =>
+          setTimeout(() => resolve(() => <div>bob</div>), resolveDelay)),
     })
     const setStateSpy = sinon.spy(Bob.prototype, 'setState')
     const renderWrapper = mount(<Bob />, { context: contextStub })
     expect(setStateSpy.callCount).toEqual(0)
     renderWrapper.unmount()
-    return new Promise(resolve => setTimeout(resolve, resolveDelay + 2))
-      .then(() => expect(setStateSpy.callCount).toEqual(0))
+    return new Promise(resolve =>
+      setTimeout(resolve, resolveDelay + 2)).then(() =>
+      expect(setStateSpy.callCount).toEqual(0))
   })
 })