Socket
Socket
Sign inDemoInstall

react-async-component

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-async-component - npm Package Compare versions

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

100

commonjs/asyncComponent.js

@@ -7,2 +7,4 @@ 'use strict';

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; }; }();

@@ -24,13 +26,13 @@

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;

@@ -96,3 +98,31 @@

// @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',

@@ -125,32 +155,3 @@ value: function getChildContext() {

}
// @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',

@@ -179,9 +180,9 @@ value: function resolveModule() {

}
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);
}

@@ -229,3 +230,3 @@ sharedState.error = error;

if (error) {
return ErrorComponent ? _react2.default.createElement(ErrorComponent, { error: error }) : null;
return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
}

@@ -242,8 +243,3 @@

AsyncComponent.childContextTypes = {
asyncComponentsAncestor: _react2.default.PropTypes.shape({
isBoundary: _react2.default.PropTypes.bool
})
};
AsyncComponent.displayName = name || 'AsyncComponent';
AsyncComponent.contextTypes = {

@@ -259,4 +255,8 @@ asyncComponentsAncestor: _react2.default.PropTypes.shape({

};
AsyncComponent.childContextTypes = {
asyncComponentsAncestor: _react2.default.PropTypes.shape({
isBoundary: _react2.default.PropTypes.bool
})
};
AsyncComponent.displayName = name || 'AsyncComponent';

@@ -263,0 +263,0 @@ return AsyncComponent;

3

commonjs/AsyncComponentProvider.js

@@ -78,3 +78,2 @@ 'use strict';

};
AsyncComponentProvider.defaultProps = {

@@ -86,3 +85,2 @@ asyncContext: undefined,

};
AsyncComponentProvider.childContextTypes = {

@@ -95,3 +93,2 @@ asyncComponents: _react2.default.PropTypes.shape({

};
exports.default = AsyncComponentProvider;

5

package.json
{
"name": "react-async-component",
"version": "1.0.0-alpha.2",
"version": "1.0.0-beta.1",
"description": "Create Components that resolve asynchronously, with support for server side rendering and code splitting.",

@@ -67,2 +67,3 @@ "license": "MIT",

"babel-loader": "6.4.1",
"babel-plugin-transform-class-properties": "6.23.0",
"babel-polyfill": "6.23.0",

@@ -96,3 +97,3 @@ "babel-preset-env": "1.3.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",

@@ -99,0 +100,0 @@ "readline-sync": "1.4.7",

172

README.md

@@ -1,2 +0,2 @@

> ___NOTE:___ This is an alpha release of the library. The previous "stable" version is on the `0.x.x` branch.
> ___NOTE:___ This is an beta release of the library. I am using it in production myself however it hasn't been used for a considerable length of time. There _may_ be API changes, however, I expect them to be absolutely minimal.

@@ -13,4 +13,4 @@ # react-async-component 📬

```jsx
const Product = asyncComponent({
resolve: () => System.import('./AsyncProduct'),
const AsyncProduct = asyncComponent({
resolve: () => System.import('./Product'),
LoadingComponent: ({ productId }) => <div>Loading {productId}</div>, // Optional

@@ -20,3 +20,3 @@ ErrorComponent: ({ error }) => <div>{error.message}</div> // Optional

<Product productId={1} /> // 🚀
<AsyncProduct productId={1} /> // 🚀
```

@@ -50,34 +50,30 @@

When creating your asynchronous components I recommend that you use the following folder/file structure:
Imagine you had the following `Product` component:
```jsx
export default function Product({ id }) {
return <div>Product {id}</div>
}
```
|- components
|- Product
|- index.js
|- AsyncProduct.js
```
__`./components/Product/index.js`__:
To make this asynchronous create a new file that wraps it with `asyncComponent`, like so:
```js
```jsx
import { asyncComponent } from 'react-async-component';
// Create an async component👇
export default asyncComponent({
resolve: () => System.import('./AsyncProduct')
// That resolves to 👆
resolve: () => System.import('./Product')
});
```
__`./components/Product/AsyncProduct.js`__
I recommend that you use the following folder/file structure:
```jsx
import React from 'react';
export default function Product({ productId }) {
return <div>You are viewing product {productId}</div>;
}
```
|- components
|- AsyncProduct
|- index.js // contains asyncComponent
|- Product.js // The component you want resolved asynchronously
```
Now, you can simply import `Product` anywhere in your application and use it exactly as you would any other component.
Now, you can simply import `AsyncProduct` anywhere in your application and use it exactly as you would any other component.

@@ -87,20 +83,14 @@ For example:

```jsx
import React from 'react';
import Product from './components/Product';
import AsyncProduct from './components/AsyncProduct'
const MyApp = () => (
<div>
<h1>Welcome to My App</h1>
// 👇 Use as "normal"
<Product productId={1337} />
</div>
);
export default MyApp;
export default function MyApp() {
return (
<div>
<h1>Welcome to My App</h1>
<AsyncProduct id={1337} />
</div>
)
}
```
🚀
You have a lot more power than is shown here. Be sure to check out the [`API`](#api) for more.
## API

@@ -117,10 +107,10 @@

- `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.
- __`'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).
We highly recommend that you consider using `defer` as much as you can.

@@ -138,5 +128,5 @@

export default asyncComponent({
resolve: () => import('./AsyncProduct'),
LoadingComponent: ({ productId }) => <div>Loading product {productId}</div>
});
resolve: () => import('./Product'),
LoadingComponent: ({ id }) => <div>Loading product {id}</div>
})
```

@@ -148,8 +138,8 @@

export default asyncComponent({
resolve: () => import('./AsyncProduct'),
LoadingComponent: ({ productId }) => <div>Loading product {productId}</div>
});
resolve: () => import('./Product'),
ErrorComponent: ({ error }) => <div>{error.message}</div>
})
```
##### Webpack `require.ensure` Code Splitting API
##### Named chunks

@@ -159,19 +149,14 @@ ```jsx

resolve: () => new Promise(resolve =>
require.ensure([], (require) => {
resolve(require('./components/Product'));
});
// Webpack's code splitting API w/naming
require.ensure(
[],
(require) => {
resolve(require('./Product'));
},
'ChunkName'
)
)
});
})
```
##### Webpack `import` / `System.import` Code Splitting API
Note: `System.import` is considered deprecated and will be replaced with `import`, but for now they can be used interchangeably (you may need a Babel plugin for the `import` syntax).
```jsx
export default asyncComponent({
resolve: () => System.import('./components/Product')
});
```
### `<AsyncComponentProvider />`

@@ -188,3 +173,3 @@

Creates an asynchronous context that can be used by the `<AsyncComponentProvider />`. The context is an object that exposes the following properties to you:
Creates an asynchronous context for use by the `<AsyncComponentProvider />`. The context is an object that exposes the following properties to you:

@@ -201,4 +186,2 @@ - `getState()` (_() => Object_) : A function that when executed gets the current state of the `<AsyncComponentProvider />`. i.e. which async components resolved / failed to resolve etc. This is especially useful for server sider rendering applications where you need to provide the server rendered state to the client instance in order to ensure the required asynchronous component instances are resolved prior to render.

> NOTE: I have not updated `react-jobs` to make use of `react-async-bootstrapper` as of yet.
Firstly, install `react-async-bootstrapper`:

@@ -213,13 +196,14 @@

```jsx
import React from 'react';
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component'; // 👈
import asyncBootstrapper from 'react-async-bootstrapper'; // 👈
import { renderToString } from 'react-dom/server';
import serialize from 'serialize-javascript';
import MyApp from './shared/components/MyApp';
import React from 'react'
import { renderToString } from 'react-dom/server'
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component' // 👈
import asyncBootstrapper from 'react-async-bootstrapper' // 👈
import serialize from 'serialize-javascript'
import MyApp from './shared/components/MyApp'
export default function expressMiddleware(req, res, next) {
// Create the async context for our provider, this grants
// 👇 us the ability to tap into the state to send back to the client.
const asyncContext = createAsyncContext();
const asyncContext = createAsyncContext()

@@ -231,11 +215,11 @@ // 👇 Ensure you wrap your application with the provider.

</AsyncComponentProvider>
);
)
// 👇 This makes sure we "bootstrap" resolve any async components prior to rendering
asyncBootstrapper(app).then(() => {
// It's now safe to render 👇
const appString = renderToString(app);
// We can now render our app 👇
const appString = renderToString(app)
// 👇 Get the async component state.
const asyncState = asyncContext.getState();
// Get the async component state. 👇
const asyncState = asyncContext.getState()

@@ -254,5 +238,6 @@ const html = `

</body>
</html>`;
res.send(html);
});
</html>`
res.send(html)
})
}

@@ -264,25 +249,18 @@ ```

