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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.2';
+const version = '1.0.0-alpha.3';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -72,6 +72,10 @@ function isShadowRoot(target) {
 function isURL(target) {
     return target instanceof URL;
 }
+// is ProxyDocument
+function isProxyDocument(target) {
+    return toString.call(target) === '[object ProxyDocument]';
+}
 /**
  * format error log
  * @param msg message
@@ -1363,101 +1367,112 @@ function markElement(element) {
 // methods of document
 function patchDocument() {
     const rawDocument = globalEnv.rawDocument;
+    const rawRootDocument = globalEnv.rawRootDocument;
+    function getBindTarget(target) {
+        return isProxyDocument(target) ? rawDocument : target;
+    }
     // create element 👇
-    Document.prototype.createElement = function createElement(tagName, options) {
-        const element = globalEnv.rawCreateElement.call(this, tagName, options);
+    rawRootDocument.prototype.createElement = function createElement(tagName, options) {
+        const element = globalEnv.rawCreateElement.call(getBindTarget(this), tagName, options);
         return markElement(element);
     };
-    Document.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
-        const element = globalEnv.rawCreateElementNS.call(this, namespaceURI, name, options);
+    rawRootDocument.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
+        const element = globalEnv.rawCreateElementNS.call(getBindTarget(this), namespaceURI, name, options);
         return markElement(element);
     };
-    Document.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = globalEnv.rawCreateDocumentFragment.call(this);
+    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
         return markElement(element);
     };
     // query element👇
     function querySelector(selectors) {
         var _a, _b, _c, _d;
+        const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
             !((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
             // see https://github.com/micro-zoe/micro-app/issues/56
-            rawDocument !== this) {
-            return globalEnv.rawQuerySelector.call(this, selectors);
+            rawDocument !== _this) {
+            return globalEnv.rawQuerySelector.call(_this, selectors);
         }
         return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelector(selectors)) !== null && _d !== void 0 ? _d : null;
     }
     function querySelectorAll(selectors) {
         var _a, _b, _c, _d;
+        const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
             !((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
-            rawDocument !== this) {
-            return globalEnv.rawQuerySelectorAll.call(this, selectors);
+            rawDocument !== _this) {
+            return globalEnv.rawQuerySelectorAll.call(_this, selectors);
         }
         return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll(selectors)) !== null && _d !== void 0 ? _d : [];
     }
-    Document.prototype.querySelector = querySelector;
-    Document.prototype.querySelectorAll = querySelectorAll;
-    Document.prototype.getElementById = function getElementById(key) {
+    rawRootDocument.prototype.querySelector = querySelector;
+    rawRootDocument.prototype.querySelectorAll = querySelectorAll;
+    rawRootDocument.prototype.getElementById = function getElementById(key) {
+        const _this = getBindTarget(this);
         if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementById.call(this, key);
+            return globalEnv.rawGetElementById.call(_this, key);
         }
         try {
-            return querySelector.call(this, `#${key}`);
+            return querySelector.call(_this, `#${key}`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementById.call(this, key);
+            return globalEnv.rawGetElementById.call(_this, key);
         }
     };
-    Document.prototype.getElementsByClassName = function getElementsByClassName(key) {
+    rawRootDocument.prototype.getElementsByClassName = function getElementsByClassName(key) {
+        const _this = getBindTarget(this);
         if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByClassName.call(this, key);
+            return globalEnv.rawGetElementsByClassName.call(_this, key);
         }
         try {
-            return querySelectorAll.call(this, `.${key}`);
+            return querySelectorAll.call(_this, `.${key}`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementsByClassName.call(this, key);
+            return globalEnv.rawGetElementsByClassName.call(_this, key);
         }
     };
-    Document.prototype.getElementsByTagName = function getElementsByTagName(key) {
+    rawRootDocument.prototype.getElementsByTagName = function getElementsByTagName(key) {
         var _a;
+        const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
             isUniqueElement(key) ||
             isInvalidQuerySelectorKey(key) ||
             (!((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
-            return globalEnv.rawGetElementsByTagName.call(this, key);
+            return globalEnv.rawGetElementsByTagName.call(_this, key);
         }
         try {
-            return querySelectorAll.call(this, key);
+            return querySelectorAll.call(_this, key);
         }
         catch (_b) {
-            return globalEnv.rawGetElementsByTagName.call(this, key);
+            return globalEnv.rawGetElementsByTagName.call(_this, key);
         }
     };
-    Document.prototype.getElementsByName = function getElementsByName(key) {
+    rawRootDocument.prototype.getElementsByName = function getElementsByName(key) {
+        const _this = getBindTarget(this);
         if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByName.call(this, key);
+            return globalEnv.rawGetElementsByName.call(_this, key);
         }
         try {
-            return querySelectorAll.call(this, `[name=${key}]`);
+            return querySelectorAll.call(_this, `[name=${key}]`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementsByName.call(this, key);
+            return globalEnv.rawGetElementsByName.call(_this, key);
         }
     };
 }
 /**
  * patchSetAttribute is different from other patch
- * it not dependent on sandbox
- * it should exec when micro-app first created & release when all app unmounted
+ * NOTE:
+ * 1. it not dependent on sandbox
+ * 2. it should exec when first micro-app-element created & release when all app unmounted
  */
 let hasRewriteSetAttribute = false;
 function patchSetAttribute() {
@@ -1492,24 +1507,21 @@ function patchSetAttribute() {
         }
     };
 }
