@micro-zoe/micro-app 1.0.0-alpha.0 → 1.0.0-alpha.3

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.0';
+const version = '1.0.0-alpha.3';
 // 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
@@ -107,7 +127,7 @@ const createURL = (function () {
  * @param url address
  */
 function addProtocol(url) {
-    return url.startsWith('//') ? `${location.protocol}${url}` : url;
+    return url.startsWith('//') ? `${globalThis.location.protocol}${url}` : url;
 }
 /**
  * format URL address
@@ -199,24 +219,15 @@ function promiseStream(promiseList, successCb, errorCb, finallyCb) {
     promiseList.forEach((p, i) => {
         if (isPromise(p)) {
             p.then((res) => {
-                successCb({
-                    data: res,
-                    index: i,
-                });
+                successCb({ data: res, index: i });
                 isFinished();
             }).catch((err) => {
-                errorCb({
-                    error: err,
-                    index: i,
-                });
+                errorCb({ error: err, index: i });
                 isFinished();
             });
         }
         else {
-            successCb({
-                data: p,
-                index: i,
-            });
+            successCb({ data: p, index: i });
             isFinished();
         }
     });
@@ -279,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;
 }
 /**
@@ -457,7 +469,15 @@ var keepAliveStates;
     keepAliveStates["KEEP_ALIVE_SHOW"] = "keep_alive_show";
     keepAliveStates["KEEP_ALIVE_HIDDEN"] = "keep_alive_hidden";
 })(keepAliveStates || (keepAliveStates = {}));
-const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Promise,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,Document,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history,EventSource,fetch,XMLHttpRequest';
+/**
+ * global key must be static key, they can not rewrite
+ * e.g.
+ * window.Promise = newValue
+ * new Promise ==> still get old value, not newValue, because they are cached by top function
+ * NOTE:
+ * 1. Do not add fetch, XMLHttpRequest, EventSource
+ */
+const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,Document,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
 
 /**
  * fetch source of html, js, css
@@ -466,10 +486,18 @@ 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();
     });
 }
@@ -552,7 +580,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) => {
@@ -632,7 +660,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())
@@ -784,7 +812,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);
         }
@@ -1015,6 +1043,85 @@ function formatDynamicLink(url, info, app, originLink, replaceStyle) {
     });
 }
 
+class Adapter {
+    constructor() {
+        // keys that can only assigned to rawWindow
+        this.escapeSetterKeyList = [
+            'location',
+        ];
+        // keys that can escape to rawWindow
+        this.staticEscapeProperties = [
+            'System',
+            '__cjsWrapper',
+        ];
+        // keys that scoped in child app
+        this.staticScopeProperties = [
+            'webpackJsonp',
+            'webpackHotUpdate',
+            'Vue',
+        ];
+        this.injectReactHRMProperty();
+    }
+    // TODO: __DEV__ process.env.NODE_ENV !== 'production'
+    // adapter for react
+    injectReactHRMProperty() {
+        if (process.env.NODE_ENV !== 'production') {
+            // react child in non-react env
+            this.staticEscapeProperties.push('__REACT_ERROR_OVERLAY_GLOBAL_HOOK__');
+            // in react parent
+            if (globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__) {
+                this.staticScopeProperties = this.staticScopeProperties.concat([
+                    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
+                    '__reactRefreshInjected',
+                ]);
+            }
+        }
+    }
+}
+// Fix conflict of babel-polyfill@6.x
+function fixBabelPolyfill6() {
+    if (globalEnv.rawWindow._babelPolyfill)
+        globalEnv.rawWindow._babelPolyfill = false;
+}
+/**
+ * Fix error of hot reload when parent&child created by create-react-app in development environment
+ * Issue: https://github.com/micro-zoe/micro-app/issues/382
+ */
+function fixReactHMRConflict(app) {
+    var _a;
+    if (process.env.NODE_ENV !== 'production') {
+        const rawReactErrorHook = globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        const childReactErrorHook = (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        if (rawReactErrorHook && childReactErrorHook) {
+            globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = childReactErrorHook;
+            defer(() => {
+                globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = rawReactErrorHook;
+            });
+        }
+    }
+}
+/**
+ * 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();
 /**
@@ -1108,6 +1215,12 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             }
             return targetChild;
         }
+        // TODO: __DEV__
+        if (process.env.NODE_ENV !== 'production' &&
+            targetChild instanceof HTMLIFrameElement &&
+            rawMethod === globalEnv.rawAppendChild) {
+            fixReactHMRConflict(app);
+        }
         return invokeRawMethod(rawMethod, hijackElement, targetChild, passiveChild);
     }
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
@@ -1145,20 +1258,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);
@@ -1204,12 +1332,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);
     };
@@ -1225,109 +1359,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() {
@@ -1338,9 +1483,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;
@@ -1349,36 +1494,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;
@@ -1388,6 +1531,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() {
@@ -1407,6 +1555,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
@@ -1419,15 +1571,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);
@@ -1435,9 +1587,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
@@ -1448,11 +1597,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,
@@ -1472,10 +1628,6 @@ function initGlobalEnv() {
             rawGetElementsByTagName,
             rawGetElementsByName,
             ImageProxy,
-            // common global vars
-            rawWindow,
-            rawDocument,
-            supportModuleScript,
             // sandbox/effect
             rawWindowAddEventListener,
             rawWindowRemoveEventListener,
@@ -1485,6 +1637,8 @@ function initGlobalEnv() {
             rawClearTimeout,
             rawDocumentAddEventListener,
             rawDocumentRemoveEventListener,
+            rawPushState,
+            rawReplaceState,
         });
         // global effect
         rejectMicroAppStyle();
@@ -1705,6 +1859,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)) {
@@ -2223,7 +2384,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);
@@ -2236,35 +2397,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;
 }
@@ -2381,8 +2537,7 @@ function releaseEffectDocumentEvent() {
  * Rewrite side-effect events
  * @param microAppWindow micro window
  */
-function effect(microAppWindow) {
-    const appName = microAppWindow.__MICRO_APP_NAME__;
+function effect(appName, microAppWindow) {
     const eventListenerMap = new Map();
     const intervalIdMap = new Map();
     const timeoutIdMap = new Map();
@@ -2529,7 +2684,8 @@ function effect(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
@@ -2552,9 +2708,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
@@ -2579,7 +2735,8 @@ function commonDecode(path) {
 }
 // 格式化query参数key，防止与原有参数的冲突
 function formatQueryAppName(appName) {
-    return `app-${appName}`;
+    // return `app-${appName}`
+    return appName;
 }
 // 根据浏览器url参数，获取当前子应用的path
 function getMicroPathFromURL(appName) {
@@ -2684,7 +2841,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);
@@ -2699,7 +2859,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);
@@ -2718,9 +2878,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);
@@ -2785,37 +2945,35 @@ 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);
                     }
-                }
-                else {
-                    rawHistory[methodName].apply(rawHistory, rests);
+                    return void 0;
                 }
             }