```jsx
import React from 'react';
import { render } from 'react-dom';
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component'; // 👈
import asyncBootstrapper from 'react-async-bootstrapper'; // 👈
import MyApp from './components/MyApp';
import React from 'react'
import { render } from 'react-dom'
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component' // 👈
import asyncBootstrapper from 'react-async-bootstrapper' // 👈
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}
asyncContext={asyncContext}
>
<AsyncComponentProvider rehydrateState={rehydrateState}>
<MyApp />
</AsyncComponentProvider>
);
)

@@ -294,3 +272,3 @@ // We run the bootstrapper again, which in this context will

// 👇 Render the app
render(app, document.getElementById('app'));
render(app, document.getElementById('app'))
});

@@ -297,0 +275,0 @@ ```

103

umd/react-async-component.js

@@ -202,3 +202,2 @@ (function webpackUniversalModuleDefinition(root, factory) {

};
AsyncComponentProvider.defaultProps = {

@@ -210,3 +209,2 @@ asyncContext: undefined,

};
AsyncComponentProvider.childContextTypes = {

@@ -219,3 +217,2 @@ asyncComponents: _react2.default.PropTypes.shape({

};
exports.default = AsyncComponentProvider;

@@ -234,2 +231,4 @@

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; }; }();

@@ -251,13 +250,13 @@

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;

@@ -323,3 +322,31 @@

// @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',

@@ -352,32 +379,3 @@ value: function getChildContext() {

}
// @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',

@@ -406,9 +404,9 @@ value: function resolveModule() {

}
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);
}

