@modern-js/plugin-garfish 1.3.0 → 1.4.1

package/dist/js/treeshaking/cli/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["validateSchema", "externals", "componentKey"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -8,76 +8,75 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(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; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
-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 _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 import path from 'path';
-import { createRuntimeExportsUtils, getEntryOptions, PLUGIN_SCHEMAS } from '@modern-js/utils';
+import { createRuntimeExportsUtils, PLUGIN_SCHEMAS } from '@modern-js/utils';
 import { createPlugin, useAppContext, useResolvedConfigContext } from '@modern-js/core';
 import { logger } from "../util";
-import { makeProvider, makeRenderFunction } from "./utils";
-
-function getRuntimeConfig(config) {
-  var _config$runtime;
-
-  if (config !== null && config !== void 0 && (_config$runtime = config.runtime) !== null && _config$runtime !== void 0 && _config$runtime.feature) {
-    var _config$runtime2;
-
-    return config === null || config === void 0 ? void 0 : (_config$runtime2 = config.runtime) === null || _config$runtime2 === void 0 ? void 0 : _config$runtime2.feature;
-  }
-
-  return config === null || config === void 0 ? void 0 : config.runtime;
-}
-
-function setRuntimeConfig(config, key, value) {
-  var _config$runtime3, _config$runtime4;
-
-  if (config !== null && config !== void 0 && config.runtime && config !== null && config !== void 0 && config.runtime[key]) {
-    config.runtime[key] = value;
-  }
+import { getRuntimeConfig, makeProvider, makeRenderFunction, setRuntimeConfig } from "./utils";
+export var externals = {
+  'react-dom': 'react-dom',
+  react: 'react'
+};
+export var resolvedConfig = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(config) {
+    var resolved, _getRuntimeConfig, masterApp, router, nConfig, _router$historyOption;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            resolved = config.resolved;
+            _getRuntimeConfig = getRuntimeConfig(resolved), masterApp = _getRuntimeConfig.masterApp, router = _getRuntimeConfig.router;
+            nConfig = {
+              resolved: _objectSpread({}, resolved)
+            };
+
+            if (masterApp) {
+              // basename does not exist use router's basename
+              setRuntimeConfig(nConfig.resolved, 'masterApp', Object.assign(_typeof(masterApp) === 'object' ? _objectSpread({}, masterApp) : {}, {
+                basename: (router === null || router === void 0 ? void 0 : (_router$historyOption = router.historyOptions) === null || _router$historyOption === void 0 ? void 0 : _router$historyOption.basename) || '/'
+              }));
+            }
 
-  if (config !== null && config !== void 0 && (_config$runtime3 = config.runtime) !== null && _config$runtime3 !== void 0 && _config$runtime3.feature && config !== null && config !== void 0 && (_config$runtime4 = config.runtime) !== null && _config$runtime4 !== void 0 && _config$runtime4.feature[key]) {
-    config.runtime.feature[key] = value;
-  }
-}
+            logger("resolvedConfig", {
+              runtime: nConfig.resolved.runtime,
+              deploy: nConfig.resolved.deploy,
+              server: nConfig.resolved.server
+            });
+            return _context.abrupt("return", nConfig);
 
-export var initializer = function initializer(_ref) {
-  var validateSchema = _ref.validateSchema,
-      externals = _ref.externals,
-      componentKey = _ref.componentKey,
-      otherLifeCycle = _objectWithoutProperties(_ref, _excluded);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
 
+  return function resolvedConfig(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var initializer = function initializer( // eslint-disable-next-line @typescript-eslint/no-shadow
+_ref2, _ref3) {
+  var resolvedConfig = _ref2.resolvedConfig,
+      validateSchema = _ref2.validateSchema;
+  var _ref3$runtimePluginNa = _ref3.runtimePluginName,
+      runtimePluginName = _ref3$runtimePluginNa === void 0 ? '@modern-js/runtime/plugins' : _ref3$runtimePluginNa,
+      _ref3$defaultEnableHt = _ref3.defaultEnableHtmlEntry,
+      defaultEnableHtmlEntry = _ref3$defaultEnableHt === void 0 ? true : _ref3$defaultEnableHt,
+      _ref3$defaultExternal = _ref3.defaultExternalBasicLibrary,
+      defaultExternalBasicLibrary = _ref3$defaultExternal === void 0 ? false : _ref3$defaultExternal;
   return function () {
-    var configMap = new Map();
     var pluginsExportsUtils;
     var runtimeExportsUtils;
-    return _objectSpread({
-      resolvedConfig: function resolvedConfig(config) {
-        var resolved = config.resolved;
-
-        var _getRuntimeConfig = getRuntimeConfig(resolved),
-            masterApp = _getRuntimeConfig.masterApp,
-            router = _getRuntimeConfig.router;
-
-        var nConfig = {
-          resolved: _objectSpread({}, resolved)
-        };
-
-        if (masterApp) {
-          // basename does not exist use router's basename
-          setRuntimeConfig(nConfig.resolved, 'masterApp', Object.assign(_typeof(masterApp) === 'object' ? _objectSpread({}, masterApp) : {}, {
-            basename: (router === null || router === void 0 ? void 0 : router.basename) || '/'
-          }));
-        }
-
-        logger("resolvedConfig", {
-          runtime: nConfig.resolved.runtime,
-          deploy: nConfig.resolved.deploy,
-          server: nConfig.resolved.server
-        });
-        return nConfig;
-      },
+    return {
+      validateSchema: validateSchema,
+      resolvedConfig: resolvedConfig,
       config: function config() {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         var config = useAppContext();
@@ -90,34 +89,37 @@ export var initializer = function initializer(_ref) {
             }
           },
           tools: {
-            webpack: function webpack(webpackConfig, _ref2) {
-              var _resolvedConfig$deplo;
-
-              var chain = _ref2.chain,
-                  _webpack = _ref2.webpack;
-              var env = process.env.NODE_ENV; // eslint-disable-next-line react-hooks/rules-of-hooks
+            webpack: function webpack(webpackConfig, _ref4) {
+              var _resolveOptions$deplo, _resolveWebpackConfig;
 
-              var resolvedConfig = useResolvedConfigContext();
+              var chain = _ref4.chain,
+                  _webpack = _ref4.webpack,
+                  _ref4$env = _ref4.env,
+                  env = _ref4$env === void 0 ? process.env.NODE_ENV || 'development' : _ref4$env;
+              // eslint-disable-next-line react-hooks/rules-of-hooks
+              var resolveOptions = useResolvedConfigContext();
 
-              if (resolvedConfig !== null && resolvedConfig !== void 0 && (_resolvedConfig$deplo = resolvedConfig.deploy) !== null && _resolvedConfig$deplo !== void 0 && _resolvedConfig$deplo.microFrontend) {
-                var _resolvedConfig$deplo2, _resolvedConfig$deplo3;
+              if (resolveOptions !== null && resolveOptions !== void 0 && (_resolveOptions$deplo = resolveOptions.deploy) !== null && _resolveOptions$deplo !== void 0 && _resolveOptions$deplo.microFrontend) {
+                var _resolveOptions$serve, _resolveOptions$deplo2, _resolveOptions$deplo3;
 
                 chain.output.libraryTarget('umd');
 
-                if (resolvedConfig.server.port) {
-                  chain.output.publicPath(env === 'development' ? "//localhost:".concat(resolvedConfig.server.port, "/") : webpackConfig.output.publicPath);
+                if (resolveOptions !== null && resolveOptions !== void 0 && (_resolveOptions$serve = resolveOptions.server) !== null && _resolveOptions$serve !== void 0 && _resolveOptions$serve.port) {
+                  chain.output.publicPath(env === 'development' ? "//localhost:".concat(resolveOptions.server.port, "/") : webpackConfig.output.publicPath);
                 } // add comments avoid sourcemap abnormal
 
 
-                chain.plugin('banner').use(_webpack.BannerPlugin, [{
-                  banner: 'Micro front-end'
-                }]);
+                if (_webpack.BannerPlugin) {
+                  chain.plugin('banner').use(_webpack.BannerPlugin, [{
+                    banner: 'Micro front-end'
+                  }]);
+                }
 
-                var _ref3 = _typeof(resolvedConfig === null || resolvedConfig === void 0 ? void 0 : (_resolvedConfig$deplo2 = resolvedConfig.deploy) === null || _resolvedConfig$deplo2 === void 0 ? void 0 : _resolvedConfig$deplo2.microFrontend) === 'object' ? resolvedConfig === null || resolvedConfig === void 0 ? void 0 : (_resolvedConfig$deplo3 = resolvedConfig.deploy) === null || _resolvedConfig$deplo3 === void 0 ? void 0 : _resolvedConfig$deplo3.microFrontend : {},
-                    _ref3$enableHtmlEntry = _ref3.enableHtmlEntry,
-                    enableHtmlEntry = _ref3$enableHtmlEntry === void 0 ? true : _ref3$enableHtmlEntry,
-                    _ref3$externalBasicLi = _ref3.externalBasicLibrary,
-                    externalBasicLibrary = _ref3$externalBasicLi === void 0 ? true : _ref3$externalBasicLi; // external
+                var _ref5 = _typeof(resolveOptions === null || resolveOptions === void 0 ? void 0 : (_resolveOptions$deplo2 = resolveOptions.deploy) === null || _resolveOptions$deplo2 === void 0 ? void 0 : _resolveOptions$deplo2.microFrontend) === 'object' ? resolveOptions === null || resolveOptions === void 0 ? void 0 : (_resolveOptions$deplo3 = resolveOptions.deploy) === null || _resolveOptions$deplo3 === void 0 ? void 0 : _resolveOptions$deplo3.microFrontend : {},
+                    _ref5$enableHtmlEntry = _ref5.enableHtmlEntry,
+                    enableHtmlEntry = _ref5$enableHtmlEntry === void 0 ? defaultEnableHtmlEntry : _ref5$enableHtmlEntry,
+                    _ref5$externalBasicLi = _ref5.externalBasicLibrary,
+                    externalBasicLibrary = _ref5$externalBasicLi === void 0 ? defaultExternalBasicLibrary : _ref5$externalBasicLi; // external
 
 
                 if (externalBasicLibrary) {
@@ -139,7 +141,8 @@ export var initializer = function initializer(_ref) {
               logger('webpackConfig', {
                 output: resolveWebpackConfig.output,
                 externals: resolveWebpackConfig.externals,
-                env: env
+                env: env,
+                alias: (_resolveWebpackConfig = resolveWebpackConfig.resolve) === null || _resolveWebpackConfig === void 0 ? void 0 : _resolveWebpackConfig.alias
               });
             }
           }
@@ -147,35 +150,33 @@ export var initializer = function initializer(_ref) {
       },
       addRuntimeExports: function addRuntimeExports() {
         var mfPackage = path.resolve(__dirname, '../../../../');
-        var addExportStatement = "export { default as garfish } from '".concat(mfPackage, "'");
+        var addExportStatement = "export { default as garfish, default as masterApp } from '".concat(mfPackage, "'");
         logger('exportStatement', addExportStatement);
         pluginsExportsUtils.addExport(addExportStatement);
         runtimeExportsUtils.addExport("export * from '".concat(mfPackage, "'"));
       },
-      validateSchema: validateSchema,
-      modifyEntryImports: function modifyEntryImports(_ref4) {
-        var entrypoint = _ref4.entrypoint,
-            imports = _ref4.imports;
+      modifyEntryImports: function modifyEntryImports(_ref6) {
+        var entrypoint = _ref6.entrypoint,
+            imports = _ref6.imports;
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        var resolvedConfig = useResolvedConfigContext(); // support legacy config
-
-        var _getRuntimeConfig2 = getRuntimeConfig(resolvedConfig),
-            masterApp = _getRuntimeConfig2.masterApp; // eslint-disable-next-line react-hooks/rules-of-hooks
-
-
-        var _useAppContext = useAppContext(),
-            packageName = _useAppContext.packageName;
+        var config = useResolvedConfigContext();
 
-        var masterAppConfig = getEntryOptions(entrypoint.entryName, masterApp, resolvedConfig.runtimeByEntries, packageName);
-        configMap.set(entrypoint.entryName, masterAppConfig);
+        var _getRuntimeConfig2 = getRuntimeConfig(config),
+            masterApp = _getRuntimeConfig2.masterApp;
 
-        if (masterAppConfig) {
+        if (masterApp) {
           imports.push({
-            value: '@modern-js/runtime/plugins',
+            value: runtimePluginName,
             specifiers: [{
               imported: 'garfish'
             }]
           });
+          imports.push({
+            value: runtimePluginName,
+            specifiers: [{
+              imported: 'masterApp'
+            }]
+          });
         }
 
         imports.push({
@@ -191,17 +192,21 @@ export var initializer = function initializer(_ref) {
           entrypoint: entrypoint
         };
       },
-      modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(_ref5) {
-        var entrypoint = _ref5.entrypoint,
-            plugins = _ref5.plugins;
-        var masterAppConfig = configMap.get(entrypoint.entryName);
+      modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(_ref7) {
+        var entrypoint = _ref7.entrypoint,
+            plugins = _ref7.plugins;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        var config = useResolvedConfigContext();
+
+        var _getRuntimeConfig3 = getRuntimeConfig(config),
+            masterApp = _getRuntimeConfig3.masterApp;
 
-        if (masterAppConfig) {
-          logger('garfishPlugin options', masterAppConfig);
+        if (masterApp) {
+          logger('garfishPlugin options', masterApp);
           plugins.push({
             name: 'garfish',
             args: 'masterApp',
-            options: JSON.stringify(masterAppConfig)
+            options: masterApp === true ? JSON.stringify({}) : JSON.stringify(masterApp)
           });
         }
 
@@ -210,11 +215,11 @@ export var initializer = function initializer(_ref) {
           plugins: plugins
         };
       },
-      modifyEntryRenderFunction: function modifyEntryRenderFunction(_ref6) {
+      modifyEntryRenderFunction: function modifyEntryRenderFunction(_ref8) {
         var _config$deploy;
 
-        var entrypoint = _ref6.entrypoint,
-            code = _ref6.code;
+        var entrypoint = _ref8.entrypoint,
+            code = _ref8.code;
         // eslint-disable-next-line react-hooks/rules-of-hooks
         var config = useResolvedConfigContext();
 
@@ -232,16 +237,16 @@ export var initializer = function initializer(_ref) {
           code: nCode
         };
       },
-      modifyEntryExport: function modifyEntryExport(_ref7) {
-        var _resolvedConfig$deplo4;
+      modifyEntryExport: function modifyEntryExport(_ref9) {
+        var _config$deploy2;
 
-        var entrypoint = _ref7.entrypoint,
-            exportStatement = _ref7.exportStatement;
+        var entrypoint = _ref9.entrypoint,
+            exportStatement = _ref9.exportStatement;
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        var resolvedConfig = useResolvedConfigContext();
+        var config = useResolvedConfigContext();
 
-        if (resolvedConfig !== null && resolvedConfig !== void 0 && (_resolvedConfig$deplo4 = resolvedConfig.deploy) !== null && _resolvedConfig$deplo4 !== void 0 && _resolvedConfig$deplo4.microFrontend) {
-          var exportStatementCode = makeProvider(componentKey);
+        if (config !== null && config !== void 0 && (_config$deploy2 = config.deploy) !== null && _config$deploy2 !== void 0 && _config$deploy2.microFrontend) {
+          var exportStatementCode = makeProvider();
           logger('exportStatement', exportStatementCode);
           return {
             entrypoint: entrypoint,
@@ -254,18 +259,16 @@ export var initializer = function initializer(_ref) {
           exportStatement: exportStatement
         };
       }
-    }, otherLifeCycle);
+    };
   };
 };
 export default createPlugin(initializer({
+  resolvedConfig: resolvedConfig,
   validateSchema: function validateSchema() {
     return PLUGIN_SCHEMAS['@modern-js/plugin-garfish'];
-  },
-  externals: {
-    'react-dom': 'react-dom',
-    react: 'react'
-  },
-  componentKey: 'dynamicComponent'
+  }
+}, {
+  runtimePluginName: '@modern-js/runtime/plugins'
 }), {
   name: '@modern-js/plugin-garfish'
 });

package/dist/js/treeshaking/cli/utils.js

@@ -1,6 +1,35 @@
-export var makeProvider = function makeProvider(componentKey) {
-  return "\n  export const provider = function ({basename, dom, ...props}) {\n    return {\n      render({basename, dom}) {\n        const SubApp = render(props, basename);\n        const node = dom.querySelector('#' + MOUNT_ID) || dom;\n\n        bootstrap(SubApp, node);\n      },\n      destroy({ dom }) {\n        const node = dom.querySelector('#' + MOUNT_ID) || dom;\n\n        if (node) {\n          unmountComponentAtNode(node);\n        }\n      },\n      SubModuleComponent: (props) => {\n        const SubApp = render(props, basename);\n\n        return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);\n      },\n      ".concat(componentKey, ": () => {\n        const SubApp = render(props, basename);\n\n        return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);\n      }\n    }\n  };\n  if (typeof __GARFISH_EXPORTS__ !== 'undefined') {\n    __GARFISH_EXPORTS__.provider = provider;\n  }\n");
+export var makeProvider = function makeProvider() {
+  return "\nexport const provider = function ({basename, dom, ...props}) {\n  return {\n    render({basename, dom}) {\n      console.log('App.config', App.config);\n      const SubApp = render({props, basename});\n      const node = dom.querySelector('#' + MOUNT_ID) || dom;\n      bootstrap(SubApp, node);\n    },\n    destroy({ dom }) {\n      const node = dom.querySelector('#' + MOUNT_ID) || dom;\n\n      if (node) {\n        unmountComponentAtNode(node);\n      }\n    },\n    SubModuleComponent: (props) => {\n      const SubApp = render({props, basename});\n\n      return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);\n    },\n    jupiter_submodule_app_key: (props) => {\n      const SubApp = render({props, basename});\n\n      return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID)  || dom);\n    }\n  }\n};\n\nif (typeof __GARFISH_EXPORTS__ !== 'undefined') {\n  __GARFISH_EXPORTS__.provider = provider;\n}\n";
 };
 export var makeRenderFunction = function makeRenderFunction(code) {
-  return code.replace('IS_BROWSER', "\n        IS_BROWSER &&\n        typeof __GARFISH_EXPORTS__ === 'undefined'\n      ").replace('(App)', '(() => <App {...(arguments[0] || {})} />)').replace('"basename":"/"', '"basename":arguments[1] || "/"');
-};
+  var inGarfishToRender = "\n  const { basename, props } = arguments[0] || {};\n  let renderByGarfish = false;\n  const renderByProvider = !!basename;\n\n  if (IS_BROWSER && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.length !== 0) renderByGarfish = true;\n  if (IS_BROWSER && window.Garfish && window.Garfish.apps && Object.keys(window.Garfish.apps).length !== 0) renderByGarfish = true;\n  if (typeof __GARFISH_EXPORTS__ !== 'undefined') renderByGarfish = true;\n  if (renderByGarfish && !renderByProvider) return null;\n\n  function RouterPlugin (routerConfig) {\n    if (basename) {\n      routerConfig.basename = basename;\n      if (routerConfig.supportHtml5History !== false) {\n        if (!routerConfig.historyOptions) {\n          routerConfig.historyOptions = {\n            basename: basename\n          };\n        } else {\n          routerConfig.historyOptions.basename = basename;\n        }\n      }\n    }\n    return router(routerConfig);\n  }\n  ";
+  return inGarfishToRender + code.replace("router(", "RouterPlugin(").replace('IS_BROWSER', "IS_BROWSER && !renderByGarfish");
+}; // support legacy config
+
+export function getRuntimeConfig(config) {
+  var _config$runtime;
+
+  if (config !== null && config !== void 0 && (_config$runtime = config.runtime) !== null && _config$runtime !== void 0 && _config$runtime.features) {
+    var _config$runtime2;
+
+    return config === null || config === void 0 ? void 0 : (_config$runtime2 = config.runtime) === null || _config$runtime2 === void 0 ? void 0 : _config$runtime2.features;
+  }
+
+  return config === null || config === void 0 ? void 0 : config.runtime;
+} // support legacy config
+
+export function setRuntimeConfig(config, key, value) {
+  var _config$runtime3, _config$runtime4;
+
+  if (config !== null && config !== void 0 && (_config$runtime3 = config.runtime) !== null && _config$runtime3 !== void 0 && _config$runtime3.features && config !== null && config !== void 0 && (_config$runtime4 = config.runtime) !== null && _config$runtime4 !== void 0 && _config$runtime4.features[key]) {
+    config.runtime.features[key] = value;
+    return undefined;
+  }
+
+  if (config !== null && config !== void 0 && config.runtime && config !== null && config !== void 0 && config.runtime[key]) {
+    config.runtime[key] = value;
+    return undefined;
+  }
+
+  return undefined;
+}

package/dist/js/treeshaking/index.js

@@ -1 +1,2 @@
-export { default } from "./cli";
+export { default } from "./runtime";
+export * from "./runtime";

package/dist/js/treeshaking/runtime/index.js

@@ -1,2 +1,3 @@
 export { default } from "./plugin";
-export * from "./useModuleApps";
+export { useModuleApps, useMicroApps, useModuleApp } from "./useModuleApps";
+export { default as Garfish } from 'garfish';

package/dist/js/treeshaking/runtime/loadable.js

@@ -1,11 +1,17 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
+var _excluded = ["loadable"];
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(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; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -33,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function Loadable(WrapComponent) {
-  return function (defaultLoadingComponent) {
+  return function (defaultLoadable) {
     return /*#__PURE__*/function (_React$Component) {
       _inherits(LoadableComponent, _React$Component);
 
@@ -50,9 +56,6 @@ export function Loadable(WrapComponent) {
 
         _this = _super.call.apply(_super, [this].concat(args));
         _this.state = {
-          LoadingComponent: defaultLoadingComponent,
-          timeout: 10000,
-          delay: 200,
           error: null,
           pastDelay: false,
           timedOut: false,
@@ -82,17 +85,14 @@ export function Loadable(WrapComponent) {
           var _this2 = this;
 
           this.mounted = true;
-          var loadingConfig = this.props.loadingConfig;
-
-          if (loadingConfig !== null && loadingConfig !== void 0 && loadingConfig.LoadingComponent) {
-            this.setStateWithMountCheck({
-              LoadingComponent: loadingConfig.LoadingComponent
-            });
-          }
-
-          var _this$state = this.state,
-              delay = _this$state.delay,
-              timeout = _this$state.timeout;
+          var _this$props$loadable = this.props.loadable,
+              loadable = _this$props$loadable === void 0 ? defaultLoadable || {
+            delay: 200,
+            timeout: 10000,
+            loading: null
+          } : _this$props$loadable;
+          var delay = loadable.delay,
+              timeout = loadable.timeout;
 
           if (typeof delay === 'number') {
             if (delay === 0) {
@@ -133,7 +133,6 @@ export function Loadable(WrapComponent) {
             return;
           }
 
-          logger('Loadable state', this.state);
           this.setState(newState);
         }
       }, {
@@ -147,16 +146,31 @@ export function Loadable(WrapComponent) {
         value: function render() {
           var _this3 = this;
 
-          // eslint-disable-next-line @typescript-eslint/no-shadow
-          var _this$state2 = this.state,
-              isLoading = _this$state2.isLoading,
-              error = _this$state2.error,
-              pastDelay = _this$state2.pastDelay,
-              timedOut = _this$state2.timedOut,
-              LoadingComponent = _this$state2.LoadingComponent;
+          var _this$state = this.state,
+              isLoading = _this$state.isLoading,
+              error = _this$state.error,
+              pastDelay = _this$state.pastDelay,
+              timedOut = _this$state.timedOut;
+
+          var _this$props = this.props,
+              _this$props$loadable2 = _this$props.loadable,
+              loadable = _this$props$loadable2 === void 0 ? defaultLoadable || {
+            delay: 200,
+            timeout: 10000,
+            loading: null
+          } : _this$props$loadable2,
+              otherProps = _objectWithoutProperties(_this$props, _excluded);
+
+          var LoadingComponent = loadable.loading;
+          logger('Loadable render state', {
+            state: this.state,
+            props: otherProps,
+            loadable: loadable,
+            defaultLoadable: defaultLoadable
+          });
           var showLoading = (isLoading || error) && LoadingComponent;
           return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [showLoading && LoadingComponent && /*#__PURE__*/_jsx(LoadingComponent, {
+            children: [showLoading && /*#__PURE__*/_jsx(LoadingComponent, {
               isLoading: isLoading,
               pastDelay: pastDelay,
               timedOut: timedOut,
@@ -169,7 +183,7 @@ export function Loadable(WrapComponent) {
               setLoadingState: function setLoadingState(props) {
                 return _this3.setStateWithMountCheck(props);
               }
-            }, this.props))]
+            }, otherProps))]
           });
         }
       }]);