-function releasePatchSetAttribute() {
-    hasRewriteSetAttribute = false;
-    Element.prototype.setAttribute = globalEnv.rawSetAttribute;
-}
 function releasePatchDocument() {
-    Document.prototype.createElement = globalEnv.rawCreateElement;
-    Document.prototype.createElementNS = globalEnv.rawCreateElementNS;
-    Document.prototype.createDocumentFragment = globalEnv.rawCreateDocumentFragment;
-    Document.prototype.querySelector = globalEnv.rawQuerySelector;
-    Document.prototype.querySelectorAll = globalEnv.rawQuerySelectorAll;
-    Document.prototype.getElementById = globalEnv.rawGetElementById;
-    Document.prototype.getElementsByClassName = globalEnv.rawGetElementsByClassName;
-    Document.prototype.getElementsByTagName = globalEnv.rawGetElementsByTagName;
-    Document.prototype.getElementsByName = globalEnv.rawGetElementsByName;
+    const rawRootDocument = globalEnv.rawRootDocument;
+    rawRootDocument.prototype.createElement = globalEnv.rawCreateElement;
+    rawRootDocument.prototype.createElementNS = globalEnv.rawCreateElementNS;
+    rawRootDocument.prototype.createDocumentFragment = globalEnv.rawCreateDocumentFragment;
+    rawRootDocument.prototype.querySelector = globalEnv.rawQuerySelector;
+    rawRootDocument.prototype.querySelectorAll = globalEnv.rawQuerySelectorAll;
+    rawRootDocument.prototype.getElementById = globalEnv.rawGetElementById;
+    rawRootDocument.prototype.getElementsByClassName = globalEnv.rawGetElementsByClassName;
+    rawRootDocument.prototype.getElementsByTagName = globalEnv.rawGetElementsByTagName;
+    rawRootDocument.prototype.getElementsByName = globalEnv.rawGetElementsByName;
 }
 // release patch
 function releasePatches() {
-    setCurrentAppName(null);
+    removeDomScope();
     releasePatchDocument();
     Element.prototype.appendChild = globalEnv.rawAppendChild;
     Element.prototype.insertBefore = globalEnv.rawInsertBefore;
@@ -1519,6 +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() {
@@ -1538,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
@@ -1550,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);
@@ -1566,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
@@ -1579,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,
@@ -1603,10 +1628,6 @@ function initGlobalEnv() {
             rawGetElementsByTagName,
             rawGetElementsByName,
             ImageProxy,
-            // common global vars
-            rawWindow,
-            rawDocument,
-            supportModuleScript,
             // sandbox/effect
             rawWindowAddEventListener,
             rawWindowRemoveEventListener,
@@ -1616,6 +1637,8 @@ function initGlobalEnv() {
             rawClearTimeout,
             rawDocumentAddEventListener,
             rawDocumentRemoveEventListener,
+            rawPushState,
+            rawReplaceState,
         });
         // global effect
         rejectMicroAppStyle();
@@ -1836,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)) {
@@ -2654,7 +2684,8 @@ function effect(appName, microAppWindow) {
 }
 
 // set micro app state to origin state
-function setMicroState(appName, rawState, microState) {
+function setMicroState(appName, microState) {
+    const rawState = globalEnv.rawWindow.history.state;
     const additionalState = {
         microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
             [appName]: microState
@@ -2677,9 +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
@@ -2704,7 +2735,8 @@ function commonDecode(path) {
 }
 // 格式化query参数key，防止与原有参数的冲突
 function formatQueryAppName(appName) {
-    return `app-${appName}`;
+    // return `app-${appName}`
+    return appName;
 }
 // 根据浏览器url参数，获取当前子应用的path
 function getMicroPathFromURL(appName) {
@@ -2827,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);
@@ -2846,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);
@@ -2916,19 +2948,15 @@ function createMicroHistory(appName, microLocation) {
             if (isString(rests[2]) || isURL(rests[2])) {
                 const targetLocation = createURL(rests[2], microLocation.href);
                 if (targetLocation.origin === microLocation.origin) {
-                    navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rawHistory.state, rests[0]), rests[1]);
+                    navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
                     const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
                     if (targetFullPath !== microLocation.fullPath) {
                         updateMicroLocation(appName, targetFullPath, microLocation);
                     }
+                    return void 0;
                 }
-                else {
-                    rawHistory[methodName].apply(rawHistory, rests);
-                }
-            }
-            else {
-                rawHistory[methodName].apply(rawHistory, rests);
             }
+            nativeHistoryNavigate(methodName, rests[2], rests[0], rests[1]);
         };
     }
     const pushState = getMicroHistoryMethod('pushState');
