@modern-js/plugin-garfish 2.0.0-beta.6 → 2.0.0

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

@@ -72,151 +72,165 @@ var __async = (__this, __arguments, generator) => {
 };
 var apps_exports = {};
 __export(apps_exports, {
-  generateApps: () => generateApps
+  generateApps: () => generateApps,
+  pathJoin: () => pathJoin
 });
 module.exports = __toCommonJS(apps_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_path = __toESM(require("path"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
+var import_runtime = require("@modern-js/runtime");
 var import_garfish = __toESM(require("garfish"));
-var import_runtime = require("@modern-js/plugin-router-v5/runtime");
 var import_util = require("../../util");
 var import_loadable = require("../loadable");
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
 function getAppInstance(options, appInfo, manifest) {
   let locationHref = "";
-  class MicroApp extends import_react.default.Component {
-    constructor() {
-      super(...arguments);
-      this.state = {
-        appInstance: null,
-        domId: (0, import_util.generateSubAppContainerKey)(appInfo),
-        SubModuleComponent: void 0
-      };
-      this.unregisterHistoryListener = () => {
-      };
+  function MicroApp(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const appRef = (0, import_react.useRef)(null);
+    const domId = (0, import_util.generateSubAppContainerKey)(appInfo);
+    const [SubModuleComponent, setSubModuleComponent] = (0, import_react.useState)();
+    const context = (0, import_react.useContext)(import_runtime.RuntimeReactContext);
+    const match = (_b = (_a = context == null ? void 0 : context.router) == null ? void 0 : _a.useRouteMatch) == null ? void 0 : _b.call(_a);
+    const matchs = (_d = (_c = context == null ? void 0 : context.router) == null ? void 0 : _c.useMatches) == null ? void 0 : _d.call(_c);
+    const location = (_f = (_e = context == null ? void 0 : context.router) == null ? void 0 : _e.useLocation) == null ? void 0 : _f.call(_e);
+    let basename = (options == null ? void 0 : options.basename) || "/";
+    if (matchs && matchs.length > 0) {
+      basename = pathJoin(basename, matchs[matchs.length - 1].pathname || "/");
+    } else if (match) {
+      basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");
     }
-    componentDidMount() {
-      return __async(this, null, function* () {
-        const _a = this.props, { match, history, setLoadingState } = _a, userProps = __objRest(_a, ["match", "history", "setLoadingState"]);
-        const { domId } = this.state;
-        const loadAppOptions = __spreadProps(__spreadValues({}, appInfo), {
-          insulationVariable: [
-            ...appInfo.insulationVariable || [],
-            "_SERVER_DATA"
-          ],
-          domGetter: `#${domId}`,
-          basename: import_path.default.join((options == null ? void 0 : options.basename) || "/", (match == null ? void 0 : match.path) || "/"),
-          cache: true,
-          props: __spreadValues(__spreadValues({}, appInfo.props), userProps),
-          customLoader: (provider) => {
-            const {
-              render,
-              destroy,
-              SubModuleComponent,
-              jupiter_submodule_app_key
-            } = provider;
-            const componetRenderMode = (manifest == null ? void 0 : manifest.componentRender) && (SubModuleComponent || jupiter_submodule_app_key);
-            return {
-              mount: (...props) => {
-                if (componetRenderMode) {
-                  this.setState({
-                    SubModuleComponent: SubModuleComponent != null ? SubModuleComponent : jupiter_submodule_app_key
-                  });
-                  return void 0;
-                } else {
-                  (0, import_util.logger)("MicroApp customer render", props);
-                  return render == null ? void 0 : render.apply(provider, props);
-                }
-              },
-              unmount(...props) {
-                if (componetRenderMode) {
-                  return void 0;
-                }
-                (0, import_util.logger)("MicroApp customer destroy", props);
-                return destroy == null ? void 0 : destroy.apply(provider, props);
+    (0, import_react.useEffect)(() => {
+      if (location && locationHref !== location.pathname && !import_garfish.default.running) {
+        locationHref = location.pathname;
+        const popStateEvent = new PopStateEvent("popstate");
+        popStateEvent.garfish = true;
+        dispatchEvent(popStateEvent);
+        (0, import_util.logger)(`MicroApp Garfish.loadApp popstate`);
+      }
+    }, [location]);
+    (0, import_react.useEffect)(() => {
+      const _a2 = props, { setLoadingState } = _a2, userProps = __objRest(_a2, ["setLoadingState"]);
+      const loadAppOptions = __spreadProps(__spreadValues({}, appInfo), {
+        insulationVariable: [
+          ...appInfo.insulationVariable || [],
+          "_SERVER_DATA"
+        ],
+        domGetter: `#${domId}`,
+        basename,
+        cache: true,
+        props: __spreadValues(__spreadValues({}, appInfo.props), userProps),
+        customLoader: (provider) => {
+          const {
+            render,
+            destroy,
+            SubModuleComponent: SubModuleComponent2,
+            jupiter_submodule_app_key
+          } = provider;
+          const componetRenderMode = (manifest == null ? void 0 : manifest.componentRender) && (SubModuleComponent2 || jupiter_submodule_app_key);
+          return {
+            mount: (...props2) => {
+              if (componetRenderMode) {
+                setSubModuleComponent(SubModuleComponent2);
+                return void 0;
+              } else {
+                (0, import_util.logger)("MicroApp customer render", props2);
+                return render == null ? void 0 : render.apply(provider, props2);
               }
-            };
-          }
-        });
-        setLoadingState({
-          isLoading: true,
-          error: null
-        });
-        (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo.name}"`, {
-          loadAppOptions
-        });
-        try {
-          const appInstance = yield import_garfish.default.loadApp(appInfo.name, loadAppOptions);
-          if (!appInstance) {
-            throw new Error(
-              `MicroApp Garfish.loadApp "${appInfo.name}" result is null`
+            },
+            unmount(...props2) {
+              if (componetRenderMode) {
+                return void 0;
+              }
+              (0, import_util.logger)("MicroApp customer destroy", props2);
+              return destroy == null ? void 0 : destroy.apply(provider, props2);
+            }
+          };
+        }
+      });
+      setLoadingState({
+        isLoading: true,
+        error: null
+      });
+      (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo.name}"`, {
+        loadAppOptions
+      });
+      function renderApp() {
+        return __async(this, null, function* () {
+          try {
+            const appInstance = yield import_garfish.default.loadApp(
+              appInfo.name,
+              loadAppOptions
             );
-          }
-          this.setState({
-            appInstance
-          });
-          setLoadingState({
-            isLoading: false
-          });
-          if (appInstance.mounted && appInstance.appInfo.cache) {
-            (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo.name}" show`, {
-              appInfo: appInstance.appInfo,
-              appInstance
+            if (!appInstance) {
+              throw new Error(
+                `MicroApp Garfish.loadApp "${appInfo.name}" result is null`
+              );
+            }
+            appRef.current = appInstance;
+            setLoadingState({
+              isLoading: false
             });
-            yield appInstance == null ? void 0 : appInstance.show();
-          } else {
-            (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo.name}" mount`, {
-              appInfo: appInstance.appInfo,
-              appInstance
+            if (appInstance.mounted && appInstance.appInfo.cache) {
+              (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo.name}" show`, {
+                appInfo: appInstance.appInfo,
+                appInstance
+              });
+              yield appInstance == null ? void 0 : appInstance.show();
+            } else {
+              (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo.name}" mount`, {
+                appInfo: appInstance.appInfo,
+                appInstance
+              });
+              yield appInstance == null ? void 0 : appInstance.mount();
+            }
+          } catch (error) {
+            setLoadingState({
+              isLoading: true,
+              error
             });
-            yield appInstance == null ? void 0 : appInstance.mount();
           }
-          this.unregisterHistoryListener = history == null ? void 0 : history.listen(() => {
-            if (locationHref !== history.location.pathname) {
-              locationHref = history.location.pathname;
-              const popStateEvent = new PopStateEvent("popstate");
-              dispatchEvent(popStateEvent);
-              (0, import_util.logger)(`MicroApp Garfish.loadApp popstate`);
-            }
-          });
-        } catch (error) {
-          setLoadingState({
-            isLoading: true,
-            error
-          });
-        }
-      });
-    }
-    componentWillUnmount() {
-      return __async(this, null, function* () {
-        var _a;
-        const { appInstance } = this.state;
-        (_a = this.unregisterHistoryListener) == null ? void 0 : _a.call(this);
-        if (appInstance) {
-          const { appInfo: appInfo2 } = appInstance;
+        });
+      }
+      renderApp();
+      return () => {
+        var _a3, _b2;
+        if (appRef.current) {
+          const { appInfo: appInfo2 } = appRef.current;
           if (appInfo2.cache) {
             (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo2.name}" hide`);
-            appInstance == null ? void 0 : appInstance.hide();
+            (_a3 = appRef.current) == null ? void 0 : _a3.hide();
           } else {
             (0, import_util.logger)(`MicroApp Garfish.loadApp "${appInfo2.name}" unmount`);
-            appInstance == null ? void 0 : appInstance.unmount();
+            (_b2 = appRef.current) == null ? void 0 : _b2.unmount();
           }
         }
-      });
-    }
-    render() {
-      const { domId, SubModuleComponent } = this.state;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-          id: domId,
-          children: SubModuleComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubModuleComponent, {})
-        })
-      });
-    }
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        id: domId,
+        children: SubModuleComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubModuleComponent, {})
+      })
+    });
   }