-            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 (isFunction(Reflect.get(target, key))) {
-                return getMicroHistoryMethod(key);
+            else if (key === 'pushState') {
+                return pushState;
             }
-            return Reflect.get(target, key);
-        },
-        set(target, key, value) {
-            return Reflect.set(target, key, value);
+            else if (key === 'replaceState') {
+                return replaceState;
+            }
+            const rawValue = Reflect.get(target, key);
+            return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'HISTORY') : rawValue;
         }
     });
 }
@@ -2827,12 +2985,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
@@ -2852,19 +3011,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;
@@ -2880,22 +3040,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() {
@@ -2907,7 +3083,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();
     }
@@ -2922,11 +3098,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;
@@ -3003,43 +3179,96 @@ 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
+         * @param appName app name
+         * @param path page path
+         */
+        function setDefaultPage(appName, path) {
+            appName = formatAppName(appName);
+            if (!appName || !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, 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;
+                    }
+                });
+            }
+            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,
@@ -3053,56 +3282,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
@@ -3247,6 +3426,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
@@ -3256,7 +3485,6 @@ function createMicroLocation(appName, url) {
  * @returns MicroRouter
  */
 function createMicroRouter(appName, url) {
-    rewriteHistoryState();
     const microLocation = createMicroLocation(appName, url);
     return {
         microLocation,
@@ -3282,7 +3510,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);
 }
@@ -3306,27 +3534,121 @@ 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));
 }
 
