@micro-zoe/micro-app 1.0.0-alpha.1 → 1.0.0-alpha.4

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.1';
+const version = '1.0.0-alpha.4';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -41,6 +41,10 @@ function isFunction(target) {
 function isPlainObject(target) {
     return toString.call(target) === '[object Object]';
 }
+// is Object
+function isObject(target) {
+    return typeof target === 'object';
+}
 // is Promise
 function isPromise(target) {
     return toString.call(target) === '[object Promise]';
@@ -49,6 +53,18 @@ function isPromise(target) {
 function isBoundFunction(target) {
     return isFunction(target) && target.name.indexOf('bound ') === 0 && !target.hasOwnProperty('prototype');
 }
+// is constructor function
+function isConstructor(target) {
+    var _a;
+    if (isFunction(target)) {
+        const targetStr = target.toString();
+        return (((_a = target.prototype) === null || _a === void 0 ? void 0 : _a.constructor) === target &&
+            Object.getOwnPropertyNames(target.prototype).length > 1) ||
+            /^function\s+[A-Z]/.test(targetStr) ||
+            /^class\s+/.test(targetStr);
+    }
+    return false;
+}
 // is ShadowRoot
 function isShadowRoot(target) {
     return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot;
@@ -56,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
@@ -270,6 +290,7 @@ function pureCreateElement(tagName, options) {
     const element = document.createElement(tagName, options);
     if (element.__MICRO_APP_NAME__)
         delete element.__MICRO_APP_NAME__;
+    element.__PURE_ELEMENT__ = true;
     return element;
 }
 /**
@@ -465,14 +486,82 @@ const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,
  * @param config fetch options
  */
 function fetchSource(url, appName = null, options = {}) {
+    /**
+     * When child navigate to new async page, click event will scope dom to child and then fetch new source
+     * this may cause error when fetch rewrite by baseApp
+     * e.g.
+     * baseApp: <script crossorigin src="https://sgm-static.jd.com/sgm-2.8.0.js" name="SGMH5" sid="6f88a6e4ba4b4ae5acef2ec22c075085" appKey="jdb-adminb2b-pc"></script>
+     */
+    removeDomScope();
     if (isFunction(microApp.fetch)) {
         return microApp.fetch(url, options, appName);
     }
-    return fetch(url, options).then((res) => {
+    // Don’t use globalEnv.rawWindow.fetch, will cause sgm-2.8.0.js throw error in nest app
+    return window.fetch(url, options).then((res) => {
         return res.text();
     });
 }
 
+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>~[.#:]+|$)/;
@@ -551,7 +640,7 @@ class CSSParser {
         return true;
     }
     formatSelector(skip) {
-        const m = this.commonMatch(/^([^{]+)/, skip);
+        const m = this.commonMatch(/^[^{]+/, skip);
         if (!m)
             return false;
         return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
@@ -631,7 +720,7 @@ class CSSParser {
     keyframesRule() {
         if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/))
             return false;
-        if (!this.commonMatch(/^([-\w]+)\s*/))
+        if (!this.commonMatch(/^[^{]+/))
             return parseError('@keyframes missing name', this.linkPath);
         this.matchComments();
         if (!this.matchOpenBrace())
@@ -783,7 +872,7 @@ class CSSParser {
     }
     // splice string
     recordResult(strFragment) {
-        // Firefox is slow when string contain special characters, see https://github.com/micro-zoe/micro-app/issues/256
+        // Firefox performance degradation when string contain special characters, see https://github.com/micro-zoe/micro-app/issues/256
         if (isFireFox()) {
             this.result += encodeURIComponent(strFragment);
         }
@@ -1071,6 +1160,27 @@ function fixReactHMRConflict(app) {
         }
     }
 }
+/**
+ * reDefine parentNode of html
+ * Scenes:
+ *  1. element-ui popover.js
+ *     if (html.parentNode === document) ...
+ */
+function throttleDeferForParentNode(proxyDocument) {
+    const html = globalEnv.rawDocument.firstElementChild;
+    if (html && html.parentNode !== proxyDocument) {
+        setRootParentNode(html, proxyDocument);
+        defer(() => {
+            setRootParentNode(html, globalEnv.rawDocument);
+        });
+    }
+}
+function setRootParentNode(root, value) {
+    Object.defineProperty(root, 'parentNode', {
+        value,
+        configurable: true,
+    });
+}
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
@@ -1093,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);
@@ -1208,20 +1318,35 @@ function getMappingNode(node) {
  * @param rawMethod method
  */
 function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
-    if (newChild === null || newChild === void 0 ? void 0 : newChild.__MICRO_APP_NAME__) {
+    const currentAppName = getCurrentAppName();
+    if (newChild instanceof Node &&
+        (newChild.__MICRO_APP_NAME__ ||
+            (currentAppName && !newChild.__PURE_ELEMENT__))) {
+        newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
         if (app === null || app === void 0 ? void 0 : app.container) {
+            if (newChild instanceof Element) {
+                if (/^(img|script)$/i.test(newChild.tagName)) {
+                    if (newChild.hasAttribute('src')) {
+                        globalEnv.rawSetAttribute.call(newChild, 'src', CompletionPath(newChild.getAttribute('src'), app.url));
+                    }
+                    if (newChild.hasAttribute('srcset')) {
+                        globalEnv.rawSetAttribute.call(newChild, 'srcset', CompletionPath(newChild.getAttribute('srcset'), app.url));
+                    }
+                }
+                else if (/^link$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
+                    globalEnv.rawSetAttribute.call(newChild, 'href', CompletionPath(newChild.getAttribute('href'), app.url));
+                }
+            }
             return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(parent, newChild, app), passiveChild && getMappingNode(passiveChild));
         }
         else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
             return rawMethod.call(parent, newChild);
         }
-        return rawMethod.call(parent, newChild, passiveChild);
     }
     else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        const appName = getCurrentAppName();
-        if (!(newChild instanceof Node) && appName) {
-            const app = appInstanceMap.get(appName);
+        if (!(newChild instanceof Node) && currentAppName) {
+            const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
                 if (parent === document.head) {
                     return rawMethod.call(app.container.querySelector('micro-app-head'), newChild);
@@ -1267,12 +1392,18 @@ function patchElementPrototypeMethods() {
     };
     // prototype methods of delete element👇
     Element.prototype.removeChild = function removeChild(oldChild) {
+        var _a;
         if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
             const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
                 return invokePrototypeMethod(app, globalEnv.rawRemoveChild, this, getMappingNode(oldChild));
             }
-            return globalEnv.rawRemoveChild.call(this, oldChild);
+            try {
+                return globalEnv.rawRemoveChild.call(this, oldChild);
+            }
+            catch (_b) {
+                return (_a = oldChild === null || oldChild === void 0 ? void 0 : oldChild.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(oldChild);
+            }
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
     };
@@ -1288,109 +1419,120 @@ function patchElementPrototypeMethods() {
  * @param element new element
  */
 function markElement(element) {
-    const appName = getCurrentAppName();
-    if (appName)
-        element.__MICRO_APP_NAME__ = appName;
+    const currentAppName = getCurrentAppName();
+    if (currentAppName)
+        element.__MICRO_APP_NAME__ = currentAppName;
     return 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 appName = getCurrentAppName();
-        if (!appName ||
-            !((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) ||
+        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(appName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelector(selectors)) !== null && _d !== void 0 ? _d : null;
+        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 appName = getCurrentAppName();
-        if (!appName ||
-            !((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) ||
+        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(appName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll(selectors)) !== null && _d !== void 0 ? _d : [];
+        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 appName = getCurrentAppName();
-        if (!appName ||
+        const _this = getBindTarget(this);
+        const currentAppName = getCurrentAppName();
+        if (!currentAppName ||
             isUniqueElement(key) ||
             isInvalidQuerySelectorKey(key) ||
-            (!((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
-            return globalEnv.rawGetElementsByTagName.call(this, key);
+            (!((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(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() {
@@ -1401,9 +1543,9 @@ function patchSetAttribute() {
         if (/^micro-app(-\S+)?/i.test(this.tagName) && key === 'data') {
             if (isPlainObject(value)) {
                 const cloneValue = {};
-                Object.getOwnPropertyNames(value).forEach((key) => {
-                    if (!(isString(key) && key.indexOf('__') === 0)) {
-                        cloneValue[key] = value[key];
+                Object.getOwnPropertyNames(value).forEach((ownKey) => {
+                    if (!(isString(ownKey) && ownKey.indexOf('__') === 0)) {
+                        cloneValue[ownKey] = value[ownKey];
                     }
                 });
                 this.data = cloneValue;
@@ -1412,36 +1554,34 @@ function patchSetAttribute() {
                 logWarn('property data must be an object', this.getAttribute('name'));
             }
         }
-        else if ((((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
-            (key === 'href' && /^link$/i.test(this.tagName))) &&
-            this.__MICRO_APP_NAME__ &&
-            appInstanceMap.has(this.__MICRO_APP_NAME__)) {
-            const app = appInstanceMap.get(this.__MICRO_APP_NAME__);
-            globalEnv.rawSetAttribute.call(this, key, CompletionPath(value, app.url));
-        }
         else {
+            const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
+            if (appName &&
+                appInstanceMap.has(appName) &&
+                (((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
+                    (key === 'href' && /^link$/i.test(this.tagName)))) {
+                const app = appInstanceMap.get(appName);
+                value = CompletionPath(value, app.url);
+            }
             globalEnv.rawSetAttribute.call(this, key, value);
         }
     };
 }
-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;
@@ -1451,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() {
@@ -1470,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
@@ -1482,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);
@@ -1498,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
@@ -1511,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,
@@ -1535,10 +1688,6 @@ function initGlobalEnv() {
             rawGetElementsByTagName,
             rawGetElementsByName,
             ImageProxy,
-            // common global vars
-            rawWindow,
-            rawDocument,
-            supportModuleScript,
             // sandbox/effect
             rawWindowAddEventListener,
             rawWindowRemoveEventListener,
@@ -1548,6 +1697,8 @@ function initGlobalEnv() {
             rawClearTimeout,
             rawDocumentAddEventListener,
             rawDocumentRemoveEventListener,
+            rawPushState,
+            rawReplaceState,
         });
         // global effect
         rejectMicroAppStyle();
@@ -1566,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) ||
@@ -1578,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,
@@ -1628,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
@@ -1768,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)) {
@@ -1800,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);
@@ -1848,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);
     }
@@ -1904,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')) {
@@ -1961,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() {
@@ -2271,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() {
@@ -2286,7 +2486,7 @@ function releaseUnmountOfNestedApp() {
 }
 // if micro-app run in micro application, delete all next generation application when unmount event received
 // unmount event will auto release by sandbox
-function listenUmountOfNestedApp() {
+function initEnvOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
         releaseUnmountOfNestedApp();
         window.addEventListener('unmount', unmountNestedApp, false);
@@ -2299,35 +2499,30 @@ function isBoundedFunction(value) {
         return value.__MICRO_APP_IS_BOUND_FUNCTION__;
     return value.__MICRO_APP_IS_BOUND_FUNCTION__ = isBoundFunction(value);
 }
-function isConstructor(value) {
-    var _a;
+function isConstructorFunction(value) {
     if (isBoolean(value.__MICRO_APP_IS_CONSTRUCTOR__))
         return value.__MICRO_APP_IS_CONSTRUCTOR__;
-    const valueStr = value.toString();
-    const result = (((_a = value.prototype) === null || _a === void 0 ? void 0 : _a.constructor) === value &&
-        Object.getOwnPropertyNames(value.prototype).length > 1) ||
-        /^function\s+[A-Z]/.test(valueStr) ||
-        /^class\s+/.test(valueStr);
-    return value.__MICRO_APP_IS_CONSTRUCTOR__ = result;
+    return value.__MICRO_APP_IS_CONSTRUCTOR__ = isConstructor(value);
 }
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawWindow(rawWindow, value) {
-    if (value.__MICRO_APP_BOUND_WINDOW_FUNCTION__)
-        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION__;
-    if (!isConstructor(value) && !isBoundedFunction(value)) {
-        const bindRawWindowValue = value.bind(rawWindow);
+function bindFunctionToRawObject(rawObject, value, key = 'WINDOW') {
+    const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
+    if (value[cacheKey])
+        return value[cacheKey];
+    if (!isConstructorFunction(value) && !isBoundedFunction(value)) {
+        const bindRawObjectValue = value.bind(rawObject);
         for (const key in value) {
-            bindRawWindowValue[key] = value[key];
+            bindRawObjectValue[key] = value[key];
         }
         if (value.hasOwnProperty('prototype')) {
-            rawDefineProperty(bindRawWindowValue, 'prototype', {
+            rawDefineProperty(bindRawObjectValue, 'prototype', {
                 value: value.prototype,
                 configurable: true,
                 enumerable: false,
                 writable: true,
             });
         }
-        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION__ = bindRawWindowValue;
+        return value[cacheKey] = bindRawObjectValue;
     }
     return value;
 }
@@ -2493,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
@@ -2538,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 = () => {
@@ -2591,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
@@ -2614,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
@@ -2641,7 +2843,8 @@ function commonDecode(path) {
 }
 // 格式化query参数key，防止与原有参数的冲突
 function formatQueryAppName(appName) {
-    return `app-${appName}`;
+    // return `app-${appName}`
+    return appName;
 }
 // 根据浏览器url参数，获取当前子应用的path
 function getMicroPathFromURL(appName) {
@@ -2746,7 +2949,10 @@ function addHistoryListener(appName) {
     const rawWindow = globalEnv.rawWindow;
     // handle popstate event and distribute to child app
     const popStateHandler = (e) => {
-        // exclude hidden keep-alive app
+        /**
+         * 1. unmount app & hidden keep-alive app will not receive popstate event
+         * 2. filter out onlyForBrowser
+         */
         if (getActiveApps(true).includes(appName) && !e.onlyForBrowser) {
             const microPath = getMicroPathFromURL(appName);
             const app = appInstanceMap.get(appName);
@@ -2761,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);
@@ -2780,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);
@@ -2847,37 +3053,44 @@ function createMicroHistory(appName, microLocation) {
     const rawHistory = globalEnv.rawWindow.history;
     function getMicroHistoryMethod(methodName) {
         return function (...rests) {
-            if ((methodName === 'pushState' || methodName === 'replaceState') &&
-                (isString(rests[2]) || isURL(rests[2]))) {
+            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');
+    const replaceState = getMicroHistoryMethod('replaceState');
     return new Proxy(rawHistory, {
         get(target, key) {
             if (key === 'state') {
-                return getMicroState(appName, rawHistory.state);
+                return getMicroState(appName);
+            }
+            else if (key === 'pushState') {
+                return pushState;
             }
-            else if (isFunction(Reflect.get(target, key))) {
-                return getMicroHistoryMethod(key);
+            else if (key === 'replaceState') {
+                return replaceState;
             }
-            return Reflect.get(target, key);
+            const rawValue = Reflect.get(target, key);
+            return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'HISTORY') : rawValue;
         },
         set(target, key, value) {
-            return Reflect.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;
         }
     });
 }
@@ -2889,12 +3102,13 @@ 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
  * Use scenes:
- * 1. mount/unmount through updateBrowserURL with limited popstateEvent
+ * 1. mount/unmount through attachRouteToBrowserURL with limited popstateEvent
  * 2. proxyHistory.pushState/replaceState with limited popstateEvent
  * 3. api microApp.router.push/replace
  * 4. proxyLocation.hash = xxx
@@ -2914,19 +3128,20 @@ function navigateWithNativeEvent(methodName, result, onlyForBrowser, state, titl
         dispatchNativeEvent(onlyForBrowser, oldHref);
 }
 /**
- * update browser url when mount/unmount/hidden/show
+ * update browser url when mount/unmount/hidden/show/attachToURL/attachAllToURL
+ * just attach microRoute info to browser, dispatch event to base app(exclude child)
  * @param result result of add/remove microApp path on browser url
  * @param state history.state
  */
-function updateBrowserURL(result, state) {
+function attachRouteToBrowserURL(result, state) {
     navigateWithNativeEvent('replaceState', result, true, 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;
@@ -2942,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() {
@@ -2969,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();
     }
@@ -2984,11 +3215,11 @@ function createRouterApi() {
     function createNavigationMethod(replace) {
         return function (to) {
             const appName = formatAppName(to.name);
-            // console.log(3333333, appInstanceMap.get(appName))
             if (appName && isString(to.path)) {
                 const app = appInstanceMap.get(appName);
-                if (app && !app.sandBox)
-                    return logError(`navigation failed, sandBox of app ${appName} is closed`);
+                if (app && (!app.sandBox || !app.useMemoryRouter)) {
+                    return logError(`navigation failed, memory router of app ${appName} is closed`);
+                }
                 // active apps, include hidden keep-alive app
                 if (getActiveApps().includes(appName)) {
                     const microLocation = app.sandBox.proxyWindow.location;
@@ -3031,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
@@ -3065,43 +3296,102 @@ function createRouterApi() {
     function clearRouterWhenUnmount(appName) {
         router.current.delete(appName);
     }
-    // defaultPage data
-    const defaultPageRecord = useMapRecord();
     /**
-     * defaultPage只在子应用初始化时生效，且优先级比浏览器上的子应用路由地址低
+     * NOTE:
+     * 1. sandbox not open
+     * 2. useMemoryRouter is false
+     */
+    function commonHandlerForAttachToURL(appName) {
+        const app = appInstanceMap.get(appName);
+        if (app.sandBox && app.useMemoryRouter) {
+            attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+        }
+    }
+    /**
+     * Attach specified active app router info to browser url
      * @param appName app name
-     * @param path page path
      */
-    function setDefaultPage(appName, path) {
+    function attachToURL(appName) {
         appName = formatAppName(appName);
-        if (!appName)
-            return noopFalse;
-        return defaultPageRecord.add(appName, path);
+        if (appName && getActiveApps().includes(appName)) {
+            commonHandlerForAttachToURL(appName);
+        }
     }
-    function removeDefaultPage(appName) {
-        appName = formatAppName(appName);
-        if (!appName)
-            return false;
-        return defaultPageRecord.delete(appName);
+    /**
+     * Attach all active app router info to browser url
+     * exclude hidden keep-alive app
+     */
+    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
+         * SetDefaultPageOptions {
+         *   @param name app name
+         *   @param path page 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}"`);
+                    }
+                    else {
+                        logWarn('setDefaultPage: path is required');
+                    }
+                }
+                return noopFalse;
+            }
+            return defaultPageRecord.add(appName, options.path);
+        }
+        function removeDefaultPage(appName) {
+            appName = formatAppName(appName);
+            if (!appName)
+                return false;
+            return defaultPageRecord.delete(appName);
+        }
+        return {
+            setDefaultPage,
+            removeDefaultPage,
+            getDefaultPage: defaultPageRecord.get,
+        };
+    }
+    function createBaseRouterApi() {
+        /**
+         * Record base app router, let child app control base app navigation
+         */
+        let baseRouterProxy = null;
+        function setBaseAppRouter(baseRouter) {
+            if (isObject(baseRouter)) {
+                baseRouterProxy = new Proxy(baseRouter, {
+                    get(target, key) {
+                        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;
+                    }
+                });
+            }
+            else if (process.env.NODE_ENV !== 'production') {
+                logWarn('setBaseAppRouter: Invalid base router');
+            }
+        }
+        return {
+            setBaseAppRouter,
+            getBaseAppRouter: () => baseRouterProxy,
+        };
     }
     // Router API for developer
-    const router = {
-        current: new Map(),
-        encode: encodeMicroPath,
-        decode: decodeMicroPath,
-        push: createNavigationMethod(false),
-        replace: createNavigationMethod(true),
-        go: createRawHistoryMethod('go'),
-        back: createRawHistoryMethod('back'),
-        forward: createRawHistoryMethod('forward'),
-        beforeEach: beforeGuards.add,
-        afterEach: afterGuards.add,
-        // attachToURL: 将指定的子应用路由信息添加到浏览器地址上
-        // attachAllToURL: 将所有正在运行的子应用路由信息添加到浏览器地址上
-        setDefaultPage,
-        removeDefaultPage,
-        getDefaultPage: defaultPageRecord.get,
-    };
+    const router = Object.assign(Object.assign({ current: new Map(), encode: encodeMicroPath, decode: decodeMicroPath, push: createNavigationMethod(false), replace: createNavigationMethod(true), go: createRawHistoryMethod('go'), back: createRawHistoryMethod('back'), forward: createRawHistoryMethod('forward'), beforeEach: beforeGuards.add, afterEach: afterGuards.add, attachToURL,
+        attachAllToURL }, createDefaultPageApi()), createBaseRouterApi());
     return {
         router,
         executeNavigationGuard,
@@ -3115,56 +3405,6 @@ const shadowLocationKeys = ['href', 'pathname', 'search', 'hash'];
 const locationKeys = [...shadowLocationKeys, 'host', 'hostname', 'port', 'protocol', 'search'];
 // origin, fullPath is necessary for guardLocation
 const guardLocationKeys = [...locationKeys, 'origin', 'fullPath'];
-/**
- * create guardLocation by microLocation, used for router guard
- */
-function createGuardLocation(appName, microLocation) {
-    const guardLocation = assign({ name: appName }, microLocation);
-    // The prototype values on the URL needs to be manually transferred
-    for (const key of guardLocationKeys)
-        guardLocation[key] = microLocation[key];
-    return guardLocation;
-}
-// for updateBrowserURLWithLocation when initial
-function autoTriggerNavigationGuard(appName, microLocation) {
-    executeNavigationGuard(appName, createGuardLocation(appName, microLocation), createGuardLocation(appName, microLocation));
-}
-/**
- * The following scenes will trigger location update:
- * 1. pushState/replaceState
- * 2. popStateEvent
- * 3. query on browser url when init sub app
- * 4. set defaultPage when when init sub app
- * NOTE:
- * 1. update browser URL first, and then update microLocation
- * 2. the same fullPath will not trigger router guards
- * @param appName app name
- * @param path target path
- * @param base base url
- * @param microLocation micro app location
- * @param type auto prevent
- */
-function updateMicroLocation(appName, path, microLocation, type) {
-    const newLocation = createURL(path, microLocation.href);
-    // record old values of microLocation to `from`
-    const from = createGuardLocation(appName, microLocation);
-    for (const key of locationKeys) {
-        if (shadowLocationKeys.includes(key)) {
-            // reference of shadowLocation
-            microLocation.shadowLocation[key] = newLocation[key];
-        }
-        else {
-            // @ts-ignore reference of microLocation
-            microLocation[key] = newLocation[key];
-        }
-    }
-    // update latest values of microLocation to `to`
-    const to = createGuardLocation(appName, microLocation);
-    // The hook called only when fullPath changed
-    if (type === 'auto' || (from.fullPath !== to.fullPath && type !== 'prevent')) {
-        executeNavigationGuard(appName, to, from);
-    }
-}
 /**
  * Create location for microApp, each microApp has only one location object, it is a reference type
  * MDN https://developer.mozilla.org/en-US/docs/Web/API/Location
@@ -3309,6 +3549,56 @@ function createMicroLocation(appName, url) {
         shadowLocation,
     });
 }
+/**
+ * create guardLocation by microLocation, used for router guard
+ */
+function createGuardLocation(appName, microLocation) {
+    const guardLocation = assign({ name: appName }, microLocation);
+    // The prototype values on the URL needs to be manually transferred
+    for (const key of guardLocationKeys)
+        guardLocation[key] = microLocation[key];
+    return guardLocation;
+}
+// for updateBrowserURLWithLocation when initial
+function autoTriggerNavigationGuard(appName, microLocation) {
+    executeNavigationGuard(appName, createGuardLocation(appName, microLocation), createGuardLocation(appName, microLocation));
+}
+/**
+ * The following scenes will trigger location update:
+ * 1. pushState/replaceState
+ * 2. popStateEvent
+ * 3. query on browser url when init sub app
+ * 4. set defaultPage when when init sub app
+ * NOTE:
+ * 1. update browser URL first, and then update microLocation
+ * 2. the same fullPath will not trigger router guards
+ * @param appName app name
+ * @param path target path
+ * @param base base url
+ * @param microLocation micro app location
+ * @param type auto prevent
+ */
+function updateMicroLocation(appName, path, microLocation, type) {
+    const newLocation = createURL(path, microLocation.href);
+    // record old values of microLocation to `from`
+    const from = createGuardLocation(appName, microLocation);
+    for (const key of locationKeys) {
+        if (shadowLocationKeys.includes(key)) {
+            // reference of shadowLocation
+            microLocation.shadowLocation[key] = newLocation[key];
+        }
+        else {
+            // @ts-ignore reference of microLocation
+            microLocation[key] = newLocation[key];
+        }
+    }
+    // update latest values of microLocation to `to`
+    const to = createGuardLocation(appName, microLocation);
+    // The hook called only when fullPath changed
+    if (type === 'auto' || (from.fullPath !== to.fullPath && type !== 'prevent')) {
+        executeNavigationGuard(appName, to, from);
+    }
+}
 
 /**
  * The router system has two operations: read and write
@@ -3318,7 +3608,6 @@ function createMicroLocation(appName, url) {
  * @returns MicroRouter
  */
 function createMicroRouter(appName, url) {
-    rewriteHistoryState();
     const microLocation = createMicroLocation(appName, url);
     return {
         microLocation,
@@ -3344,7 +3633,7 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     if (defaultPage)
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
     // attach microApp route info to browser URL
-    updateBrowserURL(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);
 }
@@ -3368,7 +3657,7 @@ function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
  * called on sandbox.stop or hidden of keep-alive app
  */
 function removeStateAndPathFromBrowser(appName) {
-    updateBrowserURL(removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
+    attachRouteToBrowserURL(removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
 /**
@@ -3380,13 +3669,21 @@ function removeStateAndPathFromBrowser(appName) {
  * @param target proxy target
  */
 function createMicroFetch(url, target) {
-    if (!isUndefined(target) && !isFunction(target))
-        return target;
-    const rawFetch = target || globalEnv.rawWindow.fetch;
+    const rawFetch = !isUndefined(target) ? target : globalEnv.rawWindow.fetch;
+    if (!isFunction(rawFetch))
+        return rawFetch;
     return function microFetch(input, init, ...rests) {
         if (isString(input) || isURL(input)) {
             input = createURL(input, url).toString();
         }
+        /**
+         * When fetch rewrite by baseApp, domScope still active when exec rawWindow.fetch
+         * If baseApp operate dom in fetch, it will cause error
+         * The same for XMLHttpRequest, EventSource
+         * e.g.
+         * baseApp: <script crossorigin src="https://sgm-static.jd.com/sgm-2.8.0.js" name="SGMH5" sid="6f88a6e4ba4b4ae5acef2ec22c075085" appKey="jdb-adminb2b-pc"></script>
+         */
+        removeDomScope();
         return rawFetch.call(globalEnv.rawWindow, input, init, ...rests);
     };
 }
@@ -3397,14 +3694,15 @@ function createMicroFetch(url, target) {
  * @param target proxy target
  */
 function createMicroXMLHttpRequest(url, target) {
-    if (!isUndefined(target) && !isFunction(target))
-        return target;
-    const rawXMLHttpRequest = target || globalEnv.rawWindow.XMLHttpRequest;
+    const rawXMLHttpRequest = !isUndefined(target) ? target : globalEnv.rawWindow.XMLHttpRequest;
+    if (!isConstructor(rawXMLHttpRequest))
+        return rawXMLHttpRequest;
     return class MicroXMLHttpRequest extends rawXMLHttpRequest {
         open(method, reqUrl, ...rests) {
             if ((isString(reqUrl) && !/^f(ile|tp):\/\//.test(reqUrl)) || isURL(reqUrl)) {
                 reqUrl = createURL(reqUrl, url).toString();
             }
+            removeDomScope();
             super.open(method, reqUrl, ...rests);
         }
     };
@@ -3420,14 +3718,15 @@ function useMicroEventSource() {
      * @param target proxy target
      */
     function createMicroEventSource(appName, url, target) {
-        if (!isUndefined(target) && !isFunction(target))
-            return target;
-        const rawEventSource = target || globalEnv.rawWindow.EventSource;
+        const rawEventSource = !isUndefined(target) ? target : globalEnv.rawWindow.EventSource;
+        if (!isConstructor(rawEventSource))
+            return rawEventSource;
         return class MicroEventSource extends rawEventSource {
             constructor(eventSourceUrl, eventSourceInitDict, ...rests) {
                 if (isString(eventSourceUrl) || isURL(eventSourceUrl)) {
                     eventSourceUrl = createURL(eventSourceUrl, url).toString();
                 }
+                removeDomScope();
                 super(eventSourceUrl, eventSourceInitDict, ...rests);
                 if (eventSourceMap) {
                     const eventSourceList = eventSourceMap.get(appName);
@@ -3479,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
@@ -3492,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) {
@@ -3503,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();
-                listenUmountOfNestedApp();
+                initEnvOfNestedApp();
+                patchHistory();
             }
             fixBabelPolyfill6();
         }
     }
-    stop(keepRouteState, clearEventSource) {
+    stop(umdMode, keepRouteState, clearEventSource) {
         if (this.active) {
             this.releaseEffect();
             this.microAppWindow.microApp.clearDataListener();
@@ -3530,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);
     }
@@ -3604,7 +3916,7 @@ class SandBox {
                     this.scopeProperties.includes(key))
                     return Reflect.get(target, key);
                 const rawValue = Reflect.get(rawWindow, key);
-                return isFunction(rawValue) ? bindFunctionToRawWindow(rawWindow, rawValue) : rawValue;
+                return isFunction(rawValue) ? bindFunctionToRawObject(rawWindow, rawValue) : rawValue;
             },
             set: (target, key, value) => {
                 if (this.active) {
@@ -3704,20 +4016,33 @@ class SandBox {
             pureCreateElement,
             router,
         });
+        this.setProxyDocument(microAppWindow, appName);
         this.setMappingPropertiesWithRawDescriptor(microAppWindow);
         if (useMemoryRouter)
             this.setMicroAppRouter(microAppWindow, appName, url);
     }
-    /**
-     * init global properties of microAppWindow when exec sandBox.start
-     * @param microAppWindow micro window
-     * @param appName app name
-     * @param url app url
-     */
-    initGlobalKeysWhenStart(microAppWindow, appName, url) {
-        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
-        this.setHijackProperties(microAppWindow, appName);
-        this.patchHijackRequest(microAppWindow, appName, url);
+    setProxyDocument(microAppWindow, appName) {
+        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
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
@@ -3746,18 +4071,23 @@ class SandBox {
         };
         return descriptor;
     }
+    /**
+     * init global properties of microAppWindow when exec sandBox.start
+     * @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, disablePatchRequest) {
+        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
+        this.setHijackProperty(microAppWindow, appName);
+        if (!disablePatchRequest)
+            this.patchRequestApi(microAppWindow, appName, url);
+    }
     // set hijack Properties to microAppWindow
-    setHijackProperties(microAppWindow, appName) {
+    setHijackProperty(microAppWindow, appName) {
         let modifiedEval, modifiedImage;
         rawDefineProperties(microAppWindow, {
-            document: {
-                configurable: true,
-                enumerable: true,
-                get() {
-                    throttleDeferForSetAppName(appName);
-                    return globalEnv.rawDocument;
-                },
-            },
             eval: {
                 configurable: true,
                 enumerable: false,
@@ -3783,7 +4113,7 @@ class SandBox {
         });
     }
     // rewrite fetch, XMLHttpRequest, EventSource
-    patchHijackRequest(microAppWindow, appName, url) {
+    patchRequestApi(microAppWindow, appName, url) {
         let microFetch = createMicroFetch(url);
         let microXMLHttpRequest = createMicroXMLHttpRequest(url);
         let microEventSource = createMicroEventSource(appName, url);
@@ -3855,6 +4185,76 @@ 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(rawDocument, tagName, options);
+            element.__MICRO_APP_NAME__ = appName;
+            return element;
+        };
+        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(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;
+            }
+        });
+        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
 
@@ -3922,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;
@@ -3935,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(),
@@ -3957,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
@@ -3997,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;
@@ -4015,13 +4417,12 @@ 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();
                     // if mount & unmount is function, the sub app is umd mode
@@ -4029,7 +4430,9 @@ class CreateApp {
                         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();
                         }
@@ -4131,20 +4534,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();
         }
@@ -4282,6 +4688,7 @@ function defineElement(tagName) {
                     this.setAttribute('name', this.appName);
                 }
             };
+            // patchSetAttribute hijiack data attribute, it needs exec first
             patchSetAttribute();
         }
         static get observedAttributes() {
@@ -4458,7 +4865,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
@@ -4477,12 +4884,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);
         }
@@ -4517,25 +4926,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';
         }
@@ -4563,7 +4972,7 @@ function defineElement(tagName) {
          */
         updateSsrUrl(baseUrl) {
             if (this.getDisposeResult('ssr')) {
-                if (this.getDisposeResult('disable-memory-router')) {
+                if (this.getDisposeResult('disable-memory-router') || this.getDisposeResult('disableSandbox')) {
                     const rawLocation = globalEnv.rawWindow.location;
                     this.ssrUrl = CompletionPath(rawLocation.pathname + rawLocation.search, baseUrl);
                 }
@@ -4647,7 +5056,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);
@@ -4655,9 +5064,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;
@@ -4707,7 +5116,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() &&
@@ -4803,6 +5212,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');
         }
@@ -4828,9 +5238,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);