Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 9dbc835

Browse files
ctrlplusbctrlplusb
committedApr 5, 2017
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.
1 parent 89caadd commit 9dbc835

10 files changed

+211
-200
lines changed
 

‎.babelrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,29 @@
44
"stage-3",
55
"react"
66
],
7+
"plugins": [
8+
"transform-class-properties"
9+
],
710
"env": {
811
"commonjs": {
912
"presets": [
1013
"latest",
1114
"stage-3",
1215
"react"
1316
],
17+
"plugins": [
18+
"transform-class-properties"
19+
]
1420
},
1521
"umd": {
1622
"presets": [
1723
["latest", { "es2015": { "modules": false } }],
1824
"stage-3",
1925
"react"
2026
],
27+
"plugins": [
28+
"transform-class-properties"
29+
]
2130
}
2231
}
2332
}

‎README.md

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,11 @@ The asynchronous component factory. Config goes in, an asynchronous component co
100100
- `config` (_Object_) : The configuration object for the async Component. It has the following properties available:
101101
- `resolve` (_() => Promise<Component>_) : A function that should return a `Promise` that will resolve the Component you wish to be async.
102102
- `LoadingComponent` (_Component_, Optional, default: `null`) : A Component that will be displayed until your async Component is resolved. All props will be passed to it.
103-
- `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.
103+
- `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`.
104104
- `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.
105105
- `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. 😀
106-
- `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.
107-
- __`'render'`__ - Your asynchronous component will be resolved and rendered on the server. It's children will
106+
- `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.
107+
- __`'resolve'`__ - Your asynchronous component will be resolved and rendered on the server. It's children will
108108
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.
109109
- __`'defer'`__ - Your asynchronous component will _not_ be rendered on the server, instead deferring rendering to the client/browser.
110110
- __`'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) {
210210
// We can now render our app 👇
211211
const appString = renderToString(app)
212212

213-
// 👇 Get the async component state.
213+
// Get the async component state. 👇
214214
const asyncState = asyncContext.getState()
215215