-// Variables that can escape to rawWindow
-const staticEscapeProperties = [
-    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
-    'System',
-    '__cjsWrapper',
-];
-// Variables that can only assigned to rawWindow
-const escapeSetterKeyList = [
-    'location',
-];
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/fetch
+ * Promise<Response> fetch(input[, init])
+ * input: string/Request
+ * init?: object
+ * @param url app url
+ * @param target proxy target
+ */
+function createMicroFetch(url, target) {
+    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);
+    };
+}
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+ * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+ * @param url app url
+ * @param target proxy target
+ */
+function createMicroXMLHttpRequest(url, target) {
+    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);
+        }
+    };
+}
+function useMicroEventSource() {
+    let eventSourceMap;
+    /**
+     * https://developer.mozilla.org/en-US/docs/Web/API/EventSource
+     * pc = new EventSource(url[, configuration])
+     * url: string/Request
+     * configuration?: object
+     * @param url app url
+     * @param target proxy target
+     */
+    function createMicroEventSource(appName, url, target) {
+        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);
+                    if (eventSourceList) {
+                        eventSourceList.add(this);
+                    }
+                    else {
+                        eventSourceMap.set(appName, new Set([this]));
+                    }
+                }
+                else {
+                    eventSourceMap = new Map([[appName, new Set([this])]]);
+                }
+            }
+            close() {
+                var _a;
+                super.close();
+                (_a = eventSourceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.delete(this);
+            }
+        };
+    }
+    function clearMicroEventSource(appName) {
+        const eventSourceList = eventSourceMap === null || eventSourceMap === void 0 ? void 0 : eventSourceMap.get(appName);
+        if (eventSourceList === null || eventSourceList === void 0 ? void 0 : eventSourceList.size) {
+            eventSourceList.forEach(item => {
+                item.close();
+            });
+            eventSourceList.clear();
+        }
+    }
+    return {
+        createMicroEventSource,
+        clearMicroEventSource,
+    };
+}
+
+const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
 const globalPropertyList = ['window', 'self', 'globalThis'];
 class SandBox {
     constructor(appName, url, useMemoryRouter = true) {
         /**
          * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
-         * https://github.com/micro-zoe/micro-app/issues/234
+         * Fix https://github.com/micro-zoe/micro-app/issues/234
          */
-        this.scopeProperties = ['webpackJsonp', 'Vue'];
+        this.scopeProperties = [];
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
         // Properties newly added to microAppWindow
@@ -3336,14 +3658,15 @@ class SandBox {
         // sandbox state
         this.active = false;
         this.microAppWindow = {}; // Proxy target
+        this.adapter = new Adapter();
         // get scopeProperties and escapeProperties from plugins
         this.getSpecialProperties(appName);
         // create proxyWindow with Proxy(microAppWindow)
         this.proxyWindow = this.createProxyWindow(appName);
-        // inject global properties
-        this.initMicroAppWindow(this.microAppWindow, appName, url, useMemoryRouter);
         // Rewrite global event listener & timeout
-        assign(this, effect(this.microAppWindow));
+        assign(this, effect(appName, this.microAppWindow));
+        // inject global properties
+        this.initStaticGlobalKeys(this.microAppWindow, appName, url, useMemoryRouter);
     }
     start(baseRoute, useMemoryRouter = true, defaultPage = '') {
         if (!this.active) {
@@ -3356,20 +3679,35 @@ 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__);
             if (++SandBox.activeCount === 1) {
                 effectDocumentEvent();
                 patchElementPrototypeMethods();
-                listenUmountOfNestedApp();
+                initEnvOfNestedApp();
+                patchHistory();
             }
-            // BUG FIX: bable-polyfill@6.x
-            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
+            fixBabelPolyfill6();
         }
     }
-    stop(keepRouteState = false) {
+    stop(keepRouteState, clearEventSource) {
         if (this.active) {
             this.releaseEffect();
             this.microAppWindow.microApp.clearDataListener();
             this.microAppWindow.microApp.clearGlobalDataListener();
+            if (this.removeHistoryListener) {
+                this.clearRouteState(keepRouteState);
+                // release listener of popstate
+                this.removeHistoryListener();
+            }
+            if (clearEventSource) {
+                clearMicroEventSource(this.proxyWindow.__MICRO_APP_NAME__);
+            }
+            /**
+             * 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
+             */
             this.injectedKeys.forEach((key) => {
                 Reflect.deleteProperty(this.microAppWindow, key);
             });
@@ -3378,14 +3716,10 @@ class SandBox {
                 Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
-            if (this.removeHistoryListener) {
-                this.clearRouteState(keepRouteState);
-                // release listener of popstate
-                this.removeHistoryListener();
-            }
             if (--SandBox.activeCount === 0) {
                 releaseEffectDocumentEvent();
                 releasePatches();
+                releasePatchHistory();
             }
             this.active = false;
         }
@@ -3409,15 +3743,16 @@ class SandBox {
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
-     * get scopeProperties and escapeProperties from plugins
+     * get scopeProperties and escapeProperties from plugins & adapter
      * @param appName app name
      */
     getSpecialProperties(appName) {
         var _a;
-        if (!isPlainObject(microApp.plugins))
-            return;
-        this.commonActionForSpecialProperties(microApp.plugins.global);
-        this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+        this.scopeProperties = this.scopeProperties.concat(this.adapter.staticScopeProperties);
+        if (isPlainObject(microApp.plugins)) {
+            this.commonActionForSpecialProperties(microApp.plugins.global);
+            this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+        }
     }
     // common action for global plugins and module plugins
     commonActionForSpecialProperties(plugins) {
@@ -3447,11 +3782,11 @@ 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) {
-                    if (escapeSetterKeyList.includes(key)) {
+                    if (this.adapter.escapeSetterKeyList.includes(key)) {
                         Reflect.set(rawWindow, key, value);
                     }
                     else if (
@@ -3475,7 +3810,8 @@ class SandBox {
                         this.injectedKeys.add(key);
                     }
                     if ((this.escapeProperties.includes(key) ||
-                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
+                        (this.adapter.staticEscapeProperties.includes(key) &&
+                            !Reflect.has(rawWindow, key))) &&
                         !this.scopeProperties.includes(key)) {
                         Reflect.set(rawWindow, key, value);
                         this.escapeKeys.add(key);
@@ -3531,26 +3867,48 @@ class SandBox {
      * @param microAppWindow micro window
      * @param appName app name
      * @param url app url
+     * @param useMemoryRouter whether use memory router
      */
-    initMicroAppWindow(microAppWindow, appName, url, useMemoryRouter) {
+    initStaticGlobalKeys(microAppWindow, appName, url, useMemoryRouter) {
         microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
         microAppWindow.__MICRO_APP_NAME__ = appName;
         microAppWindow.__MICRO_APP_URL__ = url;
         microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
+        microAppWindow.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
             removeDomScope,
             pureCreateElement,
             router,
         });
-        microAppWindow.rawWindow = globalEnv.rawWindow;
-        microAppWindow.rawDocument = globalEnv.rawDocument;
-        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
+        this.setProxyDocument(microAppWindow, appName);
         this.setMappingPropertiesWithRawDescriptor(microAppWindow);
-        this.setHijackProperties(microAppWindow, appName);
-        // this.patchHijackRequest(microAppWindow, appName, url)
         if (useMemoryRouter)
-            this.setRouterApi(microAppWindow, appName, url);
+            this.setMicroAppRouter(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) {
@@ -3579,18 +3937,21 @@ 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
+     */
+    initGlobalKeysWhenStart(microAppWindow, appName, url) {
+        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
+        this.setHijackProperty(microAppWindow, appName);
+        this.patchRequestApi(microAppWindow, appName, url);
+    }
     // set hijack Properties to microAppWindow
-    setHijackProperties(microAppWindow, appName) {
+    setHijackProperty(microAppWindow, appName) {
         let modifiedEval, modifiedImage;
         rawDefineProperties(microAppWindow, {
-            document: {
-                configurable: false,
-                enumerable: true,
-                get() {
-                    throttleDeferForSetAppName(appName);
-                    return globalEnv.rawDocument;
-                },
-            },
             eval: {
                 configurable: true,
                 enumerable: false,
@@ -3615,65 +3976,46 @@ class SandBox {
             },
         });
     }
-    // private patchHijackRequest (microAppWindow: microAppWindowType, appName: string, url: string) {
-    //   let modifiedImage: unknown
-    //   function EventSource (...rests: any[]) {
-    //     console.log(appName + ' EventSource', rests)
-    //     if (typeof rests[0] === 'string') {
-    //       rests[0] = (new URL(rests[0], url)).toString()
-    //     }
-    //     return new globalEnv.rawWindow.EventSource(...rests)
-    //   }
-    //   function patchFetch (...rests: any[]) {
-    //     console.log(appName + ' fetch', rests)
-    //     if (typeof rests[0] === 'string') {
-    //       rests[0] = (new URL(rests[0], url)).toString()
-    //     }
-    //     return globalEnv.rawWindow.fetch(...rests)
-    //   }
-    //   const rawXMLHttpRequest = globalEnv.rawWindow.XMLHttpRequest
-    //   class XMLHttpRequest extends rawXMLHttpRequest {
-    //     open (method: string, reqUrl: string) {
-    //       console.log(appName + ' XMLHttpRequest', method, reqUrl)
-    //       reqUrl = (new URL(reqUrl, url)).toString()
-    //       super.open(method, reqUrl)
-    //     }
-    //   }
-    //   rawDefineProperties(microAppWindow, {
-    //     EventSource: {
-    //       configurable: true,
-    //       enumerable: true,
-    //       get () {
-    //         return EventSource
-    //       },
-    //       set: (value) => {
-    //         modifiedImage = value
-    //       },
-    //     },
-    //     fetch: {
-    //       configurable: true,
-    //       enumerable: true,
-    //       get () {
-    //         return patchFetch
-    //       },
-    //       set: (value) => {
-    //         modifiedImage = value
-    //       },
-    //     },
-    //     XMLHttpRequest: {
-    //       configurable: true,
-    //       enumerable: true,
-    //       get () {
-    //         return XMLHttpRequest
-    //       },
-    //       set: (value) => {
-    //         modifiedImage = value
-    //       },
-    //     },
-    //   })
-    // }
+    // rewrite fetch, XMLHttpRequest, EventSource
+    patchRequestApi(microAppWindow, appName, url) {
+        let microFetch = createMicroFetch(url);
+        let microXMLHttpRequest = createMicroXMLHttpRequest(url);
+        let microEventSource = createMicroEventSource(appName, url);
+        rawDefineProperties(microAppWindow, {
+            fetch: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microFetch;
+                },
+                set(value) {
+                    microFetch = createMicroFetch(url, value);
+                },
+            },
+            XMLHttpRequest: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microXMLHttpRequest;
+                },
+                set(value) {
+                    microXMLHttpRequest = createMicroXMLHttpRequest(url, value);
+                },
+            },
+            EventSource: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microEventSource;
+                },
+                set(value) {
+                    microEventSource = createMicroEventSource(appName, url, value);
+                },
+            },
+        });
+    }
     // set location & history for memory router
-    setRouterApi(microAppWindow, appName, url) {
+    setMicroAppRouter(microAppWindow, appName, url) {
         const { microLocation, microHistory } = createMicroRouter(appName, url);
         rawDefineProperties(microAppWindow, {
             location: {
@@ -3707,6 +4049,63 @@ 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;
+            },
+        });
+        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.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;
+            }
+        }));
+        return {
+            proxyDocument,
+            MicroDocument,
+        };
+    }
 }
 SandBox.activeCount = 0; // number of active sandbox
 
@@ -3774,7 +4173,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, }) {
         this.state = appStates.CREATED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
@@ -3787,17 +4186,18 @@ 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.source = {
             links: new Map(),
@@ -3850,16 +4250,14 @@ class CreateApp {
      * @param baseroute route prefix, default is ''
      * @param keepRouteState keep route state when unmount, default is false
      */
-    mount(container, inline, baseroute, keepRouteState, defaultPage) {
+    mount(container, inline, baseroute, keepRouteState, defaultPage, hiddenRouter) {
         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;
         if (this.loadSourceLevel !== 2) {
             this.state = appStates.LOADING;
             return;
@@ -3990,8 +4388,13 @@ class CreateApp {
         else if (this.umdMode && this.container.childElementCount) {
             cloneContainer(this.container, this.source.html, false);
         }
-        // this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop(this.keepRouteState && !destroy);
+        /**
+         * 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);
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
         }
@@ -4129,6 +4532,7 @@ function defineElement(tagName) {
                     this.setAttribute('name', this.appName);
                 }
             };
+            // patchSetAttribute hijiack data attribute, it needs exec first
             patchSetAttribute();
         }
         static get observedAttributes() {
@@ -4305,7 +4709,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'));
             });
         }
         // create app instance
@@ -4324,12 +4728,13 @@ 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'),
             });
             appInstanceMap.set(this.appName, instance);
         }
@@ -4364,25 +4769,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';
         }
@@ -4410,7 +4815,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);
                 }
@@ -4494,7 +4899,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);
@@ -4502,9 +4907,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;
@@ -4554,7 +4959,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() &&
@@ -4650,6 +5055,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');
         }
@@ -4675,9 +5081,12 @@ 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['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);