Fixes issue where errors would be swallowed. They now get reported always on node run, and will get reported on browser if no ErrorComponent is specified.

Updates dependencies.
Updates documentation.

Author: ctrlplusb

.babelrc

@@ -4,20 +4,29 @@
     "stage-3",
     "react"
   ],
+  "plugins": [
+    "transform-class-properties"
+  ],
   "env": {
     "commonjs": {
       "presets": [
         "latest",
         "stage-3",
         "react"
       ],
+      "plugins": [
+        "transform-class-properties"
+      ]
     },
     "umd": {
       "presets": [
         ["latest", { "es2015": { "modules": false } }],
         "stage-3",
         "react"
       ],
+      "plugins": [
+        "transform-class-properties"
+      ]
     }
   }
 }

README.md

@@ -100,11 +100,11 @@ The asynchronous component factory. Config goes in, an asynchronous component co
   - `config` (_Object_) : The configuration object for the async Component. It has the following properties available:
     - `resolve` (_() => Promise<Component>_) : A function that should return a `Promise` that will resolve the Component you wish to be async.
     - `LoadingComponent` (_Component_, Optional, default: `null`) : A Component that will be displayed until your async Component is resolved. All props will be passed to it.
-    - `ErrorComponent` (_Component_, Optional, default: `null`) : A Component that will be displayed if any error occurred whilst trying to resolve your component. All props will be passed to it as well as an `error` prop which is an object with a `message` and  `stack` property.
+    - `ErrorComponent` (_Component_, Optional, default: `null`) : A Component that will be displayed if any error occurred whilst trying to resolve your component. All props will be passed to it as well as an `error` prop containing the `Error`.
     - `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.
     - `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
+    - `serverMode` (_Boolean_, Optional, default: `'resolve'`) : Only applies for server side rendering applications. Please see the documentation on server side rendering. The following values are allowed.
+      - __`'resolve'`__ - 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 `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.
       - __`'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 (it's serverMode will be ignored).
@@ -210,7 +210,7 @@ export default function expressMiddleware(req, res, next) {
       // We can now render our app 👇
       const appString = renderToString(app)
 
-      // 👇 Get the async component state.
+      // Get the async component state. 👇
       const asyncState = asyncContext.getState()
 
       const html = `
@@ -244,17 +244,10 @@ import MyApp from './components/MyApp'
 // 👇 Get any "rehydrate" state sent back by the server
 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}
-    asyncContext={asyncContext}
-  >
+  <AsyncComponentProvider  rehydrateState={rehydrateState}>
     <MyApp />
   </AsyncComponentProvider>
 )

commonjs/AsyncComponentProvider.js

@@ -75,20 +75,17 @@ AsyncComponentProvider.propTypes = {
     resolved: _react2.default.PropTypes.object
   })
 };
-
 AsyncComponentProvider.defaultProps = {
   asyncContext: undefined,
   rehydrateState: {
     resolved: {}
   }
 };
-
 AsyncComponentProvider.childContextTypes = {
   asyncComponents: _react2.default.PropTypes.shape({
     getNextId: _react2.default.PropTypes.func.isRequired,
     resolved: _react2.default.PropTypes.func.isRequired,
     shouldRehydrate: _react2.default.PropTypes.func.isRequired
   }).isRequired
 };
-
 exports.default = AsyncComponentProvider;

commonjs/asyncComponent.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@@ -20,17 +22,17 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var validSSRModes = ['render', 'defer', 'boundary'];
+var validSSRModes = ['resolve', 'defer', 'boundary'];
 
-function asyncComponent(args) {
-  var name = args.name,
-      resolve = args.resolve,
-      _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,
-      ErrorComponent = args.ErrorComponent;
+function asyncComponent(config) {
+  var name = config.name,
+      resolve = config.resolve,
+      _config$autoResolveES = config.autoResolveES2015Default,
+      autoResolveES2015Default = _config$autoResolveES === undefined ? true : _config$autoResolveES,
+      _config$serverMode = config.serverMode,
+      serverMode = _config$serverMode === undefined ? 'resolve' : _config$serverMode,
+      LoadingComponent = config.LoadingComponent,
+      ErrorComponent = config.ErrorComponent;
 
 
   if (validSSRModes.indexOf(serverMode) === -1) {
@@ -91,7 +93,35 @@ function asyncComponent(args) {
       return _this;
     }
 
+    // @see react-async-bootstrapper
+
+
     _createClass(AsyncComponent, [{
+      key: 'asyncBootstrap',
+      value: function asyncBootstrap() {
+        var _this2 = this;
+
+        var _context = this.context,
+            asyncComponents = _context.asyncComponents,
+            asyncComponentsAncestor = _context.asyncComponentsAncestor;
+        var shouldRehydrate = asyncComponents.shouldRehydrate;
+
+
+        var doResolve = function doResolve() {
+          return _this2.resolveModule().then(function (module) {
+            return module !== undefined;
+          });
+        };
+
+        if (env === 'browser') {
+          return shouldRehydrate(sharedState.id) ? doResolve() : false;
+        }
+
+        // node
+        var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
+        return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
+      }
+    }, {
       key: 'getChildContext',
       value: function getChildContext() {
         if (!this.context.asyncComponents) {
@@ -119,35 +149,6 @@ function asyncComponent(args) {
           this.resolveModule();
         }
       }
-
-      // @see react-async-bootstrapper
-
-    }, {
-      key: 'asyncBootstrap',
-      value: function asyncBootstrap() {
-        var _this2 = this;
-
-        var _context = this.context,
-            asyncComponents = _context.asyncComponents,
-            asyncComponentsAncestor = _context.asyncComponentsAncestor;
-        var shouldRehydrate = asyncComponents.shouldRehydrate;
-
-
-        var doResolve = function doResolve() {
-          return _this2.resolveModule().then(function (module) {
-            return module !== undefined;
-          });
-        };
-
-        if (typeof window !== 'undefined') {
-          // BROWSER BASED LOGIC
-          return shouldRehydrate(sharedState.id) ? doResolve() : false;
-        }
-
-        // SERVER BASED LOGIC
-        var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
-        return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
-      }
     }, {
       key: 'resolveModule',
       value: function resolveModule() {
@@ -172,13 +173,13 @@ function asyncComponent(args) {
           if (_this3.unmounted) {
             return undefined;
           }
-          if (env === 'node' || !ErrorComponent) {
+          if (env === 'node' || env === 'browser' && !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.warn('Failed to resolve asyncComponent')
+            console.warn('Failed to resolve asyncComponent');
             // eslint-disable-next-line no-console
-            // console.warn(error)
+            console.warn(error);
           }
           sharedState.error = error;
           _this3.registerErrorState(error);
@@ -221,7 +222,7 @@ function asyncComponent(args) {
         }
 
         if (error) {
-          return ErrorComponent ? _react2.default.createElement(ErrorComponent, { error: error }) : null;
+          return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
         }
 
         var Component = es6Resolve(module);
@@ -233,12 +234,7 @@ function asyncComponent(args) {
     return AsyncComponent;
   }(_react2.default.Component);
 
-  AsyncComponent.childContextTypes = {
-    asyncComponentsAncestor: _react2.default.PropTypes.shape({
-      isBoundary: _react2.default.PropTypes.bool
-    })
-  };
-
+  AsyncComponent.displayName = name || 'AsyncComponent';
   AsyncComponent.contextTypes = {
     asyncComponentsAncestor: _react2.default.PropTypes.shape({
       isBoundary: _react2.default.PropTypes.bool
@@ -249,8 +245,12 @@ function asyncComponent(args) {
       shouldRehydrate: _react2.default.PropTypes.func.isRequired
     })
   };
+  AsyncComponent.childContextTypes = {
+    asyncComponentsAncestor: _react2.default.PropTypes.shape({
+      isBoundary: _react2.default.PropTypes.bool
+    })
+  };
 
-  AsyncComponent.displayName = name || 'AsyncComponent';
 
   return AsyncComponent;
 }

package.json

@@ -64,6 +64,7 @@
     "babel-eslint": "7.2.1",
     "babel-jest": "19.0.0",
     "babel-loader": "6.4.1",
+    "babel-plugin-transform-class-properties": "6.23.0",
     "babel-polyfill": "6.23.0",
     "babel-preset-env": "1.3.2",
     "babel-preset-latest": "6.24.0",
@@ -92,7 +93,7 @@
     "ramda": "0.23.0",
     "react": "15.4.2",
     "react-addons-test-utils": "15.4.2",
-    "react-async-bootstrapper": "^1.0.0",
+    "react-async-bootstrapper": "^1.0.1",
     "react-dom": "15.4.2",
     "readline-sync": "1.4.7",
     "rimraf": "2.6.1",

src/AsyncComponentProvider.js

@@ -3,6 +3,33 @@ import React from 'react'
 import createAsyncContext from './createAsyncContext'
 
 class AsyncComponentProvider extends React.Component {
+  static propTypes = {
+    children: React.PropTypes.node.isRequired,
+    asyncContext: React.PropTypes.shape({
+      getNextId: React.PropTypes.func.isRequired,
+      resolved: React.PropTypes.func.isRequired,
+      getState: React.PropTypes.func.isRequired,
+    }),
+    rehydrateState: React.PropTypes.shape({
+      resolved: React.PropTypes.object,
+    }),
+  };
+
+  static defaultProps = {
+    asyncContext: undefined,
+    rehydrateState: {
+      resolved: {},
+    },
+  };
+
+  static childContextTypes = {
+    asyncComponents: React.PropTypes.shape({
+      getNextId: React.PropTypes.func.isRequired,
+      resolved: React.PropTypes.func.isRequired,
+      shouldRehydrate: React.PropTypes.func.isRequired,
+    }).isRequired,
+  };
+
   componentWillMount() {
     this.asyncContext = this.props.asyncContext || createAsyncContext()
     this.rehydrateState = this.props.rehydrateState
@@ -27,31 +54,4 @@ class AsyncComponentProvider extends React.Component {
   }
 }
 
-AsyncComponentProvider.propTypes = {
-  children: React.PropTypes.node.isRequired,
-  asyncContext: React.PropTypes.shape({
-    getNextId: React.PropTypes.func.isRequired,
-    resolved: React.PropTypes.func.isRequired,
-    getState: React.PropTypes.func.isRequired,
-  }),
-  rehydrateState: React.PropTypes.shape({
-    resolved: React.PropTypes.object,
-  }),
-}
-
-AsyncComponentProvider.defaultProps = {
-  asyncContext: undefined,
-  rehydrateState: {
-    resolved: {},
-  },
-}
-
-AsyncComponentProvider.childContextTypes = {
-  asyncComponents: React.PropTypes.shape({
-    getNextId: React.PropTypes.func.isRequired,
-    resolved: React.PropTypes.func.isRequired,
-    shouldRehydrate: React.PropTypes.func.isRequired,
-  }).isRequired,
-}
-
 export default AsyncComponentProvider