@@ -456,3 +454,3 @@ sharedState.error = error;

if (error) {
return ErrorComponent ? _react2.default.createElement(ErrorComponent, { error: error }) : null;
return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
}

@@ -469,8 +467,3 @@

AsyncComponent.childContextTypes = {
asyncComponentsAncestor: _react2.default.PropTypes.shape({
isBoundary: _react2.default.PropTypes.bool
})
};
AsyncComponent.displayName = name || 'AsyncComponent';
AsyncComponent.contextTypes = {

@@ -486,4 +479,8 @@ asyncComponentsAncestor: _react2.default.PropTypes.shape({

};
AsyncComponent.childContextTypes = {
asyncComponentsAncestor: _react2.default.PropTypes.shape({
isBoundary: _react2.default.PropTypes.bool
})
};
AsyncComponent.displayName = name || 'AsyncComponent';

@@ -490,0 +487,0 @@ return AsyncComponent;

2

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(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}])});
!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,c=void 0===s||s,p=e.serverMode,y=void 0===p?"resolve":p,v=e.LoadingComponent,h=e.ErrorComponent;if(d.indexOf(y)===-1)throw new Error("Invalid serverMode provided to asyncComponent");var m="undefined"==typeof window?"node":"browser",b={id:null,module:null,error:null,resolver:null},C=function(e){return c&&null!=e&&("function"==typeof e||"object"===(void 0===e?"undefined":l(e)))&&e.default?e.default:e},P=function(){if(null==b.resolver)try{var e=n();b.resolver=Promise.resolve(e)}catch(e){b.resolver=Promise.reject(e)}return b.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&&!b.id&&(b.id=u.context.asyncComponents.getNextId()),u}return u(t,e),a(t,[{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("browser"===m)return!!r(b.id)&&u();var s=o&&o.isBoundary;return"defer"!==y&&!s&&u()}},{key:"getChildContext",value:function(){if(this.context.asyncComponents)return{asyncComponentsAncestor:{isBoundary:"boundary"===y}}}},{key:"componentWillMount",value:function(){this.setState({module:b.module}),b.error&&this.registerErrorState(b.error)}},{key:"componentDidMount",value:function(){this.state.module||this.resolveModule()}},{key:"resolveModule",value:function(){var e=this;return this.resolving=!0,P().then(function(t){if(!e.unmounted)return e.context.asyncComponents&&e.context.asyncComponents.resolved(b.id),b.module=t,"browser"===m&&e.setState({module:t}),e.resolving=!1,t}).catch(function(t){e.unmounted||(("node"===m||"browser"===m&&!h)&&(console.warn("Failed to resolve asyncComponent"),console.warn(t)),b.error=t,e.registerErrorState(t),e.resolving=!1)})}},{key:"componentWillUnmount",value:function(){this.unmounted=!0}},{key:"registerErrorState",value:function(e){var t=this;"browser"===m&&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!=b.module||this.resolving||"undefined"==typeof window||this.resolveModule(),n)return h?f.default.createElement(h,i({},this.props,{error:n})):null;var o=C(t);return o?f.default.createElement(o,this.props):v?f.default.createElement(v,this.props):null}}]),t}(f.default.Component);return x.displayName=t||"AsyncComponent",x.contextTypes={asyncComponentsAncestor:f.default.PropTypes.shape({isBoundary:f.default.PropTypes.bool}),asyncComponents:f.default.PropTypes.shape({getNextId:f.default.PropTypes.func.isRequired,resolved:f.default.PropTypes.func.isRequired,shouldRehydrate:f.default.PropTypes.func.isRequired})},x.childContextTypes={asyncComponentsAncestor:f.default.PropTypes.shape({isBoundary:f.default.PropTypes.bool})},x}Object.defineProperty(t,"__esModule",{value:!0});var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a=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}}(),l="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},c=n(1),f=function(e){return e&&e.__esModule?e:{default:e}}(c),d=["resolve","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}])});
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc