react-async-component - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

commonjs/asyncComponent.js

@@ -28,6 +28,6 @@ 'use strict';
       resolve = args.resolve,
-      _args$es6Aware = args.es6Aware,
-      es6Aware = _args$es6Aware === undefined ? true : _args$es6Aware,
-      _args$ssrMode = args.ssrMode,
-      ssrMode = _args$ssrMode === undefined ? 'render' : _args$ssrMode,
+      _args$autoResolveES = args.autoResolveES2015Default,
+      autoResolveES2015Default = _args$autoResolveES === undefined ? true : _args$autoResolveES,
+      _args$serverMode = args.serverMode,
+      serverMode = _args$serverMode === undefined ? 'render' : _args$serverMode,
       LoadingComponent = args.LoadingComponent,
@@ -37,25 +37,40 @@ ErrorComponent = args.ErrorComponent;
 
-  if (validSSRModes.indexOf(ssrMode) === -1) {
-    throw new Error('Invalid ssrMode provided to asyncComponent');
+  if (validSSRModes.indexOf(serverMode) === -1) {
+    throw new Error('Invalid serverMode provided to asyncComponent');
   }
 
-  var id = null;
+  var env = typeof window === 'undefined' ? 'node' : 'browser';
 
+  var sharedState = {
+    // A unique id we will assign to our async component which is especially
+    // useful when rehydrating server side rendered async components.
+    id: null,
+    // This will be use to hold the resolved module allowing sharing across
+    // instances.
+    // NOTE: When using React Hot Loader this reference will become null.
+    module: null,
+    // If an error occurred during a resolution it will be stored here.
+    error: null,
+    // Allows us to share the resolver promise across instances.
+    resolver: null
+  };
+
   // 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.
   var es6Resolve = function es6Resolve(x) {
-    return es6Aware && (typeof x === 'function' || (typeof x === 'undefined' ? 'undefined' : _typeof(x)) === 'object') && typeof x.default !== 'undefined' ? x.default : x;
+    return autoResolveES2015Default && x != null && (typeof x === 'function' || (typeof x === 'undefined' ? 'undefined' : _typeof(x)) === 'object') && x.default ? x.default : x;
   };
 
   var getResolver = function getResolver() {
-    var resolver = void 0;
-    try {
-      resolver = resolve();
-    } catch (err) {
-      return Promise.reject(err);
+    if (sharedState.resolver == null) {
+      try {
+        // Wrap whatever the user returns in Promise.resolve to ensure a Promise
+        // is always returned.
+        var resolver = resolve();
+        sharedState.resolver = Promise.resolve(resolver);
+      } catch (err) {
+        sharedState.resolver = Promise.reject(err);
+      }
     }
-
-    // Just in case the user is returning the component synchronously, we
-    // will ensure it gets wrapped into a promise
-    return Promise.resolve(resolver);
+    return sharedState.resolver;
   };
@@ -69,12 +84,10 @@
 
-      var _this = _possibleConstructorReturn(this, (AsyncComponent.__proto__ || Object.getPrototypeOf(AsyncComponent)).call(this, props));
+      // We have to set the id in the constructor because a RHL seems
+      // to recycle the module and therefore the id closure will be null.
+      // We can't put it in componentWillMount as RHL hot swaps the new code
+      // so the mount call will not happen (but the ctor does).
+      var _this = _possibleConstructorReturn(this, (AsyncComponent.__proto__ || Object.getPrototypeOf(AsyncComponent)).call(this, props, context));
 
-      _this.state = { Component: null };
-
-      // Assign a unique id to this instance if it hasn't already got one.
-      var asyncComponents = context.asyncComponents;
-      var getNextId = asyncComponents.getNextId;
-
-      if (!id) {
-        id = getNextId();
+      if (_this.context.asyncComponents && !sharedState.id) {
+        sharedState.id = _this.context.asyncComponents.getNextId();
       }
@@ -87,5 +100,9 @@ return _this;
       value: function getChildContext() {
+        if (!this.context.asyncComponents) {
+          return undefined;
+        }
+
         return {
           asyncComponentsAncestor: {
-            isBoundary: ssrMode === 'boundary'
+            isBoundary: serverMode === 'boundary'
           }
@@ -95,10 +112,14 @@ };
     }, {
+      key: 'componentWillMount',
+      value: function componentWillMount() {
+        this.setState({ module: sharedState.module });
+        if (sharedState.error) {
+          this.registerErrorState(sharedState.error);
+        }
+      }
+    }, {
       key: 'componentDidMount',
       value: function componentDidMount() {
-        var asyncComponents = this.context.asyncComponents;
-        var getComponent = asyncComponents.getComponent,
-            getError = asyncComponents.getError;
-
-        if (!getError(id) && !getComponent(id)) {
-          this.resolveComponent();
+        if (!this.state.module) {
+          this.resolveModule();
         }
@@ -110,14 +131,15 @@ }
     }, {
-      key: 'asyncBootstrapperTarget',
-      value: function asyncBootstrapperTarget() {
+      key: 'asyncBootstrap',
+      value: function asyncBootstrap() {
         var _this2 = this;
 
-        var asyncComponents = this.context.asyncComponents;
-        var registerError = asyncComponents.registerError,
-            getRehydrate = asyncComponents.getRehydrate;
+        var _context = this.context,
+            asyncComponents = _context.asyncComponents,
+            asyncComponentsAncestor = _context.asyncComponentsAncestor;
+        var shouldRehydrate = asyncComponents.shouldRehydrate;
 
 
         var doResolve = function doResolve() {
-          return _this2.resolveComponent().then(function (Component) {
-            return typeof Component === 'function';
+          return _this2.resolveModule().then(function (module) {
+            return module !== undefined;
           });
@@ -128,54 +150,44 @@ };
           // BROWSER BASED LOGIC
-
-          var _getRehydrate = getRehydrate(id),
-              type = _getRehydrate.type,
-              error = _getRehydrate.error;
-
-          if (type === 'unresolved') {
-            return false;
-          }
-          if (type === 'error') {
-            registerError(id, error);
-            return false;
-          }
-          return doResolve();
+          return shouldRehydrate(sharedState.id) ? doResolve() : false;
         }
 
-        // NODE BASED LOGIC
-
-        var asyncComponentsAncestor = this.context.asyncComponentsAncestor;
-
+        // SERVER BASED LOGIC
         var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
-
-        if (ssrMode === 'defer' || isChildOfBoundary) {
-          return false;
-        }
-
-        return doResolve();
+        return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
       }
     }, {
-      key: 'resolveComponent',
-      value: function resolveComponent() {
+      key: 'resolveModule',
+      value: function resolveModule() {
         var _this3 = this;
 
-        return getResolver().then(function (Component) {
+        this.resolving = true;
+
+        return getResolver().then(function (module) {
           if (_this3.unmounted) {
             return undefined;
           }
-          _this3.context.asyncComponents.registerComponent(id, Component);
-          if (_this3.setState) {
-            _this3.setState({
-              Component: es6Resolve(Component)
-            });
+          if (_this3.context.asyncComponents) {
+            _this3.context.asyncComponents.resolved(sharedState.id);
           }
-          return Component;
+          sharedState.module = module;
+          if (env === 'browser') {
+            _this3.setState({ module: module });
+          }
+          _this3.resolving = false;
+          return module;
         }).catch(function (error) {
-          if (process.env.NODE_ENV === 'development') {
+          if (_this3.unmounted) {
+            return undefined;
+          }
+          if (env === 'node' || !ErrorComponent) {
+            // We will at least log the error so that user isn't completely
+            // unaware of an error occurring.
             // eslint-disable-next-line no-console
-            console.log('Error resolving async component:');
+            // console.warn('Failed to resolve asyncComponent')
             // eslint-disable-next-line no-console
-            console.log(error);
+            // console.warn(error)
           }
-          _this3.context.asyncComponents.registerError(id, error.message);
-          _this3.setState({ error: error.message });
+          sharedState.error = error;
+          _this3.registerErrorState(error);
+          _this3.resolving = false;
           return undefined;
@@ -190,15 +202,35 @@ });
     }, {
+      key: 'registerErrorState',
+      value: function registerErrorState(error) {
+        var _this4 = this;
+
+        if (env === 'browser') {
+          setTimeout(function () {
+            if (!_this4.unmounted) {
+              _this4.setState({ error: error });
+            }
+          }, 16);
+        }
+      }
+    }, {
       key: 'render',
       value: function render() {
-        var asyncComponents = this.context.asyncComponents;
-        var getComponent = asyncComponents.getComponent,
-            getError = asyncComponents.getError;
+        var _state = this.state,
+            module = _state.module,
+            error = _state.error;
 
+        // This is as workaround for React Hot Loader support.  When using
+        // RHL the local component reference will be killed by any change
+        // to the component, this will be our signal to know that we need to
+        // re-resolve it.
 
-        var error = getError(id);
+        if (sharedState.module == null && !this.resolving && typeof window !== 'undefined') {
+          this.resolveModule();
+        }
+
         if (error) {
-          return ErrorComponent ? _react2.default.createElement(ErrorComponent, { message: error }) : null;
+          return ErrorComponent ? _react2.default.createElement(ErrorComponent, { error: error }) : null;
         }
 
-        var Component = es6Resolve(getComponent(id));
+        var Component = es6Resolve(module);
         // eslint-disable-next-line no-nested-ternary
@@ -215,3 +247,3 @@ return Component ? _react2.default.createElement(Component, this.props) : LoadingComponent ? _react2.default.createElement(LoadingComponent, this.props) : null;
       isBoundary: _react2.default.PropTypes.bool
-    }).isRequired
+    })
   };
@@ -225,7 +257,5 @@
       getNextId: _react2.default.PropTypes.func.isRequired,
-      getComponent: _react2.default.PropTypes.func.isRequired,
-      registerComponent: _react2.default.PropTypes.func.isRequired,
-      registerError: _react2.default.PropTypes.func.isRequired,
-      getError: _react2.default.PropTypes.func.isRequired
-    }).isRequired
+      resolved: _react2.default.PropTypes.func.isRequired,
+      shouldRehydrate: _react2.default.PropTypes.func.isRequired
+    })
   };
@@ -232,0 +262,0 @@

commonjs/AsyncComponentProvider.js

@@ -48,16 +48,7 @@ 'use strict';
           getNextId: this.asyncContext.getNextId,
-          registerComponent: this.asyncContext.registerComponent,
-          getComponent: this.asyncContext.getComponent,
-          registerError: this.asyncContext.registerError,
-          getError: this.asyncContext.getError,
-          getRehydrate: function getRehydrate(id) {
-            var error = _this2.rehydrateState.errors[id];
+          resolved: this.asyncContext.resolved,
+          shouldRehydrate: function shouldRehydrate(id) {
             var resolved = _this2.rehydrateState.resolved[id];
-            delete _this2.rehydrateState.errors[id];
             delete _this2.rehydrateState.resolved[id];
-            return {
-              // eslint-disable-next-line no-nested-ternary
-              type: error ? 'error' : resolved ? 'resolved' : 'unresolved',
-              error: error
-            };
+            return resolved;
           }
@@ -81,10 +72,7 @@ }
     getNextId: _react2.default.PropTypes.func.isRequired,
-    registerComponent: _react2.default.PropTypes.func.isRequired,
-    getComponent: _react2.default.PropTypes.func.isRequired,
-    registerError: _react2.default.PropTypes.func.isRequired,
-    getError: _react2.default.PropTypes.func.isRequired
+    resolved: _react2.default.PropTypes.func.isRequired,
+    getState: _react2.default.PropTypes.func.isRequired
   }),
   rehydrateState: _react2.default.PropTypes.shape({
-    resolved: _react2.default.PropTypes.object,
-    errors: _react2.default.PropTypes.object
+    resolved: _react2.default.PropTypes.object
   })
@@ -96,4 +84,3 @@ };
   rehydrateState: {
-    resolved: {},
-    errors: {}
+    resolved: {}
   }
@@ -105,7 +92,4 @@ };
     getNextId: _react2.default.PropTypes.func.isRequired,
