From f53bfe7f9658afc3e27cdb851cc7d6a9a708c776 Mon Sep 17 00:00:00 2001 From: Tim Suchanek Date: Wed, 5 Apr 2017 17:26:41 +0200 Subject: [PATCH] make env configurable --- README.md | 1 + commonjs/asyncComponent.js | 2 +- src/asyncComponent.js | 4 +++- umd/react-async-component.js | 2 +- umd/react-async-component.min.js | 2 +- 5 files changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1a1f527..9d1c027 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,7 @@ The asynchronous component factory. Config goes in, an asynchronous component co - `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. 😀 + - `env` (_String_, Optional) : Provide either `'node'` or `'browser'` so you can write your own environment detection. Especially useful when using PhantomJS or ElectronJS to prerender the React App. - `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. diff --git a/commonjs/asyncComponent.js b/commonjs/asyncComponent.js index 1119984..df313d9 100644 --- a/commonjs/asyncComponent.js +++ b/commonjs/asyncComponent.js @@ -39,7 +39,7 @@ function asyncComponent(config) { throw new Error('Invalid serverMode provided to asyncComponent'); } - var env = typeof window === 'undefined' ? 'node' : 'browser'; + var env = ['node', 'browser'].indexOf(config.env) > -1 ? config.env : typeof window === 'undefined' ? 'node' : 'browser'; var sharedState = { // A unique id we will assign to our async component which is especially diff --git a/src/asyncComponent.js b/src/asyncComponent.js index b52d660..5264a9f 100644 --- a/src/asyncComponent.js +++ b/src/asyncComponent.js @@ -16,7 +16,9 @@ function asyncComponent(config) { throw new Error('Invalid serverMode provided to asyncComponent') } - const env = typeof window === 'undefined' ? 'node' : 'browser' + const env = ['node', 'browser'].indexOf(config.env) > -1 + ? config.env + : typeof window === 'undefined' ? 'node' : 'browser' const sharedState = { // A unique id we will assign to our async component which is especially diff --git a/umd/react-async-component.js b/umd/react-async-component.js index eaababd..113fbf0 100644 --- a/umd/react-async-component.js +++ b/umd/react-async-component.js @@ -260,7 +260,7 @@ function asyncComponent(config) { throw new Error('Invalid serverMode provided to asyncComponent'); } - var env = typeof window === 'undefined' ? 'node' : 'browser'; + var env = ['node', 'browser'].indexOf(config.env) > -1 ? config.env : typeof window === 'undefined' ? 'node' : 'browser'; var sharedState = { // A unique id we will assign to our async component which is especially diff --git a/umd/react-async-component.min.js b/umd/react-async-component.min.js index a791d68..38ca73c 100644 --- a/umd/react-async-component.min.js +++ b/umd/react-async-component.min.js @@ -1 +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-1?e.env:"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},x=function(){if(null==b.resolver)try{var e=n();b.resolver=Promise.resolve(e)}catch(e){b.resolver=Promise.reject(e)}return b.resolver},P=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,x().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 P.displayName=t||"AsyncComponent",P.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})},P.childContextTypes={asyncComponentsAncestor:f.default.PropTypes.shape({isBoundary:f.default.PropTypes.bool})},P}Object.defineProperty(t,"__esModule",{value:!0});var i=Object.assign||function(e){for(var t=1;t