@micro-zoe/micro-app 1.0.0-alpha.2 → 1.0.0-alpha.5

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.2';
+const version = '1.0.0-alpha.5';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -72,6 +72,10 @@ function isShadowRoot(target) {
 function isURL(target) {
     return target instanceof URL;
 }
+// is ProxyDocument
+function isProxyDocument(target) {
+    return toString.call(target) === '[object ProxyDocument]';
+}
 /**
  * format error log
  * @param msg message
@@ -498,6 +502,66 @@ function fetchSource(url, appName = null, options = {}) {
     });
 }
 
+class HTMLLoader {
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new HTMLLoader();
+        }
+        return this.instance;
+    }
+    /**
+     * run logic of load and format html
+     * @param successCb success callback
+     * @param errorCb error callback, type: (err: Error, meetFetchErr: boolean) => void
+     */
+    run(app, successCb) {
+        const appName = app.name;
+        const htmlUrl = app.ssrUrl || app.url;
+        fetchSource(htmlUrl, appName, { cache: 'no-cache' }).then((htmlStr) => {
+            if (!htmlStr) {
+                const msg = 'html is empty, please check in detail';
+                app.onerror(new Error(msg));
+                return logError(msg, appName);
+            }
+            htmlStr = this.formatHTML(htmlUrl, htmlStr, appName);
+            successCb(htmlStr, app);
+        }).catch((e) => {
+            logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, appName, e);
+            app.onLoadError(e);
+        });
+    }
+    formatHTML(htmlUrl, htmlStr, appName) {
+        return this.processHtml(htmlUrl, htmlStr, appName, microApp.plugins)
+            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
+            return match
+                .replace(/<head/i, '<micro-app-head')
+                .replace(/<\/head>/i, '</micro-app-head>');
+        })
+            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
+            return match
+                .replace(/<body/i, '<micro-app-body')
+                .replace(/<\/body>/i, '</micro-app-body>');
+        });
+    }
+    processHtml(url, code, appName, plugins) {
+        var _a;
+        if (!plugins)
+            return code;
+        const mergedPlugins = [];
+        plugins.global && mergedPlugins.push(...plugins.global);
+        ((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]) && mergedPlugins.push(...plugins.modules[appName]);
+        if (mergedPlugins.length > 0) {
+            return mergedPlugins.reduce((preCode, plugin) => {
+                if (isPlainObject(plugin) && isFunction(plugin.processHtml)) {
+                    return plugin.processHtml(preCode, url, plugin.options);
+                }
+                return preCode;
+            }, code);
+        }
+        return code;
+    }
+}
+
 // common reg
 const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/;
 const bodySelectorREG = /(^|\s+)((html[\s>~]+body)|body)(?=[\s>~[.#:]+|$)/;
@@ -1139,12 +1203,12 @@ function handleNewNode(parent, child, app) {
         return child;
     }
     else if (child instanceof HTMLLinkElement) {
-        if (child.hasAttribute('exclude')) {
+        if (child.hasAttribute('exclude') || checkExcludeUrl(child.getAttribute('href'), app.name)) {
             const linkReplaceComment = document.createComment('link element with exclude attribute ignored by micro-app');
             dynamicElementInMicroAppMap.set(child, linkReplaceComment);
             return linkReplaceComment;
         }
-        else if (child.hasAttribute('ignore')) {
+        else if (child.hasAttribute('ignore') || checkIgnoreUrl(child.getAttribute('href'), app.name)) {
             return child;
         }
         const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, true);
@@ -1363,101 +1427,112 @@ function markElement(element) {
 // methods of document
 function patchDocument() {
     const rawDocument = globalEnv.rawDocument;
+    const rawRootDocument = globalEnv.rawRootDocument;
+    function getBindTarget(target) {
+        return isProxyDocument(target) ? rawDocument : target;
+    }
     // create element 👇
-    Document.prototype.createElement = function createElement(tagName, options) {
-        const element = globalEnv.rawCreateElement.call(this, tagName, options);
+    rawRootDocument.prototype.createElement = function createElement(tagName, options) {
+        const element = globalEnv.rawCreateElement.call(getBindTarget(this), tagName, options);
         return markElement(element);
     };
-    Document.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
-        const element = globalEnv.rawCreateElementNS.call(this, namespaceURI, name, options);
+    rawRootDocument.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
+        const element = globalEnv.rawCreateElementNS.call(getBindTarget(this), namespaceURI, name, options);
         return markElement(element);
     };
-    Document.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = globalEnv.rawCreateDocumentFragment.call(this);
+    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
         return markElement(element);
     };
     // query element👇
     function querySelector(selectors) {
         var _a, _b, _c, _d;
+        const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
             !((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
             // see https://github.com/micro-zoe/micro-app/issues/56
-            rawDocument !== this) {
-            return globalEnv.rawQuerySelector.call(this, selectors);
+            rawDocument !== _this) {
+            return globalEnv.rawQuerySelector.call(_this, selectors);
         }
         return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelector(selectors)) !== null && _d !== void 0 ? _d : null;
     }
     function querySelectorAll(selectors) {
         var _a, _b, _c, _d;
+        const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
             !((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
-            rawDocument !== this) {
-            return globalEnv.rawQuerySelectorAll.call(this, selectors);
+            rawDocument !== _this) {
+            return globalEnv.rawQuerySelectorAll.call(_this, selectors);
         }
         return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll(selectors)) !== null && _d !== void 0 ? _d : [];
     }
-    Document.prototype.querySelector = querySelector;
-    Document.prototype.querySelectorAll = querySelectorAll;
-    Document.prototype.getElementById = function getElementById(key) {
+    rawRootDocument.prototype.querySelector = querySelector;
+    rawRootDocument.prototype.querySelectorAll = querySelectorAll;
+    rawRootDocument.prototype.getElementById = function getElementById(key) {
+        const _this = getBindTarget(this);
         if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementById.call(this, key);
+            return globalEnv.rawGetElementById.call(_this, key);
         }
         try {
-            return querySelector.call(this, `#${key}`);
+            return querySelector.call(_this, `#${key}`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementById.call(this, key);
+            return globalEnv.rawGetElementById.call(_this, key);
         }
     };
-    Document.prototype.getElementsByClassName = function getElementsByClassName(key) {
+    rawRootDocument.prototype.getElementsByClassName = function getElementsByClassName(key) {
+        const _this = getBindTarget(this);
         if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByClassName.call(this, key);
+            return globalEnv.rawGetElementsByClassName.call(_this, key);
         }
         try {
-            return querySelectorAll.call(this, `.${key}`);
+            return querySelectorAll.call(_this, `.${key}`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementsByClassName.call(this, key);
+            return globalEnv.rawGetElementsByClassName.call(_this, key);
         }
     };
-    Document.prototype.getElementsByTagName = function getElementsByTagName(key) {
+    rawRootDocument.prototype.getElementsByTagName = function getElementsByTagName(key) {
         var _a;
+        const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
             isUniqueElement(key) ||
             isInvalidQuerySelectorKey(key) ||
             (!((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
-            return globalEnv.rawGetElementsByTagName.call(this, key);
+            return globalEnv.rawGetElementsByTagName.call(_this, key);
         }
         try {
-            return querySelectorAll.call(this, key);
+            return querySelectorAll.call(_this, key);
         }
         catch (_b) {
-            return globalEnv.rawGetElementsByTagName.call(this, key);
+            return globalEnv.rawGetElementsByTagName.call(_this, key);
         }
     };
-    Document.prototype.getElementsByName = function getElementsByName(key) {
+    rawRootDocument.prototype.getElementsByName = function getElementsByName(key) {
+        const _this = getBindTarget(this);
         if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByName.call(this, key);
+            return globalEnv.rawGetElementsByName.call(_this, key);
         }
         try {
-            return querySelectorAll.call(this, `[name=${key}]`);
+            return querySelectorAll.call(_this, `[name=${key}]`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementsByName.call(this, key);
+            return globalEnv.rawGetElementsByName.call(_this, key);
         }
     };
 }
 /**
  * patchSetAttribute is different from other patch
- * it not dependent on sandbox
- * it should exec when micro-app first created & release when all app unmounted
+ * NOTE:
+ * 1. it not dependent on sandbox
+ * 2. it should exec when first micro-app-element created & release when all app unmounted
  */
 let hasRewriteSetAttribute = false;
 function patchSetAttribute() {
@@ -1492,24 +1567,21 @@ function patchSetAttribute() {
         }
     };
 }
-function releasePatchSetAttribute() {
-    hasRewriteSetAttribute = false;
-    Element.prototype.setAttribute = globalEnv.rawSetAttribute;
-}
 function releasePatchDocument() {
-    Document.prototype.createElement = globalEnv.rawCreateElement;
-    Document.prototype.createElementNS = globalEnv.rawCreateElementNS;
-    Document.prototype.createDocumentFragment = globalEnv.rawCreateDocumentFragment;
-    Document.prototype.querySelector = globalEnv.rawQuerySelector;
-    Document.prototype.querySelectorAll = globalEnv.rawQuerySelectorAll;
-    Document.prototype.getElementById = globalEnv.rawGetElementById;
-    Document.prototype.getElementsByClassName = globalEnv.rawGetElementsByClassName;
-    Document.prototype.getElementsByTagName = globalEnv.rawGetElementsByTagName;
-    Document.prototype.getElementsByName = globalEnv.rawGetElementsByName;
+    const rawRootDocument = globalEnv.rawRootDocument;
+    rawRootDocument.prototype.createElement = globalEnv.rawCreateElement;
+    rawRootDocument.prototype.createElementNS = globalEnv.rawCreateElementNS;
+    rawRootDocument.prototype.createDocumentFragment = globalEnv.rawCreateDocumentFragment;
+    rawRootDocument.prototype.querySelector = globalEnv.rawQuerySelector;
+    rawRootDocument.prototype.querySelectorAll = globalEnv.rawQuerySelectorAll;
+    rawRootDocument.prototype.getElementById = globalEnv.rawGetElementById;
+    rawRootDocument.prototype.getElementsByClassName = globalEnv.rawGetElementsByClassName;
+    rawRootDocument.prototype.getElementsByTagName = globalEnv.rawGetElementsByTagName;
+    rawRootDocument.prototype.getElementsByName = globalEnv.rawGetElementsByName;
 }
 // release patch
 function releasePatches() {
-    setCurrentAppName(null);
+    removeDomScope();
     releasePatchDocument();
     Element.prototype.appendChild = globalEnv.rawAppendChild;
     Element.prototype.insertBefore = globalEnv.rawInsertBefore;
@@ -1519,6 +1591,11 @@ function releasePatches() {
     Element.prototype.prepend = globalEnv.rawPrepend;
     Element.prototype.cloneNode = globalEnv.rawCloneNode;
 }
+// exec when last child unmount
+function releasePatchSetAttribute() {
+    hasRewriteSetAttribute = false;
+    Element.prototype.setAttribute = globalEnv.rawSetAttribute;
+}
 // Set the style of micro-app-head and micro-app-body
 let hasRejectMicroAppStyle = false;
 function rejectMicroAppStyle() {
@@ -1538,6 +1615,10 @@ const globalEnv = {};
  */
 function initGlobalEnv() {
     if (isBrowser) {
+        const rawWindow = Function('return window')();
+        const rawDocument = Function('return document')();
+        const rawRootDocument = Function('return Document')();
+        const supportModuleScript = isSupportModuleScript();
         /**
          * save patch raw methods
          * pay attention to this binding
@@ -1550,15 +1631,15 @@ function initGlobalEnv() {
         const rawAppend = Element.prototype.append;
         const rawPrepend = Element.prototype.prepend;
         const rawCloneNode = Element.prototype.cloneNode;
-        const rawCreateElement = Document.prototype.createElement;
-        const rawCreateElementNS = Document.prototype.createElementNS;
-        const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
-        const rawQuerySelector = Document.prototype.querySelector;
-        const rawQuerySelectorAll = Document.prototype.querySelectorAll;
-        const rawGetElementById = Document.prototype.getElementById;
-        const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
-        const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
-        const rawGetElementsByName = Document.prototype.getElementsByName;
+        const rawCreateElement = rawRootDocument.prototype.createElement;
+        const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
+        const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
+        const rawQuerySelector = rawRootDocument.prototype.querySelector;
+        const rawQuerySelectorAll = rawRootDocument.prototype.querySelectorAll;
+        const rawGetElementById = rawRootDocument.prototype.getElementById;
+        const rawGetElementsByClassName = rawRootDocument.prototype.getElementsByClassName;
+        const rawGetElementsByTagName = rawRootDocument.prototype.getElementsByTagName;
+        const rawGetElementsByName = rawRootDocument.prototype.getElementsByName;
         const ImageProxy = new Proxy(Image, {
             construct(Target, args) {
                 const elementImage = new Target(...args);
@@ -1566,9 +1647,6 @@ function initGlobalEnv() {
                 return elementImage;
             },
         });
-        const rawWindow = Function('return window')();
-        const rawDocument = Function('return document')();
-        const supportModuleScript = isSupportModuleScript();
         /**
          * save effect raw methods
          * pay attention to this binding, especially setInterval, setTimeout, clearInterval, clearTimeout
@@ -1579,11 +1657,18 @@ function initGlobalEnv() {
         const rawSetTimeout = rawWindow.setTimeout;
         const rawClearInterval = rawWindow.clearInterval;
         const rawClearTimeout = rawWindow.clearTimeout;
+        const rawPushState = rawWindow.history.pushState;
+        const rawReplaceState = rawWindow.history.replaceState;
         const rawDocumentAddEventListener = rawDocument.addEventListener;
         const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
         // mark current application as base application
         window.__MICRO_APP_BASE_APPLICATION__ = true;
         assign(globalEnv, {
+            // common global vars
+            rawWindow,
+            rawDocument,
+            rawRootDocument,
+            supportModuleScript,
             // source/patch
             rawSetAttribute,
             rawAppendChild,
@@ -1603,10 +1688,6 @@ function initGlobalEnv() {
             rawGetElementsByTagName,
             rawGetElementsByName,
             ImageProxy,
-            // common global vars
-            rawWindow,
-            rawDocument,
-            supportModuleScript,
             // sandbox/effect
             rawWindowAddEventListener,
             rawWindowRemoveEventListener,
@@ -1616,6 +1697,8 @@ function initGlobalEnv() {
             rawClearTimeout,
             rawDocumentAddEventListener,
             rawDocumentRemoveEventListener,
+            rawPushState,
+            rawReplaceState,
         });
         // global effect
         rejectMicroAppStyle();
@@ -1634,11 +1717,14 @@ const globalScripts = new Map();
 function extractScriptElement(script, parent, app, isDynamic = false) {
     let replaceComment = null;
     let src = script.getAttribute('src');
-    if (script.hasAttribute('exclude')) {
+    if (src) {
+        src = CompletionPath(src, app.url);
+    }
+    if (script.hasAttribute('exclude') || checkExcludeUrl(src, app.name)) {
         replaceComment = document.createComment('script element with exclude attribute removed by micro-app');
     }
-    else if ((script.type && !['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module'].includes(script.type)) ||
-        script.hasAttribute('ignore')) {
+    else if ((script.type && !['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'].includes(script.type)) ||
+        script.hasAttribute('ignore') || checkIgnoreUrl(src, app.name)) {
         return null;
     }
     else if ((globalEnv.supportModuleScript && script.noModule) ||
@@ -1646,7 +1732,6 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
     }
     else if (src) { // remote script
-        src = CompletionPath(src, app.url);
         const info = {
             code: '',
             isExternal: true,
@@ -1696,6 +1781,46 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         return parent.replaceChild(replaceComment, script);
     }
 }
+/**
+ * get assets plugins
+ * @param appName app name
+ */
+function getAssetsPlugins(appName) {
+    var _a, _b, _c;
+    const globalPlugins = ((_a = microApp.plugins) === null || _a === void 0 ? void 0 : _a.global) || [];
+    const modulePlugins = ((_c = (_b = microApp.plugins) === null || _b === void 0 ? void 0 : _b.modules) === null || _c === void 0 ? void 0 : _c[appName]) || [];
+    return [...globalPlugins, ...modulePlugins];
+}
+/**
+ * whether the url needs to be excluded
+ * @param url css or js link
+ * @param plugins microApp plugins
+ */
+function checkExcludeUrl(url, appName) {
+    if (!url)
+        return false;
+    const plugins = getAssetsPlugins(appName) || [];
+    return plugins.some(plugin => {
+        if (!plugin.excludeChecker)
+            return false;
+        return plugin.excludeChecker(url);
+    });
+}
+/**
+ * whether the url needs to be ignore
+ * @param url css or js link
+ * @param plugins microApp plugins
+ */
+function checkIgnoreUrl(url, appName) {
+    if (!url)
+        return false;
+    const plugins = getAssetsPlugins(appName) || [];
+    return plugins.some(plugin => {
+        if (!plugin.ignoreChecker)
+            return false;
+        return plugin.ignoreChecker(url);
+    });
+}
 /**
  *  Get remote resources of script
  * @param wrapElement htmlDom
@@ -1836,6 +1961,13 @@ function runDynamicRemoteScript(url, info, app, originScript) {
     if (app.source.scripts.has(url)) {
         const existInfo = app.source.scripts.get(url);
         !existInfo.module && defer(dispatchScriptOnLoadEvent);
+        /**
+         * TODO: 这里要改，当script初始化时动态创建远程script时，初次渲染和二次渲染的顺序不一致，会导致错误
+         * 1、url不存在缓存，初始化的时候肯定是要异步请求，那么执行顺序就会靠后，至少落后于html自带的script
+         * 2、url存在缓存，那么二次渲染的时候这里会同步执行，就会先于html自带的script执行
+         * 3、测试一下，初次渲染和二次渲染时，onload的执行时机，是在js执行完成，还是执行之前
+         * 4、将上述问题做成注释，方便后续阅读和理解
+         */
         return runScript(url, app, existInfo, true, dispatchScriptOnLoadEvent);
     }
     if (globalScripts.has(url)) {
@@ -1868,7 +2000,7 @@ function runDynamicRemoteScript(url, info, app, originScript) {
         catch (e) {
             console.error(`[micro-app from runDynamicScript] app ${app.name}: `, e, url);
         }
-        !info.module && dispatchOnLoadEvent(originScript);
+        !info.module && dispatchScriptOnLoadEvent();
     }).catch((err) => {
         logError(err, app.name);
         dispatchOnErrorEvent(originScript);
@@ -1916,6 +2048,7 @@ function runCode2Function(code, info) {
  * @param info source script info
  */
 function bindScope(url, app, code, info) {
+    // TODO: 增加缓存机制
     if (isPlainObject(microApp.plugins)) {
         code = usePlugins(url, code, app.name, microApp.plugins, info);
     }
@@ -1972,10 +2105,10 @@ function flatChildren(parent, app, microAppHead) {
     });
     for (const dom of children) {
         if (dom instanceof HTMLLinkElement) {
-            if (dom.hasAttribute('exclude')) {
+            if (dom.hasAttribute('exclude') || checkExcludeUrl(dom.getAttribute('href'), app.name)) {
                 parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
             }
-            else if (!dom.hasAttribute('ignore')) {
+            else if (!(dom.hasAttribute('ignore') || checkIgnoreUrl(dom.getAttribute('href'), app.name))) {
                 extractLinkFromHtml(dom, parent, app);
             }
             else if (dom.hasAttribute('href')) {
@@ -2029,34 +2162,6 @@ function extractSourceDom(htmlStr, app) {
         app.onLoad(wrapElement);
     }
 }
-/**
- * Get and format html
- * @param app app
- */
-function extractHtml(app) {
-    fetchSource(app.ssrUrl || app.url, app.name, { cache: 'no-cache' }).then((htmlStr) => {
-        if (!htmlStr) {
-            const msg = 'html is empty, please check in detail';
-            app.onerror(new Error(msg));
-            return logError(msg, app.name);
-        }
-        htmlStr = htmlStr
-            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
-            return match
-                .replace(/<head/i, '<micro-app-head')
-                .replace(/<\/head>/i, '</micro-app-head>');
-        })
-            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
-            return match
-                .replace(/<body/i, '<micro-app-body')
-                .replace(/<\/body>/i, '</micro-app-body>');
-        });
-        extractSourceDom(htmlStr, app);
-    }).catch((e) => {
-        logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, app.name, e);
-        app.onLoadError(e);
-    });
-}
 
 class EventCenter {
     constructor() {
@@ -2339,12 +2444,39 @@ function rebuildDataCenterSnapshot(microAppEventCenter) {
     }
 }
 
+// 管理 app 的单例
+class AppManager {
+    constructor() {
+        // Todo: appInstanceMap 由 AppManager 来创建，不再由 create_app 管理
+        this.appInstanceMap = appInstanceMap;
+    }
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new AppManager();
+        }
+        return this.instance;
+    }
+    get(appName) {
+        return this.appInstanceMap.get(appName);
+    }
+    set(appName, app) {
+        this.appInstanceMap.set(appName, app);
+    }
+    getAll() {
+        return Array.from(this.appInstanceMap.values());
+    }
+    clear() {
+        this.appInstanceMap.clear();
+    }
+}
+
 function unmountNestedApp() {
-    appInstanceMap.forEach(app => {
+    releaseUnmountOfNestedApp();
+    AppManager.getInstance().getAll().forEach(app => {
         // @ts-ignore
         app.container && getRootContainer(app.container).disconnectedCallback();
     });
-    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.clear();
+    !window.__MICRO_APP_UMD_MODE__ && AppManager.getInstance().clear();
 }
 // release listener
 function releaseUnmountOfNestedApp() {
@@ -2556,6 +2688,13 @@ function effect(appName, microAppWindow) {
     let umdIntervalIdMap = new Map();
     let umdTimeoutIdMap = new Map();
     let umdOnClickHandler;
+    const clearUmdSnapshotData = () => {
+        umdWindowListenerMap.clear();
+        umdIntervalIdMap.clear();
+        umdTimeoutIdMap.clear();
+        umdDocumentListenerMap.clear();
+        umdOnClickHandler = null;
+    };
     // record event and timer before exec umdMountHook
     const recordUmdEffect = () => {
         // record window event
@@ -2601,13 +2740,12 @@ function effect(appName, microAppWindow) {
         // rebuild onclick event
         umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
         // rebuild document event
-        setCurrentAppName(appName);
         umdDocumentListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
                 document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
         });
-        setCurrentAppName(null);
+        clearUmdSnapshotData();
     };
     // release all event listener & interval & timeout when unmount app
     const releaseEffect = () => {
@@ -2654,7 +2792,8 @@ function effect(appName, microAppWindow) {
 }
 
 // set micro app state to origin state
-function setMicroState(appName, rawState, microState) {
+function setMicroState(appName, microState) {
+    const rawState = globalEnv.rawWindow.history.state;
     const additionalState = {
         microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
             [appName]: microState
@@ -2677,9 +2816,9 @@ function removeMicroState(appName, rawState) {
     return assign({}, rawState);
 }
 // get micro app state form origin state
-function getMicroState(appName, state) {
-    var _a;
-    return ((_a = state === null || state === void 0 ? void 0 : state.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
+function getMicroState(appName) {
+    var _a, _b;
+    return ((_b = (_a = globalEnv.rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.microAppState) === null || _b === void 0 ? void 0 : _b[appName]) || null;
 }
 const ENC_AD_RE = /&/g; // %M1
 const ENC_EQ_RE = /=/g; // %M2
@@ -2704,7 +2843,8 @@ function commonDecode(path) {
 }
 // 格式化query参数key，防止与原有参数的冲突
 function formatQueryAppName(appName) {
-    return `app-${appName}`;
+    // return `app-${appName}`
+    return appName;
 }
 // 根据浏览器url参数，获取当前子应用的path
 function getMicroPathFromURL(appName) {
@@ -2827,7 +2967,7 @@ function addHistoryListener(appName) {
                 isHashChange = proxyWindow.location.hash !== oldHash;
             }
             // dispatch formatted popStateEvent to child
-            dispatchPopStateEventToMicroApp(appName, proxyWindow, rawWindow.history.state);
+            dispatchPopStateEventToMicroApp(appName, proxyWindow);
             // dispatch formatted hashChangeEvent to child when hash change
             if (isHashChange)
                 dispatchHashChangeEventToMicroApp(appName, proxyWindow, oldHref);
@@ -2846,9 +2986,9 @@ function addHistoryListener(appName) {
  * @param proxyWindow sandbox window
  * @param eventState history.state
  */
-function dispatchPopStateEventToMicroApp(appName, proxyWindow, eventState) {
+function dispatchPopStateEventToMicroApp(appName, proxyWindow) {
     // create PopStateEvent named popstate-appName with sub app state
-    const newPopStateEvent = new PopStateEvent(formatEventName$1('popstate', appName), { state: getMicroState(appName, eventState) });
+    const newPopStateEvent = new PopStateEvent(formatEventName$1('popstate', appName), { state: getMicroState(appName) });
     globalEnv.rawWindow.dispatchEvent(newPopStateEvent);
     // call function window.onpopstate if it exists
     typeof proxyWindow.onpopstate === 'function' && proxyWindow.onpopstate(newPopStateEvent);
@@ -2916,19 +3056,15 @@ function createMicroHistory(appName, microLocation) {
             if (isString(rests[2]) || isURL(rests[2])) {
                 const targetLocation = createURL(rests[2], microLocation.href);
                 if (targetLocation.origin === microLocation.origin) {
-                    navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rawHistory.state, rests[0]), rests[1]);
+                    navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
                     const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
                     if (targetFullPath !== microLocation.fullPath) {
                         updateMicroLocation(appName, targetFullPath, microLocation);
                     }
+                    return void 0;
                 }
-                else {
-                    rawHistory[methodName].apply(rawHistory, rests);
-                }
-            }
-            else {
-                rawHistory[methodName].apply(rawHistory, rests);
             }
+            nativeHistoryNavigate(methodName, rests[2], rests[0], rests[1]);
         };
     }
     const pushState = getMicroHistoryMethod('pushState');
@@ -2936,7 +3072,7 @@ function createMicroHistory(appName, microLocation) {
     return new Proxy(rawHistory, {
         get(target, key) {
             if (key === 'state') {
-                return getMicroState(appName, rawHistory.state);
+                return getMicroState(appName);
             }
             else if (key === 'pushState') {
                 return pushState;
@@ -2946,6 +3082,15 @@ function createMicroHistory(appName, microLocation) {
             }
             const rawValue = Reflect.get(target, key);
             return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'HISTORY') : rawValue;
+        },
+        set(target, key, value) {
+            Reflect.set(target, key, value);
+            /**
+             * If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
+             * e.g. history.state = {}
+             * TypeError: 'set' on proxy: trap returned falsish for property 'state'
+             */
+            return true;
         }
     });
 }
@@ -2957,7 +3102,8 @@ function createMicroHistory(appName, microLocation) {
  * @param title history.title, default is ''
  */
 function nativeHistoryNavigate(methodName, fullPath, state = null, title = '') {
-    globalEnv.rawWindow.history[methodName](state, title, fullPath);
+    const method = methodName === 'pushState' ? globalEnv.rawPushState : globalEnv.rawReplaceState;
+    method.call(globalEnv.rawWindow.history, state, title, fullPath);
 }
 /**
  * Navigate to new path, and dispatch native popStateEvent/hashChangeEvent to browser
@@ -2992,10 +3138,10 @@ function attachRouteToBrowserURL(result, state) {
 }
 /**
  * When path is same, keep the microAppState in history.state
- * Fix bug of missing microAppState in next.js & angular
+ * Fix bug of missing microAppState when base app is next.js or angular
  * @param method history.pushState/replaceState
  */
-function patchHistoryState(method) {
+function reWriteHistoryMethod(method) {
     const rawWindow = globalEnv.rawWindow;
     return function (...rests) {
         var _a;
@@ -3011,22 +3157,38 @@ function patchHistoryState(method) {
             }
         }
         method.apply(rawWindow.history, rests);
+        /**
+         * Attach child router info to browser url when base app navigate with pushState/replaceState
+         * NOTE:
+         * 1. Exec after apply pushState/replaceState
+         * 2. Unable to catch when base app navigate with location
+         * 3. When in nest app, rawPushState/rawReplaceState has been modified by parent
+         * 4.
+         */
+        getActiveApps(true).forEach(appName => {
+            const app = appInstanceMap.get(appName);
+            if (app.sandBox && app.useMemoryRouter && !getMicroPathFromURL(appName)) {
+                attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+            }
+        });
+        // fix bug for nest app
+        removeDomScope();
     };
 }
-let isReWriteHistoryState = false;
 /**
  * rewrite history.pushState/replaceState
  * used to fix the problem that the microAppState maybe missing when mainApp navigate to same path
  * e.g: when nextjs, angular receive popstate event, they will use history.replaceState to update browser url with a new state object
  */
-function rewriteHistoryState() {
-    // filter nest app
-    if (!isReWriteHistoryState && !window.__MICRO_APP_ENVIRONMENT__) {
-        isReWriteHistoryState = true;
-        const rawWindow = globalEnv.rawWindow;
-        rawWindow.history.pushState = patchHistoryState(rawWindow.history.pushState);
-        rawWindow.history.replaceState = patchHistoryState(rawWindow.history.replaceState);
-    }
+function patchHistory() {
+    const rawWindow = globalEnv.rawWindow;
+    rawWindow.history.pushState = reWriteHistoryMethod(globalEnv.rawPushState);
+    rawWindow.history.replaceState = reWriteHistoryMethod(globalEnv.rawReplaceState);
+}
+function releasePatchHistory() {
+    const rawWindow = globalEnv.rawWindow;
+    rawWindow.history.pushState = globalEnv.rawPushState;
+    rawWindow.history.replaceState = globalEnv.rawReplaceState;
 }
 
 function createRouterApi() {
@@ -3038,7 +3200,7 @@ function createRouterApi() {
      * @param state to.state
      */
     function navigateWithRawHistory(appName, methodName, targetLocation, state) {
-        navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, globalEnv.rawWindow.history.state, state !== null && state !== void 0 ? state : null));
+        navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, state !== null && state !== void 0 ? state : null));
         // clear element scope after navigate
         removeDomScope();
     }
@@ -3100,7 +3262,7 @@ function createRouterApi() {
      * NOTE:
      * 1. Modify browser url first, and then run guards,
      *    consistent with the browser forward & back button
-     * 2. Note the element binding
+     * 2. Prevent the element binding
      * @param appName app name
      * @param to target location
      * @param from old location
@@ -3142,7 +3304,7 @@ function createRouterApi() {
     function commonHandlerForAttachToURL(appName) {
         const app = appInstanceMap.get(appName);
         if (app.sandBox && app.useMemoryRouter) {
-            attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, globalEnv.rawWindow.history.state, null));
+            attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
         }
     }
     /**
@@ -3157,21 +3319,24 @@ function createRouterApi() {
     }
     /**
      * Attach all active app router info to browser url
+     * exclude hidden keep-alive app
      */
-    function attachAllToURL() {
-        getActiveApps().forEach(appName => commonHandlerForAttachToURL(appName));
+    function attachAllToURL(includeHiddenApp = false) {
+        getActiveApps(!includeHiddenApp).forEach(appName => commonHandlerForAttachToURL(appName));
     }
     function createDefaultPageApi() {
         // defaultPage data
         const defaultPageRecord = useMapRecord();
         /**
          * defaultPage only effect when mount, and has lower priority than query on browser url
-         * @param appName app name
-         * @param path page path
+         * SetDefaultPageOptions {
+         *   @param name app name
+         *   @param path page path
+         * }
          */
-        function setDefaultPage(appName, path) {
-            appName = formatAppName(appName);
-            if (!appName || !path) {
+        function setDefaultPage(options) {
+            const appName = formatAppName(options.name);
+            if (!appName || !options.path) {
                 if (process.env.NODE_ENV !== 'production') {
                     if (!appName) {
                         logWarn(`setDefaultPage: invalid appName "${appName}"`);
@@ -3182,7 +3347,7 @@ function createRouterApi() {
                 }
                 return noopFalse;
             }
-            return defaultPageRecord.add(appName, path);
+            return defaultPageRecord.add(appName, options.path);
         }
         function removeDefaultPage(appName) {
             appName = formatAppName(appName);
@@ -3208,6 +3373,10 @@ function createRouterApi() {
                         removeDomScope();
                         const rawValue = Reflect.get(target, key);
                         return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'BASEROUTER') : rawValue;
+                    },
+                    set(target, key, value) {
+                        Reflect.set(target, key, value);
+                        return true;
                     }
                 });
             }
@@ -3439,7 +3608,6 @@ function updateMicroLocation(appName, path, microLocation, type) {
  * @returns MicroRouter
  */
 function createMicroRouter(appName, url) {
-    rewriteHistoryState();
     const microLocation = createMicroLocation(appName, url);
     return {
         microLocation,
@@ -3465,7 +3633,7 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     if (defaultPage)
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
     // attach microApp route info to browser URL
-    attachRouteToBrowserURL(setMicroPathToURL(appName, microLocation), setMicroState(appName, globalEnv.rawWindow.history.state, null));
+    attachRouteToBrowserURL(setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -3610,6 +3778,8 @@ class SandBox {
         this.injectedKeys = new Set();
         // Properties escape to rawWindow, cleared when unmount
         this.escapeKeys = new Set();
+        // record injected values before the first execution of umdHookMount and rebuild before remount umd app
+        // private recordUmdInjectedValues?: Map<PropertyKey, unknown>
         // sandbox state
         this.active = false;
         this.microAppWindow = {}; // Proxy target
@@ -3623,7 +3793,8 @@ class SandBox {
         // inject global properties
         this.initStaticGlobalKeys(this.microAppWindow, appName, url, useMemoryRouter);
     }
-    start(baseRoute, useMemoryRouter = true, defaultPage = '') {
+    // TODO: 重构
+    start(umdMode = false, baseRoute = '', useMemoryRouter = true, defaultPage = '', disablePatchRequest = false) {
         if (!this.active) {
             this.active = true;
             if (useMemoryRouter) {
@@ -3634,17 +3805,23 @@ class SandBox {
             else {
                 this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseRoute;
             }
-            // prevent the key deleted during sandBox.stop after rewrite
-            this.initGlobalKeysWhenStart(this.microAppWindow, this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.__MICRO_APP_URL__);
+            /**
+             * 1. prevent the key deleted during sandBox.stop after rewrite
+             * 2. umd mode will not delete any keys during sandBox.stop
+             */
+            if (!umdMode) {
+                this.initGlobalKeysWhenStart(this.microAppWindow, this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.__MICRO_APP_URL__, disablePatchRequest);
+            }
             if (++SandBox.activeCount === 1) {
                 effectDocumentEvent();
                 patchElementPrototypeMethods();
                 initEnvOfNestedApp();
+                patchHistory();
             }
             fixBabelPolyfill6();
         }
     }
-    stop(keepRouteState, clearEventSource) {
+    stop(umdMode, keepRouteState, clearEventSource) {
         if (this.active) {
             this.releaseEffect();
             this.microAppWindow.microApp.clearDataListener();
@@ -3661,37 +3838,41 @@ class SandBox {
              * NOTE:
              *  1. injectedKeys and escapeKeys must be placed at the back
              *  2. if key in initial microAppWindow, and then rewrite, this key will be delete from microAppWindow when stop, and lost when restart
+             *  3. umd mode will not delete global keys
              */
-            this.injectedKeys.forEach((key) => {
-                Reflect.deleteProperty(this.microAppWindow, key);
-            });
-            this.injectedKeys.clear();
-            this.escapeKeys.forEach((key) => {
-                Reflect.deleteProperty(globalEnv.rawWindow, key);
-            });
-            this.escapeKeys.clear();
+            if (!umdMode) {
+                this.injectedKeys.forEach((key) => {
+                    Reflect.deleteProperty(this.microAppWindow, key);
+                });
+                this.injectedKeys.clear();
+                this.escapeKeys.forEach((key) => {
+                    Reflect.deleteProperty(globalEnv.rawWindow, key);
+                });
+                this.escapeKeys.clear();
+            }
             if (--SandBox.activeCount === 0) {
                 releaseEffectDocumentEvent();
                 releasePatches();
+                releasePatchHistory();
             }
             this.active = false;
         }
     }
     // record umd snapshot before the first execution of umdHookMount
     recordUmdSnapshot() {
-        this.microAppWindow.__MICRO_APP_UMD_MODE__ = true;
+        // this.microAppWindow.__MICRO_APP_UMD_MODE__ = true
         this.recordUmdEffect();
         recordDataCenterSnapshot(this.microAppWindow.microApp);
-        this.recordUmdInjectedValues = new Map();
-        this.injectedKeys.forEach((key) => {
-            this.recordUmdInjectedValues.set(key, Reflect.get(this.microAppWindow, key));
-        });
+        // this.recordUmdInjectedValues = new Map<PropertyKey, unknown>()
+        // this.injectedKeys.forEach((key: PropertyKey) => {
+        //   this.recordUmdInjectedValues!.set(key, Reflect.get(this.microAppWindow, key))
+        // })
     }
     // rebuild umd snapshot before remount umd app
     rebuildUmdSnapshot() {
-        this.recordUmdInjectedValues.forEach((value, key) => {
-            Reflect.set(this.proxyWindow, key, value);
-        });
+        // this.recordUmdInjectedValues!.forEach((value: unknown, key: PropertyKey) => {
+        //   Reflect.set(this.proxyWindow, key, value)
+        // })
         this.rebuildUmdEffect();
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
@@ -3841,15 +4022,26 @@ class SandBox {
             this.setMicroAppRouter(microAppWindow, appName, url);
     }
     setProxyDocument(microAppWindow, appName) {
-        const proxyDocument = this.createProxyDocument(appName);
-        rawDefineProperty(microAppWindow, 'document', {
-            configurable: false,
-            enumerable: true,
-            get() {
-                throttleDeferForSetAppName(appName);
-                // return globalEnv.rawDocument
-                return proxyDocument;
+        const { proxyDocument, MicroDocument } = this.createProxyDocument(appName);
+        rawDefineProperties(microAppWindow, {
+            document: {
+                configurable: false,
+                enumerable: true,
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    // return globalEnv.rawDocument
+                    return proxyDocument;
+                },
             },
+            Document: {
+                configurable: false,
+                enumerable: false,
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    // return globalEnv.rawRootDocument
+                    return MicroDocument;
+                },
+            }
         });
     }
     // properties associated with the native window
@@ -3884,11 +4076,13 @@ class SandBox {
      * @param microAppWindow micro window
      * @param appName app name
      * @param url app url
+     * @param disablePatchRequest prevent rewrite request method of child app
      */
-    initGlobalKeysWhenStart(microAppWindow, appName, url) {
+    initGlobalKeysWhenStart(microAppWindow, appName, url, disablePatchRequest) {
         microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
         this.setHijackProperty(microAppWindow, appName);
-        this.patchRequestApi(microAppWindow, appName, url);
+        if (!disablePatchRequest)
+            this.patchRequestApi(microAppWindow, appName, url);
     }
     // set hijack Properties to microAppWindow
     setHijackProperty(microAppWindow, appName) {
@@ -3991,23 +4185,75 @@ class SandBox {
     removeRouteInfoForKeepAliveApp() {
         removeStateAndPathFromBrowser(this.proxyWindow.__MICRO_APP_NAME__);
     }
+    /**
+     * Create new document and Document
+     */
     createProxyDocument(appName) {
+        const rawDocument = globalEnv.rawDocument;
+        const rawRootDocument = globalEnv.rawRootDocument;
         const createElement = function (tagName, options) {
-            const element = globalEnv.rawCreateElement.call(globalEnv.rawDocument, tagName, options);
+            const element = globalEnv.rawCreateElement.call(rawDocument, tagName, options);
             element.__MICRO_APP_NAME__ = appName;
             return element;
         };
-        const proxyDocument = new Proxy(globalEnv.rawDocument, {
+        const proxyDocument = new Proxy(rawDocument, {
             get(target, key) {
                 throttleDeferForSetAppName(appName);
                 throttleDeferForParentNode(proxyDocument);
                 if (key === 'createElement')
                     return createElement;
+                if (key === Symbol.toStringTag)
+                    return 'ProxyDocument';
                 const rawValue = Reflect.get(target, key);
-                return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'DOCUMENT') : rawValue;
+                return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
             },
+            set(target, key, value) {
+                // Fix TypeError: Illegal invocation when set document.title
+                Reflect.set(target, key, value);
+                /**
+                 * If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
+                 */
+                return true;
+            }
         });
-        return proxyDocument;
+        class MicroDocument {
+            static [Symbol.hasInstance](target) {
+                let proto = target;
+                while (proto = Object.getPrototypeOf(proto)) {
+                    if (proto === MicroDocument.prototype) {
+                        return true;
+                    }
+                }
+                return (target === proxyDocument ||
+                    target instanceof rawRootDocument);
+            }
+        }
+        /**
+         * TIP:
+         * 1. child class __proto__, which represents the inherit of the constructor, always points to the parent class
+         * 2. child class prototype.__proto__, which represents the inherit of methods, always points to parent class prototype
+         * e.g.
+         * class B extends A {}
+         * B.__proto__ === A // true
+         * B.prototype.__proto__ === A.prototype // true
+         */
+        Object.setPrototypeOf(MicroDocument, rawRootDocument);
+        // Object.create(rawRootDocument.prototype) will cause MicroDocument and proxyDocument methods not same when exec Document.prototype.xxx = xxx in child app
+        Object.setPrototypeOf(MicroDocument.prototype, new Proxy(rawRootDocument.prototype, {
+            get(target, key) {
+                throttleDeferForSetAppName(appName);
+                const rawValue = Reflect.get(target, key);
+                return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
+            },
+            set(target, key, value) {
+                Reflect.set(target, key, value);
+                return true;
+            }
+        }));
+        return {
+            proxyDocument,
+            MicroDocument,
+        };
     }
 }
 SandBox.activeCount = 0; // number of active sandbox
@@ -4076,7 +4322,7 @@ function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, useMemoryRouter, baseroute, keepRouteState, defaultPage, }) {
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, useMemoryRouter, baseroute, keepRouteState, hiddenRouter, defaultPage, disablePatchRequest, }) {
         this.state = appStates.CREATED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
@@ -4089,18 +4335,20 @@ class CreateApp {
         this.prefetchResolve = null;
         this.container = null;
         this.sandBox = null;
-        this.container = container !== null && container !== void 0 ? container : null;
-        this.inline = inline !== null && inline !== void 0 ? inline : false;
-        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : '';
-        this.keepRouteState = keepRouteState !== null && keepRouteState !== void 0 ? keepRouteState : false;
-        this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
-        // optional during init👆
         this.name = name;
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
         this.useMemoryRouter = this.useSandbox && useMemoryRouter;
+        // optional during init base on prefetch 👇
+        this.container = container !== null && container !== void 0 ? container : null;
+        this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
+        this.inline = inline !== null && inline !== void 0 ? inline : false;
+        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : '';
+        this.keepRouteState = keepRouteState !== null && keepRouteState !== void 0 ? keepRouteState : false;
+        this.hiddenRouter = hiddenRouter !== null && hiddenRouter !== void 0 ? hiddenRouter : false;
         this.defaultPage = defaultPage !== null && defaultPage !== void 0 ? defaultPage : '';
+        this.disablePatchRequest = disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : false;
         this.source = {
             links: new Map(),
             scripts: new Map(),
@@ -4111,7 +4359,7 @@ class CreateApp {
     // Load resources
     loadSourceCode() {
         this.state = appStates.LOADING;
-        extractHtml(this);
+        HTMLLoader.getInstance().run(this, extractSourceDom);
     }
     /**
      * When resource is loaded, mount app if it is not prefetch or unmount
@@ -4151,17 +4399,17 @@ class CreateApp {
      * @param inline js runs in inline mode
      * @param baseroute route prefix, default is ''
      * @param keepRouteState keep route state when unmount, default is false
+     * @param disablePatchRequest prevent rewrite request method of child app
      */
-    mount(container, inline, baseroute, keepRouteState, defaultPage) {
+    mount(container, inline, baseroute, keepRouteState, defaultPage, hiddenRouter, disablePatchRequest) {
         var _a, _b, _c;
-        if (isBoolean(inline))
-            this.inline = inline;
-        // keepRouteState effective on unmount
-        if (isBoolean(keepRouteState))
-            this.keepRouteState = keepRouteState;
+        this.inline = inline !== null && inline !== void 0 ? inline : this.inline;
+        this.keepRouteState = keepRouteState !== null && keepRouteState !== void 0 ? keepRouteState : this.keepRouteState;
         this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
         this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
         this.defaultPage = defaultPage !== null && defaultPage !== void 0 ? defaultPage : this.defaultPage;
+        this.hiddenRouter = hiddenRouter !== null && hiddenRouter !== void 0 ? hiddenRouter : this.hiddenRouter;
+        this.disablePatchRequest = disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : this.disablePatchRequest;
         if (this.loadSourceLevel !== 2) {
             this.state = appStates.LOADING;
             return;
@@ -4169,21 +4417,26 @@ class CreateApp {
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
         this.state = appStates.MOUNTING;
         cloneContainer(this.source.html, this.container, !this.umdMode);
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute, this.useMemoryRouter, this.defaultPage);
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.umdMode, this.baseroute, this.useMemoryRouter, this.defaultPage, this.disablePatchRequest);
         let umdHookMountResult; // result of mount function
         if (!this.umdMode) {
             let hasDispatchMountedEvent = false;
             // if all js are executed, param isFinished will be true
             execScripts(this.source.scripts, this, (isFinished) => {
-                var _a;
                 if (!this.umdMode) {
                     const { mount, unmount } = this.getUmdLibraryHooks();
+                    /**
+                     * umdHookUnmount can works in non UMD mode
+                     * register with window.unmount
+                     */
+                    this.umdHookUnmount = unmount;
                     // if mount & unmount is function, the sub app is umd mode
                     if (isFunction(mount) && isFunction(unmount)) {
                         this.umdHookMount = mount;
-                        this.umdHookUnmount = unmount;
                         this.umdMode = true;
-                        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
+                        if (this.sandBox)
+                            this.sandBox.proxyWindow.__MICRO_APP_UMD_MODE__ = true;
+                        // this.sandBox?.recordUmdSnapshot()
                         try {
                             umdHookMountResult = this.umdHookMount();
                         }
@@ -4251,7 +4504,7 @@ class CreateApp {
          * send an unmount event to the micro app or call umd unmount hook
          * before the sandbox is cleared
          */
-        if (this.umdHookUnmount) {
+        if (isFunction(this.umdHookUnmount)) {
             try {
                 umdHookUnmountResult = this.umdHookUnmount();
             }
@@ -4285,20 +4538,23 @@ class CreateApp {
      * @param unmountcb callback of unmount
      */
     actionsForUnmount(destroy, unmountcb) {
-        var _a;
+        var _a, _b;
         if (destroy) {
             this.actionsForCompletelyDestroy();
         }
         else if (this.umdMode && this.container.childElementCount) {
             cloneContainer(this.container, this.source.html, false);
         }
+        if (this.umdMode) {
+            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
+        }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
          * NOTE:
          * 1. if destroy is true, clear route state
          * 2. umd mode and keep-alive will not clear EventSource
          */
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop(this.keepRouteState && !destroy, !this.umdMode || destroy);
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.stop(this.umdMode, this.keepRouteState && !destroy, !this.umdMode || destroy);
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
         }
@@ -4370,13 +4626,18 @@ class CreateApp {
     }
     // get umd library, if it not exist, return empty object
     getUmdLibraryHooks() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         // after execScripts, the app maybe unmounted
         if (appStates.UNMOUNT !== this.state) {
             const global = ((_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) !== null && _b !== void 0 ? _b : globalEnv.rawWindow);
             this.libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
-            // do not use isObject
-            return typeof global[this.libraryName] === 'object' ? global[this.libraryName] : {};
+            if (isObject(global[this.libraryName])) {
+                return global[this.libraryName];
+            }
+            return {
+                mount: (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.proxyWindow.mount,
+                unmount: (_d = this.sandBox) === null || _d === void 0 ? void 0 : _d.proxyWindow.unmount,
+            };
         }
         return {};
     }
@@ -4436,6 +4697,7 @@ function defineElement(tagName) {
                     this.setAttribute('name', this.appName);
                 }
             };
+            // patchSetAttribute hijiack data attribute, it needs exec first
             patchSetAttribute();
         }
         static get observedAttributes() {
@@ -4612,7 +4874,7 @@ function defineElement(tagName) {
             app.isPrefetch = false;
             defer(() => {
                 var _a;
-                return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), this.getBaseRouteCompatible(), this.getDisposeResult('keep-router-state'), this.getDefaultPageValue());
+                return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), this.getBaseRouteCompatible(), this.getDisposeResult('keep-router-state'), this.getDefaultPageValue(), this.getDisposeResult('hidden-router'), this.getDisposeResult('disable-patch-request'));
             });
         }
         // create app instance
@@ -4631,12 +4893,14 @@ function defineElement(tagName) {
                 ssrUrl: this.ssrUrl,
                 container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
                 inline: this.getDisposeResult('inline'),
-                scopecss: !(this.getDisposeResult('disableScopecss') || this.getDisposeResult('shadowDOM')),
-                useSandbox: !this.getDisposeResult('disableSandbox'),
+                scopecss: !(this.getDisposeResult('disable-scopecss') || this.getDisposeResult('shadowDOM')),
+                useSandbox: !this.getDisposeResult('disable-sandbox'),
                 useMemoryRouter: !this.getDisposeResult('disable-memory-router'),
                 baseroute: this.getBaseRouteCompatible(),
                 keepRouteState: this.getDisposeResult('keep-router-state'),
                 defaultPage: this.getDefaultPageValue(),
+                hiddenRouter: this.getDisposeResult('hidden-router'),
+                disablePatchRequest: this.getDisposeResult('disable-patch-request'),
             });
             appInstanceMap.set(this.appName, instance);
         }
@@ -4671,25 +4935,25 @@ function defineElement(tagName) {
          */
         getDisposeResult(name) {
             // @ts-ignore
-            return (this.compatibleSpecialProperties(name) || microApp[name]) && this.compatibleDisableSpecialProperties(name);
+            return (this.compatibleSpecialProperties(name) || !!microApp[name]) && this.compatibleDisableSpecialProperties(name);
         }
         // compatible of disableScopecss & disableSandbox
         compatibleSpecialProperties(name) {
-            if (name === 'disableScopecss') {
-                return this.hasAttribute('disableScopecss') || this.hasAttribute('disable-scopecss');
+            if (name === 'disable-scopecss') {
+                return this.hasAttribute('disable-scopecss') || this.hasAttribute('disableScopecss');
             }
-            else if (name === 'disableSandbox') {
-                return this.hasAttribute('disableSandbox') || this.hasAttribute('disable-sandbox');
+            else if (name === 'disable-sandbox') {
+                return this.hasAttribute('disable-sandbox') || this.hasAttribute('disableSandbox');
             }
             return this.hasAttribute(name);
         }
         // compatible of disableScopecss & disableSandbox
         compatibleDisableSpecialProperties(name) {
-            if (name === 'disableScopecss') {
-                return this.getAttribute('disableScopecss') !== 'false' && this.getAttribute('disable-scopecss') !== 'false';
+            if (name === 'disable-scopecss') {
+                return this.getAttribute('disable-scopecss') !== 'false' && this.getAttribute('disableScopecss') !== 'false';
             }
-            else if (name === 'disableSandbox') {
-                return this.getAttribute('disableSandbox') !== 'false' && this.getAttribute('disable-sandbox') !== 'false';
+            else if (name === 'disable-sandbox') {
+                return this.getAttribute('disable-sandbox') !== 'false' && this.getAttribute('disableSandbox') !== 'false';
             }
             return this.getAttribute(name) !== 'false';
         }
@@ -4801,7 +5065,7 @@ function preFetch(apps) {
 function preFetchInSerial(prefetchApp) {
     return new Promise((resolve) => {
         requestIdleCallback(() => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             if (isPlainObject(prefetchApp) && navigator.onLine) {
                 prefetchApp.name = formatAppName(prefetchApp.name);
                 prefetchApp.url = formatAppURL(prefetchApp.url, prefetchApp.name);
@@ -4809,9 +5073,9 @@ function preFetchInSerial(prefetchApp) {
                     const app = new CreateApp({
                         name: prefetchApp.name,
                         url: prefetchApp.url,
-                        scopecss: !((_a = prefetchApp.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
-                        useSandbox: !((_b = prefetchApp.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
-                        useMemoryRouter: !((_c = prefetchApp.disableMemoryRouter) !== null && _c !== void 0 ? _c : microApp.disableMemoryRouter),
+                        scopecss: !((_b = (_a = prefetchApp['disable-scopecss']) !== null && _a !== void 0 ? _a : prefetchApp.disableScopecss) !== null && _b !== void 0 ? _b : microApp['disable-scopecss']),
+                        useSandbox: !((_d = (_c = prefetchApp['disable-sandbox']) !== null && _c !== void 0 ? _c : prefetchApp.disableSandbox) !== null && _d !== void 0 ? _d : microApp['disable-sandbox']),
+                        useMemoryRouter: !((_e = prefetchApp['disable-memory-router']) !== null && _e !== void 0 ? _e : microApp['disable-memory-router']),
                     });
                     app.isPrefetch = true;
                     app.prefetchResolve = resolve;
@@ -4861,7 +5125,7 @@ function fetchGlobalResources(resources, suffix, cache) {
  * @param excludeHiddenApp exclude hidden keep-alive app, default is false
  * @returns active apps
  */
-function getActiveApps(excludeHiddenApp) {
+function getActiveApps(excludeHiddenApp = false) {
     const activeApps = [];
     appInstanceMap.forEach((app, appName) => {
         if (appStates.UNMOUNT !== app.getAppState() &&
@@ -4957,6 +5221,7 @@ class MicroApp extends EventCenterForBaseApp {
         this.router = router;
     }
     start(options) {
+        var _a, _b;
         if (!isBrowser || !window.customElements) {
             return logError('micro-app is not supported in this environment');
         }
@@ -4982,9 +5247,13 @@ class MicroApp extends EventCenterForBaseApp {
             // @ts-ignore
             this.destory = options.destory;
             this.inline = options.inline;
-            this.disableScopecss = options.disableScopecss;
-            this.disableSandbox = options.disableSandbox;
-            this.disableMemoryRouter = options.disableMemoryRouter;
+            this['disable-scopecss'] = (_a = options['disable-scopecss']) !== null && _a !== void 0 ? _a : options.disableScopecss;
+            this['disable-sandbox'] = (_b = options['disable-sandbox']) !== null && _b !== void 0 ? _b : options.disableSandbox;
+            this['disable-memory-router'] = options['disable-memory-router'];
+            this['disable-patch-request'] = options['disable-patch-request'];
+            this['keep-router-state'] = options['keep-router-state'];
+            this['hidden-router'] = options['hidden-router'];
+            this.esmodule = options.esmodule;
             this.ssr = options.ssr;
             isFunction(options.fetch) && (this.fetch = options.fetch);
             isPlainObject(options.lifeCycles) && (this.lifeCycles = options.lifeCycles);