-    registerComponent: _react2.default.PropTypes.func.isRequired,
-    getComponent: _react2.default.PropTypes.func.isRequired,
-    registerError: _react2.default.PropTypes.func.isRequired,
-    getError: _react2.default.PropTypes.func.isRequired,
-    getRehydrate: _react2.default.PropTypes.func.isRequired
+    resolved: _react2.default.PropTypes.func.isRequired,
+    shouldRehydrate: _react2.default.PropTypes.func.isRequired
   }).isRequired
@@ -112,0 +96,0 @@ };

commonjs/createAsyncContext.js

@@ -13,3 +13,2 @@ "use strict";
   var registry = {};
-  var errorRegistry = {};
   return {
@@ -20,14 +19,5 @@ getNextId: function getNextId() {
     },
-    registerComponent: function registerComponent(id, Component) {
-      registry[id] = Component;
+    resolved: function resolved(id) {
+      registry[id] = true;
     },
-    getComponent: function getComponent(id) {
-      return registry[id];
-    },
-    registerError: function registerError(id, message) {
-      errorRegistry[id] = message;
-    },
-    getError: function getError(id) {
-      return errorRegistry[id];
-    },
     getState: function getState() {
@@ -37,4 +27,3 @@ return {
           return Object.assign(acc, _defineProperty({}, cur, true));
-        }, {}),
-        errors: Object.assign({}, errorRegistry)
+        }, {})
       };
