Add a resolving state to each instance of the component, so every instance renders once the module is resolved.

Fixes ctrlplusb#90

Author: Anant Singh

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

@@ -2,4 +2,8 @@
 
 exports[`asyncComponent in a browser environment when an error occurs resolving a component should render the ErrorComponent 1`] = `"<div>failed to resolve</div>"`;
 
+exports[`asyncComponent in a browser environment when multiple instances of component are present should render all instances of the component 1`] = `"<div><div>Component</div><div>Component</div></div>"`;
+
+exports[`asyncComponent in a browser environment when multiple instances of component are present should render multiple ErrorComponent 1`] = `"<div><div>failed to resolve</div><div>failed to resolve</div></div>"`;
+
 exports[`asyncComponent in a server environment when an error occurs resolving a component should not render the ErrorComponent 1`] = `null`;

src/__tests__/asyncComponent.test.js

@@ -7,6 +7,7 @@ import asyncComponent from '../asyncComponent'
 
 describe('asyncComponent', () => {
   const errorResolveDelay = 20
+  const promiseResolveDelay = 20
 
   describe('in a browser environment', () => {
     describe('when an error occurs resolving a component', () => {
@@ -21,6 +22,39 @@ describe('asyncComponent', () => {
         expect(renderWrapper.html()).toMatchSnapshot()
       })
     })
+
+    describe('when multiple instances of component are present', () => {
+      it('should render all instances of the component', async () => {
+        const Bob = asyncComponent({
+          resolve: () => Promise.resolve(() => <div>Component</div>),
+          env: 'browser',
+        })
+        const renderWrapper = mount(
+          <div>
+            <Bob />
+            <Bob />
+          </div>,
+        )
+        await new Promise(resolve => setTimeout(resolve, promiseResolveDelay))
+        expect(renderWrapper.html()).toMatchSnapshot()
+      })
+
+      it('should render multiple ErrorComponent', async () => {
+        const Bob = asyncComponent({
+          resolve: () => Promise.reject(new Error('failed to resolve')),
+          ErrorComponent: ({ error }) => <div>{error.message}</div>,
+          env: 'browser',
+        })
+        const renderWrapper = mount(
+          <div>
+            <Bob />
+            <Bob />
+          </div>,
+        )
+        await new Promise(resolve => setTimeout(resolve, errorResolveDelay))
+        expect(renderWrapper.html()).toMatchSnapshot()
+      })
+    })
   })
 
   describe('in a server environment', () => {

src/asyncComponent.js

@@ -42,10 +42,7 @@ export default function asyncComponent(config) {
   }
 
   const needToResolveOnBrowser = () =>
-    state.module == null &&
-    state.error == null &&
-    !state.resolving &&
-    typeof window !== 'undefined'
+    state.module == null && state.error == null && typeof window !== 'undefined'
 
   // Takes the given module and if it has a ".default" the ".default" will
   // be returned. i.e. handy when you could be dealing with es6 imports.
@@ -89,6 +86,13 @@ export default function asyncComponent(config) {
       }),
     }
 
+    constructor() {
+      super()
+      this.state = {
+        resolving: state.resolving,
+      }
+    }
+
     getChildContext() {
       return {
         asyncComponentsAncestor:
@@ -137,7 +141,9 @@ export default function asyncComponent(config) {
     }
 
     componentDidMount() {
-      if (needToResolveOnBrowser()) {
+      const { resolving } = this.state
+
+      if (!resolving && needToResolveOnBrowser()) {
         this.resolveModule()
       }
     }