@loadable/component - npm Package Compare versions

Comparing version 3.0.2 to 4.0.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [4.0.0](https://github.com/smooth-code/loadable-components/compare/v3.0.2...v4.0.0) (2018-10-30)
+
+
+### Features
+
+* add new loadable.lib, change API ([94b2e87](https://github.com/smooth-code/loadable-components/commit/94b2e87))
+
+
+### BREAKING CHANGES
+
+* - `ErrorComponent` is ignored, please use Error Boundaries to handle errors.
+- `lazy` is no longer exported
+- `LoadingComponent` is replaced by `fallback` option
+- `ref` are now forwarded
+
+
+
+
+
 ## [3.0.2](https://github.com/smooth-code/loadable-components/compare/v3.0.1...v3.0.2) (2018-10-30)
@@ -8,0 +27,0 @@

dist/loadable.cjs.js

@@ -59,2 +59,17 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _assertThisInitialized(self) {
@@ -78,190 +93,244 @@ if (self === void 0) {
 
-function loadable(loadableConstructor, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$ErrorComponent = _ref.ErrorComponent,
-      ErrorComponent = _ref$ErrorComponent === void 0 ? function (_ref2) {
-    var error = _ref2.error;
-    return "" + error.message;
-  } : _ref$ErrorComponent,
-      _ref$LoadingComponent = _ref.LoadingComponent,
-      LoadingComponent = _ref$LoadingComponent === void 0 ? function () {
-    return null;
-  } : _ref$LoadingComponent,
-      _render = _ref.render,
-      suspense = _ref.suspense;
+var withLoadableState = function withLoadableState(Component) {
+  return function (props) {
+    return React.createElement(Context.Consumer, null, function (loadableState) {
+      return React.createElement(Component, _extends({
+        loadableState: loadableState
+      }, props));
+    });
+  };
+};
 
-  var ctor = resolveConstructor(loadableConstructor);
+var identity = function identity(v) {
+  return v;
+};
 
-  function resolveComponent(result) {
-    var Component = result.default || result;
-    hoistNonReactStatics(Loadable, Component, {
-      prefetch: true,
-      Prefetch: true
-    });
-    return Component;
-  }
+function createLoadable(_ref) {
+  var _ref$resolve = _ref.resolve,
+      resolve = _ref$resolve === void 0 ? identity : _ref$resolve,
+      _render = _ref.render;
 
-  function prefetch(props) {
-    ctor.requireAsync(props).catch(function () {});
-  }
+  function loadable(loadableConstructor, options) {
+    if (options === void 0) {
+      options = {};
+    }
 
-  var InnerPrefetch =
-  /*#__PURE__*/
-  function (_React$Component) {
-    _inheritsLoose(InnerPrefetch, _React$Component);
+    var ctor = resolveConstructor(loadableConstructor);
 
-    function InnerPrefetch(props) {
-      var _this;
+    function prefetch(props) {
+      ctor.requireAsync(props).catch(function () {});
+    }
 
-      _this = _React$Component.call(this, props) || this;
-      invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+    var InnerPrefetch =
+    /*#__PURE__*/
+    function (_React$Component) {
+      _inheritsLoose(InnerPrefetch, _React$Component);
 
-      if (props.loadableState) {
-        props.loadableState.addPrefetchedChunk(ctor.chunkName(props));
+      function InnerPrefetch(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;
       }
 
-      return _this;
-    }
+      var _proto = InnerPrefetch.prototype;
 
-    var _proto = InnerPrefetch.prototype;
+      _proto.componentDidMount = function componentDidMount() {
+        prefetch(this.props);
+      };
 
-    _proto.componentDidMount = function componentDidMount() {
-      prefetch(this.props);
-    };
+      _proto.render = function render() {
+        return null;
+      };
 
-    _proto.render = function render() {
-      return null;
-    };
+      return InnerPrefetch;
+    }(React.Component);
 
-    return InnerPrefetch;
-  }(React.Component);
+    var Prefetch = withLoadableState(InnerPrefetch);
 
-  var Prefetch = function Prefetch(props) {
-    return React.createElement(Context.Consumer, null, function (loadableState) {
-      return React.createElement(InnerPrefetch, _extends({
-        loadableState: loadableState
-      }, props));
-    });
-  };
+    var InnerLoadable =
+    /*#__PURE__*/
+    function (_React$Component2) {
+      _inheritsLoose(InnerLoadable, _React$Component2);
 
-  var InnerLoadable =
-  /*#__PURE__*/
-  function (_React$Component2) {
-    _inheritsLoose(InnerLoadable, _React$Component2);
+      function InnerLoadable(props) {
+        var _this2;
 
-    function InnerLoadable(props) {
-      var _this2;
+        _this2 = _React$Component2.call(this, props) || this;
+        _this2.state = {
+          result: null,
+          error: null,
+          loading: true
+        };
+        invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
 
-      _this2 = _React$Component2.call(this, props) || this;
-      _this2.state = {
-        Component: null,
-        error: null,
-        loading: true
-      };
-      invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+        if (props.loadableState) {
+          // We run load function, we assume that it won't fail and that it
+          // triggers a synchronous loading of the module
+          ctor.requireAsync(props).catch(function () {}); // So we can require now the module synchronously
 
-      if (props.loadableState) {
-        // We run load function, we assume that it won't fail and that it
-        // triggers a synchronous loading of the module
-        ctor.requireAsync(props).catch(function () {}); // So we can require now the module synchronously
+          _this2.loadSync();
 
-        _this2.loadSync();
+          props.loadableState.addChunk(ctor.chunkName(props));
+          return _assertThisInitialized(_this2);
+        } // Client-side with `isReady` method present (SSR probably)
+        // If module is already loaded, we use a synchronous loading
 
-        props.loadableState.addChunk(ctor.chunkName(props));
-        return _assertThisInitialized(_this2);
-      } // Client-side with `isReady` method present (SSR probably)
-      // If module is already loaded, we use a synchronous loading
 
+        if (ctor.isReady && ctor.isReady(props)) {
+          _this2.loadSync();
+        }
 
-      if (ctor.isReady && ctor.isReady(props)) {
-        _this2.loadSync();
+        return _this2;
       }
 
-      return _this2;
-    }
+      var _proto2 = InnerLoadable.prototype;
 
-    var _proto2 = InnerLoadable.prototype;
+      _proto2.componentDidMount = function componentDidMount() {
+        if (!this.state.result || !this.state.error) {
+          this.loadAsync();
+        }
+      };
 
-    _proto2.componentDidMount = function componentDidMount() {
-      if (!this.state.Component || !this.state.error) {
-        this.loadAsync();
-      }
-    };
+      _proto2.loadSync = function loadSync() {
+        try {
+          var loadedModule = ctor.requireSync(this.props);
+          this.state.result = resolve(loadedModule, {
+            Loadable: Loadable
+          });
+          this.state.loading = false;
+        } catch (error) {
+          this.state.error = error;
+        }
+      };
 
-    _proto2.loadSync = function loadSync() {
-      try {
-        var result = ctor.requireSync(this.props);
-        this.state.Component = resolveComponent(result);
-        this.state.loading = false;
-      } catch (error) {
-        this.state.error = error;
-      }
-    };
+      _proto2.loadAsync = function loadAsync() {
+        var _this3 = this;
 
-    _proto2.loadAsync = function loadAsync() {
-      var _this3 = this;
-
-      ctor.requireAsync(this.props).then(function (result) {
-        _this3.setState({
-          Component: resolveComponent(result),
-          loading: false
+        return ctor.requireAsync(this.props).then(function (loadedModule) {
+          _this3.setState({
+            result: resolve(loadedModule, {
+              Loadable: Loadable
+            }),
+            loading: false
+          });
+        }).catch(function (error) {
+          _this3.setState({
+            error: error,
+            loading: false
+          });
         });
-      }).catch(function (error) {
-        _this3.setState({
-          error: error,
-          loading: false
-        });
-      });
-    };
+      };
 
-    _proto2.render = function render() {
-      var _this$state = this.state,
-          Component = _this$state.Component,
-          error = _this$state.error;
+      _proto2.render = function render() {
+        var _this$props = this.props,
+            ref = _this$props.forwardedRef,
+            propFallback = _this$props.fallback,
+            loadableState = _this$props.loadableState,
+            props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "loadableState"]);
 
-      if (typeof _render === 'function') {
-        return _render(_extends({}, this.state, {
-          ownProps: this.props
-        }));
-      }
+        var _this$state = this.state,
+            error = _this$state.error,
+            loading = _this$state.loading,
+            result = _this$state.result;
 
-      if (Component !== null) {
-        return React.createElement(Component, this.props);
-      }
+        if (loading && options.suspense) {
+          throw this.loadAsync();
+        }
 
-      if (error !== null) {
-        return React.createElement(ErrorComponent, _extends({
-          error: error
-        }, this.props));
-      }
+        if (error) {
+          throw error;
+        }
 
-      if (suspense) {
-        throw this.loadingPromise;
-      }
+        var fallback = propFallback || options.fallback || null;
 
-      return React.createElement(LoadingComponent, this.props);
-    };
+        if (loading) {
+          return fallback;
+        }
 
-    return InnerLoadable;
-  }(React.Component);
+        return _render({
+          loading: loading,
+          fallback: fallback,
+          result: result,
+          options: options,
+          props: _extends({}, props, {
+            ref: ref
+          })
+        });
+      };
 
-  var Loadable = function Loadable(props) {
-    return React.createElement(Context.Consumer, null, function (loadableState) {
-      return React.createElement(InnerLoadable, _extends({
-        loadableState: loadableState
+      return InnerLoadable;
+    }(React.Component);
+
+    var EnhancedInnerLoadable = withLoadableState(InnerLoadable);
+    var Loadable = React.forwardRef(function (props, ref) {
+      return React.createElement(EnhancedInnerLoadable, _extends({
+        forwardedRef: ref
       }, props));
     });
-  };
+    Loadable.Prefetch = Prefetch;
+    Loadable.prefetch = prefetch;
+    return Loadable;
+  }
 
-  Loadable.Prefetch = Prefetch;
-  Loadable.prefetch = prefetch;
-  return Loadable;
+  function lazy(ctor, options) {
+    return loadable(ctor, _extends({}, options, {
+      suspense: true
+    }));
+  }
+
+  loadable.lazy = lazy;
+  return loadable;
 }
 
-function lazy(ctor, options) {
-  return loadable(ctor, _extends({}, options, {
-    suspense: true
-  }));
+function resolveComponent(loadedModule, _ref) {
+  var Loadable = _ref.Loadable;
+  var Component = loadedModule.default || loadedModule;
+  hoistNonReactStatics(Loadable, Component, {
+    prefetch: true,
+    Prefetch: true
+  });
+  return Component;
 }
 
+/* eslint-disable no-use-before-define, react/no-multi-comp */
+var loadable = createLoadable({
+  resolve: resolveComponent,
+  render: function render(_ref) {
+    var Component = _ref.result,
+        props = _ref.props;
+    return React.createElement(Component, props);
+  }
+});
+
+/* eslint-disable no-use-before-define, react/no-multi-comp */
+var library = createLoadable({
+  render: function render(_ref) {
+    var result = _ref.result,
+        loading = _ref.loading,
+        props = _ref.props,
+        error = _ref.error;
+
+    if (!loading && !error && props.ref) {
+      if (typeof props.ref === 'function') {
+        props.ref(result);
+      } else {
+        props.ref.current = result;
+      }
+    }
+
+    if (!loading && props.children) {
+      return props.children(result);
+    }
+
+    return null;
+  }
+});
+
 /* eslint-disable no-underscore-dangle, camelcase */
@@ -308,7 +377,8 @@ var BROWSER = typeof window !== 'undefined';
 /* eslint-disable no-underscore-dangle */
+loadable.lib = library;
 var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = sharedInternals;
 
+exports.default = loadable;
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-exports.default = loadable;
-exports.lazy = lazy;
+exports.library = library;
 exports.loadComponents = loadComponents;

dist/loadable.es.js

@@ -53,2 +53,17 @@ import React from 'react';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _assertThisInitialized(self) {
@@ -72,190 +87,244 @@ if (self === void 0) {
 
-function loadable(loadableConstructor, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$ErrorComponent = _ref.ErrorComponent,
-      ErrorComponent = _ref$ErrorComponent === void 0 ? function (_ref2) {
-    var error = _ref2.error;
-    return "" + error.message;
-  } : _ref$ErrorComponent,
-      _ref$LoadingComponent = _ref.LoadingComponent,
-      LoadingComponent = _ref$LoadingComponent === void 0 ? function () {
-    return null;
-  } : _ref$LoadingComponent,
-      _render = _ref.render,
-      suspense = _ref.suspense;
+var withLoadableState = function withLoadableState(Component) {
+  return function (props) {
+    return React.createElement(Context.Consumer, null, function (loadableState) {
+      return React.createElement(Component, _extends({
+        loadableState: loadableState
+      }, props));
+    });
+  };
+};
 
-  var ctor = resolveConstructor(loadableConstructor);
+var identity = function identity(v) {
+  return v;
+};
 
-  function resolveComponent(result) {
-    var Component = result.default || result;
-    hoistNonReactStatics(Loadable, Component, {
-      prefetch: true,
-      Prefetch: true
-    });
-    return Component;
-  }
+function createLoadable(_ref) {
+  var _ref$resolve = _ref.resolve,
+      resolve = _ref$resolve === void 0 ? identity : _ref$resolve,
+      _render = _ref.render;
 
-  function prefetch(props) {
-    ctor.requireAsync(props).catch(function () {});
-  }
+  function loadable(loadableConstructor, options) {
+    if (options === void 0) {
+      options = {};
+    }
 
-  var InnerPrefetch =
-  /*#__PURE__*/
-  function (_React$Component) {
-    _inheritsLoose(InnerPrefetch, _React$Component);
+    var ctor = resolveConstructor(loadableConstructor);
 
-    function InnerPrefetch(props) {
-      var _this;
+    function prefetch(props) {
+      ctor.requireAsync(props).catch(function () {});
+    }
 
-      _this = _React$Component.call(this, props) || this;
-      invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+    var InnerPrefetch =
+    /*#__PURE__*/
+    function (_React$Component) {
+      _inheritsLoose(InnerPrefetch, _React$Component);
 
-      if (props.loadableState) {
-        props.loadableState.addPrefetchedChunk(ctor.chunkName(props));
+      function InnerPrefetch(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;
       }
 
-      return _this;
-    }
+      var _proto = InnerPrefetch.prototype;
 
-    var _proto = InnerPrefetch.prototype;
+      _proto.componentDidMount = function componentDidMount() {
+        prefetch(this.props);
+      };
 
-    _proto.componentDidMount = function componentDidMount() {
-      prefetch(this.props);
-    };
+      _proto.render = function render() {
+        return null;
+      };
 
-    _proto.render = function render() {
-      return null;
-    };
+      return InnerPrefetch;
+    }(React.Component);
 
-    return InnerPrefetch;
-  }(React.Component);
+    var Prefetch = withLoadableState(InnerPrefetch);
 
-  var Prefetch = function Prefetch(props) {
-    return React.createElement(Context.Consumer, null, function (loadableState) {
-      return React.createElement(InnerPrefetch, _extends({
-        loadableState: loadableState
-      }, props));
-    });
-  };
+    var InnerLoadable =
+    /*#__PURE__*/
+    function (_React$Component2) {
+      _inheritsLoose(InnerLoadable, _React$Component2);
 
-  var InnerLoadable =
-  /*#__PURE__*/
-  function (_React$Component2) {
-    _inheritsLoose(InnerLoadable, _React$Component2);
+      function InnerLoadable(props) {
+        var _this2;
 
-    function InnerLoadable(props) {
-      var _this2;
+        _this2 = _React$Component2.call(this, props) || this;
+        _this2.state = {
+          result: null,
+          error: null,
+          loading: true
+        };
+        invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
 
-      _this2 = _React$Component2.call(this, props) || this;
-      _this2.state = {
-        Component: null,
-        error: null,
-        loading: true
-      };
-      invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+        if (props.loadableState) {
+          // We run load function, we assume that it won't fail and that it
+          // triggers a synchronous loading of the module
+          ctor.requireAsync(props).catch(function () {}); // So we can require now the module synchronously
 
-      if (props.loadableState) {
-        // We run load function, we assume that it won't fail and that it
-        // triggers a synchronous loading of the module
-        ctor.requireAsync(props).catch(function () {}); // So we can require now the module synchronously
+          _this2.loadSync();
 
-        _this2.loadSync();
+          props.loadableState.addChunk(ctor.chunkName(props));
+          return _assertThisInitialized(_this2);
+        } // Client-side with `isReady` method present (SSR probably)
+        // If module is already loaded, we use a synchronous loading
 
-        props.loadableState.addChunk(ctor.chunkName(props));
-        return _assertThisInitialized(_this2);
-      } // Client-side with `isReady` method present (SSR probably)
-      // If module is already loaded, we use a synchronous loading
 
+        if (ctor.isReady && ctor.isReady(props)) {
+          _this2.loadSync();
+        }
 
-      if (ctor.isReady && ctor.isReady(props)) {
-        _this2.loadSync();
+        return _this2;
       }
 
-      return _this2;
-    }
+      var _proto2 = InnerLoadable.prototype;
 
-    var _proto2 = InnerLoadable.prototype;
+      _proto2.componentDidMount = function componentDidMount() {
+        if (!this.state.result || !this.state.error) {
+          this.loadAsync();
+        }
+      };
 
-    _proto2.componentDidMount = function componentDidMount() {
-      if (!this.state.Component || !this.state.error) {
-        this.loadAsync();
-      }
-    };
+      _proto2.loadSync = function loadSync() {
+        try {
+          var loadedModule = ctor.requireSync(this.props);
+          this.state.result = resolve(loadedModule, {
+            Loadable: Loadable
+          });
+          this.state.loading = false;
+        } catch (error) {
+          this.state.error = error;
+        }
+      };
 
-    _proto2.loadSync = function loadSync() {
-      try {
-        var result = ctor.requireSync(this.props);
-        this.state.Component = resolveComponent(result);
-        this.state.loading = false;
-      } catch (error) {
-        this.state.error = error;
-      }
-    };
+      _proto2.loadAsync = function loadAsync() {
+        var _this3 = this;
 
-    _proto2.loadAsync = function loadAsync() {
-      var _this3 = this;
-
-      ctor.requireAsync(this.props).then(function (result) {
-        _this3.setState({
-          Component: resolveComponent(result),
-          loading: false
+        return ctor.requireAsync(this.props).then(function (loadedModule) {
+          _this3.setState({
+            result: resolve(loadedModule, {
+              Loadable: Loadable
+            }),
+            loading: false
+          });
+        }).catch(function (error) {
+          _this3.setState({
+            error: error,
+            loading: false
+          });
         });
-      }).catch(function (error) {
-        _this3.setState({
-          error: error,
-          loading: false
-        });
-      });
-    };
+      };
 
-    _proto2.render = function render() {
-      var _this$state = this.state,
-          Component = _this$state.Component,
-          error = _this$state.error;
+      _proto2.render = function render() {
+        var _this$props = this.props,
+            ref = _this$props.forwardedRef,
+            propFallback = _this$props.fallback,
+            loadableState = _this$props.loadableState,
+            props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "loadableState"]);
 
-      if (typeof _render === 'function') {
-        return _render(_extends({}, this.state, {
-          ownProps: this.props
-        }));
-      }
+        var _this$state = this.state,
+            error = _this$state.error,
+            loading = _this$state.loading,
+            result = _this$state.result;
 
-      if (Component !== null) {
-        return React.createElement(Component, this.props);
-      }
+        if (loading && options.suspense) {
+          throw this.loadAsync();
+        }
 
-      if (error !== null) {
-        return React.createElement(ErrorComponent, _extends({
-          error: error
-        }, this.props));
-      }
+        if (error) {
+          throw error;
+        }
 
-      if (suspense) {
-        throw this.loadingPromise;
-      }
+        var fallback = propFallback || options.fallback || null;
 
-      return React.createElement(LoadingComponent, this.props);
-    };
+        if (loading) {
+          return fallback;
+        }
 
-    return InnerLoadable;
-  }(React.Component);
+        return _render({
+          loading: loading,
+          fallback: fallback,
+          result: result,
+          options: options,
+          props: _extends({}, props, {
+            ref: ref
+          })
+        });
+      };
 
-  var Loadable = function Loadable(props) {
-    return React.createElement(Context.Consumer, null, function (loadableState) {
-      return React.createElement(InnerLoadable, _extends({
-        loadableState: loadableState
+      return InnerLoadable;
+    }(React.Component);
+
+    var EnhancedInnerLoadable = withLoadableState(InnerLoadable);
+    var Loadable = React.forwardRef(function (props, ref) {
+      return React.createElement(EnhancedInnerLoadable, _extends({
+        forwardedRef: ref
       }, props));
     });
-  };
+    Loadable.Prefetch = Prefetch;
+    Loadable.prefetch = prefetch;
+    return Loadable;
+  }
 
-  Loadable.Prefetch = Prefetch;
-  Loadable.prefetch = prefetch;
-  return Loadable;
+  function lazy(ctor, options) {
+    return loadable(ctor, _extends({}, options, {
+      suspense: true
+    }));
+  }
+
+  loadable.lazy = lazy;
+  return loadable;
 }
 
-function lazy(ctor, options) {
-  return loadable(ctor, _extends({}, options, {
-    suspense: true
-  }));
+function resolveComponent(loadedModule, _ref) {
+  var Loadable = _ref.Loadable;
+  var Component = loadedModule.default || loadedModule;
+  hoistNonReactStatics(Loadable, Component, {
+    prefetch: true,
+    Prefetch: true
+  });
+  return Component;
 }
 
+/* eslint-disable no-use-before-define, react/no-multi-comp */
+var loadable = createLoadable({
+  resolve: resolveComponent,
+  render: function render(_ref) {
+    var Component = _ref.result,
+        props = _ref.props;
+    return React.createElement(Component, props);
+  }
+});
+
+/* eslint-disable no-use-before-define, react/no-multi-comp */
+var library = createLoadable({
+  render: function render(_ref) {
+    var result = _ref.result,
+        loading = _ref.loading,
+        props = _ref.props,
+        error = _ref.error;
+
+    if (!loading && !error && props.ref) {
+      if (typeof props.ref === 'function') {
+        props.ref(result);
+      } else {
+        props.ref.current = result;
+      }
+    }
+
+    if (!loading && props.children) {
+      return props.children(result);
+    }
+
+    return null;
+  }
+});
+
 /* eslint-disable no-underscore-dangle, camelcase */
@@ -302,5 +371,6 @@ var BROWSER = typeof window !== 'undefined';
 /* eslint-disable no-underscore-dangle */
+loadable.lib = library;
 var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = sharedInternals;
 
 export default loadable;
-export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, lazy, loadComponents };
+export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, library, loadComponents };

dist/loadable.js

@@ -58,2 +58,17 @@ (function (global, factory) {
 
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
   function _assertThisInitialized(self) {
@@ -67,2 +82,210 @@ if (self === void 0) {
 
+  function resolveConstructor(ctor) {
+    if (typeof ctor === 'function') {
+      return {
+        requireAsync: ctor
+      };
+    }
+
+    return ctor;
+  }
+
+  var withLoadableState = function withLoadableState(Component) {
+    return function (props) {
+      return React.createElement(Context.Consumer, null, function (loadableState) {
+        return React.createElement(Component, _extends({
+          loadableState: loadableState
+        }, props));
+      });
+    };
+  };
+
+  var identity = function identity(v) {
+    return v;
+  };
+
+  function createLoadable(_ref) {
+    var _ref$resolve = _ref.resolve,
+        resolve = _ref$resolve === void 0 ? identity : _ref$resolve,
+        _render = _ref.render;
+
+    function loadable(loadableConstructor, options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      var ctor = resolveConstructor(loadableConstructor);
+
+      function prefetch(props) {
+        ctor.requireAsync(props).catch(function () {});
+      }
+
+      var InnerPrefetch =
+      /*#__PURE__*/
+      function (_React$Component) {
+        _inheritsLoose(InnerPrefetch, _React$Component);
+
+        function InnerPrefetch(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 = {
+            result: null,
+            error: null,
+            loading: true
+          };
+          invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
+
+          if (props.loadableState) {
+            // We run load function, we assume that it won't fail and that it
+            // triggers a synchronous loading of the module
+            ctor.requireAsync(props).catch(function () {}); // So we can require now the module synchronously
+
+            _this2.loadSync();
+
+            props.loadableState.addChunk(ctor.chunkName(props));
+            return _assertThisInitialized(_this2);
+          } // Client-side with `isReady` method present (SSR probably)
+          // If module is already loaded, we use a synchronous loading
+
+
+          if (ctor.isReady && ctor.isReady(props)) {
+            _this2.loadSync();
+          }
+
+          return _this2;
+        }
+
+        var _proto2 = InnerLoadable.prototype;
+
+        _proto2.componentDidMount = function componentDidMount() {
+          if (!this.state.result || !this.state.error) {
+            this.loadAsync();
+          }
+        };
+
+        _proto2.loadSync = function loadSync() {
+          try {
+            var loadedModule = ctor.requireSync(this.props);
+            this.state.result = resolve(loadedModule, {
+              Loadable: Loadable
+            });
+            this.state.loading = false;
+          } catch (error) {
+            this.state.error = error;
+          }
+        };
+
+        _proto2.loadAsync = function loadAsync() {
+          var _this3 = this;
+
+          return ctor.requireAsync(this.props).then(function (loadedModule) {
+            _this3.setState({
+              result: resolve(loadedModule, {
+                Loadable: Loadable
+              }),
+              loading: false
+            });
+          }).catch(function (error) {
+            _this3.setState({
+              error: error,
+              loading: false
+            });
+          });
+        };
+
+        _proto2.render = function render() {
+          var _this$props = this.props,
+              ref = _this$props.forwardedRef,
+              propFallback = _this$props.fallback,
+              loadableState = _this$props.loadableState,
+              props = _objectWithoutPropertiesLoose(_this$props, ["forwardedRef", "fallback", "loadableState"]);
+
+          var _this$state = this.state,
+              error = _this$state.error,
+              loading = _this$state.loading,
+              result = _this$state.result;
+
+          if (loading && options.suspense) {
+            throw this.loadAsync();
+          }
+
+          if (error) {
+            throw error;
+          }
+
+          var fallback = propFallback || options.fallback || null;
+
+          if (loading) {
+            return fallback;
+          }
+
+          return _render({
+            loading: loading,
+            fallback: fallback,
+            result: result,
+            options: options,
+            props: _extends({}, props, {
+              ref: ref
+            })
+          });
+        };
+
+        return InnerLoadable;
+      }(React.Component);
+
+      var EnhancedInnerLoadable = withLoadableState(InnerLoadable);
+      var Loadable = React.forwardRef(function (props, ref) {
+        return React.createElement(EnhancedInnerLoadable, _extends({
+          forwardedRef: ref
+        }, props));
+      });
+      Loadable.Prefetch = Prefetch;
+      Loadable.prefetch = prefetch;
+      return Loadable;
+    }
+
+    function lazy(ctor, options) {
+      return loadable(ctor, _extends({}, options, {
+        suspense: true
+      }));
+    }
+
+    loadable.lazy = lazy;
+    return loadable;
+  }
+
   function unwrapExports (x) {
@@ -343,18 +566,2 @@ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x;
 
-  var _ReactIs$ForwardRef;
-
-  function _defineProperty$1(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
   /**
@@ -369,5 +576,5 @@ * Copyright 2015, Yahoo! Inc.
 
-
   var REACT_STATICS = {
     childContextTypes: true,
+    contextType: true,
     contextTypes: true,
@@ -391,5 +598,8 @@ defaultProps: true,
   };
-
-  var TYPE_STATICS = _defineProperty$1({}, reactIs.ForwardRef, (_ReactIs$ForwardRef = {}, _defineProperty$1(_ReactIs$ForwardRef, '$$typeof', true), _defineProperty$1(_ReactIs$ForwardRef, 'render', true), _ReactIs$ForwardRef));
-
+  var FORWARD_REF_STATICS = {
+    '$$typeof': true,
+    render: true
+  };
+  var TYPE_STATICS = {};
+  TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
   var defineProperty = Object.defineProperty;
@@ -443,200 +653,46 @@ var getOwnPropertyNames = Object.getOwnPropertyNames;
 
-  function resolveConstructor(ctor) {
-    if (typeof ctor === 'function') {
-      return {
-        requireAsync: ctor
-      };
-    }
-
-    return ctor;
+  function resolveComponent(loadedModule, _ref) {
+    var Loadable = _ref.Loadable;
+    var Component = loadedModule.default || loadedModule;
+    hoistNonReactStatics_cjs(Loadable, Component, {
+      prefetch: true,
+      Prefetch: true
+    });
+    return Component;
   }
 
-  function loadable(loadableConstructor, _temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        _ref$ErrorComponent = _ref.ErrorComponent,
-        ErrorComponent = _ref$ErrorComponent === void 0 ? function (_ref2) {
-      var error = _ref2.error;
-      return "" + error.message;
-    } : _ref$ErrorComponent,
-        _ref$LoadingComponent = _ref.LoadingComponent,
-        LoadingComponent = _ref$LoadingComponent === void 0 ? function () {
-      return null;
-    } : _ref$LoadingComponent,
-        _render = _ref.render,
-        suspense = _ref.suspense;
-
-    var ctor = resolveConstructor(loadableConstructor);
-
-    function resolveComponent(result) {
-      var Component = result.default || result;
-      hoistNonReactStatics_cjs(Loadable, Component, {
-        prefetch: true,
-        Prefetch: true
-      });
-      return Component;
+  /* eslint-disable no-use-before-define, react/no-multi-comp */
+  var loadable = createLoadable({
+    resolve: resolveComponent,
+    render: function render(_ref) {
+      var Component = _ref.result,
+          props = _ref.props;
+      return React.createElement(Component, props);
     }
+  });
 
-    function prefetch(props) {
-      ctor.requireAsync(props).catch(function () {});
-    }
+  /* eslint-disable no-use-before-define, react/no-multi-comp */
+  var library = createLoadable({
+    render: function render(_ref) {
+      var result = _ref.result,
+          loading = _ref.loading,
+          props = _ref.props,
+          error = _ref.error;
 
-    var InnerPrefetch =
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inheritsLoose(InnerPrefetch, _React$Component);
-
-      function InnerPrefetch(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));
+      if (!loading && !error && props.ref) {
+        if (typeof props.ref === 'function') {
+          props.ref(result);
+        } else {
+          props.ref.current = result;
         }
-
-        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 = function Prefetch(props) {
-      return React.createElement(Context.Consumer, null, function (loadableState) {
-        return React.createElement(InnerPrefetch, _extends({
-          loadableState: loadableState
-        }, props));
-      });
-    };
-
-    var InnerLoadable =
-    /*#__PURE__*/
-    function (_React$Component2) {
-      _inheritsLoose(InnerLoadable, _React$Component2);
-
-      function InnerLoadable(props) {
-        var _this2;
-
-        _this2 = _React$Component2.call(this, props) || this;
-        _this2.state = {
-          Component: null,
-          error: null,
-          loading: true
-        };
-        invariant(!props.loadableState || ctor.requireSync, 'SSR requires `@loadable/babel`, please install it'); // Server-side
-
-        if (props.loadableState) {
-          // We run load function, we assume that it won't fail and that it
-          // triggers a synchronous loading of the module
-          ctor.requireAsync(props).catch(function () {}); // So we can require now the module synchronously
-
-          _this2.loadSync();
-
-          props.loadableState.addChunk(ctor.chunkName(props));
-          return _assertThisInitialized(_this2);
-        } // Client-side with `isReady` method present (SSR probably)
-        // If module is already loaded, we use a synchronous loading
-
-
-        if (ctor.isReady && ctor.isReady(props)) {
-          _this2.loadSync();
-        }
-
-        return _this2;
+      if (!loading && props.children) {
+        return props.children(result);
       }
 
-      var _proto2 = InnerLoadable.prototype;
+      return null;
+    }
+  });
 
-      _proto2.componentDidMount = function componentDidMount() {
-        if (!this.state.Component || !this.state.error) {
-          this.loadAsync();
-        }
-      };
-
-      _proto2.loadSync = function loadSync() {
-        try {
-          var result = ctor.requireSync(this.props);
-          this.state.Component = resolveComponent(result);
-          this.state.loading = false;
-        } catch (error) {
-          this.state.error = error;
-        }
-      };
-
-      _proto2.loadAsync = function loadAsync() {
-        var _this3 = this;
-
-        ctor.requireAsync(this.props).then(function (result) {
-          _this3.setState({
-            Component: resolveComponent(result),
-            loading: false
-          });
-        }).catch(function (error) {
-          _this3.setState({
-            error: error,
-            loading: false
-          });
-        });
-      };
-
-      _proto2.render = function render() {
-        var _this$state = this.state,
-            Component = _this$state.Component,
-            error = _this$state.error;
-
-        if (typeof _render === 'function') {
-          return _render(_extends({}, this.state, {
-            ownProps: this.props
-          }));
-        }
-
-        if (Component !== null) {
-          return React.createElement(Component, this.props);
-        }
-
-        if (error !== null) {
-          return React.createElement(ErrorComponent, _extends({
-            error: error
-          }, this.props));
-        }
-
-        if (suspense) {
-          throw this.loadingPromise;
-        }
-
-        return React.createElement(LoadingComponent, this.props);
-      };
-
-      return InnerLoadable;
-    }(React.Component);
-
-    var Loadable = function Loadable(props) {
-      return React.createElement(Context.Consumer, null, function (loadableState) {
-        return React.createElement(InnerLoadable, _extends({
-          loadableState: loadableState
-        }, props));
-      });
-    };
-
-    Loadable.Prefetch = Prefetch;
-    Loadable.prefetch = prefetch;
-    return Loadable;
-  }
-
-  function lazy(ctor, options) {
-    return loadable(ctor, _extends({}, options, {
-      suspense: true
-    }));
-  }
-
   /* eslint-disable no-underscore-dangle, camelcase */
@@ -683,7 +739,8 @@ var BROWSER = typeof window !== 'undefined';
   /* eslint-disable no-underscore-dangle */
+  loadable.lib = library;
   var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = sharedInternals;
 
+  exports.default = loadable;
   exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  exports.default = loadable;
-  exports.lazy = lazy;
+  exports.library = library;
   exports.loadComponents = loadComponents;
@@ -690,0 +747,0 @@

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,h){"use strict";function b(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 _=(h=h&&h.hasOwnProperty("default")?h.default:h).createContext(),r="__LOADABLE_STATE__",n="data-loadable-chunk",o=Object.freeze({DEFAULT_LOADABLE_STATE_KEY:r,DATA_LOADABLE_CHUNK:n,invariant:b,Context:_});function v(){return(v=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 S(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}function a(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function i(e,t){return e(t={exports:{}},t.exports),t.exports}var c=i(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.provider"):60109,u=r?Symbol.for("react.context"):60110,l=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 l:case a:case i:return e;default:switch(e=e&&e.$$typeof){case u:case s:case c:return e;default:return t}}case o:return t}}}t.typeOf=f,t.AsyncMode=l,t.ContextConsumer=u,t.ContextProvider=c,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===l||e===i||"object"==typeof e&&null!==e&&(e.$$typeof===c||e.$$typeof===u||e.$$typeof===s)},t.isAsyncMode=function(e){return f(e)===l},t.isContextConsumer=function(e){return f(e)===u},t.isContextProvider=function(e){return f(e)===c},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}});a(c);var u=i(function(e,t){});a(u);var l,s=i(function(e){e.exports=c});function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var p={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},d={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},y=f({},s.ForwardRef,(f(l={},"$$typeof",!0),f(l,"render",!0),l)),m=Object.defineProperty,w=Object.getOwnPropertyNames,C=Object.getOwnPropertySymbols,g=Object.getOwnPropertyDescriptor,O=Object.getPrototypeOf,E=Object.prototype;var P=function e(t,r,n){if("string"==typeof r)return t;if(E){var o=O(r);o&&o!==E&&e(t,o,n)}var a=w(r);C&&(a=a.concat(C(r)));for(var i=y[t.$$typeof]||p,c=y[r.$$typeof]||p,u=0;u<a.length;++u){var l=a[u];if(!(d[l]||n&&n[l]||c&&c[l]||i&&i[l])){var s=g(r,l);try{m(t,l,s)}catch(e){}}}return t};function A(e,t){var r,n=void 0===t?{}:t,o=n.ErrorComponent,a=void 0===o?function(e){return""+e.error.message}:o,i=n.LoadingComponent,c=void 0===i?function(){return null}:i,u=n.render,l=n.suspense,s="function"==typeof(r=e)?{requireAsync:r}:r;function f(e){var t=e.default||e;return P(m,t,{prefetch:!0,Prefetch:!0}),t}function p(e){s.requireAsync(e).catch(function(){})}var d=function(r){function e(e){var t;return t=r.call(this,e)||this,b(!e.loadableState||s.requireSync,"SSR requires `@loadable/babel`, please install it"),e.loadableState&&e.loadableState.addPrefetchedChunk(s.chunkName(e)),t}S(e,r);var t=e.prototype;return t.componentDidMount=function(){p(this.props)},t.render=function(){return null},e}(h.Component),y=function(r){function e(e){var t;return(t=r.call(this,e)||this).state={Component:null,error:null,loading:!0},b(!e.loadableState||s.requireSync,"SSR requires `@loadable/babel`, please install it"),e.loadableState?(s.requireAsync(e).catch(function(){}),t.loadSync(),e.loadableState.addChunk(s.chunkName(e)),function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)):(s.isReady&&s.isReady(e)&&t.loadSync(),t)}S(e,r);var t=e.prototype;return t.componentDidMount=function(){this.state.Component&&this.state.error||this.loadAsync()},t.loadSync=function(){try{var e=s.requireSync(this.props);this.state.Component=f(e),this.state.loading=!1}catch(e){this.state.error=e}},t.loadAsync=function(){var t=this;s.requireAsync(this.props).then(function(e){t.setState({Component:f(e),loading:!1})}).catch(function(e){t.setState({error:e,loading:!1})})},t.render=function(){var e=this.state,t=e.Component,r=e.error;if("function"==typeof u)return u(v({},this.state,{ownProps:this.props}));if(null!==t)return h.createElement(t,this.props);if(null!==r)return h.createElement(a,v({error:r},this.props));if(l)throw this.loadingPromise;return h.createElement(c,this.props)},e}(h.Component),m=function(t){return h.createElement(_.Consumer,null,function(e){return h.createElement(y,v({loadableState:e},t))})};return m.Prefetch=function(t){return h.createElement(_.Consumer,null,function(e){return h.createElement(d,v({loadableState:e},t))})},m.prefetch=p,m}var j="undefined"!=typeof window,$="undefined"!=typeof __webpack_require__;e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=o,e.default=A,e.lazy=function(e,t){return A(e,v({},t,{suspense:!0}))},e.loadComponents=function(e){return(e=j?window[r]:null)?(b($,"`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)})):(j||t("`loadComponents()` must be called in browser only"),0<document.querySelectorAll("script["+n+"]").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,l){"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 n=(l=l&&l.hasOwnProperty("default")?l.default:l).createContext(),r="__LOADABLE_STATE__",o="data-loadable-chunk",a=Object.freeze({DEFAULT_LOADABLE_STATE_KEY:r,DATA_LOADABLE_CHUNK:o,invariant:s,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 d(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}var y=function(r){return function(t){return l.createElement(n.Consumer,null,function(e){return l.createElement(r,p({loadableState:e},t))})}},i=function(e){return e};function c(e){var t=e.resolve,c=void 0===t?i:t,f=e.render;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=y(function(r){function e(e){var t;return t=r.call(this,e)||this,s(!e.loadableState||n.requireSync,"SSR requires `@loadable/babel`, please install it"),e.loadableState&&e.loadableState.addPrefetchedChunk(n.chunkName(e)),t}d(e,r);var t=e.prototype;return t.componentDidMount=function(){o(this.props)},t.render=function(){return null},e}(l.Component)),a=y(function(r){function e(e){var t;return(t=r.call(this,e)||this).state={result:null,error:null,loading:!0},s(!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)}d(e,r);var t=e.prototype;return t.componentDidMount=function(){this.state.result&&this.state.error||this.loadAsync()},t.loadSync=function(){try{var e=n.requireSync(this.props);this.state.result=c(e,{Loadable:i}),this.state.loading=!1}catch(e){this.state.error=e}},t.loadAsync=function(){var t=this;return n.requireAsync(this.props).then(function(e){t.setState({result:c(e,{Loadable:i}),loading:!1})}).catch(function(e){t.setState({error:e,loading:!1})})},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,c=o.result;if(i&&u.suspense)throw this.loadAsync();if(a)throw a;var l=r||u.fallback||null;return i?l:f({loading:i,fallback:l,result:c,options:u,props:p({},n,{ref:t})})},e}(l.Component)),i=l.forwardRef(function(e,t){return l.createElement(a,p({forwardedRef:t},e))});return i.Prefetch=r,i.prefetch=o,i}return r.lazy=function(e,t){return r(e,p({},t,{suspense:!0}))},r}function u(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function f(e,t){return e(t={exports:{}},t.exports),t.exports}var b=f(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.provider"):60109,l=r?Symbol.for("react.context"):60110,u=r?Symbol.for("react.async_mode"):60111,f=r?Symbol.for("react.forward_ref"):60112;function s(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 l:case f:case c:return e;default:return t}}case o:return t}}}t.typeOf=s,t.AsyncMode=u,t.ContextConsumer=l,t.ContextProvider=c,t.Element=n,t.ForwardRef=f,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===c||e.$$typeof===l||e.$$typeof===f)},t.isAsyncMode=function(e){return s(e)===u},t.isContextConsumer=function(e){return s(e)===l},t.isContextProvider=function(e){return s(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return s(e)===f},t.isFragment=function(e){return s(e)===a},t.isPortal=function(e){return s(e)===o},t.isStrictMode=function(e){return s(e)===i}});u(b);var h=f(function(e,t){});u(h);var m=f(function(e){e.exports=b}),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 w=Object.defineProperty,O=Object.getOwnPropertyNames,g=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=O(r);g&&(a=a.concat(g(r)));for(var i=S[t.$$typeof]||v,c=S[r.$$typeof]||v,l=0;l<a.length;++l){var u=a[l];if(!(_[u]||n&&n[u]||c&&c[u]||i&&i[u])){var f=P(r,u);try{w(t,u,f)}catch(e){}}}return t};var j=c({resolve:function(e,t){var r=e.default||e;return E(t.Loadable,r,{prefetch:!0,Prefetch:!0}),r},render:function(e){return l.createElement(e.result,e.props)}}),x=c({render:function(e){var t=e.result,r=e.loading,n=e.props;return r||e.error||!n.ref||("function"==typeof n.ref?n.ref(t):n.ref.current=t),!r&&n.children?n.children(t):null}}),$="undefined"!=typeof window,R="undefined"!=typeof __webpack_require__;j.lib=x;var q=a;e.default=j,e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=q,e.library=x,e.loadComponents=function(e){return(e=$?window[r]:null)?(s(R,"`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("`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})});

package.json

 {
   "name": "@loadable/component",
   "description": "React code splitting made easy.",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "main": "dist/loadable.cjs.js",
@@ -37,5 +37,5 @@ "module": "dist/loadable.es.js",
   "dependencies": {
-    "hoist-non-react-statics": "^3.0.1"
+    "hoist-non-react-statics": "^3.1.0"
   },
-  "gitHead": "84c4b8a517ce1ada50b6adf624d17a35af638e85"
+  "gitHead": "ef88fe51108d003838df0a20e16401e50dd1fb71"
 }

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

54126

increased by11.75%

Lines of code

1236

increased by15.62%

Dependency changes

• Updatedhoist-non-react-statics@^3.1.0