@@ -41,0 +30,0 @@ }

package.json

 {
   "name": "react-async-component",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Create Components that resolve asynchronously, with support for server side rendering and code splitting.",
@@ -64,7 +64,7 @@ "license": "MIT",
     "babel-core": "6.24.0",
-    "babel-eslint": "7.1.1",
+    "babel-eslint": "7.2.1",
     "babel-jest": "19.0.0",
     "babel-loader": "6.4.1",
     "babel-polyfill": "6.23.0",
-    "babel-preset-env": "1.2.2",
+    "babel-preset-env": "1.3.2",
     "babel-preset-latest": "6.24.0",
@@ -74,19 +74,20 @@ "babel-preset-react": "6.23.0",
     "babel-register": "6.24.0",
-    "codecov": "2.0.2",
-    "cross-env": "3.2.4",
-    "enzyme": "2.7.1",
+    "codecov": "2.1.0",
+    "cross-env": "4.0.0",
+    "enzyme": "2.8.0",
     "enzyme-to-json": "1.5.0",
-    "eslint": "3.17.1",
+    "eslint": "3.19.0",
     "eslint-config-airbnb": "14.1.0",
     "eslint-plugin-import": "2.2.0",
     "eslint-plugin-jsx-a11y": "4.0.0",
-    "eslint-plugin-react": "6.10.0",
+    "eslint-plugin-react": "6.10.3",
     "gzip-size": "3.0.0",
-    "husky": "0.13.2",
+    "husky": "0.13.3",
     "in-publish": "2.0.0",
     "jest": "19.0.2",
     "lint-staged": "3.4.0",
+    "memory-fs": "0.4.1",
     "prettier": "0.22.0",
-    "prettier-eslint": "4.3.2",
-    "prettier-eslint-cli": "^3.1.2",
+    "prettier-eslint": "4.4.0",
+    "prettier-eslint-cli": "3.2.0",
     "pretty-bytes": "4.0.2",
@@ -96,11 +97,11 @@ "ramda": "0.23.0",
     "react-addons-test-utils": "15.4.2",
-    "react-async-bootstrapper": "0.0.5",
+    "react-async-bootstrapper": "^1.0.0",
     "react-dom": "15.4.2",
-    "readline-sync": "1.4.6",
+    "readline-sync": "1.4.7",
     "rimraf": "2.6.1",
-    "sinon": "2.0.0",
-    "webpack": "2.2.1",
+    "sinon": "2.1.0",
+    "webpack": "2.3.3",
     "webpack-dev-middleware": "1.10.1",
-    "webpack-hot-middleware": "2.17.1"
+    "webpack-hot-middleware": "2.18.0"
   }
 }

README.md

@@ -15,4 +15,4 @@ > ___NOTE:___ This is an alpha release of the library.  The previous "stable" version is on the `0.x.x` branch.
   resolve: () => System.import('./AsyncProduct'),
-  LoadingComponent: ({ productId }) => <div>Loading {productId}</div>,
-  ErrorComponent: ({ error }) => <div>{error.message}</div>
+  LoadingComponent: ({ productId }) => <div>Loading {productId}</div>, // Optional
+  ErrorComponent: ({ error }) => <div>{error.message}</div> // Optional
 });
@@ -49,23 +49,5 @@
 
-Firstly, you need to wrap the rendering of your application with the `AsyncComponentProvider`:
+When creating your asynchronous components I recommend that you use the following folder/file structure:
 
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { AsyncComponentProvider } from 'react-async-component'; // 👈
-import MyApp from './components/MyApp';
-
-const app = (
-  // 👇
-  <AsyncComponentProvider>
-    <MyApp />
-  </AsyncComponentProvider>
-);
-
-ReactDOM.render(app, document.getElementById('app'));
 ```
-
-Now, let's create an asynchronous `Product` component.  I recommend that you use the following folder/file for your asynchronous components:
-
-```
  |- components
@@ -82,3 +64,3 @@ |- Product
 
