@modern-js/plugin-garfish 2.68.12 → 2.68.13-alpha.1

package/dist/cjs/cli/code.js

@@ -41,6 +41,7 @@ const ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.jsx";
 const generateCode = async (entrypoints, appContext, config, hooks) => {
   const { mountId } = config.html;
   const { enableAsyncEntry } = config.source;
+  const { disableComponentCompat } = typeof config.deploy.microFrontend === "object" ? config.deploy.microFrontend : {};
   const { internalDirectory, internalSrcAlias, metaName, srcDirectory } = appContext;
   await Promise.all(entrypoints.map(async (entrypoint) => {
     const { entryName, isAutoMount, entry, customEntry, customBootstrap } = entrypoint;
@@ -58,7 +59,8 @@ const generateCode = async (entrypoints, appContext, config, hooks) => {
         customEntry,
         customBootstrap,
         mountId,
-        appendCode
+        appendCode,
+        disableComponentCompat
       });
       const indexFile = import_path.default.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
       import_utils.fs.outputFileSync(indexFile, indexCode, "utf8");

package/dist/cjs/cli/template.js

@@ -22,7 +22,7 @@ __export(template_exports, {
 });
 module.exports = __toCommonJS(template_exports);
 var import_utils = require("@modern-js/utils");
-const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId }) => customEntry ? `import '${(0, import_utils.formatImportPath)(entry.replace(srcDirectory, internalSrcAlias))}'
+const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId, disableComponentCompat }) => customEntry ? `import '${(0, import_utils.formatImportPath)(entry.replace(srcDirectory, internalSrcAlias))}'
 export * from '${(0, import_utils.formatImportPath)(entry.replace(srcDirectory, internalSrcAlias))}'` : `import { createRoot } from '@${metaName}/runtime/react';
 import { render } from '@${metaName}/runtime/browser';
 import { isRenderGarfish, createProvider } from '@${metaName}/plugin-garfish/tools';
@@ -32,9 +32,9 @@ if (!isRenderGarfish()) {
   ${customBootstrap ? `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));` : `render(<ModernRoot />, '${mountId || "root"}');`};
 }
 
-export const provider = createProvider('${mountId || "root"}', { customBootstrap });
+export const provider = createProvider('${mountId || "root"}', { customBootstrap, disableComponentCompat: ${disableComponentCompat} });
 `;
-const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, appendCode = [] }) => `import '@${metaName}/runtime/registry/${entryName}';
+const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, appendCode = [], disableComponentCompat }) => `import '@${metaName}/runtime/registry/${entryName}';
   ${genRenderCode({
   srcDirectory,
   internalSrcAlias,
@@ -42,7 +42,8 @@ const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, cus
   entry,
   customEntry,
   customBootstrap,
-  mountId
+  mountId,
+  disableComponentCompat
 })}
   ${appendCode.join("\n")}
   `;

package/dist/cjs/runtime/provider.js

@@ -29,9 +29,23 @@ function generateRootDom(dom, id) {
   const mountNode = dom ? dom.querySelector(`#${id}`) || dom : document.getElementById(id);
   return mountNode;
 }
-function createProvider(id, { customBootstrap, beforeRender } = {}) {
+function createProvider(id, { customBootstrap, beforeRender, disableComponentCompat } = {}) {
   return ({ basename, dom }) => {
     let root = null;
+    const SubModuleComponent = disableComponentCompat ? null : (props) => {
+      const ModernRoot = (0, import_react.createRoot)(null);
+      return /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModernRoot, {
+        basename,
+        ...props
+      }), dom.querySelector(`#${id || "root"}`) || dom);
+    };
+    const jupiter_submodule_app_key = disableComponentCompat ? null : (props) => {
+      const ModernRoot = (0, import_react.createRoot)(null);
+      return /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModernRoot, {
+        basename,
+        ...props
+      }), dom.querySelector(`#${id || "root"}`) || dom);
+    };
     return {
       async render({ basename: basename2, dom: dom2, props, appName }) {
         const ModernRoot = (0, import_react.createRoot)(null);
@@ -68,20 +82,8 @@ function createProvider(id, { customBootstrap, beforeRender } = {}) {
         }
       },
       // 兼容旧版本
-      SubModuleComponent: (props) => {
-        const ModernRoot = (0, import_react.createRoot)(null);
-        return /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModernRoot, {
-          basename,
-          ...props
-        }), dom.querySelector(`#${id || "root"}`) || dom);
-      },
-      jupiter_submodule_app_key: (props) => {
-        const ModernRoot = (0, import_react.createRoot)(null);
-        return /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModernRoot, {
-          basename,
-          ...props
-        }), dom.querySelector(`#${id || "root"}`) || dom);
-      }
+      SubModuleComponent,
+      jupiter_submodule_app_key
     };
   };
 }

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

