@modern-js/plugin-garfish 1.5.0 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @modern-js/plugin-garfish
 
+## 1.5.2
+
+### Patch Changes
+
+- a1198d509: feat: bump babel 7.18.0
+- df0694aba: fix(garfish-plugin): app static properties missing
+- Updated dependencies [a1198d509]
+  - @modern-js/plugin-router@1.2.15
+
+## 1.5.1
+
+### Patch Changes
+
+- 6451a098: fix: cyclic dependencies of @modern-js/core and @moden-js/webpack
+- 45d5643a: feat(webpack): support modify html-webpack-plugin
+- Updated dependencies [be7262e2]
+- Updated dependencies [6451a098]
+- Updated dependencies [d5a2cfd8]
+- Updated dependencies [437367c6]
+  - @modern-js/runtime-core@1.4.7
+  - @modern-js/utils@1.7.6
+  - @modern-js/plugin-router@1.2.14
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/js/modern/cli/index.js

@@ -103,7 +103,8 @@ export default (({
           },
           source: {
             alias: {
-              '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
+              '@modern-js/runtime/plugins': pluginsExportsUtils.getPath(),
+              '@modern-js/runtime/garfish': _mfPackagePath
             }
           },
           tools: {
@@ -150,7 +151,7 @@ export default (({
 
                 if (!enableHtmlEntry) {
                   chain.output.filename('index.js');
-                  chain.plugins.delete('html-main');
+                  chain.plugins.delete(`${CHAIN_ID.PLUGIN.HTML}-main`);
                   chain.optimization.runtimeChunk(false);
                   chain.optimization.splitChunks({
                     chunks: 'async'
@@ -172,7 +173,7 @@ export default (({
       },
 
       addRuntimeExports() {
-        const addExportStatement = `export { default as garfish, default as masterApp } from '${_mfPackagePath}'`;
+        const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '${_mfPackagePath}'`;
         logger('exportStatement', addExportStatement);
         pluginsExportsUtils.addExport(addExportStatement);
         runtimeExportsUtils.addExport(`export * from '${_mfPackagePath}'`);
@@ -203,6 +204,12 @@ export default (({
           });
         }
 
+        imports.push({
+          value: _runtimePluginName,
+          specifiers: [{
+            imported: 'hoistNonReactStatics'
+          }]
+        });
         imports.push({
           value: 'react-dom',
           specifiers: [{

package/dist/js/modern/cli/utils.js

@@ -7,7 +7,7 @@ export const provider = function ({basename, dom}) {
       const App = function () {
         return React.createElement(SubApp, props)
       };
-      bootstrap(App, node);
+      bootstrap(hoistNonReactStatics(App,SubApp), node);
     },
     destroy({ dom }) {
       const node = dom.querySelector('#' + MOUNT_ID) || dom;
@@ -32,16 +32,20 @@ export const provider = function ({basename, dom}) {
 if (typeof __GARFISH_EXPORTS__ !== 'undefined') {
   __GARFISH_EXPORTS__.provider = provider;
 }
+
+function renderInGarfish () {
+  if (IS_BROWSER && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.length !== 0) return true;
+  if (IS_BROWSER && window.Garfish && window.Garfish.apps && Object.keys(window.Garfish.apps).length !== 0) return true;
+  if (typeof __GARFISH_EXPORTS__ !== 'undefined') return true;
+  return false;
+}
 `;
 export const makeRenderFunction = code => {
   const inGarfishToRender = `
   const { basename, props } = arguments[0] || {};
-  let renderByGarfish = false;
+  let renderByGarfish = renderInGarfish();
   const renderByProvider = !!basename;
 
-  if (IS_BROWSER && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.length !== 0) renderByGarfish = true;
-  if (IS_BROWSER && window.Garfish && window.Garfish.apps && Object.keys(window.Garfish.apps).length !== 0) renderByGarfish = true;
-  if (typeof __GARFISH_EXPORTS__ !== 'undefined') renderByGarfish = true;
   if (renderByGarfish && !renderByProvider) return null;
 
   function RouterPlugin (routerConfig) {

package/dist/js/modern/runtime/index.js

@@ -1,3 +1,4 @@
 export { default } from "./plugin";
 export { useModuleApps, useModuleApp } from "./useModuleApps";
-export { default as Garfish, default as garfish } from 'garfish';
+export { default as Garfish, default as garfish } from 'garfish';
+export { default as hoistNonReactStatics } from 'hoist-non-react-statics';

package/dist/js/modern/runtime/loadable.js

@@ -144,7 +144,14 @@ export function Loadable(WrapComponent) {
             style: {
               display: showLoading ? 'none' : 'block'
             },
-            setLoadingState: props => this.setStateWithMountCheck(props)
+            setLoadingState: props => {
+              // loading is not provided and there is a rendering exception
+              if (props.error && !LoadingComponent) {
+                throw props.error;
+              }
+
+              this.setStateWithMountCheck(props);
+            }
           }, otherProps))]
         });
       }

package/dist/js/modern/runtime/utils/MApp.js

@@ -51,49 +51,101 @@ export function generateMApp(options, manifest) {
       const garfishOptions = _objectSpread(_objectSpread({
         domGetter: `#${domId}`,
 
-        beforeLoad(...args) {
-          logger('MApp beforeLoad', args);
-          setLoadingState({
-            isLoading: true,
-            error: null
-          });
-          return beforeLoad === null || beforeLoad === void 0 ? void 0 : beforeLoad(...args);
+        beforeLoad(appInfo, ...args) {
+          logger('MApp beforeLoad', [appInfo]);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              isLoading: true,
+              error: null
+            });
+          }
+
+          return beforeLoad === null || beforeLoad === void 0 ? void 0 : beforeLoad(appInfo, ...args);
         },
 
-        beforeMount(...args) {
+        beforeMount(appInfo, ...args) {
           logger('MApp beforeMount', args);
-          setLoadingState({
-            isLoading: false
-          });
-          return beforeMount === null || beforeMount === void 0 ? void 0 : beforeMount(...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              isLoading: false
+            });
+          }
+
+          return beforeMount === null || beforeMount === void 0 ? void 0 : beforeMount(appInfo, ...args);
         },
 
-        errorLoadApp(error, ...args) {
+        errorLoadApp(error, appInfo, ...args) {
           logger('MApp errorLoadApp', error, args);
-          setLoadingState({
-            error
-          });
-          return errorLoadApp === null || errorLoadApp === void 0 ? void 0 : errorLoadApp(error, ...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              error
+            });
+          }
+
+          return errorLoadApp === null || errorLoadApp === void 0 ? void 0 : errorLoadApp(error, appInfo, ...args);
         },
 
-        errorMountApp(error, ...args) {
+        errorMountApp(error, appInfo, ...args) {
           logger('MApp errorMountApp', error, args);
-          setLoadingState({
-            error
-          });
-          return errorMountApp === null || errorMountApp === void 0 ? void 0 : errorMountApp(error, ...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              error
+            });
+          }
+
+          return errorMountApp === null || errorMountApp === void 0 ? void 0 : errorMountApp(error, appInfo, ...args);
         },
 
-        errorUnmountApp(error, ...args) {
+        errorUnmountApp(error, appInfo, ...args) {
           logger('MApp errorUnmountApp', error, args);
-          setLoadingState({
-            error
-          });
-          return errorUnmountApp === null || errorUnmountApp === void 0 ? void 0 : errorUnmountApp(error, ...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              error
+            });
+          }
+
+          return errorUnmountApp === null || errorUnmountApp === void 0 ? void 0 : errorUnmountApp(error, appInfo, ...args);
         }
 
       }, otherOptions), {}, {
-        insulationVariable: [...(otherOptions.insulationVariable || []), '_SERVER_DATA']
+        insulationVariable: [...(otherOptions.insulationVariable || []), '_SERVER_DATA'],
+        customLoader: provider => {
+          const {
+            render,
+            destroy,
+            SubModuleComponent,
+            jupiter_submodule_app_key
+          } = provider;
+          const componetRenderMode = (manifest === null || manifest === void 0 ? void 0 : manifest.componentRender) && (SubModuleComponent || jupiter_submodule_app_key);
+          return {
+            mount: (...props) => {
+              if (componetRenderMode) {
+                this.setState({
+                  SubModuleComponent: SubModuleComponent !== null && SubModuleComponent !== void 0 ? SubModuleComponent : jupiter_submodule_app_key
+                });
+                return undefined;
+              } else {
+                logger('MicroApp customer render', props);
+                return render === null || render === void 0 ? void 0 : render.apply(provider, props);
+              }
+            },
+
+            unmount(...props) {
+              if (componetRenderMode) {
+                return undefined;
+              }
+
+              logger('MicroApp customer destroy', props);
+              return destroy === null || destroy === void 0 ? void 0 : destroy.apply(provider, props);
+            }
+
+          };
+        }
       });
 
       logger('MApp componentDidMount', {
@@ -115,8 +167,12 @@ export function generateMApp(options, manifest) {
     }
 
     render() {
+      const {
+        SubModuleComponent
+      } = this.state;
       return /*#__PURE__*/_jsx("div", {
-        id: generateSubAppContainerKey()
+        id: generateSubAppContainerKey(),
+        children: SubModuleComponent && /*#__PURE__*/_jsx(SubModuleComponent, {})
       });
     }
 

package/dist/js/modern/runtime/utils/apps.js

@@ -18,12 +18,7 @@ import Garfish from 'garfish';
 import { withRouter } from '@modern-js/plugin-router'; // import Loadable from 'react-loadable';
 
 import { logger, generateSubAppContainerKey } from "../../util";
-import { Loadable } from "../loadable"; // type Provider = {
-//   render: () => void;
-//   destroy: () => void;
-//   [SUBMODULE_APP_COMPONENT_KEY]?: React.ComponentType<any>;
-// };
-
+import { Loadable } from "../loadable";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 
@@ -36,7 +31,8 @@ function getAppInstance(options, appInfo, manifest) {
 
       _defineProperty(this, "state", {
         appInstance: null,
-        domId: generateSubAppContainerKey(appInfo)
+        domId: generateSubAppContainerKey(appInfo),
+        SubModuleComponent: undefined
       });
 
       _defineProperty(this, "unregisterHistoryListener", () => {});
@@ -65,15 +61,29 @@ function getAppInstance(options, appInfo, manifest) {
         customLoader: provider => {
           const {
             render,
-            destroy
+            destroy,
+            SubModuleComponent,
+            jupiter_submodule_app_key
           } = provider;
+          const componetRenderMode = (manifest === null || manifest === void 0 ? void 0 : manifest.componentRender) && (SubModuleComponent || jupiter_submodule_app_key);
           return {
-            mount(...props) {
-              logger('MicroApp customer render', props);
-              return render === null || render === void 0 ? void 0 : render.apply(provider, props);
+            mount: (...props) => {
+              if (componetRenderMode) {
+                this.setState({
+                  SubModuleComponent: SubModuleComponent !== null && SubModuleComponent !== void 0 ? SubModuleComponent : jupiter_submodule_app_key
+                });
+                return undefined;
+              } else {
+                logger('MicroApp customer render', props);
+                return render === null || render === void 0 ? void 0 : render.apply(provider, props);
+              }
             },
 
             unmount(...props) {
+              if (componetRenderMode) {
+                return undefined;
+              }
+
               logger('MicroApp customer destroy', props);
               return destroy === null || destroy === void 0 ? void 0 : destroy.apply(provider, props);
             }
@@ -159,11 +169,13 @@ function getAppInstance(options, appInfo, manifest) {
 
     render() {
       const {
-        domId
+        domId,
+        SubModuleComponent
       } = this.state;
       return /*#__PURE__*/_jsx(_Fragment, {
         children: /*#__PURE__*/_jsx("div", {
-          id: domId
+          id: domId,
+          children: SubModuleComponent && /*#__PURE__*/_jsx(SubModuleComponent, {})
         })
       });
     }

package/dist/js/node/cli/index.js

@@ -120,7 +120,8 @@ var _default = ({
           },
           source: {
             alias: {
-              '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
+              '@modern-js/runtime/plugins': pluginsExportsUtils.getPath(),
+              '@modern-js/runtime/garfish': _mfPackagePath
             }
           },
           tools: {
@@ -167,7 +168,7 @@ var _default = ({
 
                 if (!enableHtmlEntry) {
                   chain.output.filename('index.js');
-                  chain.plugins.delete('html-main');
+                  chain.plugins.delete(`${CHAIN_ID.PLUGIN.HTML}-main`);
                   chain.optimization.runtimeChunk(false);
                   chain.optimization.splitChunks({
                     chunks: 'async'
@@ -189,7 +190,7 @@ var _default = ({
       },
 
       addRuntimeExports() {
-        const addExportStatement = `export { default as garfish, default as masterApp } from '${_mfPackagePath}'`;
+        const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '${_mfPackagePath}'`;
         (0, _util.logger)('exportStatement', addExportStatement);
         pluginsExportsUtils.addExport(addExportStatement);
         runtimeExportsUtils.addExport(`export * from '${_mfPackagePath}'`);
@@ -220,6 +221,12 @@ var _default = ({
           });
         }
 
+        imports.push({
+          value: _runtimePluginName,
+          specifiers: [{
+            imported: 'hoistNonReactStatics'
+          }]
+        });
         imports.push({
           value: 'react-dom',
           specifiers: [{

package/dist/js/node/cli/utils.js

@@ -16,7 +16,7 @@ export const provider = function ({basename, dom}) {
       const App = function () {
         return React.createElement(SubApp, props)
       };
-      bootstrap(App, node);
+      bootstrap(hoistNonReactStatics(App,SubApp), node);
     },
     destroy({ dom }) {
       const node = dom.querySelector('#' + MOUNT_ID) || dom;
@@ -41,6 +41,13 @@ export const provider = function ({basename, dom}) {
 if (typeof __GARFISH_EXPORTS__ !== 'undefined') {
   __GARFISH_EXPORTS__.provider = provider;
 }
+
+function renderInGarfish () {
+  if (IS_BROWSER && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.length !== 0) return true;
+  if (IS_BROWSER && window.Garfish && window.Garfish.apps && Object.keys(window.Garfish.apps).length !== 0) return true;
+  if (typeof __GARFISH_EXPORTS__ !== 'undefined') return true;
+  return false;
+}
 `;
 
 exports.makeProvider = makeProvider;
@@ -48,12 +55,9 @@ exports.makeProvider = makeProvider;
 const makeRenderFunction = code => {
   const inGarfishToRender = `
   const { basename, props } = arguments[0] || {};
-  let renderByGarfish = false;
+  let renderByGarfish = renderInGarfish();
   const renderByProvider = !!basename;
 
-  if (IS_BROWSER && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.length !== 0) renderByGarfish = true;
-  if (IS_BROWSER && window.Garfish && window.Garfish.apps && Object.keys(window.Garfish.apps).length !== 0) renderByGarfish = true;
-  if (typeof __GARFISH_EXPORTS__ !== 'undefined') renderByGarfish = true;
   if (renderByGarfish && !renderByProvider) return null;
 
   function RouterPlugin (routerConfig) {

package/dist/js/node/runtime/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "garfish", {
     return _garfish.default;
   }
 });
+Object.defineProperty(exports, "hoistNonReactStatics", {
+  enumerable: true,
+  get: function () {
+    return _hoistNonReactStatics.default;
+  }
+});
 Object.defineProperty(exports, "useModuleApp", {
   enumerable: true,
   get: function () {
@@ -40,4 +46,6 @@ var _useModuleApps = require("./useModuleApps");
 
 var _garfish = _interopRequireDefault(require("garfish"));
 
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/js/node/runtime/loadable.js

@@ -153,7 +153,14 @@ function Loadable(WrapComponent) {
             style: {
               display: showLoading ? 'none' : 'block'
             },
-            setLoadingState: props => this.setStateWithMountCheck(props)
+            setLoadingState: props => {
+              // loading is not provided and there is a rendering exception
+              if (props.error && !LoadingComponent) {
+                throw props.error;
+              }
+
+              this.setStateWithMountCheck(props);
+            }
           }, otherProps))]
         });
       }

package/dist/js/node/runtime/utils/MApp.js

@@ -64,49 +64,101 @@ function generateMApp(options, manifest) {
       const garfishOptions = _objectSpread(_objectSpread({
         domGetter: `#${domId}`,
 
-        beforeLoad(...args) {
-          (0, _util.logger)('MApp beforeLoad', args);
-          setLoadingState({
-            isLoading: true,
-            error: null
-          });
-          return beforeLoad === null || beforeLoad === void 0 ? void 0 : beforeLoad(...args);
+        beforeLoad(appInfo, ...args) {
+          (0, _util.logger)('MApp beforeLoad', [appInfo]);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              isLoading: true,
+              error: null
+            });
+          }
+
+          return beforeLoad === null || beforeLoad === void 0 ? void 0 : beforeLoad(appInfo, ...args);
         },
 
-        beforeMount(...args) {
+        beforeMount(appInfo, ...args) {
           (0, _util.logger)('MApp beforeMount', args);
-          setLoadingState({
-            isLoading: false
-          });
-          return beforeMount === null || beforeMount === void 0 ? void 0 : beforeMount(...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              isLoading: false
+            });
+          }
+
+          return beforeMount === null || beforeMount === void 0 ? void 0 : beforeMount(appInfo, ...args);
         },
 
-        errorLoadApp(error, ...args) {
+        errorLoadApp(error, appInfo, ...args) {
           (0, _util.logger)('MApp errorLoadApp', error, args);
-          setLoadingState({
-            error
-          });
-          return errorLoadApp === null || errorLoadApp === void 0 ? void 0 : errorLoadApp(error, ...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              error
+            });
+          }
+
+          return errorLoadApp === null || errorLoadApp === void 0 ? void 0 : errorLoadApp(error, appInfo, ...args);
         },
 
-        errorMountApp(error, ...args) {
+        errorMountApp(error, appInfo, ...args) {
           (0, _util.logger)('MApp errorMountApp', error, args);
-          setLoadingState({
-            error
-          });
-          return errorMountApp === null || errorMountApp === void 0 ? void 0 : errorMountApp(error, ...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              error
+            });
+          }
+
+          return errorMountApp === null || errorMountApp === void 0 ? void 0 : errorMountApp(error, appInfo, ...args);
         },
 
-        errorUnmountApp(error, ...args) {
+        errorUnmountApp(error, appInfo, ...args) {
           (0, _util.logger)('MApp errorUnmountApp', error, args);
-          setLoadingState({
-            error
-          });
-          return errorUnmountApp === null || errorUnmountApp === void 0 ? void 0 : errorUnmountApp(error, ...args);
+
+          if (appInfo.activeWhen) {
+            setLoadingState({
+              error
+            });
+          }
+
+          return errorUnmountApp === null || errorUnmountApp === void 0 ? void 0 : errorUnmountApp(error, appInfo, ...args);
         }
 
       }, otherOptions), {}, {
-        insulationVariable: [...(otherOptions.insulationVariable || []), '_SERVER_DATA']
+        insulationVariable: [...(otherOptions.insulationVariable || []), '_SERVER_DATA'],
+        customLoader: provider => {
+          const {
+            render,
+            destroy,
+            SubModuleComponent,
+            jupiter_submodule_app_key
+          } = provider;
+          const componetRenderMode = (manifest === null || manifest === void 0 ? void 0 : manifest.componentRender) && (SubModuleComponent || jupiter_submodule_app_key);
+          return {
+            mount: (...props) => {
+              if (componetRenderMode) {
+                this.setState({
+                  SubModuleComponent: SubModuleComponent !== null && SubModuleComponent !== void 0 ? SubModuleComponent : jupiter_submodule_app_key
+                });
+                return undefined;
+              } else {
+                (0, _util.logger)('MicroApp customer render', props);
+                return render === null || render === void 0 ? void 0 : render.apply(provider, props);
+              }
+            },
+
+            unmount(...props) {
+              if (componetRenderMode) {
+                return undefined;
+              }
+
+              (0, _util.logger)('MicroApp customer destroy', props);
+              return destroy === null || destroy === void 0 ? void 0 : destroy.apply(provider, props);
+            }
+
+          };
+        }
       });
 
       (0, _util.logger)('MApp componentDidMount', {
@@ -129,8 +181,12 @@ function generateMApp(options, manifest) {
     }
 
     render() {
+      const {
+        SubModuleComponent
+      } = this.state;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        id: (0, _util.generateSubAppContainerKey)()
+        id: (0, _util.generateSubAppContainerKey)(),
+        children: SubModuleComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubModuleComponent, {})
       });
     }
 

package/dist/js/node/runtime/utils/apps.js

@@ -42,7 +42,8 @@ function getAppInstance(options, appInfo, manifest) {
 
       _defineProperty(this, "state", {
         appInstance: null,
-        domId: (0, _util.generateSubAppContainerKey)(appInfo)
+        domId: (0, _util.generateSubAppContainerKey)(appInfo),
+        SubModuleComponent: undefined
       });
 
       _defineProperty(this, "unregisterHistoryListener", () => {});
@@ -71,15 +72,29 @@ function getAppInstance(options, appInfo, manifest) {
         customLoader: provider => {
           const {
             render,
-            destroy
+            destroy,
+            SubModuleComponent,
+            jupiter_submodule_app_key
           } = provider;
+          const componetRenderMode = (manifest === null || manifest === void 0 ? void 0 : manifest.componentRender) && (SubModuleComponent || jupiter_submodule_app_key);
           return {
-            mount(...props) {
-              (0, _util.logger)('MicroApp customer render', props);
-              return render === null || render === void 0 ? void 0 : render.apply(provider, props);
+            mount: (...props) => {
+              if (componetRenderMode) {
+                this.setState({
+                  SubModuleComponent: SubModuleComponent !== null && SubModuleComponent !== void 0 ? SubModuleComponent : jupiter_submodule_app_key
+                });
+                return undefined;
+              } else {
+                (0, _util.logger)('MicroApp customer render', props);
+                return render === null || render === void 0 ? void 0 : render.apply(provider, props);
+              }
             },
 
             unmount(...props) {
+              if (componetRenderMode) {
+                return undefined;
+              }
+
               (0, _util.logger)('MicroApp customer destroy', props);
               return destroy === null || destroy === void 0 ? void 0 : destroy.apply(provider, props);
             }
@@ -165,11 +180,13 @@ function getAppInstance(options, appInfo, manifest) {
 
     render() {
       const {
-        domId
+        domId,
+        SubModuleComponent
       } = this.state;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          id: domId
+          id: domId,
+          children: SubModuleComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubModuleComponent, {})
         })
       });
     }

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

@@ -1,7 +1,7 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import path from 'path';
 import { createRuntimeExportsUtils, PLUGIN_SCHEMAS } from '@modern-js/utils';
 import { logger } from "../util";
@@ -44,10 +44,10 @@ export default (function () {
           return PLUGIN_SCHEMAS['@modern-js/plugin-garfish'];
         },
         resolvedConfig: function () {
-          var _resolvedConfig = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(config) {
+          var _resolvedConfig = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(config) {
             var resolved, _getRuntimeConfig, masterApp, router, nConfig, _router$historyOption;
 
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
@@ -115,7 +115,8 @@ export default (function () {
             },
             source: {
               alias: {
-                '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
+                '@modern-js/runtime/plugins': pluginsExportsUtils.getPath(),
+                '@modern-js/runtime/garfish': mfPackagePath
               }
             },
             tools: {
@@ -162,7 +163,7 @@ export default (function () {
 
                   if (!_enableHtmlEntry) {
                     chain.output.filename('index.js');
-                    chain.plugins["delete"]('html-main');
+                    chain.plugins["delete"]("".concat(CHAIN_ID.PLUGIN.HTML, "-main"));
                     chain.optimization.runtimeChunk(false);
                     chain.optimization.splitChunks({
                       chunks: 'async'
@@ -183,7 +184,7 @@ export default (function () {
           };
         },
         addRuntimeExports: function addRuntimeExports() {
-          var addExportStatement = "export { default as garfish, default as masterApp } from '".concat(mfPackagePath, "'");
+          var addExportStatement = "export { default as garfish, default as masterApp, hoistNonReactStatics } from '".concat(mfPackagePath, "'");
           logger('exportStatement', addExportStatement);
           pluginsExportsUtils.addExport(addExportStatement);
           runtimeExportsUtils.addExport("export * from '".concat(mfPackagePath, "'"));
@@ -212,6 +213,12 @@ export default (function () {
             });
           }
 
+          imports.push({
+            value: runtimePluginName,
+            specifiers: [{
+              imported: 'hoistNonReactStatics'
+            }]
+          });
           imports.push({
             value: 'react-dom',
             specifiers: [{

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

@@ -1,8 +1,8 @@
 export var makeProvider = function makeProvider() {
-  return "\nexport const provider = function ({basename, dom}) {\n  return {\n    render({basename, dom, props}) {\n      const SubApp = render({ props, basename });\n      const node = dom.querySelector('#' + MOUNT_ID) || dom;\n      const App = function () {\n        return React.createElement(SubApp, props)\n      };\n      bootstrap(App, 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";
+  return "\nexport const provider = function ({basename, dom}) {\n  return {\n    render({basename, dom, props}) {\n      const SubApp = render({ props, basename });\n      const node = dom.querySelector('#' + MOUNT_ID) || dom;\n      const App = function () {\n        return React.createElement(SubApp, props)\n      };\n      bootstrap(hoistNonReactStatics(App,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\nfunction renderInGarfish () {\n  if (IS_BROWSER && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.length !== 0) return true;\n  if (IS_BROWSER && window.Garfish && window.Garfish.apps && Object.keys(window.Garfish.apps).length !== 0) return true;\n  if (typeof __GARFISH_EXPORTS__ !== 'undefined') return true;\n  return false;\n}\n";
 };
 export var makeRenderFunction = function makeRenderFunction(code) {
-  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  ";
+  var inGarfishToRender = "\n  const { basename, props } = arguments[0] || {};\n  let renderByGarfish = renderInGarfish();\n  const renderByProvider = !!basename;\n\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
 

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

@@ -1,3 +1,4 @@
 export { default } from "./plugin";
 export { useModuleApps, useModuleApp } from "./useModuleApps";
-export { default as Garfish, default as garfish } from 'garfish';
+export { default as Garfish, default as garfish } from 'garfish';
+export { default as hoistNonReactStatics } from 'hoist-non-react-statics';

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

@@ -160,7 +160,12 @@ export function Loadable(WrapComponent) {
                 display: showLoading ? 'none' : 'block'
               },
               setLoadingState: function setLoadingState(props) {
-                return _this3.setStateWithMountCheck(props);
+                // loading is not provided and there is a rendering exception
+                if (props.error && !LoadingComponent) {
+                  throw props.error;
+                }
+
+                _this3.setStateWithMountCheck(props);
               }
             }, otherProps))]
           });

package/dist/js/treeshaking/runtime/plugin.js

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
@@ -8,7 +9,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 var _excluded = ["manifest"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { logger } from "../util";
@@ -24,7 +24,7 @@ function initOptions() {
 
 
 function _initOptions() {
-  _initOptions = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  _initOptions = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var _window, _window$modern_manife, _window2, _window2$modern_manif;
 
     var manifest,
@@ -35,7 +35,7 @@ function _initOptions() {
         _window3$modern_manif,
         _args2 = arguments;
 
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
@@ -133,10 +133,10 @@ export default (function (config) {
               });
 
               var load = /*#__PURE__*/function () {
-                var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
                   var GarfishConfig, MApp, _generateApps, appInfoList, apps;
 
-                  return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
                     while (1) {
                       switch (_context.prev = _context.next) {
                         case 0:

package/dist/js/treeshaking/runtime/utils/MApp.js

@@ -41,6 +41,8 @@ export function generateMApp(options, manifest) {
     _createClass(MApp, [{
       key: "componentDidMount",
       value: function componentDidMount() {
+        var _this2 = this;
+
         var domId = this.state.domId;
         var setLoadingState = this.props.setLoadingState;
 
@@ -58,64 +60,121 @@ export function generateMApp(options, manifest) {
 
         var garfishOptions = _objectSpread(_objectSpread({
           domGetter: "#".concat(domId),
-          beforeLoad: function beforeLoad() {
-            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-              args[_key2] = arguments[_key2];
+          beforeLoad: function beforeLoad(appInfo) {
+            logger('MApp beforeLoad', [appInfo]);
+
+            if (appInfo.activeWhen) {
+              setLoadingState({
+                isLoading: true,
+                error: null
+              });
+            }
+
+            for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+              args[_key2 - 1] = arguments[_key2];
             }
 
-            logger('MApp beforeLoad', args);
-            setLoadingState({
-              isLoading: true,
-              error: null
-            });
-            return _beforeLoad === null || _beforeLoad === void 0 ? void 0 : _beforeLoad.apply(void 0, args);
+            return _beforeLoad === null || _beforeLoad === void 0 ? void 0 : _beforeLoad.apply(void 0, [appInfo].concat(args));
           },
-          beforeMount: function beforeMount() {
-            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-              args[_key3] = arguments[_key3];
+          beforeMount: function beforeMount(appInfo) {
+            for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+              args[_key3 - 1] = arguments[_key3];
             }
 
             logger('MApp beforeMount', args);
-            setLoadingState({
-              isLoading: false
-            });
-            return _beforeMount === null || _beforeMount === void 0 ? void 0 : _beforeMount.apply(void 0, args);
+
+            if (appInfo.activeWhen) {
+              setLoadingState({
+                isLoading: false
+              });
+            }
+
+            return _beforeMount === null || _beforeMount === void 0 ? void 0 : _beforeMount.apply(void 0, [appInfo].concat(args));
           },
-          errorLoadApp: function errorLoadApp(error) {
-            for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
-              args[_key4 - 1] = arguments[_key4];
+          errorLoadApp: function errorLoadApp(error, appInfo) {
+            for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
+              args[_key4 - 2] = arguments[_key4];
             }
 
             logger('MApp errorLoadApp', error, args);
-            setLoadingState({
-              error: error
-            });
-            return _errorLoadApp === null || _errorLoadApp === void 0 ? void 0 : _errorLoadApp.apply(void 0, [error].concat(args));
+
+            if (appInfo.activeWhen) {
+              setLoadingState({
+                error: error
+              });
+            }
+
+            return _errorLoadApp === null || _errorLoadApp === void 0 ? void 0 : _errorLoadApp.apply(void 0, [error, appInfo].concat(args));
           },
-          errorMountApp: function errorMountApp(error) {
-            for (var _len5 = arguments.length, args = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
-              args[_key5 - 1] = arguments[_key5];
+          errorMountApp: function errorMountApp(error, appInfo) {
+            for (var _len5 = arguments.length, args = new Array(_len5 > 2 ? _len5 - 2 : 0), _key5 = 2; _key5 < _len5; _key5++) {
+              args[_key5 - 2] = arguments[_key5];
             }
 
             logger('MApp errorMountApp', error, args);
-            setLoadingState({
-              error: error
-            });
-            return _errorMountApp === null || _errorMountApp === void 0 ? void 0 : _errorMountApp.apply(void 0, [error].concat(args));
+
+            if (appInfo.activeWhen) {
+              setLoadingState({
+                error: error
+              });
+            }
+
+            return _errorMountApp === null || _errorMountApp === void 0 ? void 0 : _errorMountApp.apply(void 0, [error, appInfo].concat(args));
           },
-          errorUnmountApp: function errorUnmountApp(error) {
-            for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
-              args[_key6 - 1] = arguments[_key6];
+          errorUnmountApp: function errorUnmountApp(error, appInfo) {
+            for (var _len6 = arguments.length, args = new Array(_len6 > 2 ? _len6 - 2 : 0), _key6 = 2; _key6 < _len6; _key6++) {
+              args[_key6 - 2] = arguments[_key6];
             }
 
             logger('MApp errorUnmountApp', error, args);
-            setLoadingState({
-              error: error
-            });
-            return _errorUnmountApp === null || _errorUnmountApp === void 0 ? void 0 : _errorUnmountApp.apply(void 0, [error].concat(args));
+
+            if (appInfo.activeWhen) {
+              setLoadingState({
+                error: error
+              });
+            }
+
+            return _errorUnmountApp === null || _errorUnmountApp === void 0 ? void 0 : _errorUnmountApp.apply(void 0, [error, appInfo].concat(args));
           }
         }, otherOptions), {}, {
-          insulationVariable: [].concat(_toConsumableArray(otherOptions.insulationVariable || []), ['_SERVER_DATA'])
+          insulationVariable: [].concat(_toConsumableArray(otherOptions.insulationVariable || []), ['_SERVER_DATA']),
+          customLoader: function customLoader(provider) {
+            var render = provider.render,
+                destroy = provider.destroy,
+                SubModuleComponent = provider.SubModuleComponent,
+                jupiter_submodule_app_key = provider.jupiter_submodule_app_key;
+            var componetRenderMode = (manifest === null || manifest === void 0 ? void 0 : manifest.componentRender) && (SubModuleComponent || jupiter_submodule_app_key);
+            return {
+              mount: function mount() {
+                if (componetRenderMode) {
+                  _this2.setState({
+                    SubModuleComponent: SubModuleComponent !== null && SubModuleComponent !== void 0 ? SubModuleComponent : jupiter_submodule_app_key
+                  });
+
+                  return undefined;
+                } else {
+                  for (var _len7 = arguments.length, props = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                    props[_key7] = arguments[_key7];
+                  }
+
+                  logger('MicroApp customer render', props);
+                  return render === null || render === void 0 ? void 0 : render.apply(provider, props);
+                }
+              },
+              unmount: function unmount() {
+                if (componetRenderMode) {
+                  return undefined;
+                }
+
+                for (var _len8 = arguments.length, props = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+                  props[_key8] = arguments[_key8];
+                }
+
+                logger('MicroApp customer destroy', props);
+                return destroy === null || destroy === void 0 ? void 0 : destroy.apply(provider, props);
+              }
+            };
+          }
         });
 
         logger('MApp componentDidMount', {
@@ -139,8 +198,10 @@ export function generateMApp(options, manifest) {
     }, {
       key: "render",
       value: function render() {
+        var SubModuleComponent = this.state.SubModuleComponent;
         return /*#__PURE__*/_jsx("div", {
-          id: generateSubAppContainerKey()
+          id: generateSubAppContainerKey(),
+          children: SubModuleComponent && /*#__PURE__*/_jsx(SubModuleComponent, {})
         });
       }
     }]);

package/dist/js/treeshaking/runtime/utils/apps.js

@@ -1,3 +1,4 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -9,7 +10,6 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["match", "history", "setLoadingState"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 // The loading logic of the current component refers to react-loadable https://github.com/jamiebuilds/react-loadable
 import path from 'path';
 import React from 'react'; // eslint-disable-next-line import/no-named-as-default
@@ -18,12 +18,7 @@ import Garfish from 'garfish';
 import { withRouter } from '@modern-js/plugin-router'; // import Loadable from 'react-loadable';
 
 import { logger, generateSubAppContainerKey } from "../../util";
-import { Loadable } from "../loadable"; // type Provider = {
-//   render: () => void;
-//   destroy: () => void;
-//   [SUBMODULE_APP_COMPONENT_KEY]?: React.ComponentType<any>;
-// };
-
+import { Loadable } from "../loadable";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 
@@ -48,7 +43,8 @@ function getAppInstance(options, appInfo, manifest) {
 
       _defineProperty(_assertThisInitialized(_this), "state", {
         appInstance: null,
-        domId: generateSubAppContainerKey(appInfo)
+        domId: generateSubAppContainerKey(appInfo),
+        SubModuleComponent: undefined
       });
 
       _defineProperty(_assertThisInitialized(_this), "unregisterHistoryListener", function () {});
@@ -60,10 +56,12 @@ function getAppInstance(options, appInfo, manifest) {
       key: "UNSAFE_componentWillMount",
       value: // eslint-disable-next-line @typescript-eslint/naming-convention
       function () {
-        var _UNSAFE_componentWillMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _UNSAFE_componentWillMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var _this2 = this;
+
           var _this$props, match, history, setLoadingState, userProps, domId, loadAppOptions, appInstance;
 
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
@@ -77,17 +75,32 @@ function getAppInstance(options, appInfo, manifest) {
                     props: _objectSpread(_objectSpread({}, appInfo.props), userProps),
                     customLoader: function customLoader(provider) {
                       var render = provider.render,
-                          destroy = provider.destroy;
+                          destroy = provider.destroy,
+                          SubModuleComponent = provider.SubModuleComponent,
+                          jupiter_submodule_app_key = provider.jupiter_submodule_app_key;
+                      var componetRenderMode = (manifest === null || manifest === void 0 ? void 0 : manifest.componentRender) && (SubModuleComponent || jupiter_submodule_app_key);
                       return {
                         mount: function mount() {
-                          for (var _len2 = arguments.length, props = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                            props[_key2] = arguments[_key2];
+                          if (componetRenderMode) {
+                            _this2.setState({
+                              SubModuleComponent: SubModuleComponent !== null && SubModuleComponent !== void 0 ? SubModuleComponent : jupiter_submodule_app_key
+                            });
+
+                            return undefined;
+                          } else {
+                            for (var _len2 = arguments.length, props = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                              props[_key2] = arguments[_key2];
+                            }
+
+                            logger('MicroApp customer render', props);
+                            return render === null || render === void 0 ? void 0 : render.apply(provider, props);
                           }
-
-                          logger('MicroApp customer render', props);
-                          return render === null || render === void 0 ? void 0 : render.apply(provider, props);
                         },
                         unmount: function unmount() {
+                          if (componetRenderMode) {
+                            return undefined;
+                          }
+
                           for (var _len3 = arguments.length, props = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
                             props[_key3] = arguments[_key3];
                           }
@@ -188,12 +201,12 @@ function getAppInstance(options, appInfo, manifest) {
     }, {
       key: "componentWillUnmount",
       value: function () {
-        var _componentWillUnmount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _componentWillUnmount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
           var _this$unregisterHisto;
 
           var appInstance, _appInfo;
 
-          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) {
               switch (_context2.prev = _context2.next) {
                 case 0:
@@ -229,10 +242,13 @@ function getAppInstance(options, appInfo, manifest) {
     }, {
       key: "render",
       value: function render() {
-        var domId = this.state.domId;
+        var _this$state = this.state,
+            domId = _this$state.domId,
+            SubModuleComponent = _this$state.SubModuleComponent;
         return /*#__PURE__*/_jsx(_Fragment, {
           children: /*#__PURE__*/_jsx("div", {
-            id: domId
+            id: domId,
+            children: SubModuleComponent && /*#__PURE__*/_jsx(SubModuleComponent, {})
           })
         });
       }

package/dist/types/runtime/index.d.ts

@@ -1,4 +1,5 @@
 export { default } from './plugin';
 export { useModuleApps, useModuleApp } from './useModuleApps';
 export type { Manifest, ModuleInfo } from './useModuleApps';
-export { default as Garfish, default as garfish } from 'garfish';
+export { default as Garfish, default as garfish } from 'garfish';
+export { default as hoistNonReactStatics } from 'hoist-non-react-statics';

package/dist/types/runtime/loadable.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { RouteComponentProps } from '@modern-js/plugin-router';
 import { LoadableConfig, MicroComponentProps } from './useModuleApps';
-export interface MicroProps {
+export interface MicroProps extends RouteComponentProps {
   setLoadingState: (state: {
     isLoading?: boolean;
     error?: unknown;

package/dist/types/runtime/useModuleApps.d.ts

@@ -10,6 +10,7 @@ export declare type ModulesInfo = Array<ModuleInfo>;
 export declare type Manifest = {
   modules?: ModulesInfo;
   loadable?: LoadableConfig;
+  componentRender?: boolean;
   getAppList?: (info: any) => Promise<Array<GarfishInterfaces.AppInfo>>;
 };
 export declare type LoadingComponent = React.ComponentType<{

package/dist/types/runtime/utils/apps.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
-import Garfish from 'garfish';
+import Garfish, { interfaces } from 'garfish';
 import { Manifest, MicroComponentProps, ModulesInfo } from '../useModuleApps';
+export interface Provider extends interfaces.Provider {
+  SubModuleComponent?: React.ComponentType<any>;
+  jupiter_submodule_app_key?: React.ComponentType<any>;
+}
 export interface AppMap {
   [key: string]: React.FC<MicroComponentProps>;
 }

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.5.0",
+  "version": "1.5.3",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/runtime/index.d.ts",
   "typesVersions": {
@@ -54,15 +54,23 @@
     "@types/debug": "^4.1.7",
     "@types/react-loadable": "^5.5.6",
     "debug": "^4.3.2",
-    "garfish": "^1.5.5",
+    "garfish": "^1.8.1",
     "hoist-non-react-statics": "^3.3.2",
     "react-loadable": "^5.5.0"
   },
+  "peerDependencies": {
+    "@modern-js/plugin-router": "^1.2.15"
+  },
+  "peerDependenciesMeta": {
+    "@modern-js/plugin-router": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@modern-js/core": "1.11.0",
-    "@modern-js/plugin-router": "1.2.14",
-    "@modern-js/runtime-core": "1.4.6",
-    "@modern-js/types": "1.5.3",
+    "@modern-js/core": "1.11.2",
+    "@modern-js/plugin-router": "1.2.15",
+    "@modern-js/runtime-core": "1.4.10",
+    "@modern-js/types": "1.5.4",
     "@scripts/build": "0.0.0",
     "@scripts/jest-config": "0.0.0",
     "@testing-library/jest-dom": "^5.16.1",
@@ -82,11 +90,6 @@
     "typescript": "^4",
     "webpack-chain": "^6.5.1"
   },
-  "peerDependencies": {
-    "@modern-js/plugin-router": "^1.2.14",
-    "@modern-js/runtime-core": "^1.4.6",
-    "react": "^17"
-  },
   "sideEffects": false,
   "modernConfig": {},
   "publishConfig": {

package/type.d.ts

@@ -1,5 +1,6 @@
-declare module '@modern-js/runtime' {
+declare module '@modern-js/runtime/garfish' {
   export const useModuleApp: typeof import('./dist/types/runtime').useModuleApp;
   export const useModuleApps: typeof import('./dist/types/runtime').useModuleApps;
-  export const useMicroApps: typeof import('./dist/types/runtime').useMicroApps;
+  export const Garfish: typeof import('./dist/types/runtime').Garfish;
+  export const garfish: typeof import('./dist/types/runtime').garfish;
 }