@modern-js/plugin-garfish 1.5.2 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @modern-js/plugin-garfish
 
+## 1.6.0
+
+### Minor Changes
+
+- 43bf23361: fix: 修复 bootstrap 函数第二个参数不支持传入 dom 节点
+  feat: '@modern-js/plugin-garfish' 支持 '@modern-js/runtime/garfish' scope 导出 garfish plugin 内置函数
+
+### Patch Changes
+
+- 209d0a927: release: hot fix garfish error
+- 996b91d9d: fix: optimize garfish plugin render function
+- 43bf23361: fix(garfish-plugin): app static properties missing
+- Updated dependencies [9377d2d9d]
+- Updated dependencies [8c9ad1749]
+  - @modern-js/utils@1.7.7
+  - @modern-js/plugin-router@1.2.15
+
 ## 1.5.2
 
 ### Patch 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: {

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

@@ -1,13 +1,8 @@
 export const makeProvider = () => `
 export const provider = function ({basename, dom}) {
   return {
-    render({basename, dom, props}) {
-      const SubApp = render({ props, basename });
-      const node = dom.querySelector('#' + MOUNT_ID) || dom;
-      const App = function () {
-        return React.createElement(SubApp, props)
-      };
-      bootstrap(hoistNonReactStatics(App,SubApp), node);
+    render({basename, dom, props, appName}) {
+      render({ props, basename, dom, appName });
     },
     destroy({ dom }) {
       const node = dom.querySelector('#' + MOUNT_ID) || dom;
@@ -32,35 +27,61 @@ export const provider = function ({basename, dom}) {
 if (typeof __GARFISH_EXPORTS__ !== 'undefined') {
   __GARFISH_EXPORTS__.provider = provider;
 }
-`;
-export const makeRenderFunction = code => {
-  const inGarfishToRender = `
-  const { basename, props } = arguments[0] || {};
-  let renderByGarfish = false;
-  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 canContinueRender ({ dom, appName }) {
+  var renderByGarfish =
+    typeof __GARFISH_EXPORTS__ !== 'undefined'
+    || typeof window !== 'undefined' && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.some((app)=>app.appInfo.name === appName);
+  let renderByProvider = dom || appName;
+  if (renderByGarfish) {
+    // Runs in the Garfish environment and is rendered by the provider
+    if (renderByProvider) {
+      return true;
+    } else {
+      // Runs in the Garfish environment and is not rendered by the provider
+      return false;
+    }
+  } else {
+    // Running in a non-Garfish environment
+    return true;
+  }
+}
 
-  function RouterPlugin (routerConfig) {
-    if (basename) {
-      routerConfig.basename = basename;
-      if (routerConfig.supportHtml5History !== false) {
-        if (!routerConfig.historyOptions) {
-          routerConfig.historyOptions = {
-            basename: basename
-          };
-        } else {
-          routerConfig.historyOptions.basename = basename;
-        }
+function generateRouterPlugin (basename,routerConfig) {
+  if (basename) {
+    routerConfig.basename = basename;
+    if (routerConfig.supportHtml5History !== false) {
+      if (!routerConfig.historyOptions) {
+        routerConfig.historyOptions = {
+          basename: basename
+        };
+      } else {
+        routerConfig.historyOptions.basename = basename;
       }
     }
-    return router(routerConfig);
   }
+  return router(routerConfig);
+}
+
+function generateAppWrapperAndRootDom ({ App, props, dom }) {
+  let AppWrapper = App;
+  if (props) {
+    AppWrapper = function () {
+      return React.createElement(App, props);
+    };
+    AppWrapper = hoistNonReactStatics(AppWrapper, App);
+  }
+  const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : MOUNT_ID;
+  return { AppWrapper, mountNode }
+}
+`;
+export const makeRenderFunction = code => {
+  const inGarfishToRender = `
+  const { basename, props, dom, appName } = typeof arguments[0] === 'object' && arguments[0] || {};
+  if (!canContinueRender({ dom, appName })) return null;
+  let { AppWrapper, mountNode } = generateAppWrapperAndRootDom({App, props, dom});
   `;
-  return inGarfishToRender + code.replace(`router(`, `RouterPlugin(`).replace('IS_BROWSER', `IS_BROWSER && !renderByGarfish`);
+  return inGarfishToRender + code.replace(`router(`, `generateRouterPlugin(basename,`).replace('(App)', `(AppWrapper)`).replace('MOUNT_ID', 'mountNode');
 }; // support legacy config
 
 export function getRuntimeConfig(config) {

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: {

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

@@ -10,13 +10,8 @@ exports.setRuntimeConfig = setRuntimeConfig;
 const makeProvider = () => `
 export const provider = function ({basename, dom}) {
   return {
-    render({basename, dom, props}) {
-      const SubApp = render({ props, basename });
-      const node = dom.querySelector('#' + MOUNT_ID) || dom;
-      const App = function () {
-        return React.createElement(SubApp, props)
-      };
-      bootstrap(hoistNonReactStatics(App,SubApp), node);
+    render({basename, dom, props, appName}) {
+      render({ props, basename, dom, appName });
     },
     destroy({ dom }) {
       const node = dom.querySelector('#' + MOUNT_ID) || dom;
@@ -41,38 +36,64 @@ export const provider = function ({basename, dom}) {
 if (typeof __GARFISH_EXPORTS__ !== 'undefined') {
   __GARFISH_EXPORTS__.provider = provider;
 }
+
+function canContinueRender ({ dom, appName }) {
+  var renderByGarfish =
+    typeof __GARFISH_EXPORTS__ !== 'undefined'
+    || typeof window !== 'undefined' && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.some((app)=>app.appInfo.name === appName);
+  let renderByProvider = dom || appName;
+  if (renderByGarfish) {
+    // Runs in the Garfish environment and is rendered by the provider
+    if (renderByProvider) {
+      return true;
+    } else {
+      // Runs in the Garfish environment and is not rendered by the provider
+      return false;
+    }
+  } else {
+    // Running in a non-Garfish environment
+    return true;
+  }
+}
+
+function generateRouterPlugin (basename,routerConfig) {
+  if (basename) {
+    routerConfig.basename = basename;
+    if (routerConfig.supportHtml5History !== false) {
+      if (!routerConfig.historyOptions) {
+        routerConfig.historyOptions = {
+          basename: basename
+        };
+      } else {
+        routerConfig.historyOptions.basename = basename;
+      }
+    }
+  }
+  return router(routerConfig);
+}
+
+function generateAppWrapperAndRootDom ({ App, props, dom }) {
+  let AppWrapper = App;
+  if (props) {
+    AppWrapper = function () {
+      return React.createElement(App, props);
+    };
+    AppWrapper = hoistNonReactStatics(AppWrapper, App);
+  }
+  const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : MOUNT_ID;
+  return { AppWrapper, mountNode }
+}
 `;
 
 exports.makeProvider = makeProvider;
 
 const makeRenderFunction = code => {
   const inGarfishToRender = `
-  const { basename, props } = arguments[0] || {};
-  let renderByGarfish = false;
-  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) {
-    if (basename) {
-      routerConfig.basename = basename;
-      if (routerConfig.supportHtml5History !== false) {
-        if (!routerConfig.historyOptions) {
-          routerConfig.historyOptions = {
-            basename: basename
-          };
-        } else {
-          routerConfig.historyOptions.basename = basename;
-        }
-      }
-    }
-    return router(routerConfig);
-  }
+  const { basename, props, dom, appName } = typeof arguments[0] === 'object' && arguments[0] || {};
+  if (!canContinueRender({ dom, appName })) return null;
+  let { AppWrapper, mountNode } = generateAppWrapperAndRootDom({App, props, dom});
   `;
-  return inGarfishToRender + code.replace(`router(`, `RouterPlugin(`).replace('IS_BROWSER', `IS_BROWSER && !renderByGarfish`);
+  return inGarfishToRender + code.replace(`router(`, `generateRouterPlugin(basename,`).replace('(App)', `(AppWrapper)`).replace('MOUNT_ID', 'mountNode');
 }; // support legacy config
 
 

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

@@ -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: {

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

@@ -1,9 +1,9 @@
 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(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";
+  return "\nexport const provider = function ({basename, dom}) {\n  return {\n    render({basename, dom, props, appName}) {\n      render({ props, basename, dom, appName });\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 canContinueRender ({ dom, appName }) {\n  var renderByGarfish =\n    typeof __GARFISH_EXPORTS__ !== 'undefined'\n    || typeof window !== 'undefined' && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.some((app)=>app.appInfo.name === appName);\n  let renderByProvider = dom || appName;\n  if (renderByGarfish) {\n    // Runs in the Garfish environment and is rendered by the provider\n    if (renderByProvider) {\n      return true;\n    } else {\n      // Runs in the Garfish environment and is not rendered by the provider\n      return false;\n    }\n  } else {\n    // Running in a non-Garfish environment\n    return true;\n  }\n}\n\nfunction generateRouterPlugin (basename,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\nfunction generateAppWrapperAndRootDom ({ App, props, dom }) {\n  let AppWrapper = App;\n  if (props) {\n    AppWrapper = function () {\n      return React.createElement(App, props);\n    };\n    AppWrapper = hoistNonReactStatics(AppWrapper, App);\n  }\n  const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : MOUNT_ID;\n  return { AppWrapper, mountNode }\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  ";
-  return inGarfishToRender + code.replace("router(", "RouterPlugin(").replace('IS_BROWSER', "IS_BROWSER && !renderByGarfish");
+  var inGarfishToRender = "\n  const { basename, props, dom, appName } = typeof arguments[0] === 'object' && arguments[0] || {};\n  if (!canContinueRender({ dom, appName })) return null;\n  let { AppWrapper, mountNode } = generateAppWrapperAndRootDom({App, props, dom});\n  ";
+  return inGarfishToRender + code.replace("router(", "generateRouterPlugin(basename,").replace('(App)', "(AppWrapper)").replace('MOUNT_ID', 'mountNode');
 }; // support legacy config
 
 export function getRuntimeConfig(config) {

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/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

@@ -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 () {});
@@ -61,6 +57,8 @@ function getAppInstance(options, appInfo, manifest) {
       value: // eslint-disable-next-line @typescript-eslint/naming-convention
       function () {
         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) {
@@ -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];
                           }
@@ -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/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.2",
+  "version": "1.6.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/runtime/index.d.ts",
   "typesVersions": {
@@ -50,11 +50,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7",
-    "@modern-js/utils": "^1.7.5",
+    "@modern-js/utils": "^1.7.7",
     "@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"
   },
@@ -67,9 +67,9 @@
     }
   },
   "devDependencies": {
-    "@modern-js/core": "1.11.2",
+    "@modern-js/core": "1.12.0",
     "@modern-js/plugin-router": "1.2.15",
-    "@modern-js/runtime-core": "1.4.9",
+    "@modern-js/runtime-core": "1.5.0",
     "@modern-js/types": "1.5.4",
     "@scripts/build": "0.0.0",
     "@scripts/jest-config": "0.0.0",

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;
 }