@@ -64,6 +64,8 @@ function getAppInstance(options, appInfo, manifest) {
     const [{ component: SubModuleComponent }, setSubModuleComponent] = (0, import_react.useState)({
       component: null
     });
+    const destroyRef = (0, import_react.useRef)(null);
+    const isMountedRef = (0, import_react.useRef)(true);
     const context = (0, import_react.useContext)(import_runtime.RuntimeReactContext);
     var _props_useRouteMatch;
     const useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
@@ -127,6 +129,11 @@ or directly pass the "basename":
     ]);
     (0, import_react.useEffect)(() => {
       const { setLoadingState, ...userProps } = props;
+      const safeSetLoadingState = (state) => {
+        if (isMountedRef.current) {
+          setLoadingState(state);
+        }
+      };
       const loadAppOptions = {
         cache: true,
         insulationVariable: [
@@ -144,6 +151,26 @@ or directly pass the "basename":
           const { render, destroy, SubModuleComponent: SubModuleComponent2, jupiter_submodule_app_key } = provider;
           const SubComponent = SubModuleComponent2 || jupiter_submodule_app_key;
           const componetRenderMode = manifest === null || manifest === void 0 ? void 0 : manifest.componentRender;
+          if (destroy) {
+            destroyRef.current = () => {
+              const dom = document.getElementById(domId);
+              if (dom) {
+                const destroyProps = {
+                  dom,
+                  basename,
+                  appName: appInfo.name,
+                  appRenderInfo: {},
+                  props: {
+                    ...appInfo.props,
+                    ...userProps
+                  }
+                };
+                destroy.apply(provider, [
+                  destroyProps
+                ]);
+              }
+            };
+          }
           return {
             mount: (...props2) => {
               if (componetRenderMode && SubComponent) {
@@ -166,7 +193,7 @@ or directly pass the "basename":
           };
         }
       };
-      setLoadingState({
+      safeSetLoadingState({
         isLoading: true,
         error: null
       });
@@ -180,7 +207,7 @@ or directly pass the "basename":
             throw new Error(`MicroApp Garfish.loadApp "${appInfo.name}" result is null`);
           }
           appRef.current = appInstance;
-          setLoadingState({
+          safeSetLoadingState({
             isLoading: false
           });
           if (appInstance.mounted && appInstance.appInfo.cache) {
@@ -197,7 +224,7 @@ or directly pass the "basename":
             await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
           }
         } catch (error) {
-          setLoadingState({
+          safeSetLoadingState({
             isLoading: true,
             error
           });
@@ -205,6 +232,7 @@ or directly pass the "basename":
       }
       renderApp();
       return () => {
+        isMountedRef.current = false;
         if (appRef.current) {
           const { appInfo: appInfo2 } = appRef.current;
           if (appInfo2.cache) {
@@ -219,6 +247,20 @@ or directly pass the "basename":
         }
       };
     }, []);
+    (0, import_react.useEffect)(() => {
+      return () => {
+        if (SubModuleComponent && destroyRef.current && isMountedRef.current) {
+          (0, import_util.logger)("MicroApp SubModuleComponent cleanup");
+          try {
+            destroyRef.current();
+          } catch (error) {
+            (0, import_util.logger)("Error during SubModuleComponent cleanup:", error);
+          }
+        }
+      };
+    }, [
+      SubModuleComponent
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
         id: domId,

package/dist/esm/cli/code.js

@@ -1,4 +1,5 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _type_of } from "@swc/helpers/_/_type_of";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import path from "path";
 import { fs } from "@modern-js/utils";
@@ -8,12 +9,13 @@ var ENTRY_POINT_FILE_NAME = "index.jsx";
 var ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.jsx";
 var generateCode = function() {
   var _ref = _async_to_generator(function(entrypoints, appContext, config, hooks) {
-    var mountId, enableAsyncEntry, internalDirectory, internalSrcAlias, metaName, srcDirectory;
+    var mountId, enableAsyncEntry, disableComponentCompat, internalDirectory, internalSrcAlias, metaName, srcDirectory;
     return _ts_generator(this, function(_state) {
       switch (_state.label) {
         case 0:
           mountId = config.html.mountId;
           enableAsyncEntry = config.source.enableAsyncEntry;
+          disableComponentCompat = (_type_of(config.deploy.microFrontend) === "object" ? config.deploy.microFrontend : {}).disableComponentCompat;
           internalDirectory = appContext.internalDirectory, internalSrcAlias = appContext.internalSrcAlias, metaName = appContext.metaName, srcDirectory = appContext.srcDirectory;
           return [
             4,
@@ -43,7 +45,8 @@ var generateCode = function() {
                           customEntry,
                           customBootstrap,
                           mountId,
-                          appendCode
+                          appendCode,
+                          disableComponentCompat
                         });
                         indexFile = path.resolve(internalDirectory, "./".concat(entryName, "/").concat(ENTRY_POINT_FILE_NAME));
                         fs.outputFileSync(indexFile, indexCode, "utf8");

package/dist/esm/cli/template.js

@@ -1,10 +1,10 @@
 import { formatImportPath } from "@modern-js/utils";
 var genRenderCode = function(param) {
-  var srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, entry = param.entry, customEntry = param.customEntry, customBootstrap = param.customBootstrap, mountId = param.mountId;
-  return customEntry ? "import '".concat(formatImportPath(entry.replace(srcDirectory, internalSrcAlias)), "'\nexport * from '").concat(formatImportPath(entry.replace(srcDirectory, internalSrcAlias)), "'") : "import { createRoot } from '@".concat(metaName, "/runtime/react';\nimport { render } from '@").concat(metaName, "/runtime/browser';\nimport { isRenderGarfish, createProvider } from '@").concat(metaName, "/plugin-garfish/tools';\n").concat(customBootstrap ? "import customBootstrap from '".concat(formatImportPath(customBootstrap.replace(srcDirectory, internalSrcAlias)), "';") : "let customBootstrap;", "\nif (!isRenderGarfish()) {\n  const ModernRoot = createRoot();\n  ").concat(customBootstrap ? "customBootstrap(ModernRoot, () => render(<ModernRoot />, '".concat(mountId || "root", "'));") : "render(<ModernRoot />, '".concat(mountId || "root", "');"), ";\n}\n\nexport const provider = createProvider('").concat(mountId || "root", "', { customBootstrap });\n");
+  var srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, entry = param.entry, customEntry = param.customEntry, customBootstrap = param.customBootstrap, mountId = param.mountId, disableComponentCompat = param.disableComponentCompat;
+  return customEntry ? "import '".concat(formatImportPath(entry.replace(srcDirectory, internalSrcAlias)), "'\nexport * from '").concat(formatImportPath(entry.replace(srcDirectory, internalSrcAlias)), "'") : "import { createRoot } from '@".concat(metaName, "/runtime/react';\nimport { render } from '@").concat(metaName, "/runtime/browser';\nimport { isRenderGarfish, createProvider } from '@").concat(metaName, "/plugin-garfish/tools';\n").concat(customBootstrap ? "import customBootstrap from '".concat(formatImportPath(customBootstrap.replace(srcDirectory, internalSrcAlias)), "';") : "let customBootstrap;", "\nif (!isRenderGarfish()) {\n  const ModernRoot = createRoot();\n  ").concat(customBootstrap ? "customBootstrap(ModernRoot, () => render(<ModernRoot />, '".concat(mountId || "root", "'));") : "render(<ModernRoot />, '".concat(mountId || "root", "');"), ";\n}\n\nexport const provider = createProvider('").concat(mountId || "root", "', { customBootstrap, disableComponentCompat: ").concat(disableComponentCompat, " });\n");
 };
 var index = function(param) {
-  var srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, entry = param.entry, entryName = param.entryName, customEntry = param.customEntry, customBootstrap = param.customBootstrap, mountId = param.mountId, _param_appendCode = param.appendCode, appendCode = _param_appendCode === void 0 ? [] : _param_appendCode;
+  var srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, entry = param.entry, entryName = param.entryName, customEntry = param.customEntry, customBootstrap = param.customBootstrap, mountId = param.mountId, _param_appendCode = param.appendCode, appendCode = _param_appendCode === void 0 ? [] : _param_appendCode, disableComponentCompat = param.disableComponentCompat;
   return "import '@".concat(metaName, "/runtime/registry/").concat(entryName, "';\n  ").concat(genRenderCode({
     srcDirectory,
     internalSrcAlias,
@@ -12,7 +12,8 @@ var index = function(param) {
     entry,
     customEntry,
     customBootstrap,
-    mountId
+    mountId,
+    disableComponentCompat
   }), "\n  ").concat(appendCode.join("\n"), "\n  ");
 };
 export {

package/dist/esm/runtime/provider.js

@@ -10,10 +10,22 @@ function generateRootDom(dom, id) {
   return mountNode;
 }
 function createProvider(id) {
-  var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, customBootstrap = _ref.customBootstrap, beforeRender = _ref.beforeRender;
+  var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, customBootstrap = _ref.customBootstrap, beforeRender = _ref.beforeRender, disableComponentCompat = _ref.disableComponentCompat;
   return function(param) {
     var basename = param.basename, dom = param.dom;
     var root = null;
+    var SubModuleComponent = disableComponentCompat ? null : function(props) {
+      var ModernRoot = createRoot(null);
+      return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, _object_spread({
+        basename
+      }, props)), dom.querySelector("#".concat(id || "root")) || dom);
+    };
+    var jupiter_submodule_app_key = disableComponentCompat ? null : function(props) {
+      var ModernRoot = createRoot(null);
+      return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, _object_spread({
+        basename
+      }, props)), dom.querySelector("#".concat(id || "root")) || dom);
+    };
     return {
       render: function render1(param2) {
         var basename2 = param2.basename, dom2 = param2.dom, props = param2.props, appName = param2.appName;
@@ -91,18 +103,8 @@ function createProvider(id) {
         }
       },
       // 兼容旧版本
-      SubModuleComponent: function(props) {
-        var ModernRoot = createRoot(null);
-        return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, _object_spread({
-          basename
-        }, props)), dom.querySelector("#".concat(id || "root")) || dom);
-      },
-      jupiter_submodule_app_key: function(props) {
-        var ModernRoot = createRoot(null);
-        return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, _object_spread({
-          basename
-        }, props)), dom.querySelector("#".concat(id || "root")) || dom);
-      }
+      SubModuleComponent,
+      jupiter_submodule_app_key
     };
   };
 }

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

@@ -40,6 +40,8 @@ function getAppInstance(options, appInfo, manifest) {
     var _useState = _sliced_to_array(useState({
       component: null
     }), 2), _useState_ = _useState[0], SubModuleComponent = _useState_.component, setSubModuleComponent = _useState[1];
+    var destroyRef = useRef(null);
+    var isMountedRef = useRef(true);
     var context = useContext(RuntimeReactContext);
     var _props_useRouteMatch;
     var useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
@@ -106,6 +108,11 @@ or directly pass the "basename":
       var setLoadingState = props.setLoadingState, userProps = _object_without_properties(props, [
         "setLoadingState"
       ]);
+      var safeSetLoadingState = function(state) {
+        if (isMountedRef.current) {
+          setLoadingState(state);
+        }
+      };
       var loadAppOptions = _object_spread_props(_object_spread({
         cache: true,
         insulationVariable: _to_consumable_array(appInfo.insulationVariable || []).concat([
@@ -119,6 +126,23 @@ or directly pass the "basename":
           var render = provider.render, destroy = provider.destroy, SubModuleComponent2 = provider.SubModuleComponent, jupiter_submodule_app_key = provider.jupiter_submodule_app_key;
           var SubComponent = SubModuleComponent2 || jupiter_submodule_app_key;
           var componetRenderMode = manifest === null || manifest === void 0 ? void 0 : manifest.componentRender;
+          if (destroy) {
+            destroyRef.current = function() {
+              var dom = document.getElementById(domId);
+              if (dom) {
+                var destroyProps = {
+                  dom,
+                  basename,
+                  appName: appInfo.name,
+                  appRenderInfo: {},
+                  props: _object_spread({}, appInfo.props, userProps)
+                };
+                destroy.apply(provider, [
+                  destroyProps
+                ]);
+              }
+            };
+          }
           return {
             mount: function() {
               for (var _len = arguments.length, _$props = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -147,7 +171,7 @@ or directly pass the "basename":
           };
         }
       });
-      setLoadingState({
+      safeSetLoadingState({
         isLoading: true,
         error: null
       });
@@ -176,7 +200,7 @@ or directly pass the "basename":
                   throw new Error('MicroApp Garfish.loadApp "'.concat(appInfo.name, '" result is null'));
                 }
                 appRef.current = appInstance;
-                setLoadingState({
+                safeSetLoadingState({
                   isLoading: false
                 });
                 if (!(appInstance.mounted && appInstance.appInfo.cache))
@@ -217,7 +241,7 @@ or directly pass the "basename":
                 ];
               case 6:
                 error = _state.sent();
-                setLoadingState({
+                safeSetLoadingState({
                   isLoading: true,
                   error
                 });
@@ -236,6 +260,7 @@ or directly pass the "basename":
       }
       renderApp();
       return function() {
+        isMountedRef.current = false;
         if (appRef.current) {
           var _$appInfo = appRef.current.appInfo;
           if (_$appInfo.cache) {
@@ -250,6 +275,20 @@ or directly pass the "basename":
         }
       };
     }, []);
+    useEffect(function() {
+      return function() {
+        if (SubModuleComponent && destroyRef.current && isMountedRef.current) {
+          logger("MicroApp SubModuleComponent cleanup");
+          try {
+            destroyRef.current();
+          } catch (error) {
+            logger("Error during SubModuleComponent cleanup:", error);
+          }
+        }
+      };
+    }, [
+      SubModuleComponent
+    ]);
     return /* @__PURE__ */ _jsx(_Fragment, {
       children: /* @__PURE__ */ _jsx("div", {
         id: domId,

package/dist/esm-node/cli/code.js

@@ -7,6 +7,7 @@ const ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.jsx";
 const generateCode = async (entrypoints, appContext, config, hooks) => {
   const { mountId } = config.html;
   const { enableAsyncEntry } = config.source;
+  const { disableComponentCompat } = typeof config.deploy.microFrontend === "object" ? config.deploy.microFrontend : {};
   const { internalDirectory, internalSrcAlias, metaName, srcDirectory } = appContext;
   await Promise.all(entrypoints.map(async (entrypoint) => {
     const { entryName, isAutoMount, entry, customEntry, customBootstrap } = entrypoint;
@@ -24,7 +25,8 @@ const generateCode = async (entrypoints, appContext, config, hooks) => {
         customEntry,
         customBootstrap,
         mountId,
-        appendCode
+        appendCode,
+        disableComponentCompat
       });
       const indexFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
       fs.outputFileSync(indexFile, indexCode, "utf8");

package/dist/esm-node/cli/template.js

@@ -1,5 +1,5 @@
 import { formatImportPath } from "@modern-js/utils";
-const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId }) => customEntry ? `import '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'
+const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId, disableComponentCompat }) => customEntry ? `import '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'
 export * from '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'` : `import { createRoot } from '@${metaName}/runtime/react';
 import { render } from '@${metaName}/runtime/browser';
 import { isRenderGarfish, createProvider } from '@${metaName}/plugin-garfish/tools';
@@ -9,9 +9,9 @@ if (!isRenderGarfish()) {
   ${customBootstrap ? `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));` : `render(<ModernRoot />, '${mountId || "root"}');`};
 }
 
-export const provider = createProvider('${mountId || "root"}', { customBootstrap });
+export const provider = createProvider('${mountId || "root"}', { customBootstrap, disableComponentCompat: ${disableComponentCompat} });
 `;
-const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, appendCode = [] }) => `import '@${metaName}/runtime/registry/${entryName}';
+const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, appendCode = [], disableComponentCompat }) => `import '@${metaName}/runtime/registry/${entryName}';
   ${genRenderCode({
   srcDirectory,
   internalSrcAlias,
@@ -19,7 +19,8 @@ const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, cus
   entry,
   customEntry,
   customBootstrap,
-  mountId
+  mountId,
+  disableComponentCompat
 })}
   ${appendCode.join("\n")}
   `;

package/dist/esm-node/runtime/provider.js

@@ -6,9 +6,23 @@ function generateRootDom(dom, id) {
   const mountNode = dom ? dom.querySelector(`#${id}`) || dom : document.getElementById(id);
   return mountNode;
 }
-function createProvider(id, { customBootstrap, beforeRender } = {}) {
+function createProvider(id, { customBootstrap, beforeRender, disableComponentCompat } = {}) {
   return ({ basename, dom }) => {
     let root = null;
+    const SubModuleComponent = disableComponentCompat ? null : (props) => {
+      const ModernRoot = createRoot(null);
+      return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, {
+        basename,
+        ...props
+      }), dom.querySelector(`#${id || "root"}`) || dom);
+    };
+    const jupiter_submodule_app_key = disableComponentCompat ? null : (props) => {
+      const ModernRoot = createRoot(null);
+      return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, {
+        basename,
+        ...props
+      }), dom.querySelector(`#${id || "root"}`) || dom);
+    };
     return {
       async render({ basename: basename2, dom: dom2, props, appName }) {
         const ModernRoot = createRoot(null);
@@ -45,20 +59,8 @@ function createProvider(id, { customBootstrap, beforeRender } = {}) {
         }
       },
       // 兼容旧版本
-      SubModuleComponent: (props) => {
-        const ModernRoot = createRoot(null);
-        return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, {
-          basename,
-          ...props
-        }), dom.querySelector(`#${id || "root"}`) || dom);
-      },
-      jupiter_submodule_app_key: (props) => {
-        const ModernRoot = createRoot(null);
-        return /* @__PURE__ */ createPortal(/* @__PURE__ */ _jsx(ModernRoot, {
-          basename,
-          ...props
-        }), dom.querySelector(`#${id || "root"}`) || dom);
-      }
+      SubModuleComponent,
+      jupiter_submodule_app_key
     };
   };
 }

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

@@ -30,6 +30,8 @@ function getAppInstance(options, appInfo, manifest) {
     const [{ component: SubModuleComponent }, setSubModuleComponent] = useState({
       component: null
     });
+    const destroyRef = useRef(null);
+    const isMountedRef = useRef(true);
     const context = useContext(RuntimeReactContext);
     var _props_useRouteMatch;
     const useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
@@ -93,6 +95,11 @@ or directly pass the "basename":
     ]);
     useEffect(() => {
       const { setLoadingState, ...userProps } = props;
+      const safeSetLoadingState = (state) => {
+        if (isMountedRef.current) {
+          setLoadingState(state);
+        }
+      };
       const loadAppOptions = {
         cache: true,
         insulationVariable: [
@@ -110,6 +117,26 @@ or directly pass the "basename":
           const { render, destroy, SubModuleComponent: SubModuleComponent2, jupiter_submodule_app_key } = provider;
           const SubComponent = SubModuleComponent2 || jupiter_submodule_app_key;
           const componetRenderMode = manifest === null || manifest === void 0 ? void 0 : manifest.componentRender;
+          if (destroy) {
+            destroyRef.current = () => {
+              const dom = document.getElementById(domId);
+              if (dom) {
+                const destroyProps = {
+                  dom,
+                  basename,
+                  appName: appInfo.name,
+                  appRenderInfo: {},
+                  props: {
+                    ...appInfo.props,
+                    ...userProps
+                  }
+                };
+                destroy.apply(provider, [
+                  destroyProps
+                ]);
+              }
+            };
+          }
           return {
             mount: (...props2) => {
               if (componetRenderMode && SubComponent) {
@@ -132,7 +159,7 @@ or directly pass the "basename":
           };
         }
       };
-      setLoadingState({
+      safeSetLoadingState({
         isLoading: true,
         error: null
       });
@@ -146,7 +173,7 @@ or directly pass the "basename":
             throw new Error(`MicroApp Garfish.loadApp "${appInfo.name}" result is null`);
           }
           appRef.current = appInstance;
-          setLoadingState({
+          safeSetLoadingState({
             isLoading: false
           });
           if (appInstance.mounted && appInstance.appInfo.cache) {
@@ -163,7 +190,7 @@ or directly pass the "basename":
             await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
           }
         } catch (error) {
-          setLoadingState({
+          safeSetLoadingState({
             isLoading: true,
             error
           });
@@ -171,6 +198,7 @@ or directly pass the "basename":
       }
       renderApp();
       return () => {
+        isMountedRef.current = false;
         if (appRef.current) {
           const { appInfo: appInfo2 } = appRef.current;
           if (appInfo2.cache) {
@@ -185,6 +213,20 @@ or directly pass the "basename":
         }
       };
     }, []);
+    useEffect(() => {
+      return () => {
+        if (SubModuleComponent && destroyRef.current && isMountedRef.current) {
+          logger("MicroApp SubModuleComponent cleanup");
+          try {
+            destroyRef.current();
+          } catch (error) {
+            logger("Error during SubModuleComponent cleanup:", error);
+          }
+        }
+      };
+    }, [
+      SubModuleComponent
+    ]);
     return /* @__PURE__ */ _jsx(_Fragment, {
       children: /* @__PURE__ */ _jsx("div", {
         id: domId,

package/dist/types/cli/template.d.ts

@@ -1,4 +1,4 @@
-export declare const index: ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, appendCode, }: {
+export declare const index: ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, appendCode, disableComponentCompat, }: {
     srcDirectory: string;
     internalSrcAlias: string;
     metaName: string;
@@ -8,4 +8,5 @@ export declare const index: ({ srcDirectory, internalSrcAlias, metaName, entry,
     customBootstrap?: string | false;
     mountId?: string;
     appendCode?: string[];
+    disableComponentCompat?: boolean;
 }) => string;

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

@@ -1,8 +1,9 @@
 import { type RenderFunc } from '@meta/runtime/browser';
 import type { Root } from 'react-dom/client';
-export declare function createProvider(id?: string, { customBootstrap, beforeRender, }?: {
+export declare function createProvider(id?: string, { customBootstrap, beforeRender, disableComponentCompat, }?: {
     customBootstrap?: (App: React.ComponentType, render: RenderFunc) => Promise<HTMLElement | Root>;
     beforeRender?: (App: React.ComponentType, props?: Record<string, any>) => Promise<any>;
+    disableComponentCompat?: boolean;
 }): ({ basename, dom }: {
     basename: string;
     dom: HTMLElement;
@@ -16,6 +17,6 @@ export declare function createProvider(id?: string, { customBootstrap, beforeRen
     destroy({ dom }: {
         dom: HTMLElement;
     }): void;
-    SubModuleComponent: (props: any) => import("react").ReactPortal;
-    jupiter_submodule_app_key: (props: any) => import("react").ReactPortal;
+    SubModuleComponent: ((props: any) => import("react").ReactPortal) | null;
+    jupiter_submodule_app_key: ((props: any) => import("react").ReactPortal) | null;
 };

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.68.12",
+  "version": "2.68.13-alpha.1",
   "jsnext:source": "./src/cli/index.ts",
   "types": "./dist/types/cli/index.d.ts",
   "typesVersions": {
@@ -93,13 +93,13 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "6.27.0",
     "typescript": "^5",
-    "@modern-js/app-tools": "2.68.12",
-    "@modern-js/core": "2.68.12",
     "@modern-js/runtime": "2.68.12",
-    "@modern-js/plugin-router-v5": "2.68.12",
-    "@modern-js/types": "2.68.12",
     "@scripts/build": "2.66.0",
-    "@scripts/jest-config": "2.66.0"
+    "@modern-js/types": "2.68.12",
+    "@modern-js/app-tools": "2.68.12",
+    "@scripts/jest-config": "2.66.0",
+    "@modern-js/plugin-router-v5": "2.68.12",
+    "@modern-js/core": "2.68.12"
   },
   "sideEffects": false,
   "publishConfig": {