-// Create async component 👇
+// Create an async component👇
 export default asyncComponent({
@@ -100,3 +82,3 @@ resolve: () => System.import('./AsyncProduct')
 
-Now, you can simply import `Product` anywhere in your application and not have to worry about having to call `createAsyncComponent` again.
+Now, you can simply import `Product` anywhere in your application and use it exactly as you would any other component.
 
@@ -137,6 +119,6 @@ For example:
     - `name` (_String_, Optional, default: `'AsyncComponent'`) : Use this if you would like to name the created async Component, which helps when firing up the React Dev Tools for example.
-    - `es6Aware` (_Boolean_, Optional, default: `true`) : Especially useful if you are resolving ES2015 modules. The resolved module will be checked to see if it has a `.default` and if so then the value attached to `.default` will be used.
-    - `ssrMode` (_Boolean_, Optional, default: `'render'`) : Only applies for server side rendering applications. Please see the documentation on server side rendering. The following values are allowed.
+    - `autoResolveES2015Default` (_Boolean_, Optional, default: `true`) : Especially useful if you are resolving ES2015 modules. The resolved module will be checked to see if it has a `.default` and if so then the value attached to `.default` will be used. So easy to forget to do that. 😀
+    - `serverMode` (_Boolean_, Optional, default: `'render'`) : Only applies for server side rendering applications. Please see the documentation on server side rendering. The following values are allowed.
       - __`'render'`__ - Your asynchronous component will be resolved and rendered on the server.  It's children will
-      be checked to see if there are any nested asynchronous component instances, which will then be processed based on the `ssrMode` value that was associated with them.
+      be checked to see if there are any nested asynchronous component instances, which will then be processed based on the `serverMode` value that was associated with them.
       - __`'defer'`__ - Your asynchronous component will _not_ be rendered on the server, instead deferring rendering to the client/browser.
@@ -194,8 +176,8 @@ - __`'boundary'`__ - Your asynchronous component will be resolved and rendered on the server. However, if it has a nested asynchronous component instance within it's children that component will be ignored and treated as being deferred for rendering in the client/browser instead.
 
-Wraps your application allowing for efficient and effective use of asynchronous components.
+Currently only useful when building server side rendering applications. Wraps your application allowing for efficient and effective use of asynchronous components.
 
 #### Props
 
- - `asyncContext` (_Object_, Optional) : You can optionally provide an asynchronous context (created using `createAsyncContext`).  If you don't provide one then an instance will be created automatically internally.  It can be useful to create and provide your own instance so that you can gain hooks into the context for advanced use cases such as server side rendering state rehydration or hot module replacement interoperability.
- - `rehydrateState` (_Object_, Optional) : Only useful in a server side rendering application (see the docs).  This allows you to provide the state returned by the server to be used to rehydrate the client appropriately, ensuring that it's rendered checksum will match that of the content rendered by the server.
+ - `asyncContext` (_Object_) : Used so that you can gain hooks into the context for server side rendering render tracking and rehydration. See the `createAsyncContext` helper for creating an instance.
+ - `rehydrateState` (_Object_, Optional) : Used on the "browser-side" of a server side rendering application (see the docs).  This allows you to provide the state returned by the server to be used to rehydrate the client appropriately.
 
@@ -210,4 +192,10 @@ ### `createAsyncContext()`
 
-This library has been designed for generic interoperability with [`react-async-bootstrapper`](https://github.com/ctrlplusb/react-async-bootstrapper). The `react-async-bootstrapper` utility allows us to do a "pre-render parse" of a React Element tree and execute any "bootstrapping" functions that are attached to a components within the tree. In our case the "bootstrapping" process involves the resolution of asynchronous components so that they can be rendered "synchronously" by the server.  We use this 3rd party library as it allows interoperability with other libraries which also require a "bootstrapping" process (e.g. data preloading as supported by [`react-jobs`](https://github.com/ctrlplusb/react-jobs)).
+> NOTE: This section only really applies if you would like to have control over the behaviour of how your asyncComponent instances are rendered on the server.  If you don't mind your asyncComponents always being resolved on the client only then you need not do any of the below.  In my opinion there is great value in just server rendering your app shell and having everything else resolve on the client, however, you may have very strict SEO needs - in which case, we have your back.
 
+This library has been designed for interoperability with [`react-async-bootstrapper`](https://github.com/ctrlplusb/react-async-bootstrapper).
+
+`react-async-bootstrapper` allows us to do a "pre-render parse" of our React Element tree and execute an `asyncBootstrap` function that are attached to a components within the tree. In our case the "bootstrapping" process involves the resolution of asynchronous components so that they can be rendered "synchronously" by the server.  We use this 3rd party library as it allows interoperability with other libraries which also require a "bootstrapping" process (e.g. data preloading as supported by [`react-jobs`](https://github.com/ctrlplusb/react-jobs)).
+
+> NOTE: I have not updated `react-jobs` to make use of `react-async-bootstrapper` as of yet.
+
 Firstly, install `react-async-bootstrapper`:
@@ -272,3 +260,3 @@
 import { render } from 'react-dom';
-import { AsyncComponentProvider } from 'react-async-component'; // 👈
+import { AsyncComponentProvider, createAsyncContext } from 'react-async-component'; // 👈
 import asyncBootstrapper from 'react-async-bootstrapper'; // 👈
@@ -278,8 +266,15 @@ import MyApp from './components/MyApp';
 // 👇 Get any "rehydrate" state sent back by the server
-const rehydrateState = window.ASYNC_COMPONENTS_STATE
+const rehydrateState = window.ASYNC_COMPONENTS_STATE;
 
+//   Create an async context so that state can be tracked
+// 👇 across the bootstrapping and rendering process.
+const asyncContext = createAsyncContext();
+
 //   Ensure you wrap your application with the provider,
 // 👇 and pass in the rehydrateState.
 const app = (
-  <AsyncComponentProvider rehydrateState={rehydrateState}>
+  <AsyncComponentProvider
+    rehydrateState={rehydrateState}
+    asyncContext={asyncContext}
+  >
     <MyApp />
@@ -308,3 +303,3 @@ </AsyncComponentProvider>
 
-As discussed in the ["SSR AsyncComponent Resolution Process"](#ssr-asyncComponent-resolution-process) section above it is possible to have an inefficient implementation of your `asyncComponent` instances.  Therefore we introduced a new configuration object property for the `asyncComponent` factory, called `ssrMode`, which provides you with a mechanism to optimise the configuration of your async Component instances.  Please see the API documentation for more information.
+As discussed in the ["SSR AsyncComponent Resolution Process"](#ssr-asyncComponent-resolution-process) section above it is possible to have an inefficient implementation of your `asyncComponent` instances.  Therefore we introduced a new configuration object property for the `asyncComponent` factory, called `serverMode`, which provides you with a mechanism to optimise the configuration of your async Component instances.  Please see the API documentation for more information.
 
@@ -311,0 +306,0 @@ Understand your own applications needs and use the options appropriately . I personally recommend using mostly "defer" and a bit of "boundary". Try to see code splitting as allowing you to server side render an application shell to give the user perceived performance. Of course there will be requirements otherwise (SEO), but try to isolate these components and use a "boundary" as soon as you feel you can.

umd/react-async-component.js

@@ -14,10 +14,10 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	var installedModules = {};
-
+/******/
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
-
+/******/
 /******/ 		// Check if module is in cache
 /******/ 		if(installedModules[moduleId])
 /******/ 			return installedModules[moduleId].exports;
-
+/******/
 /******/ 		// Create a new module (and put it into the cache)
@@ -29,23 +29,23 @@ /******/ 		var module = installedModules[moduleId] = {
 /******/ 		};
-
+/******/
 /******/ 		// Execute the module function
 /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-
+/******/
 /******/ 		// Flag the module as loaded
 /******/ 		module.l = true;
-
+/******/
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
-
-
+/******/
+/******/
 /******/ 	// expose the modules object (__webpack_modules__)
 /******/ 	__webpack_require__.m = modules;
-
+/******/
 /******/ 	// expose the module cache
 /******/ 	__webpack_require__.c = installedModules;
-
+/******/
 /******/ 	// identity function for calling harmony imports with the correct context
 /******/ 	__webpack_require__.i = function(value) { return value; };
-
+/******/
 /******/ 	// define getter function for harmony exports
@@ -61,3 +61,3 @@ /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 	};
-
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
@@ -71,9 +71,9 @@ /******/ 	__webpack_require__.n = function(module) {
 /******/ 	};
-
+/******/
 /******/ 	// Object.prototype.hasOwnProperty.call
 /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-
+/******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
-
+/******/
 /******/ 	// Load entry module and return exports
@@ -100,3 +100,2 @@ /******/ 	return __webpack_require__(__webpack_require__.s = 4);
   var registry = {};
-  var errorRegistry = {};
   return {
@@ -107,14 +106,5 @@ getNextId: function getNextId() {
     },
-    registerComponent: function registerComponent(id, Component) {
-      registry[id] = Component;
+    resolved: function resolved(id) {
+      registry[id] = true;
     },
-    getComponent: function getComponent(id) {
-      return registry[id];
-    },
-    registerError: function registerError(id, message) {
-      errorRegistry[id] = message;
-    },
-    getError: function getError(id) {
-      return errorRegistry[id];
-    },
     getState: function getState() {
@@ -124,4 +114,3 @@ return {
           return Object.assign(acc, _defineProperty({}, cur, true));
-        }, {}),
-        errors: Object.assign({}, errorRegistry)
+        }, {})
       };
@@ -190,16 +179,7 @@ }
           getNextId: this.asyncContext.getNextId,
-          registerComponent: this.asyncContext.registerComponent,
-          getComponent: this.asyncContext.getComponent,
-          registerError: this.asyncContext.registerError,
-          getError: this.asyncContext.getError,
-          getRehydrate: function getRehydrate(id) {
-            var error = _this2.rehydrateState.errors[id];
+          resolved: this.asyncContext.resolved,
+          shouldRehydrate: function shouldRehydrate(id) {
             var resolved = _this2.rehydrateState.resolved[id];
-            delete _this2.rehydrateState.errors[id];
             delete _this2.rehydrateState.resolved[id];
-            return {
-              // eslint-disable-next-line no-nested-ternary
-              type: error ? 'error' : resolved ? 'resolved' : 'unresolved',
-              error: error
-            };
+            return resolved;
           }
@@ -223,10 +203,7 @@ }
     getNextId: _react2.default.PropTypes.func.isRequired,
-    registerComponent: _react2.default.PropTypes.func.isRequired,
-    getComponent: _react2.default.PropTypes.func.isRequired,
-    registerError: _react2.default.PropTypes.func.isRequired,
-    getError: _react2.default.PropTypes.func.isRequired
+    resolved: _react2.default.PropTypes.func.isRequired,
+    getState: _react2.default.PropTypes.func.isRequired
   }),
   rehydrateState: _react2.default.PropTypes.shape({
-    resolved: _react2.default.PropTypes.object,
-    errors: _react2.default.PropTypes.object
+    resolved: _react2.default.PropTypes.object
   })
@@ -238,4 +215,3 @@ };
   rehydrateState: {
-    resolved: {},
-    errors: {}
+    resolved: {}
   }
@@ -247,7 +223,4 @@ };
     getNextId: _react2.default.PropTypes.func.isRequired,
-    registerComponent: _react2.default.PropTypes.func.isRequired,
-    getComponent: _react2.default.PropTypes.func.isRequired,
-    registerError: _react2.default.PropTypes.func.isRequired,
-    getError: _react2.default.PropTypes.func.isRequired,
-    getRehydrate: _react2.default.PropTypes.func.isRequired
+    resolved: _react2.default.PropTypes.func.isRequired,
+    shouldRehydrate: _react2.default.PropTypes.func.isRequired
   }).isRequired
