@loadable/component - npm Package Compare versions

Comparing version 4.0.2 to 5.0.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [5.0.0](https://github.com/smooth-code/loadable-components/compare/v4.0.5...v5.0.0) (2018-11-10)
+
+
+### Features
+
+* improve SSR support ([eb1cfe8](https://github.com/smooth-code/loadable-components/commit/eb1cfe8))
+
+
+### BREAKING CHANGES
+
+* - SSR has been rewritten from scratch, if you use it, please follow the
+new guide.
+- Prefetch component and prefetch functions have been removed, please
+use `webpackPrefetch` instead.
+
+
+
+
+
 ## [4.0.2](https://github.com/smooth-code/loadable-components/compare/v4.0.1...v4.0.2) (2018-10-31)
@@ -8,0 +27,0 @@

dist/loadable.cjs.js

@@ -25,8 +25,6 @@ 'use strict';
 
-var DEFAULT_LOADABLE_STATE_KEY = '__LOADABLE_STATE__';
-var DATA_LOADABLE_CHUNK = 'data-loadable-chunk';
+var LOADABLE_REQUIRED_CHUNKS_KEY = '__LOADABLE_REQUIRED_CHUNKS__';
 
 var sharedInternals = /*#__PURE__*/Object.freeze({
-  DEFAULT_LOADABLE_STATE_KEY: DEFAULT_LOADABLE_STATE_KEY,
-  DATA_LOADABLE_CHUNK: DATA_LOADABLE_CHUNK,
+  LOADABLE_REQUIRED_CHUNKS_KEY: LOADABLE_REQUIRED_CHUNKS_KEY,
   invariant: invariant,
@@ -93,7 +91,7 @@ Context: Context
 
-var withLoadableState = function withLoadableState(Component) {
+var withChunkExtractor = function withChunkExtractor(Component) {
   return function (props) {
-    return React.createElement(Context.Consumer, null, function (loadableState) {
+    return React.createElement(Context.Consumer, null, function (extractor) {
       return React.createElement(Component, _extends({
-        loadableState: loadableState
+        __chunkExtractor: extractor
       }, props));
@@ -121,49 +119,12 @@ });
 
-    function prefetch(props) {
-      ctor.requireAsync(props).catch(function () {});
-    }
-
-    var InnerPrefetch =
+    var InnerLoadable =
     /*#__PURE__*/
     function (_React$Component) {
-      _inheritsLoose(InnerPrefetch, _React$Component);
+      _inheritsLoose(InnerLoadable, _React$Component);
 
-      function InnerPrefetch(props) {
+      function InnerLoadable(props) {
         var _this;
 
         _this = _React$Component.call(this, props) || this;
-        invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
-
-        if (props.loadableState) {
-          props.loadableState.addPrefetchedChunk(ctor.chunkName(props));
-        }
-
-        return _this;
-      }
-
-      var _proto = InnerPrefetch.prototype;
-
-      _proto.componentDidMount = function componentDidMount() {
-        prefetch(this.props);
-      };
-
-      _proto.render = function render() {
-        return null;
-      };
-
-      return InnerPrefetch;
-    }(React.Component);
-
-    var Prefetch = withLoadableState(InnerPrefetch);
-
-    var InnerLoadable =
-    /*#__PURE__*/
-    function (_React$Component2) {
-      _inheritsLoose(InnerLoadable, _React$Component2);
-
-      function InnerLoadable(props) {
-        var _this2;
-
-        _this2 = _React$Component2.call(this, props) || this;
-        _this2.state = {
+        _this.state = {
           result: null,
@@ -173,5 +134,5 @@ error: null,
         };
-        invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+        invariant(!props.__chunkExtractor || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
 
-        if (props.loadableState) {
+        if (props.__chunkExtractor) {
           // We run load function, we assume that it won't fail and that it
@@ -181,6 +142,7 @@ // triggers a synchronous loading of the module
 
-          _this2.loadSync();
+          _this.loadSync();
 
-          props.loadableState.addChunk(ctor.chunkName(props));
-          return _assertThisInitialized(_this2);
+          props.__chunkExtractor.addChunk(ctor.chunkName(props));
+
+          return _assertThisInitialized(_this);
         } // Client-side with `isReady` method present (SSR probably)
@@ -191,11 +153,11 @@ // If module is already loaded, we use a synchronous loading
         if (ctor.isReady && ctor.isReady(props)) {
-          _this2.loadSync();
+          _this.loadSync();
         }
 
-        return _this2;
+        return _this;
       }
 
-      var _proto2 = InnerLoadable.prototype;
+      var _proto = InnerLoadable.prototype;
 
-      _proto2.componentDidMount = function componentDidMount() {
+      _proto.componentDidMount = function componentDidMount() {
         if (this.state.loading) {
@@ -208,8 +170,8 @@ this.loadAsync();
 
-      _proto2.triggerOnLoad = function triggerOnLoad() {
-        var _this3 = this;
+      _proto.triggerOnLoad = function triggerOnLoad() {
+        var _this2 = this;
 
         if (onLoad) {
           setTimeout(function () {
-            onLoad(_this3.state.result, _this3.props);
+            onLoad(_this2.state.result, _this2.props);
           });
@@ -219,3 +181,3 @@ }
 
-      _proto2.loadSync = function loadSync() {
+      _proto.loadSync = function loadSync() {
         if (!this.state.loading) return;
@@ -235,7 +197,7 @@
 
-      _proto2.loadAsync = function loadAsync() {
-        var _this4 = this;
+      _proto.loadAsync = function loadAsync() {
+        var _this3 = this;
 
         this.promise = this.promise || ctor.requireAsync(this.props).then(function (loadedModule) {
-          _this4.setState({
+          _this3.setState({
             result: resolve(loadedModule, {
@@ -246,6 +208,6 @@ Loadable: Loadable
           }, function () {
-            return _this4.triggerOnLoad();
+            return _this3.triggerOnLoad();
           });
         }).catch(function (error) {
-          _this4.setState({
+          _this3.setState({
             error: error,
@@ -258,8 +220,8 @@ loading: false
 
-      _proto2.render = function render() {
+      _proto.render = function render() {
         var _this$props = this.props,
-            ref = _this$props.forwardedRef,
+            forwardedRef = _this$props.forwardedRef,
             propFallback = _this$props.fallback,
-            loadableState = _this$props.loadableState,
-            props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "loadableState"]);
+            __chunkExtractor = _this$props.__chunkExtractor,
+            props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "__chunkExtractor"]);
 
@@ -291,3 +253,3 @@ var _this$state = this.state,
           props: _extends({}, props, {
-            ref: ref
+            ref: forwardedRef
           })
@@ -300,3 +262,3 @@ });
 
-    var EnhancedInnerLoadable = withLoadableState(InnerLoadable);
+    var EnhancedInnerLoadable = withChunkExtractor(InnerLoadable);
     var Loadable = React.forwardRef(function (props, ref) {
@@ -307,4 +269,2 @@ return React.createElement(EnhancedInnerLoadable, _extends({
     });
-    Loadable.Prefetch = Prefetch;
-    Loadable.prefetch = prefetch;
     return Loadable;
@@ -377,37 +337,48 @@ }
 var BROWSER = typeof window !== 'undefined';
-var WEBPACK = typeof __webpack_require__ !== 'undefined';
+function loadableReady(done) {
+  if (done === void 0) {
+    done = function done() {};
+  }
 
-function isManifestMode() {
-  var loadableScripts = document.querySelectorAll("script[" + DATA_LOADABLE_CHUNK + "]");
-  return loadableScripts.length > 0;
-}
+  if (!BROWSER) {
+    warn('`loadableReady()` must be called in browser only');
+    done();
+    return Promise.resolve();
+  }
 
-function loadComponents(loadableState) {
-  loadableState = BROWSER ? window[DEFAULT_LOADABLE_STATE_KEY] : null;
+  var requiredChunks = BROWSER ? window[LOADABLE_REQUIRED_CHUNKS_KEY] : null;
 
-  if (!loadableState) {
-    if (!BROWSER) {
-      warn('`loadComponents()` must be called in browser only');
-    }
+  if (!requiredChunks) {
+    warn('`loadableReady()` requires state, please use `getScriptTags` or `getScriptElements` server-side');
+    done();
+    return Promise.resolve();
+  }
 
-    if (isManifestMode()) {
-      warn('`loadComponents()` is not required if you use `@loadable/webpack-plugin`');
-    } else {
-      warn('`loadComponents()` requires a state in the page, please inject scripts server-side');
+  var resolved = true;
+  return new Promise(function (resolve) {
+    window.__LOADABLE_LOADED_CHUNKS__ = window.__LOADABLE_LOADED_CHUNKS__ || [];
+    var loadedChunks = window.__LOADABLE_LOADED_CHUNKS__;
+    var originalPush = loadedChunks.push.bind(loadedChunks);
+
+    function checkReadyState() {
+      if (requiredChunks.every(function (chunk) {
+        return loadedChunks.some(function (_ref) {
+          var chunks = _ref[0];
+          return chunks.includes(chunk);
+        });
+      })) {
+        if (!resolved) {
+          resolved = true;
+          resolve();
+          done();
+        }
+      }
     }
 
-    return Promise.resolve();
-  }
+    loadedChunks.push = function () {
+      originalPush.apply(void 0, arguments);
+      checkReadyState();
+    };
 
-  invariant(WEBPACK, '`loadComponents()` is only compatible with Webpack');
-  return Promise.all(loadableState.map(function (chunk) {
-    return __webpack_require__.e(chunk).catch(function (error) {
-      // We can safely ignore "missing" type errors
-      // we just want the bundle to be loaded, not the module installed
-      if (error.message.match(/missing:/)) return;
-      throw error;
-    });
-  })).catch(function (error) {
-    warn('`loadComponents()` has failed');
-    warn(error);
+    checkReadyState();
   });
@@ -426,2 +397,2 @@ }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-exports.loadComponents = loadComponents;
+exports.loadableReady = loadableReady;

dist/loadable.es.js

@@ -19,8 +19,6 @@ import React from 'react';
 
-var DEFAULT_LOADABLE_STATE_KEY = '__LOADABLE_STATE__';
-var DATA_LOADABLE_CHUNK = 'data-loadable-chunk';
+var LOADABLE_REQUIRED_CHUNKS_KEY = '__LOADABLE_REQUIRED_CHUNKS__';
 
 var sharedInternals = /*#__PURE__*/Object.freeze({
-  DEFAULT_LOADABLE_STATE_KEY: DEFAULT_LOADABLE_STATE_KEY,
-  DATA_LOADABLE_CHUNK: DATA_LOADABLE_CHUNK,
+  LOADABLE_REQUIRED_CHUNKS_KEY: LOADABLE_REQUIRED_CHUNKS_KEY,
   invariant: invariant,
@@ -87,7 +85,7 @@ Context: Context
 
-var withLoadableState = function withLoadableState(Component) {
+var withChunkExtractor = function withChunkExtractor(Component) {
   return function (props) {
-    return React.createElement(Context.Consumer, null, function (loadableState) {
+    return React.createElement(Context.Consumer, null, function (extractor) {
       return React.createElement(Component, _extends({
-        loadableState: loadableState
+        __chunkExtractor: extractor
       }, props));
@@ -115,49 +113,12 @@ });
 
-    function prefetch(props) {
-      ctor.requireAsync(props).catch(function () {});
-    }
-
-    var InnerPrefetch =
+    var InnerLoadable =
     /*#__PURE__*/
     function (_React$Component) {
-      _inheritsLoose(InnerPrefetch, _React$Component);
+      _inheritsLoose(InnerLoadable, _React$Component);
 
-      function InnerPrefetch(props) {
+      function InnerLoadable(props) {
         var _this;
 
         _this = _React$Component.call(this, props) || this;
-        invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
-
-        if (props.loadableState) {
-          props.loadableState.addPrefetchedChunk(ctor.chunkName(props));
-        }
-
-        return _this;
-      }
-
-      var _proto = InnerPrefetch.prototype;
-
-      _proto.componentDidMount = function componentDidMount() {
-        prefetch(this.props);
-      };
-
-      _proto.render = function render() {
-        return null;
-      };
-
-      return InnerPrefetch;
-    }(React.Component);
-
-    var Prefetch = withLoadableState(InnerPrefetch);
-
-    var InnerLoadable =
-    /*#__PURE__*/
-    function (_React$Component2) {
-      _inheritsLoose(InnerLoadable, _React$Component2);
-
-      function InnerLoadable(props) {
-        var _this2;
-
-        _this2 = _React$Component2.call(this, props) || this;
-        _this2.state = {
+        _this.state = {
           result: null,
@@ -167,5 +128,5 @@ error: null,
         };
-        invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+        invariant(!props.__chunkExtractor || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
 
-        if (props.loadableState) {
+        if (props.__chunkExtractor) {
           // We run load function, we assume that it won't fail and that it
@@ -175,6 +136,7 @@ // triggers a synchronous loading of the module
 
-          _this2.loadSync();
+          _this.loadSync();
 
-          props.loadableState.addChunk(ctor.chunkName(props));
-          return _assertThisInitialized(_this2);
+          props.__chunkExtractor.addChunk(ctor.chunkName(props));
+
+          return _assertThisInitialized(_this);
         } // Client-side with `isReady` method present (SSR probably)
@@ -185,11 +147,11 @@ // If module is already loaded, we use a synchronous loading
         if (ctor.isReady && ctor.isReady(props)) {
-          _this2.loadSync();
+          _this.loadSync();
         }
 
-        return _this2;
+        return _this;
       }
 
-      var _proto2 = InnerLoadable.prototype;
+      var _proto = InnerLoadable.prototype;
 
-      _proto2.componentDidMount = function componentDidMount() {
+      _proto.componentDidMount = function componentDidMount() {
         if (this.state.loading) {
@@ -202,8 +164,8 @@ this.loadAsync();
 
-      _proto2.triggerOnLoad = function triggerOnLoad() {
-        var _this3 = this;
+      _proto.triggerOnLoad = function triggerOnLoad() {
+        var _this2 = this;
 
         if (onLoad) {
           setTimeout(function () {
-            onLoad(_this3.state.result, _this3.props);
+            onLoad(_this2.state.result, _this2.props);
           });
@@ -213,3 +175,3 @@ }
 
-      _proto2.loadSync = function loadSync() {
+      _proto.loadSync = function loadSync() {
         if (!this.state.loading) return;
@@ -229,7 +191,7 @@
 
-      _proto2.loadAsync = function loadAsync() {
-        var _this4 = this;
+      _proto.loadAsync = function loadAsync() {
+        var _this3 = this;
 
         this.promise = this.promise || ctor.requireAsync(this.props).then(function (loadedModule) {
-          _this4.setState({
+          _this3.setState({
             result: resolve(loadedModule, {
@@ -240,6 +202,6 @@ Loadable: Loadable
           }, function () {
-            return _this4.triggerOnLoad();
+            return _this3.triggerOnLoad();
           });
         }).catch(function (error) {
-          _this4.setState({
+          _this3.setState({
             error: error,
@@ -252,8 +214,8 @@ loading: false
 
-      _proto2.render = function render() {
+      _proto.render = function render() {
         var _this$props = this.props,
-            ref = _this$props.forwardedRef,
+            forwardedRef = _this$props.forwardedRef,
             propFallback = _this$props.fallback,
-            loadableState = _this$props.loadableState,
-            props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "loadableState"]);
+            __chunkExtractor = _this$props.__chunkExtractor,
+            props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "__chunkExtractor"]);
 
@@ -285,3 +247,3 @@ var _this$state = this.state,
           props: _extends({}, props, {
-            ref: ref
+            ref: forwardedRef
           })
@@ -294,3 +256,3 @@ });
 
-    var EnhancedInnerLoadable = withLoadableState(InnerLoadable);
+    var EnhancedInnerLoadable = withChunkExtractor(InnerLoadable);
     var Loadable = React.forwardRef(function (props, ref) {
@@ -301,4 +263,2 @@ return React.createElement(EnhancedInnerLoadable, _extends({
     });
-    Loadable.Prefetch = Prefetch;
-    Loadable.prefetch = prefetch;
     return Loadable;
@@ -371,37 +331,48 @@ }
 var BROWSER = typeof window !== 'undefined';
-var WEBPACK = typeof __webpack_require__ !== 'undefined';
+function loadableReady(done) {
+  if (done === void 0) {
+    done = function done() {};
+  }
 
-function isManifestMode() {
-  var loadableScripts = document.querySelectorAll("script[" + DATA_LOADABLE_CHUNK + "]");
-  return loadableScripts.length > 0;
-}
+  if (!BROWSER) {
+    warn('`loadableReady()` must be called in browser only');
+    done();
+    return Promise.resolve();
+  }
 
-function loadComponents(loadableState) {
-  loadableState = BROWSER ? window[DEFAULT_LOADABLE_STATE_KEY] : null;
+  var requiredChunks = BROWSER ? window[LOADABLE_REQUIRED_CHUNKS_KEY] : null;
 
-  if (!loadableState) {
-    if (!BROWSER) {
-      warn('`loadComponents()` must be called in browser only');
-    }
+  if (!requiredChunks) {
+    warn('`loadableReady()` requires state, please use `getScriptTags` or `getScriptElements` server-side');
+    done();
+    return Promise.resolve();
+  }
 
-    if (isManifestMode()) {
-      warn('`loadComponents()` is not required if you use `@loadable/webpack-plugin`');
-    } else {
-      warn('`loadComponents()` requires a state in the page, please inject scripts server-side');
+  var resolved = true;
+  return new Promise(function (resolve) {
+    window.__LOADABLE_LOADED_CHUNKS__ = window.__LOADABLE_LOADED_CHUNKS__ || [];
+    var loadedChunks = window.__LOADABLE_LOADED_CHUNKS__;
+    var originalPush = loadedChunks.push.bind(loadedChunks);
+
+    function checkReadyState() {
+      if (requiredChunks.every(function (chunk) {
+        return loadedChunks.some(function (_ref) {
+          var chunks = _ref[0];
+          return chunks.includes(chunk);
+        });
+      })) {
+        if (!resolved) {
+          resolved = true;
+          resolve();
+          done();
+        }
+      }
     }
 
-    return Promise.resolve();
-  }
+    loadedChunks.push = function () {
+      originalPush.apply(void 0, arguments);
+      checkReadyState();
+    };
 
-  invariant(WEBPACK, '`loadComponents()` is only compatible with Webpack');
-  return Promise.all(loadableState.map(function (chunk) {
-    return __webpack_require__.e(chunk).catch(function (error) {
-      // We can safely ignore "missing" type errors
-      // we just want the bundle to be loaded, not the module installed
-      if (error.message.match(/missing:/)) return;
-      throw error;
-    });
-  })).catch(function (error) {
-    warn('`loadComponents()` has failed');
-    warn(error);
+    checkReadyState();
   });
@@ -418,2 +389,2 @@ }
 export default loadable$2;
-export { lazy$2 as lazy, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, loadComponents };
+export { lazy$2 as lazy, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, loadableReady };

dist/loadable.js

@@ -24,8 +24,6 @@ (function (global, factory) {
 
-  var DEFAULT_LOADABLE_STATE_KEY = '__LOADABLE_STATE__';
-  var DATA_LOADABLE_CHUNK = 'data-loadable-chunk';
+  var LOADABLE_REQUIRED_CHUNKS_KEY = '__LOADABLE_REQUIRED_CHUNKS__';
 
   var sharedInternals = /*#__PURE__*/Object.freeze({
-    DEFAULT_LOADABLE_STATE_KEY: DEFAULT_LOADABLE_STATE_KEY,
-    DATA_LOADABLE_CHUNK: DATA_LOADABLE_CHUNK,
+    LOADABLE_REQUIRED_CHUNKS_KEY: LOADABLE_REQUIRED_CHUNKS_KEY,
     invariant: invariant,
@@ -92,7 +90,7 @@ Context: Context
 
-  var withLoadableState = function withLoadableState(Component) {
+  var withChunkExtractor = function withChunkExtractor(Component) {
     return function (props) {
-      return React.createElement(Context.Consumer, null, function (loadableState) {
+      return React.createElement(Context.Consumer, null, function (extractor) {
         return React.createElement(Component, _extends({
-          loadableState: loadableState
+          __chunkExtractor: extractor
         }, props));
@@ -120,49 +118,12 @@ });
 
-      function prefetch(props) {
-        ctor.requireAsync(props).catch(function () {});
-      }
-
-      var InnerPrefetch =
+      var InnerLoadable =
       /*#__PURE__*/
       function (_React$Component) {
-        _inheritsLoose(InnerPrefetch, _React$Component);
+        _inheritsLoose(InnerLoadable, _React$Component);
 
-        function InnerPrefetch(props) {
+        function InnerLoadable(props) {
           var _this;
 
           _this = _React$Component.call(this, props) || this;
-          invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
-
-          if (props.loadableState) {
-            props.loadableState.addPrefetchedChunk(ctor.chunkName(props));
-          }
-
-          return _this;
-        }
-
-        var _proto = InnerPrefetch.prototype;
-
-        _proto.componentDidMount = function componentDidMount() {
-          prefetch(this.props);
-        };
-
-        _proto.render = function render() {
-          return null;
-        };
-
-        return InnerPrefetch;
-      }(React.Component);
-
-      var Prefetch = withLoadableState(InnerPrefetch);
-
-      var InnerLoadable =
-      /*#__PURE__*/
-      function (_React$Component2) {
-        _inheritsLoose(InnerLoadable, _React$Component2);
-
-        function InnerLoadable(props) {
-          var _this2;
-
-          _this2 = _React$Component2.call(this, props) || this;
-          _this2.state = {
+          _this.state = {
             result: null,
@@ -172,5 +133,5 @@ error: null,
           };
-          invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+          invariant(!props.__chunkExtractor || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
 
-          if (props.loadableState) {
+          if (props.__chunkExtractor) {
             // We run load function, we assume that it won't fail and that it
@@ -180,6 +141,7 @@ // triggers a synchronous loading of the module
 
-            _this2.loadSync();
+            _this.loadSync();
 
-            props.loadableState.addChunk(ctor.chunkName(props));
-            return _assertThisInitialized(_this2);
+            props.__chunkExtractor.addChunk(ctor.chunkName(props));
+
+            return _assertThisInitialized(_this);
           } // Client-side with `isReady` method present (SSR probably)
@@ -190,11 +152,11 @@ // If module is already loaded, we use a synchronous loading
           if (ctor.isReady && ctor.isReady(props)) {
-            _this2.loadSync();
+            _this.loadSync();
           }
 
-          return _this2;
+          return _this;
         }
 
-        var _proto2 = InnerLoadable.prototype;
+        var _proto = InnerLoadable.prototype;
 
-        _proto2.componentDidMount = function componentDidMount() {
+        _proto.componentDidMount = function componentDidMount() {
           if (this.state.loading) {
@@ -207,8 +169,8 @@ this.loadAsync();
 
-        _proto2.triggerOnLoad = function triggerOnLoad() {
-          var _this3 = this;
+        _proto.triggerOnLoad = function triggerOnLoad() {
+          var _this2 = this;
 
           if (onLoad) {
             setTimeout(function () {
-              onLoad(_this3.state.result, _this3.props);
+              onLoad(_this2.state.result, _this2.props);
             });
@@ -218,3 +180,3 @@ }
 
-        _proto2.loadSync = function loadSync() {
+        _proto.loadSync = function loadSync() {
           if (!this.state.loading) return;
@@ -234,7 +196,7 @@
 
-        _proto2.loadAsync = function loadAsync() {
-          var _this4 = this;
+        _proto.loadAsync = function loadAsync() {
+          var _this3 = this;
 
           this.promise = this.promise || ctor.requireAsync(this.props).then(function (loadedModule) {
-            _this4.setState({
+            _this3.setState({
               result: resolve(loadedModule, {
@@ -245,6 +207,6 @@ Loadable: Loadable
             }, function () {
-              return _this4.triggerOnLoad();
+              return _this3.triggerOnLoad();
             });
           }).catch(function (error) {
-            _this4.setState({
+            _this3.setState({
               error: error,
@@ -257,8 +219,8 @@ loading: false
 
-        _proto2.render = function render() {
+        _proto.render = function render() {
           var _this$props = this.props,
-              ref = _this$props.forwardedRef,
+              forwardedRef = _this$props.forwardedRef,
               propFallback = _this$props.fallback,
-              loadableState = _this$props.loadableState,
-              props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "loadableState"]);
+              __chunkExtractor = _this$props.__chunkExtractor,
+              props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "__chunkExtractor"]);
 
@@ -290,3 +252,3 @@ var _this$state = this.state,
             props: _extends({}, props, {
-              ref: ref
+              ref: forwardedRef
             })
@@ -299,3 +261,3 @@ });
 
-      var EnhancedInnerLoadable = withLoadableState(InnerLoadable);
+      var EnhancedInnerLoadable = withChunkExtractor(InnerLoadable);
       var Loadable = React.forwardRef(function (props, ref) {
@@ -306,4 +268,2 @@ return React.createElement(EnhancedInnerLoadable, _extends({
       });
-      Loadable.Prefetch = Prefetch;
-      Loadable.prefetch = prefetch;
       return Loadable;
@@ -337,21 +297,26 @@ }
   });
-  var b = "function" === typeof Symbol && Symbol["for"],
-      c = b ? Symbol["for"]("react.element") : 60103,
-      d = b ? Symbol["for"]("react.portal") : 60106,
-      e = b ? Symbol["for"]("react.fragment") : 60107,
-      f = b ? Symbol["for"]("react.strict_mode") : 60108,
-      g = b ? Symbol["for"]("react.provider") : 60109,
-      h = b ? Symbol["for"]("react.context") : 60110,
-      k = b ? Symbol["for"]("react.async_mode") : 60111,
-      l = b ? Symbol["for"]("react.forward_ref") : 60112;
+  var b = "function" === typeof Symbol && Symbol.for,
+      c = b ? Symbol.for("react.element") : 60103,
+      d = b ? Symbol.for("react.portal") : 60106,
+      e = b ? Symbol.for("react.fragment") : 60107,
+      f = b ? Symbol.for("react.strict_mode") : 60108,
+      g = b ? Symbol.for("react.profiler") : 60114,
+      h = b ? Symbol.for("react.provider") : 60109,
+      k = b ? Symbol.for("react.context") : 60110,
+      l = b ? Symbol.for("react.concurrent_mode") : 60111,
+      m = b ? Symbol.for("react.forward_ref") : 60112,
+      n = b ? Symbol.for("react.suspense") : 60113,
+      q = b ? Symbol.for("react.memo") : 60115,
+      r = b ? Symbol.for("react.lazy") : 60116;
 
-  function m(a) {
+  function t(a) {
     if ("object" === typeof a && null !== a) {
-      var n = a.$$typeof;
+      var p = a.$$typeof;
 
-      switch (n) {
+      switch (p) {
         case c:
           switch (a = a.type, a) {
-            case k:
+            case l:
             case e:
+            case g:
             case f:
@@ -362,9 +327,9 @@ return a;
               switch (a = a && a.$$typeof, a) {
+                case k:
+                case m:
                 case h:
-                case l:
-                case g:
                   return a;
 
                 default:
-                  return n;
+                  return p;
               }
@@ -375,3 +340,3 @@
         case d:
-          return n;
+          return p;
       }
@@ -381,9 +346,15 @@ }
 
-  exports.typeOf = m;
-  exports.AsyncMode = k;
-  exports.ContextConsumer = h;
-  exports.ContextProvider = g;
+  function u(a) {
+    return t(a) === l;
+  }
+
+  exports.typeOf = t;
+  exports.AsyncMode = l;
+  exports.ConcurrentMode = l;
+  exports.ContextConsumer = k;
+  exports.ContextProvider = h;
   exports.Element = c;
-  exports.ForwardRef = l;
+  exports.ForwardRef = m;
   exports.Fragment = e;
+  exports.Profiler = g;
   exports.Portal = d;
@@ -393,15 +364,17 @@ exports.StrictMode = f;
   exports.isValidElementType = function (a) {
-    return "string" === typeof a || "function" === typeof a || a === e || a === k || a === f || "object" === typeof a && null !== a && (a.$$typeof === g || a.$$typeof === h || a.$$typeof === l);
+    return "string" === typeof a || "function" === typeof a || a === e || a === l || a === g || a === f || a === n || "object" === typeof a && null !== a && (a.$$typeof === r || a.$$typeof === q || a.$$typeof === h || a.$$typeof === k || a.$$typeof === m);
   };
 
   exports.isAsyncMode = function (a) {
-    return m(a) === k;
+    return u(a);
   };
 
+  exports.isConcurrentMode = u;
+
   exports.isContextConsumer = function (a) {
-    return m(a) === h;
+    return t(a) === k;
   };
 
   exports.isContextProvider = function (a) {
-    return m(a) === g;
+    return t(a) === h;
   };
@@ -414,15 +387,19 @@
   exports.isForwardRef = function (a) {
-    return m(a) === l;
+    return t(a) === m;
   };
 
   exports.isFragment = function (a) {
-    return m(a) === e;
+    return t(a) === e;
   };
 
+  exports.isProfiler = function (a) {
+    return t(a) === g;
+  };
+
   exports.isPortal = function (a) {
-    return m(a) === d;
+    return t(a) === d;
   };
 
   exports.isStrictMode = function (a) {
-    return m(a) === f;
+    return t(a) === f;
   };
@@ -434,18 +411,22 @@ });
   var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
-  var reactIs_production_min_3 = reactIs_production_min.ContextConsumer;
-  var reactIs_production_min_4 = reactIs_production_min.ContextProvider;
-  var reactIs_production_min_5 = reactIs_production_min.Element;
-  var reactIs_production_min_6 = reactIs_production_min.ForwardRef;
-  var reactIs_production_min_7 = reactIs_production_min.Fragment;
-  var reactIs_production_min_8 = reactIs_production_min.Portal;
-  var reactIs_production_min_9 = reactIs_production_min.StrictMode;
-  var reactIs_production_min_10 = reactIs_production_min.isValidElementType;
-  var reactIs_production_min_11 = reactIs_production_min.isAsyncMode;
-  var reactIs_production_min_12 = reactIs_production_min.isContextConsumer;
-  var reactIs_production_min_13 = reactIs_production_min.isContextProvider;
-  var reactIs_production_min_14 = reactIs_production_min.isElement;
-  var reactIs_production_min_15 = reactIs_production_min.isForwardRef;
-  var reactIs_production_min_16 = reactIs_production_min.isFragment;
-  var reactIs_production_min_17 = reactIs_production_min.isPortal;
-  var reactIs_production_min_18 = reactIs_production_min.isStrictMode;
+  var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
+  var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
+  var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
+  var reactIs_production_min_6 = reactIs_production_min.Element;
+  var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
+  var reactIs_production_min_8 = reactIs_production_min.Fragment;
+  var reactIs_production_min_9 = reactIs_production_min.Profiler;
+  var reactIs_production_min_10 = reactIs_production_min.Portal;
+  var reactIs_production_min_11 = reactIs_production_min.StrictMode;
+  var reactIs_production_min_12 = reactIs_production_min.isValidElementType;
+  var reactIs_production_min_13 = reactIs_production_min.isAsyncMode;
+  var reactIs_production_min_14 = reactIs_production_min.isConcurrentMode;
+  var reactIs_production_min_15 = reactIs_production_min.isContextConsumer;
+  var reactIs_production_min_16 = reactIs_production_min.isContextProvider;
+  var reactIs_production_min_17 = reactIs_production_min.isElement;
+  var reactIs_production_min_18 = reactIs_production_min.isForwardRef;
+  var reactIs_production_min_19 = reactIs_production_min.isFragment;
+  var reactIs_production_min_20 = reactIs_production_min.isProfiler;
+  var reactIs_production_min_21 = reactIs_production_min.isPortal;
+  var reactIs_production_min_22 = reactIs_production_min.isStrictMode;
 
@@ -462,17 +443,76 @@ var reactIs_development = createCommonjsModule(function (module, exports) {
 
-      var hasSymbol = typeof Symbol === 'function' && Symbol['for'];
-      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol['for']('react.element') : 0xeac7;
-      var REACT_PORTAL_TYPE = hasSymbol ? Symbol['for']('react.portal') : 0xeaca;
-      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol['for']('react.fragment') : 0xeacb;
-      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol['for']('react.strict_mode') : 0xeacc;
-      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol['for']('react.provider') : 0xeacd;
-      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol['for']('react.context') : 0xeace;
-      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol['for']('react.async_mode') : 0xeacf;
-      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol['for']('react.forward_ref') : 0xead0;
+      var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
+      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
 
       function isValidElementType(type) {
         return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-        type === REACT_FRAGMENT_TYPE || type === REACT_ASYNC_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE);
+        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE);
       }
+      /**
+       * Forked from fbjs/warning:
+       * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
+       *
+       * Only change is we use console.warn instead of console.error,
+       * and do nothing when 'console' is not supported.
+       * This really simplifies the code.
+       * ---
+       * Similar to invariant but only logs a warning if the condition is not met.
+       * This can be used to log issues in development environments in critical
+       * paths. Removing the logging code for production environments will keep the
+       * same logic and follow the same code paths.
+       */
 
+
+      var lowPriorityWarning = function lowPriorityWarning() {};
+
+      {
+        var printWarning = function printWarning(format) {
+          for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
+
+          var argIndex = 0;
+          var message = 'Warning: ' + format.replace(/%s/g, function () {
+            return args[argIndex++];
+          });
+
+          if (typeof console !== 'undefined') {
+            console.warn(message);
+          }
+
+          try {
+            // --- Welcome to debugging React ---
+            // This error was thrown as a convenience so that you can use this stack
+            // to find the callsite that caused this warning to fire.
+            throw new Error(message);
+          } catch (x) {}
+        };
+
+        lowPriorityWarning = function lowPriorityWarning(condition, format) {
+          if (format === undefined) {
+            throw new Error('`lowPriorityWarning(condition, format, ...args)` requires a warning ' + 'message argument');
+          }
+
+          if (!condition) {
+            for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+              args[_key2 - 2] = arguments[_key2];
+            }
+
+            printWarning.apply(undefined, [format].concat(args));
+          }
+        };
+      }
+      var lowPriorityWarning$1 = lowPriorityWarning;
+
       function typeOf(object) {
@@ -487,4 +527,5 @@ if (typeof object === 'object' && object !== null) {
               switch (type) {
-                case REACT_ASYNC_MODE_TYPE:
+                case REACT_CONCURRENT_MODE_TYPE:
                 case REACT_FRAGMENT_TYPE:
+                case REACT_PROFILER_TYPE:
                 case REACT_STRICT_MODE_TYPE:
@@ -514,5 +555,7 @@ return type;
         return undefined;
-      }
+      } // AsyncMode alias is deprecated along with isAsyncMode
 
-      var AsyncMode = REACT_ASYNC_MODE_TYPE;
+
+      var AsyncMode = REACT_CONCURRENT_MODE_TYPE;
+      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
       var ContextConsumer = REACT_CONTEXT_TYPE;
@@ -523,9 +566,21 @@ var ContextProvider = REACT_PROVIDER_TYPE;
       var Fragment = REACT_FRAGMENT_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
       var Portal = REACT_PORTAL_TYPE;
       var StrictMode = REACT_STRICT_MODE_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
 
       function isAsyncMode(object) {
-        return typeOf(object) === REACT_ASYNC_MODE_TYPE;
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true;
+            lowPriorityWarning$1(false, 'The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+          }
+        }
+        return isConcurrentMode(object);
       }
 
+      function isConcurrentMode(object) {
+        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+      }
+
       function isContextConsumer(object) {
@@ -551,2 +606,6 @@ return typeOf(object) === REACT_CONTEXT_TYPE;
 
+      function isProfiler(object) {
+        return typeOf(object) === REACT_PROFILER_TYPE;
+      }
+
       function isPortal(object) {
@@ -562,2 +621,3 @@ return typeOf(object) === REACT_PORTAL_TYPE;
       exports.AsyncMode = AsyncMode;
+      exports.ConcurrentMode = ConcurrentMode;
       exports.ContextConsumer = ContextConsumer;
@@ -568,2 +628,3 @@ exports.ContextProvider = ContextProvider;
       exports.Fragment = Fragment;
+      exports.Profiler = Profiler;
       exports.Portal = Portal;
@@ -573,2 +634,3 @@ exports.StrictMode = StrictMode;
       exports.isAsyncMode = isAsyncMode;
+      exports.isConcurrentMode = isConcurrentMode;
       exports.isContextConsumer = isContextConsumer;
@@ -579,2 +641,3 @@ exports.isContextProvider = isContextProvider;
       exports.isFragment = isFragment;
+      exports.isProfiler = isProfiler;
       exports.isPortal = isPortal;
@@ -589,18 +652,22 @@ exports.isStrictMode = isStrictMode;
   var reactIs_development_2 = reactIs_development.AsyncMode;
-  var reactIs_development_3 = reactIs_development.ContextConsumer;
-  var reactIs_development_4 = reactIs_development.ContextProvider;
-  var reactIs_development_5 = reactIs_development.Element;
-  var reactIs_development_6 = reactIs_development.ForwardRef;
-  var reactIs_development_7 = reactIs_development.Fragment;
-  var reactIs_development_8 = reactIs_development.Portal;
-  var reactIs_development_9 = reactIs_development.StrictMode;
-  var reactIs_development_10 = reactIs_development.isValidElementType;
-  var reactIs_development_11 = reactIs_development.isAsyncMode;
-  var reactIs_development_12 = reactIs_development.isContextConsumer;
-  var reactIs_development_13 = reactIs_development.isContextProvider;
-  var reactIs_development_14 = reactIs_development.isElement;
-  var reactIs_development_15 = reactIs_development.isForwardRef;
-  var reactIs_development_16 = reactIs_development.isFragment;
-  var reactIs_development_17 = reactIs_development.isPortal;
-  var reactIs_development_18 = reactIs_development.isStrictMode;
+  var reactIs_development_3 = reactIs_development.ConcurrentMode;
+  var reactIs_development_4 = reactIs_development.ContextConsumer;
+  var reactIs_development_5 = reactIs_development.ContextProvider;
+  var reactIs_development_6 = reactIs_development.Element;
+  var reactIs_development_7 = reactIs_development.ForwardRef;
+  var reactIs_development_8 = reactIs_development.Fragment;
+  var reactIs_development_9 = reactIs_development.Profiler;
+  var reactIs_development_10 = reactIs_development.Portal;
+  var reactIs_development_11 = reactIs_development.StrictMode;
+  var reactIs_development_12 = reactIs_development.isValidElementType;
+  var reactIs_development_13 = reactIs_development.isAsyncMode;
+  var reactIs_development_14 = reactIs_development.isConcurrentMode;
+  var reactIs_development_15 = reactIs_development.isContextConsumer;
+  var reactIs_development_16 = reactIs_development.isContextProvider;
+  var reactIs_development_17 = reactIs_development.isElement;
+  var reactIs_development_18 = reactIs_development.isForwardRef;
+  var reactIs_development_19 = reactIs_development.isFragment;
+  var reactIs_development_20 = reactIs_development.isProfiler;
+  var reactIs_development_21 = reactIs_development.isPortal;
+  var reactIs_development_22 = reactIs_development.isStrictMode;
 
@@ -752,37 +819,48 @@ var reactIs = createCommonjsModule(function (module) {
   var BROWSER = typeof window !== 'undefined';
-  var WEBPACK = typeof __webpack_require__ !== 'undefined';
+  function loadableReady(done) {
+    if (done === void 0) {
+      done = function done() {};
+    }
 
-  function isManifestMode() {
-    var loadableScripts = document.querySelectorAll("script[" + DATA_LOADABLE_CHUNK + "]");
-    return loadableScripts.length > 0;
-  }
+    if (!BROWSER) {
+      warn('`loadableReady()` must be called in browser only');
+      done();
+      return Promise.resolve();
+    }
 
-  function loadComponents(loadableState) {
-    loadableState = BROWSER ? window[DEFAULT_LOADABLE_STATE_KEY] : null;
+    var requiredChunks = BROWSER ? window[LOADABLE_REQUIRED_CHUNKS_KEY] : null;
 
-    if (!loadableState) {
-      if (!BROWSER) {
-        warn('`loadComponents()` must be called in browser only');
-      }
+    if (!requiredChunks) {
+      warn('`loadableReady()` requires state, please use `getScriptTags` or `getScriptElements` server-side');
+      done();
+      return Promise.resolve();
+    }
 
-      if (isManifestMode()) {
-        warn('`loadComponents()` is not required if you use `@loadable/webpack-plugin`');
-      } else {
-        warn('`loadComponents()` requires a state in the page, please inject scripts server-side');
+    var resolved = true;
+    return new Promise(function (resolve) {
+      window.__LOADABLE_LOADED_CHUNKS__ = window.__LOADABLE_LOADED_CHUNKS__ || [];
+      var loadedChunks = window.__LOADABLE_LOADED_CHUNKS__;
+      var originalPush = loadedChunks.push.bind(loadedChunks);
+
+      function checkReadyState() {
+        if (requiredChunks.every(function (chunk) {
+          return loadedChunks.some(function (_ref) {
+            var chunks = _ref[0];
+            return chunks.includes(chunk);
+          });
+        })) {
+          if (!resolved) {
+            resolved = true;
+            resolve();
+            done();
+          }
+        }
       }
 
-      return Promise.resolve();
-    }
+      loadedChunks.push = function () {
+        originalPush.apply(void 0, arguments);
+        checkReadyState();
+      };
 
-    invariant(WEBPACK, '`loadComponents()` is only compatible with Webpack');
-    return Promise.all(loadableState.map(function (chunk) {
-      return __webpack_require__.e(chunk).catch(function (error) {
-        // We can safely ignore "missing" type errors
-        // we just want the bundle to be loaded, not the module installed
-        if (error.message.match(/missing:/)) return;
-        throw error;
-      });
-    })).catch(function (error) {
-      warn('`loadComponents()` has failed');
-      warn(error);
+      checkReadyState();
     });
@@ -801,3 +879,3 @@ }
   exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  exports.loadComponents = loadComponents;
+  exports.loadableReady = loadableReady;
 
@@ -804,0 +882,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/loadable.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.loadable={},e.React)}(this,function(e,f){"use strict";function d(e,t){if(!e){var r=Error("loadable: "+t);throw r.framesToPop=1,r.name="Invariant Violation",r}}function t(e){console.warn("loadable: "+e)}var n=(f=f&&f.hasOwnProperty("default")?f.default:f).createContext(),r="__LOADABLE_STATE__",o="data-loadable-chunk",a=Object.freeze({DEFAULT_LOADABLE_STATE_KEY:r,DATA_LOADABLE_CHUNK:o,invariant:d,Context:n});function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function y(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}var b=function(r){return function(t){return f.createElement(n.Consumer,null,function(e){return f.createElement(r,p({loadableState:e},t))})}},i=function(e){return e};function l(e){var t=e.resolve,l=void 0===t?i:t,s=e.render,c=e.onLoad;function r(e,u){void 0===u&&(u={});var t,n="function"==typeof(t=e)?{requireAsync:t}:t;function o(e){n.requireAsync(e).catch(function(){})}var r=b(function(r){function e(e){var t;return t=r.call(this,e)||this,d(!e.loadableState||n.requireSync,"SSR requires `@loadable/babel`, please install it"),e.loadableState&&e.loadableState.addPrefetchedChunk(n.chunkName(e)),t}y(e,r);var t=e.prototype;return t.componentDidMount=function(){o(this.props)},t.render=function(){return null},e}(f.Component)),a=b(function(r){function e(e){var t;return(t=r.call(this,e)||this).state={result:null,error:null,loading:!0},d(!e.loadableState||n.requireSync,"SSR requires `@loadable/babel`, please install it"),e.loadableState?(n.requireAsync(e).catch(function(){}),t.loadSync(),e.loadableState.addChunk(n.chunkName(e)),function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)):(n.isReady&&n.isReady(e)&&t.loadSync(),t)}y(e,r);var t=e.prototype;return t.componentDidMount=function(){this.state.loading?this.loadAsync():this.state.error||this.triggerOnLoad()},t.triggerOnLoad=function(){var e=this;c&&setTimeout(function(){c(e.state.result,e.props)})},t.loadSync=function(){if(this.state.loading)try{var e=n.requireSync(this.props),t=l(e,{Loadable:i});this.state.result=t,this.state.loading=!1}catch(e){this.state.error=e}},t.loadAsync=function(){var t=this;return this.promise=this.promise||n.requireAsync(this.props).then(function(e){t.setState({result:l(e,{Loadable:i}),loading:!1},function(){return t.triggerOnLoad()})}).catch(function(e){t.setState({error:e,loading:!1})}),this.promise},t.render=function(){var e=this.props,t=e.forwardedRef,r=e.fallback,n=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t.indexOf(r=a[n])<0&&(o[r]=e[r]);return o}(e,["forwardedRef","fallback","loadableState"]),o=this.state,a=o.error,i=o.loading,l=o.result;if(i&&u.suspense)throw this.loadAsync();if(a)throw a;var c=r||u.fallback||null;return i?c:s({loading:i,fallback:c,result:l,options:u,props:p({},n,{ref:t})})},e}(f.Component)),i=f.forwardRef(function(e,t){return f.createElement(a,p({forwardedRef:t},e))});return i.Prefetch=r,i.prefetch=o,i}return{loadable:r,lazy:function(e,t){return r(e,p({},t,{suspense:!0}))}}}function c(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function u(e,t){return e(t={exports:{}},t.exports),t.exports}var s=u(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,n=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,a=r?Symbol.for("react.fragment"):60107,i=r?Symbol.for("react.strict_mode"):60108,l=r?Symbol.for("react.provider"):60109,c=r?Symbol.for("react.context"):60110,u=r?Symbol.for("react.async_mode"):60111,s=r?Symbol.for("react.forward_ref"):60112;function f(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case u:case a:case i:return e;default:switch(e=e&&e.$$typeof){case c:case s:case l:return e;default:return t}}case o:return t}}}t.typeOf=f,t.AsyncMode=u,t.ContextConsumer=c,t.ContextProvider=l,t.Element=n,t.ForwardRef=s,t.Fragment=a,t.Portal=o,t.StrictMode=i,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===u||e===i||"object"==typeof e&&null!==e&&(e.$$typeof===l||e.$$typeof===c||e.$$typeof===s)},t.isAsyncMode=function(e){return f(e)===u},t.isContextConsumer=function(e){return f(e)===c},t.isContextProvider=function(e){return f(e)===l},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return f(e)===s},t.isFragment=function(e){return f(e)===a},t.isPortal=function(e){return f(e)===o},t.isStrictMode=function(e){return f(e)===i}});c(s);var h=u(function(e,t){});c(h);var m=u(function(e){e.exports=s}),v={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},_={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},S={};S[m.ForwardRef]={$$typeof:!0,render:!0};var g=Object.defineProperty,w=Object.getOwnPropertyNames,O=Object.getOwnPropertySymbols,P=Object.getOwnPropertyDescriptor,A=Object.getPrototypeOf,C=Object.prototype;var E=function e(t,r,n){if("string"==typeof r)return t;if(C){var o=A(r);o&&o!==C&&e(t,o,n)}var a=w(r);O&&(a=a.concat(O(r)));for(var i=S[t.$$typeof]||v,l=S[r.$$typeof]||v,c=0;c<a.length;++c){var u=a[c];if(!(_[u]||n&&n[u]||l&&l[u]||i&&i[u])){var s=P(r,u);try{g(t,u,s)}catch(e){}}}return t};var j=l({resolve:function(e,t){var r=e.default||e;return E(t.Loadable,r,{prefetch:!0,Prefetch:!0}),r},render:function(e){return f.createElement(e.result,e.props)}}),x=j.loadable,L=j.lazy,$=l({onLoad:function(e,t){e&&t.ref&&("function"==typeof t.ref?t.ref(e):t.ref.current=e)},render:function(e){var t=e.props;return!e.loading&&t.children?t.children(e.result):null}}),R=$.lazy,T="undefined"!=typeof window,q="undefined"!=typeof __webpack_require__;var k=x;k.lib=$.loadable;var D=L;D.lib=R;var M=a;e.default=k,e.lazy=D,e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=M,e.loadComponents=function(e){return(e=T?window[r]:null)?(d(q,"`loadComponents()` is only compatible with Webpack"),Promise.all(e.map(function(e){return __webpack_require__.e(e).catch(function(e){if(!e.message.match(/missing:/))throw e})})).catch(function(e){t("`loadComponents()` has failed"),t(e)})):(T||t("`loadComponents()` must be called in browser only"),0<document.querySelectorAll("script["+o+"]").length?t("`loadComponents()` is not required if you use `@loadable/webpack-plugin`"):t("`loadComponents()` requires a state in the page, please inject scripts server-side"),Promise.resolve())},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.loadable={},e.React)}(this,function(e,o){"use strict";function s(e,t){if(!e){var r=Error("loadable: "+t);throw r.framesToPop=1,r.name="Invariant Violation",r}}function t(e){console.warn("loadable: "+e)}var d=(o=o&&o.hasOwnProperty("default")?o.default:o).createContext(),r="__LOADABLE_REQUIRED_CHUNKS__",n=Object.freeze({LOADABLE_REQUIRED_CHUNKS_KEY:r,invariant:s,Context:d});function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var a=function(e){return e};function i(e){var t=e.resolve,c=void 0===t?a:t,l=e.render,u=e.onLoad;function r(e,f){void 0===f&&(f={});var t,r,a="function"==typeof(t=e)?{requireAsync:t}:t,n=(r=function(r){var e,t;function n(e){var t;return(t=r.call(this,e)||this).state={result:null,error:null,loading:!0},s(!e.__chunkExtractor||a.requireSync,"SSR requires `@loadable/babel`, please install it"),e.__chunkExtractor?(a.requireAsync(e).catch(function(){}),t.loadSync(),e.__chunkExtractor.addChunk(a.chunkName(e)),function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)):(a.isReady&&a.isReady(e)&&t.loadSync(),t)}(e=n).prototype=Object.create((t=r).prototype),(e.prototype.constructor=e).__proto__=t;var o=n.prototype;return o.componentDidMount=function(){this.state.loading?this.loadAsync():this.state.error||this.triggerOnLoad()},o.triggerOnLoad=function(){var e=this;u&&setTimeout(function(){u(e.state.result,e.props)})},o.loadSync=function(){if(this.state.loading)try{var e=a.requireSync(this.props),t=c(e,{Loadable:i});this.state.result=t,this.state.loading=!1}catch(e){this.state.error=e}},o.loadAsync=function(){var t=this;return this.promise=this.promise||a.requireAsync(this.props).then(function(e){t.setState({result:c(e,{Loadable:i}),loading:!1},function(){return t.triggerOnLoad()})}).catch(function(e){t.setState({error:e,loading:!1})}),this.promise},o.render=function(){var e=this.props,t=e.forwardedRef,r=e.fallback,n=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t.indexOf(r=a[n])<0&&(o[r]=e[r]);return o}(e,["forwardedRef","fallback","__chunkExtractor"]),o=this.state,a=o.error,i=o.loading,c=o.result;if(i&&f.suspense)throw this.loadAsync();if(a)throw a;var u=r||f.fallback||null;return i?u:l({loading:i,fallback:u,result:c,options:f,props:p({},n,{ref:t})})},n}(o.Component),function(t){return o.createElement(d.Consumer,null,function(e){return o.createElement(r,p({__chunkExtractor:e},t))})}),i=o.forwardRef(function(e,t){return o.createElement(n,p({forwardedRef:t},e))});return i}return{loadable:r,lazy:function(e,t){return r(e,p({},t,{suspense:!0}))}}}function c(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function u(e,t){return e(t={exports:{}},t.exports),t.exports}var f=u(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,n=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,a=r?Symbol.for("react.fragment"):60107,i=r?Symbol.for("react.strict_mode"):60108,c=r?Symbol.for("react.profiler"):60114,u=r?Symbol.for("react.provider"):60109,f=r?Symbol.for("react.context"):60110,l=r?Symbol.for("react.concurrent_mode"):60111,s=r?Symbol.for("react.forward_ref"):60112,d=r?Symbol.for("react.suspense"):60113,p=r?Symbol.for("react.memo"):60115,y=r?Symbol.for("react.lazy"):60116;function _(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case l:case a:case c:case i:return e;default:switch(e=e&&e.$$typeof){case f:case s:case u:return e;default:return t}}case o:return t}}}function b(e){return _(e)===l}t.typeOf=_,t.AsyncMode=l,t.ConcurrentMode=l,t.ContextConsumer=f,t.ContextProvider=u,t.Element=n,t.ForwardRef=s,t.Fragment=a,t.Profiler=c,t.Portal=o,t.StrictMode=i,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===l||e===c||e===i||e===d||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===p||e.$$typeof===u||e.$$typeof===f||e.$$typeof===s)},t.isAsyncMode=function(e){return b(e)},t.isConcurrentMode=b,t.isContextConsumer=function(e){return _(e)===f},t.isContextProvider=function(e){return _(e)===u},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return _(e)===s},t.isFragment=function(e){return _(e)===a},t.isProfiler=function(e){return _(e)===c},t.isPortal=function(e){return _(e)===o},t.isStrictMode=function(e){return _(e)===i}});c(f);var l=u(function(e,t){});c(l);var y=u(function(e){e.exports=f}),_={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},b={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},h={};h[y.ForwardRef]={$$typeof:!0,render:!0};var v=Object.defineProperty,m=Object.getOwnPropertyNames,O=Object.getOwnPropertySymbols,S=Object.getOwnPropertyDescriptor,g=Object.getPrototypeOf,w=Object.prototype;var E=function e(t,r,n){if("string"==typeof r)return t;if(w){var o=g(r);o&&o!==w&&e(t,o,n)}var a=m(r);O&&(a=a.concat(O(r)));for(var i=h[t.$$typeof]||_,c=h[r.$$typeof]||_,u=0;u<a.length;++u){var f=a[u];if(!(b[f]||n&&n[f]||c&&c[f]||i&&i[f])){var l=S(r,f);try{v(t,f,l)}catch(e){}}}return t};var x=i({resolve:function(e,t){var r=e.default||e;return E(t.Loadable,r,{prefetch:!0,Prefetch:!0}),r},render:function(e){return o.createElement(e.result,e.props)}}),L=x.loadable,P=x.lazy,R=i({onLoad:function(e,t){e&&t.ref&&("function"==typeof t.ref?t.ref(e):t.ref.current=e)},render:function(e){var t=e.props;return!e.loading&&t.children?t.children(e.result):null}}),A=R.lazy,$="undefined"!=typeof window;var C=L;C.lib=R.loadable;var D=P;D.lib=A;var j=n;e.default=C,e.lazy=D,e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=j,e.loadableReady=function(o){if(void 0===o&&(o=function(){}),!$)return t("`loadableReady()` must be called in browser only"),o(),Promise.resolve();var a=$?window[r]:null;if(!a)return t("`loadableReady()` requires state, please use `getScriptTags` or `getScriptElements` server-side"),o(),Promise.resolve();var i=!0;return new Promise(function(e){window.__LOADABLE_LOADED_CHUNKS__=window.__LOADABLE_LOADED_CHUNKS__||[];var r=window.__LOADABLE_LOADED_CHUNKS__,t=r.push.bind(r);function n(){a.every(function(t){return r.some(function(e){return e[0].includes(t)})})&&(i||(i=!0,e(),o()))}r.push=function(){t.apply(void 0,arguments),n()},n()})},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "@loadable/component",
   "description": "React code splitting made easy.",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "main": "dist/loadable.cjs.js",
@@ -39,3 +39,3 @@ "module": "dist/loadable.es.js",
   },
-  "gitHead": "cfcdb177bf53cbeab774e643b34d0c047ed6eda3"
+  "gitHead": "88fa92c0d46a14cedf527b14ef80966971580e28"
 }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58974

increased by2.96%

Lines of code

1347

increased by2.43%

No dependency changes