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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @modern-js/plugin-garfish
 
+## 2.0.0-beta.7
+
+### Major Changes
+
+- dda38c9c3e: chore: v2
+
+### Patch Changes
+
+- Updated dependencies [c9e800d39a]
+- Updated dependencies [edd1cfb1af]
+- Updated dependencies [6bda14ed71]
+- Updated dependencies [dda38c9c3e]
+- Updated dependencies [8b8e1bb571]
+- Updated dependencies [bbe4c4ab64]
+  - @modern-js/runtime@2.0.0-beta.7
+  - @modern-js/utils@2.0.0-beta.7
+
 ## 2.0.0-beta.6
 
 ### Major Changes

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

@@ -34,7 +34,6 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import path from "path";
 import { createRuntimeExportsUtils, PLUGIN_SCHEMAS } from "@modern-js/utils";
 import { logger } from "../util";
 import {
@@ -44,7 +43,6 @@ import {
   setRuntimeConfig,
   generateAsyncEntry
 } from "./utils";
-import "./types";
 const externals = { "react-dom": "react-dom", react: "react" };
 function getDefaultMicroFrontedConfig(microFrontend) {
   if (microFrontend === true) {
@@ -61,13 +59,11 @@ function getDefaultMicroFrontedConfig(microFrontend) {
 }
 var cli_default = ({
   pluginName = "@modern-js/plugin-garfish",
-  runtimePluginName = "@modern-js/runtime/plugins",
-  mfPackagePath = path.resolve(__dirname, "../../../../")
+  runtimePluginName = "@modern-js/runtime/plugins"
 } = {}) => ({
   name: "@modern-js/plugin-garfish",
   setup: ({ useAppContext, useResolvedConfigContext, useConfigContext }) => {
     let pluginsExportsUtils;
-    let runtimeExportsUtils;
     return {
       validateSchema() {
         return PLUGIN_SCHEMAS["@modern-js/plugin-garfish"];
@@ -108,10 +104,6 @@ var cli_default = ({
           config.internalDirectory,
           "plugins"
         );
-        runtimeExportsUtils = createRuntimeExportsUtils(
-          config.internalDirectory,
-          "index"
-        );
         let disableCssExtract = ((_a = useConfig.output) == null ? void 0 : _a.disableCssExtract) || false;
         if ((_b = useConfig.deploy) == null ? void 0 : _b.microFrontend) {
           const { enableHtmlEntry } = getDefaultMicroFrontedConfig(
@@ -128,7 +120,7 @@ var cli_default = ({
           source: {
             alias: {
               "@modern-js/runtime/plugins": pluginsExportsUtils.getPath(),
-              "@modern-js/runtime/garfish": mfPackagePath
+              "@modern-js/runtime/garfish": "@modern-js/plugin-garfish/runtime"
             }
           },
           tools: {
@@ -185,9 +177,6 @@ var cli_default = ({
         const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '${pluginName}/runtime'`;
         logger("exportStatement", addExportStatement);
         pluginsExportsUtils.addExport(addExportStatement);
-        runtimeExportsUtils.addExport(
-          `export * from '${mfPackagePath}/runtime'`
-        );
       },
       modifyEntryImports({ entrypoint, imports }) {
         const config = useResolvedConfigContext();

package/dist/js/modern/runtime/plugin.js

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

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

@@ -50,147 +50,160 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { Fragment, jsx } from "react/jsx-runtime";
-import path from "path";
-import React from "react";
+import { useContext, useState, useEffect, useRef } from "react";
+import { RuntimeReactContext } from "@modern-js/runtime";
 import Garfish from "garfish";
-import { withRouter } from "@modern-js/plugin-router-v5/runtime";
 import { logger, generateSubAppContainerKey } from "../../util";
 import { Loadable } from "../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 React.Component {
-    constructor() {
-      super(...arguments);
-      this.state = {
-        appInstance: null,
-        domId: generateSubAppContainerKey(appInfo),
-        SubModuleComponent: void 0
-      };
-      this.unregisterHistoryListener = () => {
-      };
+  function MicroApp(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const appRef = useRef(null);
+    const domId = generateSubAppContainerKey(appInfo);
+    const [SubModuleComponent, setSubModuleComponent] = useState();
+    const context = useContext(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: path.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 {
-                  logger("MicroApp customer render", props);
-                  return render == null ? void 0 : render.apply(provider, props);
-                }
-              },
-              unmount(...props) {
-                if (componetRenderMode) {
-                  return void 0;
-                }
-                logger("MicroApp customer destroy", props);
-                return destroy == null ? void 0 : destroy.apply(provider, props);
+    useEffect(() => {
+      if (location && locationHref !== location.pathname && !Garfish.running) {
+        locationHref = location.pathname;
+        const popStateEvent = new PopStateEvent("popstate");
+        popStateEvent.garfish = true;
+        dispatchEvent(popStateEvent);
+        logger(`MicroApp Garfish.loadApp popstate`);
+      }
+    }, [location]);
+    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 {
+                logger("MicroApp customer render", props2);
+                return render == null ? void 0 : render.apply(provider, props2);
               }
-            };
-          }
-        });
-        setLoadingState({
-          isLoading: true,
-          error: null
-        });
-        logger(`MicroApp Garfish.loadApp "${appInfo.name}"`, {
-          loadAppOptions
-        });
-        try {
-          const appInstance = yield Garfish.loadApp(appInfo.name, loadAppOptions);
-          if (!appInstance) {
-            throw new Error(
-              `MicroApp Garfish.loadApp "${appInfo.name}" result is null`
+            },
+            unmount(...props2) {
+              if (componetRenderMode) {
+                return void 0;
+              }
+              logger("MicroApp customer destroy", props2);
+              return destroy == null ? void 0 : destroy.apply(provider, props2);
+            }
+          };
+        }
+      });
+      setLoadingState({
+        isLoading: true,
+        error: null
+      });
+      logger(`MicroApp Garfish.loadApp "${appInfo.name}"`, {
+        loadAppOptions
+      });
+      function renderApp() {
+        return __async(this, null, function* () {
+          try {
+            const appInstance = yield Garfish.loadApp(
+              appInfo.name,
+              loadAppOptions
             );
-          }
-          this.setState({
-            appInstance
-          });
-          setLoadingState({
-            isLoading: false
-          });
-          if (appInstance.mounted && appInstance.appInfo.cache) {
-            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 {
-            logger(`MicroApp Garfish.loadApp "${appInfo.name}" mount`, {
-              appInfo: appInstance.appInfo,
-              appInstance
+            if (appInstance.mounted && appInstance.appInfo.cache) {
+              logger(`MicroApp Garfish.loadApp "${appInfo.name}" show`, {
+                appInfo: appInstance.appInfo,
+                appInstance
+              });
+              yield appInstance == null ? void 0 : appInstance.show();
+            } else {
+              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);
-              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) {
             logger(`MicroApp Garfish.loadApp "${appInfo2.name}" hide`);
-            appInstance == null ? void 0 : appInstance.hide();
+            (_a3 = appRef.current) == null ? void 0 : _a3.hide();
           } else {
             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__ */ jsx(Fragment, {
-        children: /* @__PURE__ */ jsx("div", {
-          id: domId,
-          children: SubModuleComponent && /* @__PURE__ */ jsx(SubModuleComponent, {})
-        })
-      });
-    }
+      };
+    }, []);
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsx("div", {
+        id: domId,
+        children: SubModuleComponent && /* @__PURE__ */ jsx(SubModuleComponent, {})
+      })
+    });
   }
-  return Loadable(withRouter(MicroApp))(
-    manifest == null ? void 0 : manifest.loadable
-  );
+  return Loadable(MicroApp)(manifest == null ? void 0 : manifest.loadable);
 }
 function generateApps(options, manifest) {
   var _a;
@@ -203,5 +216,6 @@ function generateApps(options, manifest) {
   return { apps, appInfoList: options.apps || [] };
 }
 export {
-  generateApps
+  generateApps,
+  pathJoin
 };

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

@@ -1,9 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -30,10 +28,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -62,11 +56,9 @@ __export(cli_exports, {
   getDefaultMicroFrontedConfig: () => getDefaultMicroFrontedConfig
 });
 module.exports = __toCommonJS(cli_exports);
-var import_path = __toESM(require("path"));
 var import_utils = require("@modern-js/utils");
 var import_util = require("../util");
 var import_utils2 = require("./utils");
-var import_types = require("./types");
 const externals = { "react-dom": "react-dom", react: "react" };
 function getDefaultMicroFrontedConfig(microFrontend) {
   if (microFrontend === true) {
@@ -83,13 +75,11 @@ function getDefaultMicroFrontedConfig(microFrontend) {
 }
 var cli_default = ({
   pluginName = "@modern-js/plugin-garfish",
-  runtimePluginName = "@modern-js/runtime/plugins",
-  mfPackagePath = import_path.default.resolve(__dirname, "../../../../")
+  runtimePluginName = "@modern-js/runtime/plugins"
 } = {}) => ({
   name: "@modern-js/plugin-garfish",
   setup: ({ useAppContext, useResolvedConfigContext, useConfigContext }) => {
     let pluginsExportsUtils;
-    let runtimeExportsUtils;
     return {
       validateSchema() {
         return import_utils.PLUGIN_SCHEMAS["@modern-js/plugin-garfish"];
@@ -130,10 +120,6 @@ var cli_default = ({
           config.internalDirectory,
           "plugins"
         );
-        runtimeExportsUtils = (0, import_utils.createRuntimeExportsUtils)(
-          config.internalDirectory,
-          "index"
-        );
         let disableCssExtract = ((_a = useConfig.output) == null ? void 0 : _a.disableCssExtract) || false;
         if ((_b = useConfig.deploy) == null ? void 0 : _b.microFrontend) {
           const { enableHtmlEntry } = getDefaultMicroFrontedConfig(
@@ -150,7 +136,7 @@ var cli_default = ({
           source: {
             alias: {
               "@modern-js/runtime/plugins": pluginsExportsUtils.getPath(),
-              "@modern-js/runtime/garfish": mfPackagePath
+              "@modern-js/runtime/garfish": "@modern-js/plugin-garfish/runtime"
             }
           },
           tools: {
@@ -207,9 +193,6 @@ var cli_default = ({
         const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '${pluginName}/runtime'`;
         (0, import_util.logger)("exportStatement", addExportStatement);
         pluginsExportsUtils.addExport(addExportStatement);
-        runtimeExportsUtils.addExport(
-          `export * from '${mfPackagePath}/runtime'`
-        );
       },
       modifyEntryImports({ entrypoint, imports }) {
         const config = useResolvedConfigContext();

package/dist/js/node/runtime/plugin.js

@@ -166,7 +166,7 @@ var plugin_default = (config) => ({
             (0, import_util.logger)("GarfishProvider state", this.state);
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Context.GarfishProvider, {
               value: this.state,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, __spreadValues(__spreadValues({}, this.props), this.state))
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, __spreadValues({}, this.props))
             });
           }
         }