-  return (0, import_loadable.Loadable)((0, import_runtime.withRouter)(MicroApp))(
-    manifest == null ? void 0 : manifest.loadable
-  );
+  return (0, import_loadable.Loadable)(MicroApp)(manifest == null ? void 0 : manifest.loadable);
 }
 function generateApps(options, manifest) {
   var _a;
@@ -230,5 +244,6 @@ function generateApps(options, manifest) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  generateApps
+  generateApps,
+  pathJoin
 });

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

@@ -150,11 +150,9 @@ var __generator = this && this.__generator || function(thisArg, body) {
         };
     }
 };
-import path from "path";
 import { createRuntimeExportsUtils, PLUGIN_SCHEMAS } from "@modern-js/utils";
 import { logger } from "../util";
 import { getRuntimeConfig, makeProvider, makeRenderFunction, setRuntimeConfig, generateAsyncEntry } from "./utils";
-import "./types";
 var externals = {
     "react-dom": "react-dom",
     react: "react"
@@ -173,13 +171,12 @@ function getDefaultMicroFrontedConfig(microFrontend) {
     }, microFrontend);
 }
 var cli_default = function() {
-    var ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _pluginName = ref.pluginName, pluginName = _pluginName === void 0 ? "@modern-js/plugin-garfish" : _pluginName, _runtimePluginName = ref.runtimePluginName, runtimePluginName = _runtimePluginName === void 0 ? "@modern-js/runtime/plugins" : _runtimePluginName, _mfPackagePath = ref.mfPackagePath, mfPackagePath = _mfPackagePath === void 0 ? path.resolve(__dirname, "../../../../") : _mfPackagePath;
+    var ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _pluginName = ref.pluginName, pluginName = _pluginName === void 0 ? "@modern-js/plugin-garfish" : _pluginName, _runtimePluginName = ref.runtimePluginName, runtimePluginName = _runtimePluginName === void 0 ? "@modern-js/runtime/plugins" : _runtimePluginName;
     return {
         name: "@modern-js/plugin-garfish",
         setup: function(param) {
             var useAppContext = param.useAppContext, useResolvedConfigContext = param.useResolvedConfigContext, useConfigContext = param.useConfigContext;
             var pluginsExportsUtils;
-            var runtimeExportsUtils;
             return {
                 validateSchema: function validateSchema() {
                     return PLUGIN_SCHEMAS["@modern-js/plugin-garfish"];
@@ -221,7 +218,6 @@ var cli_default = function() {
                     logger("useConfig", useConfig);
                     var config = useAppContext();
                     pluginsExportsUtils = createRuntimeExportsUtils(config.internalDirectory, "plugins");
-                    runtimeExportsUtils = createRuntimeExportsUtils(config.internalDirectory, "index");
                     var disableCssExtract = ((ref = useConfig.output) === null || ref === void 0 ? void 0 : ref.disableCssExtract) || false;
                     if ((ref1 = useConfig.deploy) === null || ref1 === void 0 ? void 0 : ref1.microFrontend) {
                         var ref2;
@@ -237,7 +233,7 @@ var cli_default = function() {
                         source: {
                             alias: {
                                 "@modern-js/runtime/plugins": pluginsExportsUtils.getPath(),
-                                "@modern-js/runtime/garfish": mfPackagePath
+                                "@modern-js/runtime/garfish": "@modern-js/plugin-garfish/runtime"
                             }
                         },
                         tools: {
@@ -251,9 +247,9 @@ var cli_default = function() {
                                 var ref, ref1;
                                 var resolveOptions = useResolvedConfigContext();
                                 if (resolveOptions === null || resolveOptions === void 0 ? void 0 : (ref = resolveOptions.deploy) === null || ref === void 0 ? void 0 : ref.microFrontend) {
-                                    var ref2, ref3;
+                                    var ref2, ref3, ref4;
                                     chain.output.libraryTarget("umd");
-                                    if ((resolveOptions === null || resolveOptions === void 0 ? void 0 : (ref2 = resolveOptions.server) === null || ref2 === void 0 ? void 0 : ref2.port) && env === "development") {
+                                    if (!((ref2 = useConfig.dev) === null || ref2 === void 0 ? void 0 : ref2.assetPrefix) && (resolveOptions === null || resolveOptions === void 0 ? void 0 : (ref3 = resolveOptions.server) === null || ref3 === void 0 ? void 0 : ref3.port) && env === "development") {
                                         chain.output.publicPath("//localhost:".concat(resolveOptions.server.port, "/"));
                                     }
                                     if (webpack.BannerPlugin) {
@@ -263,7 +259,7 @@ var cli_default = function() {
                                             }
                                         ]);
                                     }
-                                    var ref4 = getDefaultMicroFrontedConfig((ref3 = resolveOptions.deploy) === null || ref3 === void 0 ? void 0 : ref3.microFrontend), enableHtmlEntry = ref4.enableHtmlEntry, externalBasicLibrary = ref4.externalBasicLibrary;
+                                    var ref5 = getDefaultMicroFrontedConfig((ref4 = resolveOptions.deploy) === null || ref4 === void 0 ? void 0 : ref4.microFrontend), enableHtmlEntry = ref5.enableHtmlEntry, externalBasicLibrary = ref5.externalBasicLibrary;
                                     if (externalBasicLibrary) {
                                         chain.externals(externals);
                                     }
@@ -292,7 +288,6 @@ var cli_default = function() {
                     var addExportStatement = "export { default as garfish, default as masterApp, hoistNonReactStatics } from '".concat(pluginName, "/runtime'");
                     logger("exportStatement", addExportStatement);
                     pluginsExportsUtils.addExport(addExportStatement);
-                    runtimeExportsUtils.addExport("export * from '".concat(mfPackagePath, "/runtime'"));
                 },
                 modifyEntryImports: function modifyEntryImports(param) {
                     var entrypoint = param.entrypoint, imports = param.imports;

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

@@ -1,9 +1,9 @@
 var makeProvider = function() {
-    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        if (IS_REACT18) {\n          root.unmount();\n        } else {\n          unmountComponentAtNode(node);\n        }\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) : document.getElementById(MOUNT_ID);\n  return { AppWrapper, mountNode }\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        if (IS_REACT18) {\n          root.unmount();\n        } else {\n          unmountComponentAtNode(node);\n        }\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: garfishProps, dom }) {\n  let AppWrapper = App;\n  if (garfishProps) {\n    AppWrapper = function (props) {\n      return React.createElement(App, { ...garfishProps, ...props });\n    };\n    AppWrapper = hoistNonReactStatics(AppWrapper, App);\n  }\n  const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : document.getElementById(MOUNT_ID);\n  return { AppWrapper, mountNode }\n}\n";
 };
 var makeRenderFunction = function(code) {
     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/g, "mountNode").replace("bootstrap(AppWrapper, mountNode, root", "bootstrap(AppWrapper, mountNode, root = IS_REACT18 ? ReactDOM.createRoot(mountNode) : null");
+    return inGarfishToRender + code.replace("router(", "generateRouterPlugin(basename,").replace("(App)", "(AppWrapper)").replace(/MOUNT_ID/g, "mountNode").replace("bootstrap(AppWrapper, mountNode, root", "bootstrap(AppWrapper, mountNode, root = IS_REACT18 ? ReactDOM.createRoot(mountNode) : null").replace("customBootstrap(AppWrapper)", "customBootstrap(AppWrapper, mountNode)");
 };
 function getRuntimeConfig(config) {
     var ref;

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

@@ -461,7 +461,7 @@ var plugin_default = function(config) {
                                     logger("GarfishProvider state", this.state);
                                     return /* @__PURE__ */ jsx(GarfishProvider, {
                                         value: this.state,
-                                        children: /* @__PURE__ */ jsx(App, _objectSpread({}, this.props, this.state))
+                                        children: /* @__PURE__ */ jsx(App, _objectSpread({}, this.props))
                                     });
                                 }
                             }