@@ -290,6 +263,6 @@ };
       resolve = args.resolve,
-      _args$es6Aware = args.es6Aware,
-      es6Aware = _args$es6Aware === undefined ? true : _args$es6Aware,
-      _args$ssrMode = args.ssrMode,
-      ssrMode = _args$ssrMode === undefined ? 'render' : _args$ssrMode,
+      _args$autoResolveES = args.autoResolveES2015Default,
+      autoResolveES2015Default = _args$autoResolveES === undefined ? true : _args$autoResolveES,
+      _args$serverMode = args.serverMode,
+      serverMode = _args$serverMode === undefined ? 'render' : _args$serverMode,
       LoadingComponent = args.LoadingComponent,
@@ -299,25 +272,40 @@ ErrorComponent = args.ErrorComponent;
 
-  if (validSSRModes.indexOf(ssrMode) === -1) {
-    throw new Error('Invalid ssrMode provided to asyncComponent');
+  if (validSSRModes.indexOf(serverMode) === -1) {
+    throw new Error('Invalid serverMode provided to asyncComponent');
   }
 
-  var id = null;
+  var env = typeof window === 'undefined' ? 'node' : 'browser';
 
+  var sharedState = {
+    // A unique id we will assign to our async component which is especially
+    // useful when rehydrating server side rendered async components.
+    id: null,
+    // This will be use to hold the resolved module allowing sharing across
+    // instances.
+    // NOTE: When using React Hot Loader this reference will become null.
+    module: null,
+    // If an error occurred during a resolution it will be stored here.
+    error: null,
+    // Allows us to share the resolver promise across instances.
+    resolver: null
+  };
+
   // 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.
   var es6Resolve = function es6Resolve(x) {
-    return es6Aware && (typeof x === 'function' || (typeof x === 'undefined' ? 'undefined' : _typeof(x)) === 'object') && typeof x.default !== 'undefined' ? x.default : x;
+    return autoResolveES2015Default && x != null && (typeof x === 'function' || (typeof x === 'undefined' ? 'undefined' : _typeof(x)) === 'object') && x.default ? x.default : x;
   };
 
   var getResolver = function getResolver() {
-    var resolver = void 0;
-    try {
-      resolver = resolve();
-    } catch (err) {
-      return Promise.reject(err);
+    if (sharedState.resolver == null) {
+      try {
+        // Wrap whatever the user returns in Promise.resolve to ensure a Promise
+        // is always returned.
+        var resolver = resolve();
+        sharedState.resolver = Promise.resolve(resolver);
+      } catch (err) {
+        sharedState.resolver = Promise.reject(err);
+      }
     }
-
-    // Just in case the user is returning the component synchronously, we
-    // will ensure it gets wrapped into a promise
-    return Promise.resolve(resolver);
+    return sharedState.resolver;
   };
@@ -331,12 +319,10 @@
 
-      var _this = _possibleConstructorReturn(this, (AsyncComponent.__proto__ || Object.getPrototypeOf(AsyncComponent)).call(this, props));
+      // We have to set the id in the constructor because a RHL seems
+      // to recycle the module and therefore the id closure will be null.
+      // We can't put it in componentWillMount as RHL hot swaps the new code
+      // so the mount call will not happen (but the ctor does).
+      var _this = _possibleConstructorReturn(this, (AsyncComponent.__proto__ || Object.getPrototypeOf(AsyncComponent)).call(this, props, context));
 
-      _this.state = { Component: null };
-
-      // Assign a unique id to this instance if it hasn't already got one.
-      var asyncComponents = context.asyncComponents;
-      var getNextId = asyncComponents.getNextId;
-
-      if (!id) {
-        id = getNextId();
+      if (_this.context.asyncComponents && !sharedState.id) {
+        sharedState.id = _this.context.asyncComponents.getNextId();
       }
@@ -349,5 +335,9 @@ return _this;
       value: function getChildContext() {
+        if (!this.context.asyncComponents) {
+          return undefined;
+        }
+
         return {
           asyncComponentsAncestor: {
-            isBoundary: ssrMode === 'boundary'
+            isBoundary: serverMode === 'boundary'
           }
@@ -357,10 +347,14 @@ };
     }, {
+      key: 'componentWillMount',
+      value: function componentWillMount() {
+        this.setState({ module: sharedState.module });
+        if (sharedState.error) {
+          this.registerErrorState(sharedState.error);
+        }
+      }
+    }, {
       key: 'componentDidMount',
       value: function componentDidMount() {
-        var asyncComponents = this.context.asyncComponents;
-        var getComponent = asyncComponents.getComponent,
-            getError = asyncComponents.getError;
-
-        if (!getError(id) && !getComponent(id)) {
-          this.resolveComponent();
+        if (!this.state.module) {
+          this.resolveModule();
         }
@@ -372,14 +366,15 @@ }
     }, {
-      key: 'asyncBootstrapperTarget',
-      value: function asyncBootstrapperTarget() {
+      key: 'asyncBootstrap',
+      value: function asyncBootstrap() {
         var _this2 = this;
 
-        var asyncComponents = this.context.asyncComponents;
-        var registerError = asyncComponents.registerError,
-            getRehydrate = asyncComponents.getRehydrate;
+        var _context = this.context,
+            asyncComponents = _context.asyncComponents,
+            asyncComponentsAncestor = _context.asyncComponentsAncestor;
+        var shouldRehydrate = asyncComponents.shouldRehydrate;
 
 
         var doResolve = function doResolve() {
-          return _this2.resolveComponent().then(function (Component) {
-            return typeof Component === 'function';
+          return _this2.resolveModule().then(function (module) {
+            return module !== undefined;
           });
@@ -390,54 +385,44 @@ };
           // BROWSER BASED LOGIC
-
-          var _getRehydrate = getRehydrate(id),
-              type = _getRehydrate.type,
-              error = _getRehydrate.error;
-
-          if (type === 'unresolved') {
-            return false;
-          }
-          if (type === 'error') {
-            registerError(id, error);
-            return false;
-          }
-          return doResolve();
+          return shouldRehydrate(sharedState.id) ? doResolve() : false;
         }
 
-        // NODE BASED LOGIC
-
-        var asyncComponentsAncestor = this.context.asyncComponentsAncestor;
-
+        // SERVER BASED LOGIC
         var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
-
-        if (ssrMode === 'defer' || isChildOfBoundary) {
-          return false;
-        }
-
-        return doResolve();
+        return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
       }
     }, {
-      key: 'resolveComponent',
-      value: function resolveComponent() {
+      key: 'resolveModule',
+      value: function resolveModule() {
         var _this3 = this;
 
-        return getResolver().then(function (Component) {
+        this.resolving = true;
+
+        return getResolver().then(function (module) {
           if (_this3.unmounted) {
             return undefined;
           }
-          _this3.context.asyncComponents.registerComponent(id, Component);
-          if (_this3.setState) {
-            _this3.setState({
-              Component: es6Resolve(Component)
-            });
+          if (_this3.context.asyncComponents) {
+            _this3.context.asyncComponents.resolved(sharedState.id);
           }
-          return Component;
+          sharedState.module = module;
+          if (env === 'browser') {
+            _this3.setState({ module: module });
+          }
+          _this3.resolving = false;
+          return module;
         }).catch(function (error) {
-          if (false) {
+          if (_this3.unmounted) {
+            return undefined;
+          }
+          if (env === 'node' || !ErrorComponent) {
+            // We will at least log the error so that user isn't completely
+            // unaware of an error occurring.
             // eslint-disable-next-line no-console
-            console.log('Error resolving async component:');
+            // console.warn('Failed to resolve asyncComponent')
             // eslint-disable-next-line no-console
-            console.log(error);
+            // console.warn(error)
           }
-          _this3.context.asyncComponents.registerError(id, error.message);
-          _this3.setState({ error: error.message });
+          sharedState.error = error;
+          _this3.registerErrorState(error);
+          _this3.resolving = false;
           return undefined;
@@ -452,15 +437,35 @@ });
     }, {
+      key: 'registerErrorState',
+      value: function registerErrorState(error) {
+        var _this4 = this;
+
+        if (env === 'browser') {
+          setTimeout(function () {
+            if (!_this4.unmounted) {
+              _this4.setState({ error: error });
+            }
+          }, 16);
+        }
+      }
+    }, {
       key: 'render',
       value: function render() {
-        var asyncComponents = this.context.asyncComponents;
-        var getComponent = asyncComponents.getComponent,
-            getError = asyncComponents.getError;
+        var _state = this.state,
+            module = _state.module,
+            error = _state.error;
 
+        // This is as workaround for React Hot Loader support.  When using
+        // RHL the local component reference will be killed by any change
+        // to the component, this will be our signal to know that we need to
+        // re-resolve it.
 
-        var error = getError(id);
+        if (sharedState.module == null && !this.resolving && typeof window !== 'undefined') {
+          this.resolveModule();
+        }
+
         if (error) {
-          return ErrorComponent ? _react2.default.createElement(ErrorComponent, { message: error }) : null;
+          return ErrorComponent ? _react2.default.createElement(ErrorComponent, { error: error }) : null;
         }
 
-        var Component = es6Resolve(getComponent(id));
+        var Component = es6Resolve(module);
         // eslint-disable-next-line no-nested-ternary
@@ -477,3 +482,3 @@ return Component ? _react2.default.createElement(Component, this.props) : LoadingComponent ? _react2.default.createElement(LoadingComponent, this.props) : null;
       isBoundary: _react2.default.PropTypes.bool
-    }).isRequired
+    })
   };
@@ -487,7 +492,5 @@
       getNextId: _react2.default.PropTypes.func.isRequired,
-      getComponent: _react2.default.PropTypes.func.isRequired,
-      registerComponent: _react2.default.PropTypes.func.isRequired,
-      registerError: _react2.default.PropTypes.func.isRequired,
-      getError: _react2.default.PropTypes.func.isRequired
-    }).isRequired
+      resolved: _react2.default.PropTypes.func.isRequired,
+      shouldRehydrate: _react2.default.PropTypes.func.isRequired
+    })
   };
@@ -494,0 +497,0 @@

umd/react-async-component.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactAsyncComponent=t(require("react")):e.ReactAsyncComponent=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,r){"use strict";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(){var e=0,t={},r={};return{getNextId:function(){return e+=1},registerComponent:function(e,r){t[e]=r},getComponent:function(e){return t[e]},registerError:function(e,t){r[e]=t},getError:function(e){return r[e]},getState:function(){return{resolved:Object.keys(t).reduce(function(e,t){return Object.assign(e,n({},t,!0))},{}),errors:Object.assign({},r)}}}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),a=r(1),c=n(a),p=r(0),f=n(p),l=function(e){function t(){return o(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,e),i(t,[{key:"componentWillMount",value:function(){this.asyncContext=this.props.asyncContext||(0,f.default)(),this.rehydrateState=this.props.rehydrateState}},{key:"getChildContext",value:function(){var e=this;return{asyncComponents:{getNextId:this.asyncContext.getNextId,registerComponent:this.asyncContext.registerComponent,getComponent:this.asyncContext.getComponent,registerError:this.asyncContext.registerError,getError:this.asyncContext.getError,getRehydrate:function(t){var r=e.rehydrateState.errors[t],n=e.rehydrateState.resolved[t];return delete e.rehydrateState.errors[t],delete e.rehydrateState.resolved[t],{type:r?"error":n?"resolved":"unresolved",error:r}}}}}},{key:"render",value:function(){return c.default.Children.only(this.props.children)}}]),t}(c.default.Component);l.propTypes={children:c.default.PropTypes.node.isRequired,asyncContext:c.default.PropTypes.shape({getNextId:c.default.PropTypes.func.isRequired,registerComponent:c.default.PropTypes.func.isRequired,getComponent:c.default.PropTypes.func.isRequired,registerError:c.default.PropTypes.func.isRequired,getError:c.default.PropTypes.func.isRequired}),rehydrateState:c.default.PropTypes.shape({resolved:c.default.PropTypes.object,errors:c.default.PropTypes.object})},l.defaultProps={asyncContext:void 0,rehydrateState:{resolved:{},errors:{}}},l.childContextTypes={asyncComponents:c.default.PropTypes.shape({getNextId:c.default.PropTypes.func.isRequired,registerComponent:c.default.PropTypes.func.isRequired,getComponent:c.default.PropTypes.func.isRequired,registerError:c.default.PropTypes.func.isRequired,getError:c.default.PropTypes.func.isRequired,getRehydrate:c.default.PropTypes.func.isRequired}).isRequired},t.default=l},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e){var t=e.name,r=e.resolve,n=e.es6Aware,i=void 0===n||n,p=e.ssrMode,d=void 0===p?"render":p,y=e.LoadingComponent,m=e.ErrorComponent;if(l.indexOf(d)===-1)throw new Error("Invalid ssrMode provided to asyncComponent");var h=null,v=function(e){return!i||"function"!=typeof e&&"object"!==("undefined"==typeof e?"undefined":c(e))||"undefined"==typeof e.default?e:e.default},C=function(){var e=void 0;try{e=r()}catch(e){return Promise.reject(e)}return Promise.resolve(e)},b=function(e){function t(e,r){o(this,t);var n=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));n.state={Component:null};var s=r.asyncComponents,i=s.getNextId;return h||(h=i()),n}return s(t,e),a(t,[{key:"getChildContext",value:function(){return{asyncComponentsAncestor:{isBoundary:"boundary"===d}}}},{key:"componentDidMount",value:function(){var e=this.context.asyncComponents,t=e.getComponent,r=e.getError;r(h)||t(h)||this.resolveComponent()}},{key:"asyncBootstrapperTarget",value:function(){var e=this,t=this.context.asyncComponents,r=t.registerError,n=t.getRehydrate,o=function(){return e.resolveComponent().then(function(e){return"function"==typeof e})};if("undefined"!=typeof window){var u=n(h),s=u.type,i=u.error;return"unresolved"!==s&&("error"===s?(r(h,i),!1):o())}var a=this.context.asyncComponentsAncestor,c=a&&a.isBoundary;return"defer"!==d&&!c&&o()}},{key:"resolveComponent",value:function(){var e=this;return C().then(function(t){if(!e.unmounted)return e.context.asyncComponents.registerComponent(h,t),e.setState&&e.setState({Component:v(t)}),t}).catch(function(t){e.context.asyncComponents.registerError(h,t.message),e.setState({error:t.message})})}},{key:"componentWillUnmount",value:function(){this.unmounted=!0}},{key:"render",value:function(){var e=this.context.asyncComponents,t=e.getComponent,r=e.getError,n=r(h);if(n)return m?f.default.createElement(m,{message:n}):null;var o=v(t(h));return o?f.default.createElement(o,this.props):y?f.default.createElement(y,this.props):null}}]),t}(f.default.Component);return b.childContextTypes={asyncComponentsAncestor:f.default.PropTypes.shape({isBoundary:f.default.PropTypes.bool}).isRequired},b.contextTypes={asyncComponentsAncestor:f.default.PropTypes.shape({isBoundary:f.default.PropTypes.bool}),asyncComponents:f.default.PropTypes.shape({getNextId:f.default.PropTypes.func.isRequired,getComponent:f.default.PropTypes.func.isRequired,registerComponent:f.default.PropTypes.func.isRequired,registerError:f.default.PropTypes.func.isRequired,getError:f.default.PropTypes.func.isRequired}).isRequired},b.displayName=t||"AsyncComponent",b}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p=r(1),f=n(p),l=["render","defer","boundary"];t.default=i},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.asyncComponent=t.createAsyncContext=t.AsyncComponentProvider=void 0;var o=r(2),u=n(o),s=r(0),i=n(s),a=r(3),c=n(a);t.AsyncComponentProvider=u.default,t.createAsyncContext=i.default,t.asyncComponent=c.default}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactAsyncComponent=t(require("react")):e.ReactAsyncComponent=t(e.React)}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(){var e=0,t={};return{getNextId:function(){return e+=1},resolved:function(e){t[e]=!0},getState:function(){return{resolved:Object.keys(t).reduce(function(e,t){return Object.assign(e,o({},t,!0))},{})}}}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r},function(t,n){t.exports=e},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(1),l=o(a),c=n(0),f=o(c),d=function(e){function t(){return r(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,e),i(t,[{key:"componentWillMount",value:function(){this.asyncContext=this.props.asyncContext||(0,f.default)(),this.rehydrateState=this.props.rehydrateState}},{key:"getChildContext",value:function(){var e=this;return{asyncComponents:{getNextId:this.asyncContext.getNextId,resolved:this.asyncContext.resolved,shouldRehydrate:function(t){var n=e.rehydrateState.resolved[t];return delete e.rehydrateState.resolved[t],n}}}}},{key:"render",value:function(){return l.default.Children.only(this.props.children)}}]),t}(l.default.Component);d.propTypes={children:l.default.PropTypes.node.isRequired,asyncContext:l.default.PropTypes.shape({getNextId:l.default.PropTypes.func.isRequired,resolved:l.default.PropTypes.func.isRequired,getState:l.default.PropTypes.func.isRequired}),rehydrateState:l.default.PropTypes.shape({resolved:l.default.PropTypes.object})},d.defaultProps={asyncContext:void 0,rehydrateState:{resolved:{}}},d.childContextTypes={asyncComponents:l.default.PropTypes.shape({getNextId:l.default.PropTypes.func.isRequired,resolved:l.default.PropTypes.func.isRequired,shouldRehydrate:l.default.PropTypes.func.isRequired}).isRequired},t.default=d},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){var t=e.name,n=e.resolve,s=e.autoResolveES2015Default,l=void 0===s||s,d=e.serverMode,p=void 0===d?"render":d,y=e.LoadingComponent,v=e.ErrorComponent;if(f.indexOf(p)===-1)throw new Error("Invalid serverMode provided to asyncComponent");var h="undefined"==typeof window?"node":"browser",m={id:null,module:null,error:null,resolver:null},b=function(e){return l&&null!=e&&("function"==typeof e||"object"===(void 0===e?"undefined":a(e)))&&e.default?e.default:e},C=function(){if(null==m.resolver)try{var e=n();m.resolver=Promise.resolve(e)}catch(e){m.resolver=Promise.reject(e)}return m.resolver},x=function(e){function t(e,n){o(this,t);var u=r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return u.context.asyncComponents&&!m.id&&(m.id=u.context.asyncComponents.getNextId()),u}return u(t,e),i(t,[{key:"getChildContext",value:function(){if(this.context.asyncComponents)return{asyncComponentsAncestor:{isBoundary:"boundary"===p}}}},{key:"componentWillMount",value:function(){this.setState({module:m.module}),m.error&&this.registerErrorState(m.error)}},{key:"componentDidMount",value:function(){this.state.module||this.resolveModule()}},{key:"asyncBootstrap",value:function(){var e=this,t=this.context,n=t.asyncComponents,o=t.asyncComponentsAncestor,r=n.shouldRehydrate,u=function(){return e.resolveModule().then(function(e){return void 0!==e})};if("undefined"!=typeof window)return!!r(m.id)&&u();var s=o&&o.isBoundary;return"defer"!==p&&!s&&u()}},{key:"resolveModule",value:function(){var e=this;return this.resolving=!0,C().then(function(t){if(!e.unmounted)return e.context.asyncComponents&&e.context.asyncComponents.resolved(m.id),m.module=t,"browser"===h&&e.setState({module:t}),e.resolving=!1,t}).catch(function(t){e.unmounted||(m.error=t,e.registerErrorState(t),e.resolving=!1)})}},{key:"componentWillUnmount",value:function(){this.unmounted=!0}},{key:"registerErrorState",value:function(e){var t=this;"browser"===h&&setTimeout(function(){t.unmounted||t.setState({error:e})},16)}},{key:"render",value:function(){var e=this.state,t=e.module,n=e.error;if(null!=m.module||this.resolving||"undefined"==typeof window||this.resolveModule(),n)return v?c.default.createElement(v,{error:n}):null;var o=b(t);return o?c.default.createElement(o,this.props):y?c.default.createElement(y,this.props):null}}]),t}(c.default.Component);return x.childContextTypes={asyncComponentsAncestor:c.default.PropTypes.shape({isBoundary:c.default.PropTypes.bool})},x.contextTypes={asyncComponentsAncestor:c.default.PropTypes.shape({isBoundary:c.default.PropTypes.bool}),asyncComponents:c.default.PropTypes.shape({getNextId:c.default.PropTypes.func.isRequired,resolved:c.default.PropTypes.func.isRequired,shouldRehydrate:c.default.PropTypes.func.isRequired})},x.displayName=t||"AsyncComponent",x}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l=n(1),c=function(e){return e&&e.__esModule?e:{default:e}}(l),f=["render","defer","boundary"];t.default=s},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.asyncComponent=t.createAsyncContext=t.AsyncComponentProvider=void 0;var r=n(2),u=o(r),s=n(0),i=o(s),a=n(3),l=o(a);t.AsyncComponentProvider=u.default,t.createAsyncContext=i.default,t.asyncComponent=l.default}])});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

61613

decreased by-47.72%

Dev dependency count

42

increased by2.44%

Number of package files

9

decreased by-66.67%

Lines of code

760

decreased by-64.81%

Number of lines in readme file

305

decreased by-1.61%

No dependency changes