@@ -2936,7 +2964,7 @@ function createMicroHistory(appName, microLocation) {
     return new Proxy(rawHistory, {
         get(target, key) {
             if (key === 'state') {
-                return getMicroState(appName, rawHistory.state);
+                return getMicroState(appName);
             }
             else if (key === 'pushState') {
                 return pushState;
@@ -2957,7 +2985,8 @@ function createMicroHistory(appName, microLocation) {
  * @param title history.title, default is ''
  */
 function nativeHistoryNavigate(methodName, fullPath, state = null, title = '') {
-    globalEnv.rawWindow.history[methodName](state, title, fullPath);
+    const method = methodName === 'pushState' ? globalEnv.rawPushState : globalEnv.rawReplaceState;
+    method.call(globalEnv.rawWindow.history, state, title, fullPath);
 }
 /**
  * Navigate to new path, and dispatch native popStateEvent/hashChangeEvent to browser
@@ -2992,10 +3021,10 @@ function attachRouteToBrowserURL(result, state) {
 }
 /**
  * When path is same, keep the microAppState in history.state
- * Fix bug of missing microAppState in next.js & angular
+ * Fix bug of missing microAppState when base app is next.js or angular
  * @param method history.pushState/replaceState
  */
-function patchHistoryState(method) {
+function reWriteHistoryMethod(method) {
     const rawWindow = globalEnv.rawWindow;
     return function (...rests) {
         var _a;
@@ -3011,22 +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() {
@@ -3038,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();
     }
@@ -3142,7 +3187,7 @@ function createRouterApi() {
     function commonHandlerForAttachToURL(appName) {
         const app = appInstanceMap.get(appName);
         if (app.sandBox && app.useMemoryRouter) {
-            attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, globalEnv.rawWindow.history.state, null));
+            attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
         }
     }
     /**
@@ -3157,9 +3202,10 @@ function createRouterApi() {
     }
     /**
      * Attach all active app router info to browser url
+     * exclude hidden keep-alive app
      */
-    function attachAllToURL() {
-        getActiveApps().forEach(appName => commonHandlerForAttachToURL(appName));
+    function attachAllToURL(includeHiddenApp = false) {
+        getActiveApps(!includeHiddenApp).forEach(appName => commonHandlerForAttachToURL(appName));
     }
     function createDefaultPageApi() {
         // defaultPage data
@@ -3439,7 +3485,6 @@ function updateMicroLocation(appName, path, microLocation, type) {
  * @returns MicroRouter
  */
 function createMicroRouter(appName, url) {
-    rewriteHistoryState();
     const microLocation = createMicroLocation(appName, url);
     return {
         microLocation,
@@ -3465,7 +3510,7 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     if (defaultPage)
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
     // attach microApp route info to browser URL
-    attachRouteToBrowserURL(setMicroPathToURL(appName, microLocation), setMicroState(appName, globalEnv.rawWindow.history.state, null));
+    attachRouteToBrowserURL(setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -3640,6 +3685,7 @@ class SandBox {
                 effectDocumentEvent();
                 patchElementPrototypeMethods();
                 initEnvOfNestedApp();
+                patchHistory();
             }
             fixBabelPolyfill6();
         }
@@ -3673,6 +3719,7 @@ class SandBox {
             if (--SandBox.activeCount === 0) {
                 releaseEffectDocumentEvent();
                 releasePatches();
+                releasePatchHistory();
             }
             this.active = false;
         }
@@ -3841,15 +3888,26 @@ class SandBox {
             this.setMicroAppRouter(microAppWindow, appName, url);
     }
     setProxyDocument(microAppWindow, appName) {
-        const proxyDocument = this.createProxyDocument(appName);
-        rawDefineProperty(microAppWindow, 'document', {
-            configurable: false,
-            enumerable: true,
-            get() {
-                throttleDeferForSetAppName(appName);
-                // return globalEnv.rawDocument
-                return proxyDocument;
+        const { proxyDocument, MicroDocument } = this.createProxyDocument(appName);
+        rawDefineProperties(microAppWindow, {
+            document: {
+                configurable: false,
+                enumerable: true,
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    // return globalEnv.rawDocument
+                    return proxyDocument;
+                },
             },
+            Document: {
+                configurable: false,
+                enumerable: false,
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    // return globalEnv.rawRootDocument
+                    return MicroDocument;
+                },
+            }
         });
     }
     // properties associated with the native window
@@ -3991,23 +4049,62 @@ class SandBox {
     removeRouteInfoForKeepAliveApp() {
         removeStateAndPathFromBrowser(this.proxyWindow.__MICRO_APP_NAME__);
     }
+    /**
+     * Create new document and Document
+     */
     createProxyDocument(appName) {
+        const rawDocument = globalEnv.rawDocument;
+        const rawRootDocument = globalEnv.rawRootDocument;
         const createElement = function (tagName, options) {
-            const element = globalEnv.rawCreateElement.call(globalEnv.rawDocument, tagName, options);
+            const element = globalEnv.rawCreateElement.call(rawDocument, tagName, options);
             element.__MICRO_APP_NAME__ = appName;
             return element;
         };
-        const proxyDocument = new Proxy(globalEnv.rawDocument, {
+        const proxyDocument = new Proxy(rawDocument, {
             get(target, key) {
                 throttleDeferForSetAppName(appName);
                 throttleDeferForParentNode(proxyDocument);
                 if (key === 'createElement')
                     return createElement;
+                if (key === Symbol.toStringTag)
+                    return 'ProxyDocument';
                 const rawValue = Reflect.get(target, key);
-                return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'DOCUMENT') : rawValue;
+                return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
             },
         });
-        return proxyDocument;
+        class MicroDocument {
+            static [Symbol.hasInstance](target) {
+                let proto = target;
+                while (proto = Object.getPrototypeOf(proto)) {
+                    if (proto === MicroDocument.prototype) {
+                        return true;
+                    }
+                }
+                return (target === proxyDocument ||
+                    target instanceof rawRootDocument);
+            }
+        }
+        /**
+         * TIP:
+         * 1. child class __proto__, which represents the inherit of the constructor, always points to the parent class
+         * 2. child class prototype.__proto__, which represents the inherit of methods, always points to parent class prototype
+         * e.g.
+         * class B extends A {}
+         * B.__proto__ === A // true
+         * B.prototype.__proto__ === A.prototype // true
+         */
+        Object.setPrototypeOf(MicroDocument, rawRootDocument);
+        Object.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
@@ -4076,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;
@@ -4089,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(),
@@ -4152,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;
@@ -4436,6 +4532,7 @@ function defineElement(tagName) {
                     this.setAttribute('name', this.appName);
                 }
             };
+            // patchSetAttribute hijiack data attribute, it needs exec first
             patchSetAttribute();
         }
         static get observedAttributes() {
@@ -4612,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
@@ -4631,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);
         }
@@ -4671,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';
         }
@@ -4801,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);
@@ -4809,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;
@@ -4861,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() &&
@@ -4957,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');
         }
@@ -4982,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);