Fixes an issue where component identifiers were not being cycled which caused different instances of AsyncComponent to share a resolved Component.

Author: ctrlplusb

README.md

@@ -104,7 +104,7 @@ const AsyncProduct = createAsyncComponent({
                  // 🖕 Webpack's code splitting API
 });
 
-export default AsynProduct;
+export default AsyncProduct;
 ```
 
 Now, you can simply import `AsyncProduct` anywhere in your application and not have to worry about having to call `createAsyncComponent` again.
@@ -328,7 +328,7 @@ Understand your own applications needs and use the options appropriately . I per
 
 At the moment there is one known caveat in using this library: it doesn't support React Hot Loader (RHL). You can still use Webpack's standard Hot Module Replacement, however, RHL does not respond nicely to the architecture of `react-async-component`.
 
-TODO: I'll post up some details why and perhaps we could work to find a solution.
+To be clear, using React Hot Loader will not throw errors, your components just won't do any hot reloading.  I am investigating possible solutions and will report back here if and when I discover any workarounds.
 
 ## FAQs
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-async-component",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Create Components that resolve asynchronously, with support for server side rendering and code splitting.",
   "license": "MIT",
   "main": "commonjs/index.js",

src/AsyncComponentProvider.js

@@ -4,28 +4,20 @@ import React from 'react';
 import type { ExecContext, ProviderChildContext } from './types';
 
 type Props = {
+  // eslint-disable-next-line
   children?: any,
   execContext: ExecContext,
 };
 
 class AsyncComponentProvider extends React.Component {
-  id: number;
-  registry: { [key:number] : Function };
-
-  constructor(props : Props) {
-    super(props);
-    this.id = 0;
-    this.registry = {};
-  }
+  props: Props
 
   getChildContext() : ProviderChildContext {
     return {
       asyncComponents: {
-        nextId: () => {
-          this.id += 1;
-          return this.id;
-        },
-        getComponent: id => this.props.execContext.getComponent(id),
+        getNextId: this.props.execContext.getNextId,
+        getComponent: this.props.execContext.getComponent,
+        registerComponent: this.props.execContext.registerComponent,
       },
     };
   }
@@ -38,14 +30,17 @@ class AsyncComponentProvider extends React.Component {
 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,
   }).isRequired,
 };
 
 AsyncComponentProvider.childContextTypes = {
   asyncComponents: React.PropTypes.shape({
-    nextId: React.PropTypes.func.isRequired,
+    getNextId: React.PropTypes.func.isRequired,
     getComponent: React.PropTypes.func.isRequired,
+    registerComponent: React.PropTypes.func.isRequired,
   }).isRequired,
 };
 

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

@@ -3,6 +3,7 @@ exports[`integration works 1`] = `
   execContext={
     Object {
       "getComponent": [Function],
+      "getNextId": [Function],
       "getResolved": [Function],
       "registerComponent": [Function],
     }
@@ -45,6 +46,7 @@ exports[`integration works 3`] = `
   execContext={
     Object {
       "getComponent": [Function],
+      "getNextId": [Function],
       "getResolved": [Function],
       "registerComponent": [Function],
     }
@@ -85,6 +87,7 @@ exports[`integration works 4`] = `
   execContext={
     Object {
       "getComponent": [Function],
+      "getNextId": [Function],
       "getResolved": [Function],
       "registerComponent": [Function],
     }

src/__tests__/createAsyncComponent.test.js

@@ -5,6 +5,14 @@ import { mount } from 'enzyme';
 import createAsyncComponent from '../createAsyncComponent';
 
 describe('createAsyncComponent', () => {
+  const contextStub = {
+    asyncComponents: {
+      getNextId: () => 1,
+      getComponent: () => undefined,
+      registerComponent: () => undefined,
+    },
+  };
+
   it('should handle unmounting ensuring that resolved promises do not call setState', () => {
     const resolveDelay = 10;
     const Bob = createAsyncComponent({
@@ -16,7 +24,7 @@ describe('createAsyncComponent', () => {
       ),
     });
     const setStateSpy = sinon.spy(Bob.prototype, 'setState');
-    const renderWrapper = mount(<Bob />);
+    const renderWrapper = mount(<Bob />, { context: contextStub });
     expect(setStateSpy.callCount).toEqual(0);
     renderWrapper.unmount();
     return new Promise(resolve => setTimeout(resolve, resolveDelay + 2))

src/createAsyncComponent.js

@@ -46,22 +46,24 @@ function createAsyncComponent(args) {
 
       this.state = { Component: null };
 
-      if (asyncComponents) {
-        const { nextId, getComponent } = asyncComponents;
-        if (!id) {
-          id = nextId();
-        }
-        const Component = es6Resolve(getComponent(id));
-        if (Component) {
-          this.state = { Component };
-        } else {
-          this.getAsyncComponentData = () => ({
-            id,
-            defer: ssrMode === 'defer'
-              || (asyncComponentsAncestor && asyncComponentsAncestor.isBoundary),
-            getResolver,
-          });
-        }
+      // Assign a unique id to this instance if it hasn't already got one.
+      // Note: the closure usage.
+      const { getNextId, getComponent } = asyncComponents;
+      if (!id) {
+        id = getNextId();
+      }
+
+      // Try resolve the component.
+      const Component = es6Resolve(getComponent(id));
+      if (Component) {
+        this.state = { Component };
+      } else {
+        this.getAsyncComponentData = () => ({
+          id,
+          defer: ssrMode === 'defer'
+            || (asyncComponentsAncestor && asyncComponentsAncestor.isBoundary),
+          getResolver: () => this.resolveComponent(),
+        });
       }
     }
 
@@ -88,9 +90,12 @@ function createAsyncComponent(args) {
           // The component is unmounted, so no need to set the state.
           return;
         }
-        this.setState({
-          Component: es6Resolve(Component),
-        });
+        this.context.asyncComponents.registerComponent(id, Component);
+        if (this.setState) {
+          this.setState({
+            Component: es6Resolve(Component),
+          });
+        }
       });
     }
 
@@ -117,9 +122,10 @@ function createAsyncComponent(args) {
 
   AsyncComponent.contextTypes = {
     asyncComponents: React.PropTypes.shape({
-      nextId: React.PropTypes.func.isRequired,
+      getNextId: React.PropTypes.func.isRequired,
       getComponent: React.PropTypes.func.isRequired,
-    }),
+      registerComponent: React.PropTypes.func.isRequired,
+    }).isRequired,
   };
 
   AsyncComponent.displayName = name || 'AsyncComponent';

src/types.js

@@ -6,14 +6,15 @@ import { Element } from 'react';
 export type React$Element = Element<*>;
 
 export type ExecContext = {
+  getNextId : () => number,
   registerComponent : (number, Function) => void,
   getComponent : (number) => ?Function,
   getResolved : () => { [key : number] : true },
 }
 
 export type ProviderChildContext = {
   asyncComponents: {
-    nextId : () => number,
+    getNextId : () => number,
     getComponent : (number) => ?Function,
   }
 };

src/withAsyncComponents.js

@@ -7,8 +7,13 @@ 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;
     },
@@ -59,7 +64,7 @@ export default function withAsyncComponents(app : React$Element) {
           return false;
         }
 
-        const resolver = getResolver().then(C => execContext.registerComponent(id, C));
+        const resolver = getResolver();
         resolvers.push({
           resolver,
           element,