@modern-js/plugin-garfish 1.5.1 → 1.5.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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

@@ -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(App, 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/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: {
@@ -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

@@ -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(App, 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/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))]
         });
       }