216216
const html = `
@@ -244,17 +244,10 @@ import MyApp from './components/MyApp'
244244
// 👇 Get any "rehydrate" state sent back by the server
245245
const rehydrateState = window.ASYNC_COMPONENTS_STATE
246246

247-
// Create an async context so that state can be tracked
248-
// 👇 across the bootstrapping and rendering process.
249-
const asyncContext = createAsyncContext()
250-
251247
// Ensure you wrap your application with the provider,
252248
// 👇 and pass in the rehydrateState.
253249
const app = (
254-
<AsyncComponentProvider
255-
rehydrateState={rehydrateState}
256-
asyncContext={asyncContext}
257-
>
250+
<AsyncComponentProvider rehydrateState={rehydrateState}>
258251
<MyApp />
259252
</AsyncComponentProvider>
260253
)

‎commonjs/AsyncComponentProvider.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,20 +75,17 @@ AsyncComponentProvider.propTypes = {
7575
resolved: _react2.default.PropTypes.object
7676
})
7777
};
78-
7978
AsyncComponentProvider.defaultProps = {
8079
asyncContext: undefined,
8180
rehydrateState: {
8281
resolved: {}
8382
}
8483
};
85-
8684
AsyncComponentProvider.childContextTypes = {
8785
asyncComponents: _react2.default.PropTypes.shape({
8886
getNextId: _react2.default.PropTypes.func.isRequired,
8987
resolved: _react2.default.PropTypes.func.isRequired,
9088
shouldRehydrate: _react2.default.PropTypes.func.isRequired
9189
}).isRequired
9290
};
93-
9491
exports.default = AsyncComponentProvider;

‎commonjs/asyncComponent.js

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
66

7+
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; };
8+
79
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; }; }();
810

911
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
2022

2123
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; }
2224

23-
var validSSRModes = ['render', 'defer', 'boundary'];
25+
var validSSRModes = ['resolve', 'defer', 'boundary'];
2426

25-
function asyncComponent(args) {
26-
var name = args.name,
27-
resolve = args.resolve,
28-
_args$autoResolveES = args.autoResolveES2015Default,
29-
autoResolveES2015Default = _args$autoResolveES === undefined ? true : _args$autoResolveES,
30-
_args$serverMode = args.serverMode,
31-
serverMode = _args$serverMode === undefined ? 'render' : _args$serverMode,
32-
LoadingComponent = args.LoadingComponent,
33-
ErrorComponent = args.ErrorComponent;
27+
function asyncComponent(config) {
28+
var name = config.name,
29+
resolve = config.resolve,
30+
_config$autoResolveES = config.autoResolveES2015Default,
31+
autoResolveES2015Default = _config$autoResolveES === undefined ? true : _config$autoResolveES,
32+
_config$serverMode = config.serverMode,
33+
serverMode = _config$serverMode === undefined ? 'resolve' : _config$serverMode,
34+
LoadingComponent = config.LoadingComponent,
35+
ErrorComponent = config.ErrorComponent;
3436

3537

3638
if (validSSRModes.indexOf(serverMode) === -1) {
@@ -91,7 +93,35 @@ function asyncComponent(args) {
9193
return _this;
9294
}
9395

96+
// @see react-async-bootstrapper
97+
98+
9499
_createClass(AsyncComponent, [{
100+
key: 'asyncBootstrap',
101+
value: function asyncBootstrap() {
102+
var _this2 = this;
103+
104+
var _context = this.context,
105+
asyncComponents = _context.asyncComponents,
106+
asyncComponentsAncestor = _context.asyncComponentsAncestor;
107+
var shouldRehydrate = asyncComponents.shouldRehydrate;
108+
109+
110+
var doResolve = function doResolve() {
111+
return _this2.resolveModule().then(function (module) {
112+
return module !== undefined;
113+
});
114+
};
115+
116+
if (env === 'browser') {
117+
return shouldRehydrate(sharedState.id) ? doResolve() : false;
118+
}
119+
120+
// node
121+
var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
122+
return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
123+
}
124+
}, {
95125
key: 'getChildContext',
96126
value: function getChildContext() {
97127
if (!this.context.asyncComponents) {
@@ -119,35 +149,6 @@ function asyncComponent(args) {
119149
this.resolveModule();
120150
}
121151
}
122-
123-
// @see react-async-bootstrapper
124-
125-
}, {
126-
key: 'asyncBootstrap',
127-
value: function asyncBootstrap() {
128-
var _this2 = this;
129-
130-
var _context = this.context,
131-
asyncComponents = _context.asyncComponents,
132-
asyncComponentsAncestor = _context.asyncComponentsAncestor;
133-
var shouldRehydrate = asyncComponents.shouldRehydrate;
134-
135-
136-
var doResolve = function doResolve() {
137-
return _this2.resolveModule().then(function (module) {
138-
return module !== undefined;
139-
});
140-
};
141-
142-
if (typeof window !== 'undefined') {
143-
// BROWSER BASED LOGIC
144-
return shouldRehydrate(sharedState.id) ? doResolve() : false;
145-
}
146-
147-
// SERVER BASED LOGIC
148-
var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
149-
return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
150-
}
151152
}, {
152153
key: 'resolveModule',
153154
value: function resolveModule() {
@@ -172,13 +173,13 @@ function asyncComponent(args) {
172173
if (_this3.unmounted) {
173174
return undefined;
174175
}
175-
if (env === 'node' || !ErrorComponent) {
176+
if (env === 'node' || env === 'browser' && !ErrorComponent) {
176177
// We will at least log the error so that user isn't completely
177178
// unaware of an error occurring.
178179
// eslint-disable-next-line no-console
179-
// console.warn('Failed to resolve asyncComponent')
180+
console.warn('Failed to resolve asyncComponent');
180181
// eslint-disable-next-line no-console
181-
// console.warn(error)
182+
console.warn(error);
182183
}
183184
sharedState.error = error;
184185
_this3.registerErrorState(error);
@@ -221,7 +222,7 @@ function asyncComponent(args) {
221222
}
222223

223224
if (error) {
224-
return ErrorComponent ? _react2.default.createElement(ErrorComponent, { error: error }) : null;
225+
return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
225226
}
226227

227228
var Component = es6Resolve(module);
@@ -233,12 +234,7 @@ function asyncComponent(args) {
233234
return AsyncComponent;
234235
}(_react2.default.Component);
235236

236-
AsyncComponent.childContextTypes = {
237-
asyncComponentsAncestor: _react2.default.PropTypes.shape({
238-
isBoundary: _react2.default.PropTypes.bool
239-
})
240-
};
241-
237+
AsyncComponent.displayName = name || 'AsyncComponent';
242238
AsyncComponent.contextTypes = {
243239
asyncComponentsAncestor: _react2.default.PropTypes.shape({
244240
isBoundary: _react2.default.PropTypes.bool
@@ -249,8 +245,12 @@ function asyncComponent(args) {
249245
shouldRehydrate: _react2.default.PropTypes.func.isRequired
250246
})
251247
};
248+
AsyncComponent.childContextTypes = {
249+
asyncComponentsAncestor: _react2.default.PropTypes.shape({
250+
isBoundary: _react2.default.PropTypes.bool
251+
})
252+
};
252253

253-
AsyncComponent.displayName = name || 'AsyncComponent';
254254

255255
return AsyncComponent;
256256
}

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"babel-eslint": "7.2.1",
6565
"babel-jest": "19.0.0",
6666
"babel-loader": "6.4.1",
67+
"babel-plugin-transform-class-properties": "6.23.0",
6768
"babel-polyfill": "6.23.0",
6869
"babel-preset-env": "1.3.2",
6970
"babel-preset-latest": "6.24.0",
@@ -92,7 +93,7 @@
9293
"ramda": "0.23.0",
9394
"react": "15.4.2",
9495
"react-addons-test-utils": "15.4.2",
95-
"react-async-bootstrapper": "^1.0.0",
96+
"react-async-bootstrapper": "^1.0.1",
9697
"react-dom": "15.4.2",
9798
"readline-sync": "1.4.7",
9899
"rimraf": "2.6.1",

‎src/AsyncComponentProvider.js

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,33 @@ import React from 'react'
33
import createAsyncContext from './createAsyncContext'
44

55
class AsyncComponentProvider extends React.Component {
6+
static propTypes = {
7+
children: React.PropTypes.node.isRequired,
8+
asyncContext: React.PropTypes.shape({
9+
getNextId: React.PropTypes.func.isRequired,
10+
resolved: React.PropTypes.func.isRequired,
11+
getState: React.PropTypes.func.isRequired,
12+
}),
13+
rehydrateState: React.PropTypes.shape({
14+
resolved: React.PropTypes.object,
15+
}),
16+
};
17+
18+
static defaultProps = {
19+
asyncContext: undefined,
20+
rehydrateState: {
21+
resolved: {},
22+
},
23+
};
24+
25+
static childContextTypes = {
26+
asyncComponents: React.PropTypes.shape({
27+
getNextId: React.PropTypes.func.isRequired,
28+
resolved: React.PropTypes.func.isRequired,
29+
shouldRehydrate: React.PropTypes.func.isRequired,
30+
}).isRequired,
31+
};
32+
633
componentWillMount() {
734
this.asyncContext = this.props.asyncContext || createAsyncContext()
835
this.rehydrateState = this.props.rehydrateState
@@ -27,31 +54,4 @@ class AsyncComponentProvider extends React.Component {
2754
}
2855
}
2956

30-
AsyncComponentProvider.propTypes = {
31-
children: React.PropTypes.node.isRequired,
32-
asyncContext: React.PropTypes.shape({
33-
getNextId: React.PropTypes.func.isRequired,
34-
resolved: React.PropTypes.func.isRequired,
35-
getState: React.PropTypes.func.isRequired,
36-
}),
37-
rehydrateState: React.PropTypes.shape({
38-
resolved: React.PropTypes.object,
39-
}),
40-
}
41-
42-
AsyncComponentProvider.defaultProps = {
43-
asyncContext: undefined,
44-
rehydrateState: {
45-
resolved: {},
46-
},
47-
}
48-
49-
AsyncComponentProvider.childContextTypes = {
50-
asyncComponents: React.PropTypes.shape({
51-
getNextId: React.PropTypes.func.isRequired,
52-
resolved: React.PropTypes.func.isRequired,
53-
shouldRehydrate: React.PropTypes.func.isRequired,
54-
}).isRequired,
55-
}
56-
5757
export default AsyncComponentProvider

‎src/asyncComponent.js

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react'
22

3-
const validSSRModes = ['render', 'defer', 'boundary']
3+
const validSSRModes = ['resolve', 'defer', 'boundary']
44

5-
function asyncComponent(args) {
5+
function asyncComponent(config) {
66
const {
77
name,
88
resolve,
99
autoResolveES2015Default = true,
10-
serverMode = 'render',
10+
serverMode = 'resolve',
1111
LoadingComponent,
1212
ErrorComponent,
13-
} = args
13+
} = config
1414

1515
if (validSSRModes.indexOf(serverMode) === -1) {
1616
throw new Error('Invalid serverMode provided to asyncComponent')
@@ -57,6 +57,25 @@ function asyncComponent(args) {
5757
}
5858

5959
class AsyncComponent extends React.Component {
60+
static displayName = name || 'AsyncComponent';
61+
62+
static contextTypes = {
63+
asyncComponentsAncestor: React.PropTypes.shape({
64+
isBoundary: React.PropTypes.bool,
65+
}),
66+
asyncComponents: React.PropTypes.shape({
67+
getNextId: React.PropTypes.func.isRequired,
68+
resolved: React.PropTypes.func.isRequired,
69+
shouldRehydrate: React.PropTypes.func.isRequired,
70+
}),
71+
};
72+
73+
static childContextTypes = {
74+
asyncComponentsAncestor: React.PropTypes.shape({
75+
isBoundary: React.PropTypes.bool,
76+
}),
77+
};
78+
6079
constructor(props, context) {
6180
super(props, context)
6281

@@ -69,6 +88,24 @@ function asyncComponent(args) {
6988
}
7089
}
7190

91+
// @see react-async-bootstrapper
92+
asyncBootstrap() {
93+
const { asyncComponents, asyncComponentsAncestor } = this.context
94+
const { shouldRehydrate } = asyncComponents
95+
96+
const doResolve = () =>
97+
this.resolveModule().then(module => module !== undefined)
98+
99+
if (env === 'browser') {
100+
return shouldRehydrate(sharedState.id) ? doResolve() : false
101+
}
102+
103+
// node
104+
const isChildOfBoundary = asyncComponentsAncestor &&
105+
asyncComponentsAncestor.isBoundary
106+
return serverMode === 'defer' || isChildOfBoundary ? false : doResolve()
107+
}
108+
72109
getChildContext() {
73110
if (!this.context.asyncComponents) {
74111
return undefined
@@ -94,25 +131,6 @@ function asyncComponent(args) {
94131
}
95132
}
96133

97-
// @see react-async-bootstrapper
98-
asyncBootstrap() {
99-
const { asyncComponents, asyncComponentsAncestor } = this.context
100-
const { shouldRehydrate } = asyncComponents
101-
102-
const doResolve = () =>
103-
this.resolveModule().then(module => module !== undefined)
104-
105-
if (typeof window !== 'undefined') {
106-
// BROWSER BASED LOGIC
107-
return shouldRehydrate(sharedState.id) ? doResolve() : false
108-
}
109-
110-
// SERVER BASED LOGIC
111-
const isChildOfBoundary = asyncComponentsAncestor &&
112-
asyncComponentsAncestor.isBoundary
113-
return serverMode === 'defer' || isChildOfBoundary ? false : doResolve()
114-
}
115-
116134
resolveModule() {
117135
this.resolving = true
118136

@@ -135,13 +153,13 @@ function asyncComponent(args) {
135153
if (this.unmounted) {
136154
return undefined
137155
}
138-
if (env === 'node' || !ErrorComponent) {
156+
if (env === 'node' || (env === 'browser' && !ErrorComponent)) {
139157
// We will at least log the error so that user isn't completely
140158
// unaware of an error occurring.
141159
// eslint-disable-next-line no-console
142-
// console.warn('Failed to resolve asyncComponent')
160+
console.warn('Failed to resolve asyncComponent')
143161
// eslint-disable-next-line no-console
144-
// console.warn(error)
162+
console.warn(error)
145163
}
146164
sharedState.error = error
147165
this.registerErrorState(error)
@@ -183,7 +201,9 @@ function asyncComponent(args) {
183201
}
184202

185203
if (error) {
186-
return ErrorComponent ? <ErrorComponent error={error} /> : null
204+
return ErrorComponent
205+
? <ErrorComponent {...this.props} error={error} />
206+
: null
187207
}
188208

189209
const Component = es6Resolve(module)
@@ -194,25 +214,6 @@ function asyncComponent(args) {
194214
}
195215
}
196216

197-
AsyncComponent.childContextTypes = {
198-
asyncComponentsAncestor: React.PropTypes.shape({
199-
isBoundary: React.PropTypes.bool,
200-
}),
201-
}
202-
203-
AsyncComponent.contextTypes = {
204-
asyncComponentsAncestor: React.PropTypes.shape({
205-
isBoundary: React.PropTypes.bool,
206-
}),
207-
asyncComponents: React.PropTypes.shape({
208-
getNextId: React.PropTypes.func.isRequired,
209-
resolved: React.PropTypes.func.isRequired,
210-
shouldRehydrate: React.PropTypes.func.isRequired,
211-
}),
212-
}
213-
214-
AsyncComponent.displayName = name || 'AsyncComponent'
215-
216217
return AsyncComponent
217218
}
218219

‎umd/react-async-component.js

Lines changed: 50 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -199,22 +199,19 @@ AsyncComponentProvider.propTypes = {
199199
resolved: _react2.default.PropTypes.object
200200
})
201201
};
202-
203202
AsyncComponentProvider.defaultProps = {
204203
asyncContext: undefined,
205204
rehydrateState: {
206205
resolved: {}
207206
}
208207
};
209-
210208
AsyncComponentProvider.childContextTypes = {
211209
asyncComponents: _react2.default.PropTypes.shape({
212210
getNextId: _react2.default.PropTypes.func.isRequired,
213211
resolved: _react2.default.PropTypes.func.isRequired,
214212
shouldRehydrate: _react2.default.PropTypes.func.isRequired
215213
}).isRequired
216214
};
217-
218215
exports.default = AsyncComponentProvider;
219216

220217
/***/ }),
@@ -228,6 +225,8 @@ Object.defineProperty(exports, "__esModule", {
228225
value: true
229226
});
230227

228+
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; };
229+
231230
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; }; }();
232231

233232
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; };
@@ -244,17 +243,17 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
244243

245244
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; }
246245

247-
var validSSRModes = ['render', 'defer', 'boundary'];
246+
var validSSRModes = ['resolve', 'defer', 'boundary'];
248247

249-
function asyncComponent(args) {
250-
var name = args.name,
251-
resolve = args.resolve,
252-
_args$autoResolveES = args.autoResolveES2015Default,
253-
autoResolveES2015Default = _args$autoResolveES === undefined ? true : _args$autoResolveES,
254-
_args$serverMode = args.serverMode,
255-
serverMode = _args$serverMode === undefined ? 'render' : _args$serverMode,
256-
LoadingComponent = args.LoadingComponent,
257-
ErrorComponent = args.ErrorComponent;
248+
function asyncComponent(config) {
249+
var name = config.name,
250+
resolve = config.resolve,
251+
_config$autoResolveES = config.autoResolveES2015Default,
252+
autoResolveES2015Default = _config$autoResolveES === undefined ? true : _config$autoResolveES,
253+
_config$serverMode = config.serverMode,
254+
serverMode = _config$serverMode === undefined ? 'resolve' : _config$serverMode,
255+
LoadingComponent = config.LoadingComponent,
256+
ErrorComponent = config.ErrorComponent;
258257

259258

260259
if (validSSRModes.indexOf(serverMode) === -1) {
@@ -315,7 +314,35 @@ function asyncComponent(args) {
315314
return _this;
316315
}
317316

317+
// @see react-async-bootstrapper
318+
319+
318320
_createClass(AsyncComponent, [{
321+
key: 'asyncBootstrap',
322+
value: function asyncBootstrap() {
323+
var _this2 = this;
324+
325+
var _context = this.context,
326+
asyncComponents = _context.asyncComponents,
327+
asyncComponentsAncestor = _context.asyncComponentsAncestor;
328+
var shouldRehydrate = asyncComponents.shouldRehydrate;
329+
330+
331+
var doResolve = function doResolve() {
332+
return _this2.resolveModule().then(function (module) {
333+
return module !== undefined;
334+
});
335+
};
336+
337+
if (env === 'browser') {
338+
return shouldRehydrate(sharedState.id) ? doResolve() : false;
339+
}
340+
341+
// node
342+
var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
343+
return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
344+
}
345+
}, {
319346
key: 'getChildContext',
320347
value: function getChildContext() {
321348
if (!this.context.asyncComponents) {
@@ -343,35 +370,6 @@ function asyncComponent(args) {
343370
this.resolveModule();
344371
}
345372
}
346-
347-
// @see react-async-bootstrapper
348-
349-
}, {
350-
key: 'asyncBootstrap',
351-
value: function asyncBootstrap() {
352-
var _this2 = this;
353-
354-
var _context = this.context,
355-
asyncComponents = _context.asyncComponents,
356-
asyncComponentsAncestor = _context.asyncComponentsAncestor;
357-
var shouldRehydrate = asyncComponents.shouldRehydrate;
358-
359-
360-
var doResolve = function doResolve() {
361-
return _this2.resolveModule().then(function (module) {
362-
return module !== undefined;
363-
});
364-
};
365-
366-
if (typeof window !== 'undefined') {
367-
// BROWSER BASED LOGIC
368-
return shouldRehydrate(sharedState.id) ? doResolve() : false;
369-
}
370-
371-
// SERVER BASED LOGIC
372-
var isChildOfBoundary = asyncComponentsAncestor && asyncComponentsAncestor.isBoundary;
373-
return serverMode === 'defer' || isChildOfBoundary ? false : doResolve();
374-
}
375373
}, {
376374
key: 'resolveModule',
377375
value: function resolveModule() {
@@ -396,13 +394,13 @@ function asyncComponent(args) {
396394
if (_this3.unmounted) {
397395
return undefined;
398396
}
399-
if (env === 'node' || !ErrorComponent) {
397+
if (env === 'node' || env === 'browser' && !ErrorComponent) {
400398
// We will at least log the error so that user isn't completely
401399
// unaware of an error occurring.
402400
// eslint-disable-next-line no-console
403-
// console.warn('Failed to resolve asyncComponent')
401+
console.warn('Failed to resolve asyncComponent');
404402
// eslint-disable-next-line no-console
405-
// console.warn(error)
403+
console.warn(error);
406404
}
407405
sharedState.error = error;
408406
_this3.registerErrorState(error);
@@ -445,7 +443,7 @@ function asyncComponent(args) {
445443
}
446444

447445
if (error) {
448-
return ErrorComponent ? _react2.default.createElement(ErrorComponent, { error: error }) : null;
446+
return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
449447
}
450448

451449
var Component = es6Resolve(module);
@@ -457,12 +455,7 @@ function asyncComponent(args) {
457455
return AsyncComponent;
458456
}(_react2.default.Component);
459457

460-
AsyncComponent.childContextTypes = {
461-
asyncComponentsAncestor: _react2.default.PropTypes.shape({
462-
isBoundary: _react2.default.PropTypes.bool
463-
})
464-
};
465-
458+
AsyncComponent.displayName = name || 'AsyncComponent';
466459
AsyncComponent.contextTypes = {
467460
asyncComponentsAncestor: _react2.default.PropTypes.shape({
468461
isBoundary: _react2.default.PropTypes.bool
@@ -473,8 +466,12 @@ function asyncComponent(args) {
473466
shouldRehydrate: _react2.default.PropTypes.func.isRequired
474467
})
475468
};
469+
AsyncComponent.childContextTypes = {
470+
asyncComponentsAncestor: _react2.default.PropTypes.shape({
471+
isBoundary: _react2.default.PropTypes.bool
472+
})
473+
};
476474

477-
AsyncComponent.displayName = name || 'AsyncComponent';
478475

479476
return AsyncComponent;
480477
}

‎umd/react-async-component.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎yarn.lock

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,10 @@ babel-plugin-syntax-async-generators@^6.5.0:
468468
version "6.13.0"
469469
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
470470

471+
babel-plugin-syntax-class-properties@^6.8.0:
472+
version "6.13.0"
473+
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
474+
471475
babel-plugin-syntax-exponentiation-operator@^6.8.0:
472476
version "6.13.0"
473477
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
@@ -504,6 +508,15 @@ babel-plugin-transform-async-to-generator@^6.22.0:
504508
babel-plugin-syntax-async-functions "^6.8.0"
505509
babel-runtime "^6.22.0"
506510

511+
babel-plugin-transform-class-properties@6.23.0:
512+
version "6.23.0"
513+
resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.23.0.tgz#187b747ee404399013563c993db038f34754ac3b"
514+
dependencies:
515+
babel-helper-function-name "^6.23.0"
516+
babel-plugin-syntax-class-properties "^6.8.0"
517+
babel-runtime "^6.22.0"
518+
babel-template "^6.23.0"
519+
507520
babel-plugin-transform-es2015-arrow-functions@^6.22.0:
508521
version "6.22.0"
509522
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -3906,11 +3919,11 @@ react-addons-test-utils@15.4.2:
39063919
fbjs "^0.8.4"
39073920
object-assign "^4.1.0"
39083921

3909-
react-async-bootstrapper@^1.0.0:
3910-
version "1.0.0"
3911-
resolved "https://registry.yarnpkg.com/react-async-bootstrapper/-/react-async-bootstrapper-1.0.0.tgz#a04d4131abba2b6730432484c7385e35af3f6a2b"
3922+
react-async-bootstrapper@^1.0.1:
3923+
version "1.0.1"
3924+
resolved "https://registry.yarnpkg.com/react-async-bootstrapper/-/react-async-bootstrapper-1.0.1.tgz#8a7ce80547ee274d2dd9c355329029c3f0cf1027"
39123925
dependencies:
3913-
react-tree-walker "^2.0.0"
3926+
react-tree-walker "^2.0.1"
39143927

39153928
react-dom@15.4.2:
39163929
version "15.4.2"
@@ -3920,9 +3933,9 @@ react-dom@15.4.2:
39203933
loose-envify "^1.1.0"
39213934
object-assign "^4.1.0"
39223935

3923-
react-tree-walker@^2.0.0:
3924-
version "2.0.0"
3925-
resolved "https://registry.yarnpkg.com/react-tree-walker/-/react-tree-walker-2.0.0.tgz#7eb739b6d45bf5260d1141dd2bfbab680e5d7276"
3936+
react-tree-walker@^2.0.1:
3937+
version "2.0.1"
3938+
resolved "https://registry.yarnpkg.com/react-tree-walker/-/react-tree-walker-2.0.1.tgz#42141f1e4564f6ab0adbdf6054b221092338cfd1"
39263939

39273940
react@15.4.2:
39283941
version "15.4.2"

0 commit comments

Comments
 (0)
Please sign in to comment.