@micro-zoe/micro-app 1.0.0-rc.3 → 1.0.0-rc.4

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.3';
+const version = '1.0.0-rc.4';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -116,6 +116,26 @@ function isMicroAppBody(target) {
 function isProxyDocument(target) {
     return toTypeString(target) === '[object ProxyDocument]';
 }
+function includes(target, searchElement, fromIndex) {
+    if (target == null) {
+        throw new TypeError('includes target is null or undefined');
+    }
+    const O = Object(target);
+    const len = parseInt(O.length, 10) || 0;
+    if (len === 0)
+        return false;
+    // @ts-ignore
+    fromIndex = parseInt(fromIndex, 10) || 0;
+    let i = Math.max(fromIndex >= 0 ? fromIndex : len + fromIndex, 0);
+    while (i < len) {
+        // NaN !== NaN
+        if (searchElement === O[i] || (searchElement !== searchElement && O[i] !== O[i])) {
+            return true;
+        }
+        i++;
+    }
+    return false;
+}
 /**
  * format error log
  * @param msg message
@@ -179,7 +199,7 @@ function formatAppURL(url, appName = null) {
     if (!isString(url) || !url)
         return '';
     try {
-        const { origin, pathname, search } = createURL(addProtocol(url));
+        const { origin, pathname, search } = createURL(addProtocol(url), (window.rawWindow || window).location.href);
         // If it ends with .html/.node/.php/.net/.etc, don’t need to add /
         if (/\.(\w+)$/.test(pathname)) {
             return `${origin}${pathname}${search}`;
@@ -318,21 +338,28 @@ let currentMicroAppName = null;
 function setCurrentAppName(appName) {
     currentMicroAppName = appName;
 }
-function throttleDeferForSetAppName(appName) {
-    if (currentMicroAppName !== appName) {
-        setCurrentAppName(appName);
-        defer(() => {
-            setCurrentAppName(null);
-        });
-    }
-}
 // get the currently running app.name
 function getCurrentAppName() {
     return currentMicroAppName;
 }
 // Clear appName
-function removeDomScope() {
+let preventSetAppName = false;
+function removeDomScope(force) {
     setCurrentAppName(null);
+    if (force && !preventSetAppName) {
+        preventSetAppName = true;
+        defer(() => {
+            preventSetAppName = false;
+        });
+    }
+}
+function throttleDeferForSetAppName(appName) {
+    if (currentMicroAppName !== appName && !preventSetAppName) {
+        setCurrentAppName(appName);
+        defer(() => {
+            setCurrentAppName(null);
+        });
+    }
 }
 /**
  * Create pure elements
@@ -344,33 +371,6 @@ function pureCreateElement(tagName, options) {
     element.__PURE_ELEMENT__ = true;
     return element;
 }
-/**
- * clone origin elements to target
- * @param origin Cloned element
- * @param target Accept cloned elements
- * @param deep deep clone or transfer dom
- */
-function cloneContainer(target, origin, deep) {
-    // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
-    if (origin) {
-        target.innerHTML = '';
-        if (deep) {
-            // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
-            const clonedNode = origin.cloneNode(true);
-            const fragment = document.createDocumentFragment();
-            Array.from(clonedNode.childNodes).forEach((node) => {
-                fragment.appendChild(node);
-            });
-            target.appendChild(fragment);
-        }
-        else {
-            Array.from(origin.childNodes).forEach((node) => {
-                target.appendChild(node);
-            });
-        }
-    }
-    return target;
-}
 // is invalid key of querySelector
 function isInvalidQuerySelectorKey(key) {
     return !key || /(^\d)|([^\w\d-_\u4e00-\u9fa5])/gi.test(key);
@@ -1295,12 +1295,12 @@ function fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult) {
          */
         if (fiberStyleResult) {
             fiberStyleResult.then(() => {
-                fiberLinkTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                fiberLinkTasks.push(() => Promise.resolve(app.onLoad({ html: wrapElement })));
                 serialExecFiberTasks(fiberLinkTasks);
             });
         }
         else {
-            app.onLoad(wrapElement);
+            app.onLoad({ html: wrapElement });
         }
     });
 }
@@ -1473,13 +1473,24 @@ var MicroAppConfig;
 // prefetch level
 const PREFETCH_LEVEL = [1, 2, 3];
 // memory router constants
+// default mode, child router info will sync to browser url
 const DEFAULT_ROUTER_MODE = 'search';
-const ROUTER_MODE_HISTORY = 'history';
-const ROUTER_MODE_CUSTOM = 'custom';
+/**
+ * render base on browser url, and location.origin location.href point to base app
+ * equal to disable-memory-router
+ * NOTE:
+ *  1. The only difference between native and native-scope is location.origin, in native-scope mode location.origin point to child app
+*/
+const ROUTER_MODE_NATIVE = 'native';
+// render base on browser url, but location.origin location.href point to child app
+const ROUTER_MODE_NATIVE_SCOPE = 'native-scope';
+// search mode, but child router info will not sync to browser url
+const ROUTER_MODE_PURE = 'pure';
 const ROUTER_MODE_LIST = [
     DEFAULT_ROUTER_MODE,
-    ROUTER_MODE_HISTORY,
-    ROUTER_MODE_CUSTOM,
+    ROUTER_MODE_NATIVE,
+    ROUTER_MODE_NATIVE_SCOPE,
+    ROUTER_MODE_PURE,
 ];
 // event bound to child app window
 const SCOPE_WINDOW_EVENT = [
@@ -1494,6 +1505,7 @@ const SCOPE_WINDOW_EVENT = [
     'mounted',
 ];
 // on event bound to child app window
+// TODO: with和iframe处理方式不同，需修改
 const SCOPE_WINDOW_ON_EVENT = [
     'onpopstate',
     'onhashchange',
@@ -1790,16 +1802,16 @@ function fetchScriptsFromHtml(wrapElement, app) {
             logError(err, app.name);
         }, () => {
             if (fiberScriptTasks) {
-                fiberScriptTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                fiberScriptTasks.push(() => Promise.resolve(app.onLoad({ html: wrapElement })));
                 serialExecFiberTasks(fiberScriptTasks);
             }
             else {
-                app.onLoad(wrapElement);
+                app.onLoad({ html: wrapElement });
             }
         });
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
 }
 /**
@@ -2123,15 +2135,6 @@ function processCode(configs, code, address) {
     }, code);
 }
 
-/**
- * transform html string to dom
- * @param str string dom
- */
-function getWrapElement(str) {
-    const wrapDiv = pureCreateElement('div');
-    wrapDiv.innerHTML = str;
-    return wrapDiv;
-}
 /**
  * Recursively process each child element
  * @param parent parent element
@@ -2188,7 +2191,7 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
  * @param app app
  */
 function extractSourceDom(htmlStr, app) {
-    const wrapElement = getWrapElement(htmlStr);
+    const wrapElement = app.parseHtmlString(htmlStr);
     const microAppHead = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-head');
     const microAppBody = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-body');
     if (!microAppHead || !microAppBody) {
@@ -2206,16 +2209,16 @@ function extractSourceDom(htmlStr, app) {
         fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult);
     }
     else if (fiberStyleResult) {
-        fiberStyleResult.then(() => app.onLoad(wrapElement));
+        fiberStyleResult.then(() => app.onLoad({ html: wrapElement }));
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
     if (app.source.scripts.size) {
         fetchScriptsFromHtml(wrapElement, app);
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
 }
 
@@ -2751,12 +2754,17 @@ function createProxyDocument(appName, sandbox) {
     const sstEventListenerMap = new Map();
     let onClickHandler = null;
     let sstOnClickHandler = null;
-    const { rawDocument, rawCreateElement, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
+    const { rawDocument, rawCreateElement, rawCreateElementNS, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
     function createElement(tagName, options) {
         const element = rawCreateElement.call(rawDocument, tagName, options);
         element.__MICRO_APP_NAME__ = appName;
         return element;
     }
+    function createElementNS(namespaceURI, name, options) {
+        const element = rawCreateElementNS.call(rawDocument, namespaceURI, name, options);
+        element.__MICRO_APP_NAME__ = appName;
+        return element;
+    }
     /**
      * TODO:
      *  1. listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
@@ -2872,6 +2880,8 @@ function createProxyDocument(appName, sandbox) {
             // TODO: 转换成数据形式，类似iframe的方式
             if (key === 'createElement')
                 return createElement;
+            if (key === 'createElementNS')
+                return createElementNS;
             if (key === Symbol.toStringTag)
                 return 'ProxyDocument';
             if (key === 'defaultView')
@@ -2968,7 +2978,7 @@ function createMicroDocument(appName, proxyDocument) {
 function patchWindow(appName, microAppWindow, sandbox) {
     patchWindowProperty(microAppWindow);
     createProxyWindow(appName, microAppWindow, sandbox);
-    return patchWindowEffect(microAppWindow);
+    return patchWindowEffect(microAppWindow, appName);
 }
 /**
  * rewrite special properties of window
@@ -3009,22 +3019,22 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
             throttleDeferForSetAppName(appName);
             if (Reflect.has(target, key) ||
                 (isString(key) && /^__MICRO_APP_/.test(key)) ||
-                sandbox.scopeProperties.includes(key)) {
-                if (RAW_GLOBAL_TARGET.includes(key))
+                includes(sandbox.scopeProperties, key)) {
+                if (includes(RAW_GLOBAL_TARGET, key))
                     removeDomScope();
                 return Reflect.get(target, key);
             }
             return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
         },
         set: (target, key, value) => {
-            if (sandbox.adapter.escapeSetterKeyList.includes(key)) {
+            if (includes(sandbox.rawWindowScopeKeyList, key)) {
                 Reflect.set(rawWindow, key, value);
             }
             else if (
             // target.hasOwnProperty has been rewritten
             !rawHasOwnProperty.call(target, key) &&
                 rawHasOwnProperty.call(rawWindow, key) &&
-                !sandbox.scopeProperties.includes(key)) {
+                !includes(sandbox.scopeProperties, key)) {
                 const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
                 const { configurable, enumerable, writable, set } = descriptor;
                 // set value because it can be set
@@ -3037,32 +3047,37 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
                 sandbox.injectedKeys.add(key);
             }
             else {
-                !Reflect.has(target, key) && sandbox.injectedKeys.add(key);
+                // all scopeProperties will add to injectedKeys, use for key in window (Proxy.has)
+                if (!Reflect.has(target, key) || includes(sandbox.scopeProperties, key)) {
+                    sandbox.injectedKeys.add(key);
+                }
                 Reflect.set(target, key, value);
             }
-            if ((sandbox.escapeProperties.includes(key) ||
-                (sandbox.adapter.staticEscapeProperties.includes(key) &&
+            if ((includes(sandbox.escapeProperties, key) ||
+                (
+                // TODO: staticEscapeProperties 合并到 escapeProperties
+                includes(sandbox.staticEscapeProperties, key) &&
                     !Reflect.has(rawWindow, key))) &&
-                !sandbox.scopeProperties.includes(key)) {
+                !includes(sandbox.scopeProperties, key)) {
                 !Reflect.has(rawWindow, key) && sandbox.escapeKeys.add(key);
                 Reflect.set(rawWindow, key, value);
             }
             return true;
         },
         has: (target, key) => {
-            if (sandbox.scopeProperties.includes(key)) {
-                /**
-                 * Some keywords, such as Vue, need to meet two conditions at the same time:
-                 * 1. 'Vue' in window --> false
-                 * 2. Vue (top level variable) // undefined
-                 * Issue https://github.com/micro-zoe/micro-app/issues/686
-                 */
-                if (sandbox.adapter.staticScopeProperties.includes(key)) {
-                    return !!target[key];
+            /**
+             * Some keywords, such as Vue, need to meet two conditions at the same time:
+             * 1. window.Vue --> undefined
+             * 2. 'Vue' in window --> false
+             * Issue https://github.com/micro-zoe/micro-app/issues/686
+             */
+            if (includes(sandbox.scopeProperties, key)) {
+                if (sandbox.injectedKeys.has(key)) {
+                    return Reflect.has(target, key); // true
                 }
-                return key in target;
+                return !!target[key]; // false
             }
-            return key in target || key in rawWindow;
+            return Reflect.has(target, key) || Reflect.has(rawWindow, key);
         },
         // Object.getOwnPropertyDescriptor(window, key)
         getOwnPropertyDescriptor: (target, key) => {
@@ -3107,14 +3122,26 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
  * Rewrite side-effect events
  * @param microAppWindow micro window
  */
-function patchWindowEffect(microAppWindow) {
+function patchWindowEffect(microAppWindow, appName) {
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     const intervalIdMap = new Map();
     const timeoutIdMap = new Map();
     const { rawWindow, rawAddEventListener, rawRemoveEventListener, rawDispatchEvent, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, } = globalEnv;
+    /**
+     * All events will bind to microAppElement or rawWindow
+     * Some special events, such as popstate、load、unmount、appstate-change、statechange..., bind to microAppElement, others bind to rawWindow
+     * NOTE:
+     *  1、At first, microAppWindow = new EventTarget(), but it can not compatible with iOS 14 or below, so microAppElement was used instead. (2024.1.22)
+     * @param type event name
+     * @returns microAppElement/rawWindow
+     */
     function getEventTarget(type) {
-        return SCOPE_WINDOW_EVENT.includes(type) ? microAppWindow : rawWindow;
+        var _a;
+        if (SCOPE_WINDOW_EVENT.includes(type) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
+            return getRootContainer(appInstanceMap.get(appName).container);
+        }
+        return rawWindow;
     }
     /**
      * listener may be null, e.g test-passive
@@ -3228,7 +3255,7 @@ function patchWindowEffect(microAppWindow) {
 
 // set micro app state to origin state
 function setMicroState(appName, microState) {
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         const rawState = globalEnv.rawWindow.history.state;
         const additionalState = {
             microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
@@ -3242,7 +3269,7 @@ function setMicroState(appName, microState) {
 }
 // delete micro app state form origin state
 function removeMicroState(appName, rawState) {
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
             if (!isUndefined(rawState.microAppState[appName])) {
                 delete rawState.microAppState[appName];
@@ -3259,7 +3286,7 @@ function removeMicroState(appName, rawState) {
 function getMicroState(appName) {
     var _a;
     const rawState = globalEnv.rawWindow.history.state;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
     }
     return rawState;
@@ -3299,8 +3326,11 @@ function formatQueryAppName(appName) {
  */
 function getMicroPathFromURL(appName) {
     var _a, _b;
+    // TODO: pure模式从state中获取地址
+    if (isRouterModePure(appName))
+        return null;
     const rawLocation = globalEnv.rawWindow.location;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         const queryObject = getQueryObjectFromURL(rawLocation.search, rawLocation.hash);
         const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
         return isString(microPath) ? decodeMicroPath(microPath) : null;
@@ -3315,7 +3345,7 @@ function getMicroPathFromURL(appName) {
 function setMicroPathToURL(appName, targetLocation) {
     const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
     let isAttach2Hash = false;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         let { pathname, search, hash } = globalEnv.rawWindow.location;
         const queryObject = getQueryObjectFromURL(search, hash);
         const encodedMicroPath = encodeMicroPath(targetFullPath);
@@ -3367,7 +3397,7 @@ function removeMicroPathFromURL(appName, targetLocation) {
     var _a, _b, _c, _d;
     let { pathname, search, hash } = targetLocation || globalEnv.rawWindow.location;
     let isAttach2Hash = false;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         const queryObject = getQueryObjectFromURL(search, hash);
         if ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) {
             isAttach2Hash = true;
@@ -3427,15 +3457,31 @@ function isEffectiveApp(appName) {
      */
     return !!(app && !app.isPrefetch);
 }
+// router mode is search
+function isRouterModeSearch(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === DEFAULT_ROUTER_MODE);
+}
+// router mode is history
+function isRouterModeNative(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_NATIVE);
+}
+// router mode is disable
+function isRouterModeNativeScope(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_NATIVE_SCOPE);
+}
+// router mode is pure
+function isRouterModePure(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_PURE);
+}
 /**
- * router mode is custom
- * NOTE:
- *  1. if sandbox disabled, router mode defaults to custom
- *  2. if app not exist, router mode defaults to custom
+ * router mode is history or disable
  */
 function isRouterModeCustom(appName) {
-    const app = appInstanceMap.get(appName);
-    return !app || !app.sandBox || app.routerMode === ROUTER_MODE_CUSTOM;
+    return isRouterModeNative(appName) || isRouterModeNativeScope(appName);
 }
 /**
  * get memory router mode of child app
@@ -3443,21 +3489,21 @@ function isRouterModeCustom(appName) {
  *  1. if microAppElement exists, it means the app render by the micro-app element
  *  2. if microAppElement not exists, it means it is prerender app
  * @param mode native config
- * @param microAppElement micro-app element
- * @returns mode
+ * @param inlineDisableMemoryRouter disable-memory-router set by micro-app element or prerender
+ * @returns router mode
  */
-function getRouterMode(mode, microAppElement) {
-    let routerMode;
+function getRouterMode(mode, inlineDisableMemoryRouter) {
     /**
      * compatible with disable-memory-router in older versions
-     * if disable-memory-router is true, router-mode will be custom
+     * if disable-memory-router is true, router-mode will be disable
+     * Priority:
+     *  inline disable-memory-router > inline router-mode > global disable-memory-router > global router-mode
      */
-    if (microAppElement) {
-        routerMode = microAppElement.getDisposeResult('disable-memory-router') ? ROUTER_MODE_CUSTOM : mode || microApp.options['router-mode'] || '';
-    }
-    else {
-        routerMode = microApp.options['disable-memory-router'] ? ROUTER_MODE_CUSTOM : mode || microApp.options['router-mode'] || '';
-    }
+    const routerMode = ((inlineDisableMemoryRouter && ROUTER_MODE_NATIVE) ||
+        mode ||
+        (microApp.options['disable-memory-router'] && ROUTER_MODE_NATIVE) ||
+        microApp.options['router-mode'] ||
+        DEFAULT_ROUTER_MODE);
     return ROUTER_MODE_LIST.includes(routerMode) ? routerMode : DEFAULT_ROUTER_MODE;
 }
 
@@ -3603,7 +3649,7 @@ function dispatchNativeEvent(appName, onlyForBrowser, oldHref) {
  * create proxyHistory for microApp
  * MDN https://developer.mozilla.org/en-US/docs/Web/API/History
  * @param appName app name
- * @param microLocation microApp location
+ * @param microLocation microApp location(with: proxyLocation iframe: iframeWindow.location)
  */
 function createMicroHistory(appName, microLocation) {
     const rawHistory = globalEnv.rawWindow.history;
@@ -3614,7 +3660,9 @@ function createMicroHistory(appName, microLocation) {
             if (isString(rests[2]) || isURL(rests[2])) {
                 const targetLocation = createURL(rests[2], microLocation.href);
                 const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
+                if (!isRouterModePure(appName)) {
+                    navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
+                }
                 if (targetFullPath !== microLocation.fullPath) {
                     updateMicroLocation(appName, targetFullPath, microLocation);
                 }
@@ -3693,10 +3741,10 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
         /**
          * TODO:
-         *  1. 如果所有模式统一发送popstate事件，则!isRouterModeCustom(appName)要去掉
+         *  1. 如果所有模式统一发送popstate事件，则isRouterModeSearch(appName)要去掉
          *  2. 如果发送事件，则会导致vue router-view :key='router.path'绑定，无限卸载应用，死循环
          */
-        if (oldFullPath !== result.fullPath && !isRouterModeCustom(appName)) {
+        if (oldFullPath !== result.fullPath && isRouterModeSearch(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
         }
     }
@@ -3743,7 +3791,7 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            if (!isRouterModeCustom(appName) && !getMicroPathFromURL(appName)) {
+            if (isRouterModeSearch(appName) && !getMicroPathFromURL(appName)) {
                 const app = appInstanceMap.get(appName);
                 attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
             }
@@ -3795,8 +3843,10 @@ function createRouterApi() {
         const currentFullPath = microLocation.pathname + microLocation.search + microLocation.hash;
         const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
         if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
-            const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
-            navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+            if (!isRouterModePure(appName)) {
+                const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
+                navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+            }
             /**
              * TODO:
              *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
@@ -3809,7 +3859,7 @@ function createRouterApi() {
              *  NOTE1: history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
              *  NOTE2: 关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
              */
-            if (isRouterModeCustom(appName)) {
+            if (isRouterModeCustom(appName) || isRouterModePure(appName)) {
                 updateMicroLocationWithEvent(appName, targetFullPath);
             }
         }
@@ -3927,7 +3977,7 @@ function createRouterApi() {
      * 3. router mode is custom
      */
     function commonHandlerForAttachToURL(appName) {
-        if (!isRouterModeCustom(appName)) {
+        if (isRouterModeSearch(appName)) {
             const app = appInstanceMap.get(appName);
             attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
         }
@@ -4159,7 +4209,7 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
         if (targetLocation.origin === proxyLocation.origin) {
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
             // if disable memory-router, navigate directly through rawLocation
-            if (!isRouterModeCustom(appName)) {
+            if (isRouterModeSearch(appName)) {
                 /**
                  * change hash with location.href will not trigger the browser reload
                  * so we use pushState & reload to imitate href behavior
@@ -4245,6 +4295,20 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
     const proxyLocation = new Proxy({}, {
         get: (_, key) => {
             const target = getTarget();
+            if (key === 'assign')
+                return assign;
+            if (key === 'replace')
+                return replace;
+            if (key === 'reload')
+                return reload;
+            if (key === 'self')
+                return target;
+            if (key === 'fullPath')
+                return target.fullPath;
+            if (isRouterModeNative(appName)) {
+                return bindFunctionToRawTarget(Reflect.get(rawLocation, key), rawLocation, 'LOCATION');
+            }
+            // src of iframe is base app address, it needs to be replaced separately
             if (isIframe) {
                 // host hostname port protocol
                 if (hijackMicroLocationKeys.includes(key)) {
@@ -4255,29 +4319,21 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                     return target[key].replace(browserHost, childHost);
                 }
             }
-            if (key === 'assign')
-                return assign;
-            if (key === 'replace')
-                return replace;
-            if (key === 'reload')
-                return reload;
-            if (key === 'self')
-                return target;
             return bindFunctionToRawTarget(Reflect.get(target, key), target, 'LOCATION');
         },
         set: (_, key, value) => {
             if (isEffectiveApp(appName)) {
                 const target = getTarget();
                 if (key === 'href') {
-                    const targetPath = commonHandler(value, 'pushState');
                     /**
                      * In vite, targetPath without origin will be completed with child origin
                      * So we use browser origin to complete targetPath to avoid this problem
-                     * But, why child app can affect browser jump?
-                     * Guess(need check):
-                     *  1. vite records the origin when init
-                     *  2. listen for browser jump and automatically complete the address
+                     * NOTE:
+                     *  1. history mode & value is childOrigin + path ==> jump to browserOrigin + path
+                     *  2. disable mode & value is childOrigin + path ==> jump to childOrigin + path
+                     *  3. search mode & value is browserOrigin + path ==> jump to browserOrigin + path
                      */
+                    const targetPath = commonHandler(value, 'pushState');
                     if (targetPath) {
                         rawLocation.href = createURL(targetPath, rawLocation.origin).href;
                     }
@@ -4362,9 +4418,11 @@ function updateMicroLocation(appName, path, microLocation, type) {
         (_a = microAppWindow.rawReplaceState) === null || _a === void 0 ? void 0 : _a.call(microAppWindow.history, getMicroState(appName), '', newLocation.href);
     }
     else {
-        for (const key of locationKeys) {
-            microLocation.self[key] = newLocation[key];
+        let targetHref = newLocation.href;
+        if (microLocation.self.origin !== newLocation.origin) {
+            targetHref = targetHref.replace(newLocation.origin, microLocation.self.origin);
         }
+        microLocation.self.href = targetHref;
     }
     // update latest values of microLocation to `to`
     const to = createGuardLocation(appName, microLocation);
@@ -4375,13 +4433,9 @@ function updateMicroLocation(appName, path, microLocation, type) {
 }
 
 /**
- * TODO: 关于关闭虚拟路由系统的临时笔记 - 即custom模式，虚拟路由不支持关闭
- * 1. with沙箱关闭虚拟路由最好和iframe保持一致
- * 2. default-page无法使用，但是用基座的地址可以实现一样的效果
- * 3. keep-router-state功能失效，因为始终为true
- * 4. 基座控制子应用跳转地址改变，正确的值为：baseRoute + 子应用地址，这要在文档中说明，否则很容易出错，确实也很难理解
- * 5. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
- * 6. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
+ * TODO: 关于关闭虚拟路由系统的custom、history模式
+ * 1. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
+ * 2. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
  */
 /**
  * The router system has two operations: read and write
@@ -4422,8 +4476,10 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     // update microLocation with defaultPage
     if (defaultPage)
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
-    // attach microApp route info to browser URL
-    attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
+    if (!isRouterModePure(appName)) {
+        // attach microApp route info to browser URL
+        attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
+    }
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -4440,7 +4496,9 @@ function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
             const { pathname, search, hash } = createURL(url);
             updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
         }
-        removePathFromBrowser(appName);
+        if (!isRouterModePure(appName)) {
+            removePathFromBrowser(appName);
+        }
     }
     clearRouterWhenUnmount(appName);
 }
@@ -4452,10 +4510,10 @@ function removePathFromBrowser(appName) {
     attachRouteToBrowserURL(appName, removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
-class Adapter {
+class BaseSandbox {
     constructor() {
         // keys that can only assigned to rawWindow
-        this.escapeSetterKeyList = [
+        this.rawWindowScopeKeyList = [
             'location',
         ];
         // keys that can escape to rawWindow
@@ -4468,7 +4526,18 @@ class Adapter {
             'webpackJsonp',
             'webpackHotUpdate',
             'Vue',
+            // TODO: 是否可以和constants/SCOPE_WINDOW_ON_EVENT合并
+            'onpopstate',
+            'onhashchange',
         ];
+        // Properties that can only get and set in microAppWindow, will not escape to rawWindow
+        this.scopeProperties = Array.from(this.staticScopeProperties);
+        // Properties that can be escape to rawWindow
+        this.escapeProperties = [];
+        // Properties newly added to microAppWindow
+        this.injectedKeys = new Set();
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
         this.injectReactHMRProperty();
     }
     // adapter for react
@@ -4486,6 +4555,14 @@ class Adapter {
         }
     }
 }
+/**
+ * TODO:
+ *  1、将class Adapter去掉，改为CustomWindow，或者让CustomWindow继承Adapter
+ *  2、with沙箱中的常量放入CustomWindow，虽然和iframe沙箱不一致，但更合理
+ * 修改时机：在iframe沙箱支持插件后再修改
+ */
+class CustomWindow {
+}
 // Fix conflict of babel-polyfill@6.x
 function fixBabelPolyfill6() {
     if (globalEnv.rawWindow._babelPolyfill)
@@ -4544,6 +4621,7 @@ function updateElementInfo(node, appName) {
         rawDefineProperties(node, {
             baseURI: {
                 configurable: true,
+                // if disable-memory-router or router-mode='disable', href point to base app
                 get: () => proxyWindow.location.href,
             },
             __MICRO_APP_NAME__: {
@@ -4552,58 +4630,9 @@ function updateElementInfo(node, appName) {
                 value: appName,
             },
         });
-        if (isIframeSandbox(appName)) {
-            /**
-             * If HTML built-in node belongs to base app, it needs to be handled separately for parentNode
-             * Fix error for nuxt@2.x + ElementUI@2.x
-             */
-            if (node instanceof globalEnv.rawRootNode) {
-                rawDefineProperty(node, 'parentNode', {
-                    configurable: true,
-                    get: createGetterForIframeParentNode(appName, globalEnv.rawParentNodeDesc, true)
-                });
-            }
-        }
     }
     return node;
 }
-/**
- * patch iframe node parentNode
- * Scenes:
- *  1. iframe common node: patch Node.prototype.parentNode to hijack parentNode
- *  2. iframe HTML built-in node: belongs to base app, we should rewrite parentNode for every built-in node
- * NOTE:
- *  1. HTML built-in node parentNode cannot point to raw body, otherwise Vue2 will render failed
- * @param appName app name
- * @param parentNode parentNode Descriptor of iframe or browser
- * @param HTMLBuildInNode is HTML built-in node
- */
-function createGetterForIframeParentNode(appName, parentNodeDesc, HTMLBuildInNode) {
-    return function () {
-        var _a, _b, _c;
-        /**
-         * set current appName for hijack parentNode of html
-         * NOTE:
-         *  1. Is there a problem with setting the current appName in iframe mode
-         */
-        throttleDeferForSetAppName(appName);
-        const result = parentNodeDesc.get.call(this);
-        /**
-          * If parentNode is <micro-app-body>, return rawDocument.body
-          * Scenes:
-          *  1. element-ui@2/lib/utils/vue-popper.js
-          *    if (this.popperElm.parentNode === document.body) ...
-          * WARNING:
-          *  Will it cause other problems ?
-          *  e.g. target.parentNode.remove(target)
-          */
-        if (!HTMLBuildInNode &&
-            isMicroAppBody(result) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
-            return ((_c = (_b = microApp.options).getRootElementParentNode) === null || _c === void 0 ? void 0 : _c.call(_b, this, appName)) || globalEnv.rawDocument.body;
-        }
-        return result;
-    };
-}
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/API/fetch
@@ -4707,23 +4736,12 @@ function useMicroEventSource() {
 }
 
 const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
-class WithSandBox {
+class WithSandBox extends BaseSandbox {
     constructor(appName, url) {
+        super();
         this.active = false;
-        /**
-         * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
-         * Fix https://github.com/micro-zoe/micro-app/issues/234
-         */
-        this.scopeProperties = [];
-        // Properties that can be escape to rawWindow
-        this.escapeProperties = [];
-        // Properties escape to rawWindow, cleared when unmount
-        this.escapeKeys = new Set();
-        // Properties newly added to microAppWindow
-        this.injectedKeys = new Set();
-        this.microAppWindow = new EventTarget(); // Proxy target
+        this.microAppWindow = new CustomWindow(); // Proxy target
         this.patchWith((resolve) => {
-            this.adapter = new Adapter();
             // get scopeProperties and escapeProperties from plugins
             this.getSpecialProperties(appName);
             // create location, history for child app
@@ -4732,6 +4750,8 @@ class WithSandBox {
             this.windowEffect = patchWindow(appName, this.microAppWindow, this);
             // patch document of child app
             this.documentEffect = patchDocument(appName, this.microAppWindow, this);
+            // properties associated with the native window
+            this.setMappingPropertiesWithRawDescriptor(this.microAppWindow);
             // inject global properties
             this.initStaticGlobalKeys(appName, url, this.microAppWindow);
             resolve();
@@ -4820,6 +4840,7 @@ class WithSandBox {
     }
     /**
      * inject global properties to microAppWindow
+     * TODO: 设置为只读变量
      * @param appName app name
      * @param url app url
      * @param microAppWindow micro window
@@ -4833,6 +4854,7 @@ class WithSandBox {
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
         microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
         microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
         microAppWindow.__MICRO_APP_SANDBOX__ = this;
         microAppWindow.__MICRO_APP_SANDBOX_TYPE__ = 'with';
         microAppWindow.rawWindow = globalEnv.rawWindow;
@@ -4842,7 +4864,6 @@ class WithSandBox {
             pureCreateElement,
             router,
         });
-        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
     }
     /**
      * Record global effect and then release (effect: global event, timeout, data listener)
@@ -4925,7 +4946,6 @@ class WithSandBox {
      */
     getSpecialProperties(appName) {
         var _a;
-        this.scopeProperties = this.scopeProperties.concat(this.adapter.staticScopeProperties);
         if (isPlainObject(microApp.options.plugins)) {
             this.commonActionForSpecialProperties(microApp.options.plugins.global);
             this.commonActionForSpecialProperties((_a = microApp.options.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
@@ -4967,9 +4987,10 @@ class WithSandBox {
             topValue = rawWindow.top;
             parentValue = rawWindow.parent;
         }
-        // TODO: 用rawDefineProperties
-        rawDefineProperty(microAppWindow, 'top', this.createDescriptorForMicroAppWindow('top', topValue));
-        rawDefineProperty(microAppWindow, 'parent', this.createDescriptorForMicroAppWindow('parent', parentValue));
+        rawDefineProperties(microAppWindow, {
+            top: this.createDescriptorForMicroAppWindow('top', topValue),
+            parent: this.createDescriptorForMicroAppWindow('parent', parentValue),
+        });
         GLOBAL_KEY_TO_WINDOW.forEach((key) => {
             rawDefineProperty(microAppWindow, key, this.createDescriptorForMicroAppWindow(key, this.proxyWindow));
         });
@@ -5134,7 +5155,7 @@ class WithSandBox {
 WithSandBox.activeCount = 0; // number of active sandbox
 
 function patchRouter(appName, url, microAppWindow, browserHost) {
-    const childStaticLocation = new URL(url);
+    const childStaticLocation = createURL(url);
     const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
     const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
     // rewrite microAppWindow.history
@@ -5227,18 +5248,35 @@ function patchWindowProperty$1(appName, microAppWindow) {
  */
 function createProxyWindow$1(microAppWindow, sandbox) {
     const rawWindow = globalEnv.rawWindow;
-    const customProperties = [];
+    const customProperties = new Set();
+    /**
+     * proxyWindow will only take effect in certain scenes, such as window.key
+     * e.g:
+     *  1. window.key in normal app --> fall into proxyWindow
+     *  2. window.key in module app(vite), fall into microAppWindow(iframeWindow)
+     *  3. if (key)... --> fall into microAppWindow(iframeWindow)
+     */
     const proxyWindow = new Proxy(microAppWindow, {
         get: (target, key) => {
             if (key === 'location') {
                 return sandbox.proxyLocation;
             }
-            if (GLOBAL_KEY_TO_WINDOW.includes(key.toString())) {
+            if (includes(GLOBAL_KEY_TO_WINDOW, key)) {
                 return proxyWindow;
             }
-            if (customProperties.includes(key)) {
+            if (customProperties.has(key)) {
                 return Reflect.get(target, key);
             }
+            /**
+             * Same as proxyWindow, escapeProperties will only take effect in certain scenes
+             * e.g:
+             *  1. window.key in normal app --> fall into proxyWindow, escapeProperties will effect
+             *  2. window.key in module app(vite), fall into microAppWindow(iframeWindow), escapeProperties will not take effect
+             *  3. if (key)... --> fall into microAppWindow(iframeWindow), escapeProperties will not take effect
+             */
+            if (includes(sandbox.escapeProperties, key) && !Reflect.has(target, key)) {
+                return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
+            }
             return bindFunctionToRawTarget(Reflect.get(target, key), target);
         },
         set: (target, key, value) => {
@@ -5246,10 +5284,10 @@ function createProxyWindow$1(microAppWindow, sandbox) {
                 return Reflect.set(rawWindow, key, value);
             }
             if (!Reflect.has(target, key)) {
-                customProperties.push(key);
+                customProperties.add(key);
             }
             Reflect.set(target, key, value);
-            if (sandbox.escapeProperties.includes(key)) {
+            if (includes(sandbox.escapeProperties, key)) {
                 !Reflect.has(rawWindow, key) && sandbox.escapeKeys.add(key);
                 Reflect.set(rawWindow, key, value);
             }
@@ -5364,7 +5402,9 @@ function patchDocumentPrototype(appName, microAppWindow) {
     const microRootDocument = microAppWindow.Document;
     const microDocument = microAppWindow.document;
     const rawMicroCreateElement = microRootDocument.prototype.createElement;
+    const rawMicroCreateElementNS = microRootDocument.prototype.createElementNS;
     const rawMicroCreateTextNode = microRootDocument.prototype.createTextNode;
+    const rawMicroCreateDocumentFragment = microRootDocument.prototype.createDocumentFragment;
     const rawMicroCreateComment = microRootDocument.prototype.createComment;
     const rawMicroQuerySelector = microRootDocument.prototype.querySelector;
     const rawMicroQuerySelectorAll = microRootDocument.prototype.querySelectorAll;
@@ -5385,10 +5425,18 @@ function patchDocumentPrototype(appName, microAppWindow) {
         const element = rawMicroCreateElement.call(this, tagName, options);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
+        const element = rawMicroCreateElementNS.call(this, namespaceURI, name, options);
+        return updateElementInfo(element, appName);
+    };
     microRootDocument.prototype.createTextNode = function createTextNode(data) {
         const element = rawMicroCreateTextNode.call(this, data);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = rawMicroCreateDocumentFragment.call(this);
+        return updateElementInfo(element, appName);
+    };
     microRootDocument.prototype.createComment = function createComment(data) {
         const element = rawMicroCreateComment.call(this, data);
         return updateElementInfo(element, appName);
@@ -5489,6 +5537,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
     const createDescriptors = () => {
         const result = {};
         const descList = [
+            // if disable-memory-router or router-mode='disable', href point to base app
             ['documentURI', () => sandbox.proxyLocation.href],
             ['URL', () => sandbox.proxyLocation.href],
             ['documentElement', () => rawDocument.documentElement],
@@ -5722,6 +5771,7 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         // return rootNode
     };
     microRootNode.prototype.appendChild = function appendChild(node) {
+        // TODO: 有必要执行这么多次updateElementInfo？
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroAppendChild.call(this, node);
@@ -5821,7 +5871,29 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
     rawDefineProperty(microRootNode.prototype, 'parentNode', {
         configurable: true,
         enumerable: true,
-        get: createGetterForIframeParentNode(appName, rawParentNodeDesc),
+        get() {
+            var _a, _b, _c;
+            /**
+             * set current appName for hijack parentNode of html
+             * NOTE:
+             *  1. Is there a problem with setting the current appName in iframe mode
+             */
+            throttleDeferForSetAppName(appName);
+            const result = rawParentNodeDesc.get.call(this);
+            /**
+              * If parentNode is <micro-app-body>, return rawDocument.body
+              * Scenes:
+              *  1. element-ui@2/lib/utils/vue-popper.js
+              *    if (this.popperElm.parentNode === document.body) ...
+              * WARNING:
+              *  Will it cause other problems ?
+              *  e.g. target.parentNode.remove(target)
+              */
+            if (isMicroAppBody(result) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
+                return ((_c = (_b = microApp.options).getRootElementParentNode) === null || _c === void 0 ? void 0 : _c.call(_b, this, appName)) || globalEnv.rawDocument.body;
+            }
+            return result;
+        }
     });
     // Adapt to new image(...) scene
     const ImageProxy = new Proxy(microAppWindow.Image, {
@@ -5883,14 +5955,17 @@ class IframeSandbox {
         this.escapeProperties = [];
         // Properties escape to rawWindow, cleared when unmount
         this.escapeKeys = new Set();
-        // TODO: 初始化和每次跳转时都要更新base的href
+        // 初始化和每次跳转时都要更新base的href
         this.updateIframeBase = () => {
             var _a;
-            (_a = this.baseElement) === null || _a === void 0 ? void 0 : _a.setAttribute('href', this.proxyLocation.protocol + '//' + this.proxyLocation.host + this.proxyLocation.pathname);
+            // origin must be child app origin
+            (_a = this.baseElement) === null || _a === void 0 ? void 0 : _a.setAttribute('href', createURL(this.url).origin + this.proxyLocation.pathname);
         };
+        this.appName = appName;
+        this.url = url;
         const rawLocation = globalEnv.rawWindow.location;
         const browserHost = rawLocation.protocol + '//' + rawLocation.host;
-        this.deleteIframeElement = this.createIframeElement(appName, browserHost);
+        this.deleteIframeElement = this.createIframeElement(appName, browserHost + rawLocation.pathname);
         this.microAppWindow = this.iframe.contentWindow;
         this.patchIframe(this.microAppWindow, (resolve) => {
             // create new html to iframe
@@ -5918,13 +5993,13 @@ class IframeSandbox {
     /**
      * create iframe for sandbox
      * @param appName app name
-     * @param browserHost browser origin
+     * @param browserPath browser origin
      * @returns release callback
      */
-    createIframeElement(appName, browserHost) {
+    createIframeElement(appName, browserPath) {
         this.iframe = pureCreateElement('iframe');
         const iframeAttrs = {
-            src: browserHost,
+            src: microApp.options.iframeSrc || browserPath,
             style: 'display: none',
             id: appName,
         };
@@ -6019,6 +6094,7 @@ class IframeSandbox {
      * NOTE:
      *  1. execute as early as possible
      *  2. run after patchRouter & createProxyWindow
+     * TODO: 设置为只读变量
      */
     initStaticGlobalKeys(appName, url, microAppWindow) {
         microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
@@ -6220,6 +6296,7 @@ class IframeSandbox {
         patchElementTree(container, this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
+     * action before exec scripts when mount
      * Actions:
      * 1. patch static elements from html
      * @param container micro app container
@@ -6279,8 +6356,11 @@ class CreateApp {
     }
     /**
      * When resource is loaded, mount app if it is not prefetch or unmount
+     * defaultPage disablePatchRequest routerMode baseroute is only for prerender app
      */
-    onLoad(html, defaultPage, disablePatchRequest, routerMode, baseroute) {
+    onLoad({ html, 
+    // below params is only for prerender app
+    defaultPage, routerMode, baseroute, disablePatchRequest, }) {
         var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
@@ -6311,11 +6391,11 @@ class CreateApp {
                 this.mount({
                     container,
                     inline: this.inline,
-                    routerMode: routerMode,
-                    baseroute: baseroute || '',
                     fiber: true,
                     defaultPage: defaultPage || '',
                     disablePatchRequest: disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : false,
+                    routerMode: routerMode,
+                    baseroute: baseroute || '',
                 });
             }
         }
@@ -6385,7 +6465,7 @@ class CreateApp {
                  */
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
                 // current this.container is <div prerender='true'></div>
-                cloneContainer(container, this.container, false);
+                this.cloneContainer(container, this.container, false);
                 /**
                  * set this.container to <micro-app></micro-app>
                  * NOTE:
@@ -6421,7 +6501,7 @@ class CreateApp {
                     appState: appStates.MOUNTING
                 });
                 // TODO: 将所有cloneContainer中的'as Element'去掉，兼容shadowRoot的场景
-                cloneContainer(this.container, this.source.html, !this.umdMode);
+                this.cloneContainer(this.container, this.source.html, !this.umdMode);
                 (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
                     umdMode: this.umdMode,
                     baseroute,
@@ -6439,6 +6519,7 @@ class CreateApp {
                              * umdHookUnmount can works in default mode
                              * register through window.unmount
                              */
+                            // TODO: 不对，这里要改，因为unmount不一定是函数
                             this.umdHookUnmount = unmount;
                             // if mount & unmount is function, the sub app is umd mode
                             if (isFunction(mount) && isFunction(unmount)) {
@@ -6609,7 +6690,7 @@ class CreateApp {
     actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb, }) {
         var _a;
         if (this.umdMode && this.container && !destroy) {
-            cloneContainer(this.source.html, this.container, false);
+            this.cloneContainer(this.source.html, this.container, false);
         }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
@@ -6636,6 +6717,7 @@ class CreateApp {
         this.preRenderEvents = null;
         this.setKeepAliveState(null);
         // in iframe sandbox & default mode, delete the sandbox & iframeElement
+        // TODO: with沙箱与iframe沙箱保持一致：with沙箱默认模式下删除 或者 iframe沙箱umd模式下保留
         if (this.iframe && !this.umdMode)
             this.sandBox = null;
         if (destroy)
@@ -6667,7 +6749,7 @@ class CreateApp {
         this.setLifeCycleState(lifeCycles.AFTERHIDDEN);
         // dispatch afterHidden event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERHIDDEN);
-        if (this.routerMode !== ROUTER_MODE_CUSTOM) {
+        if (isRouterModeSearch(this.name)) {
             // called after lifeCyclesEvent
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
         }
@@ -6678,7 +6760,7 @@ class CreateApp {
             getRootContainer(this.container).unmount();
         }
         else {
-            this.container = cloneContainer(pureCreateElement('div'), this.container, false);
+            this.container = this.cloneContainer(pureCreateElement('div'), this.container, false);
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
         }
         callback === null || callback === void 0 ? void 0 : callback();
@@ -6694,13 +6776,13 @@ class CreateApp {
         // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
-        this.container = cloneContainer(container, this.container, false);
+        this.container = this.cloneContainer(container, this.container, false);
         /**
          * TODO:
          *  问题：当路由模式为custom时，keep-alive应用在重新展示，是否需要根据子应用location信息更新浏览器地址？
          *  暂时不这么做吧，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
          */
-        if (this.routerMode !== ROUTER_MODE_CUSTOM) {
+        if (isRouterModeSearch(this.name)) {
             // called before lifeCyclesEvent
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
         }
@@ -6724,6 +6806,34 @@ class CreateApp {
         });
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
     }
+    /**
+     * Parse htmlString to DOM
+     * NOTE: iframe sandbox will use DOMParser of iframeWindow, with sandbox will use DOMParser of base app
+     * @param htmlString DOMString
+     * @returns parsed DOM
+     */
+    parseHtmlString(htmlString) {
+        var _a;
+        const DOMParser = ((_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) ? this.sandBox.proxyWindow.DOMParser
+            : globalEnv.rawWindow.DOMParser;
+        return (new DOMParser()).parseFromString(htmlString, 'text/html').body;
+    }
+    /**
+     * clone origin elements to target
+     * @param origin Cloned element
+     * @param target Accept cloned elements
+     * @param deep deep clone or transfer dom
+     */
+    cloneContainer(target, origin, deep) {
+        // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
+        if (origin) {
+            target.innerHTML = '';
+            Array.from(deep ? this.parseHtmlString(origin.innerHTML).childNodes : origin.childNodes).forEach((node) => {
+                target.appendChild(node);
+            });
+        }
+        return target;
+    }
     /**
      * Scene:
      *  1. create app
@@ -6732,12 +6842,7 @@ class CreateApp {
      */
     createSandbox() {
         if (this.useSandbox && !this.sandBox) {
-            if (this.iframe) {
-                this.sandBox = new IframeSandbox(this.name, this.url);
-            }
-            else {
-                this.sandBox = new WithSandBox(this.name, this.url);
-            }
+            this.sandBox = this.iframe ? new IframeSandbox(this.name, this.url) : new WithSandBox(this.name, this.url);
         }
     }
     // set app state
@@ -6902,10 +7007,6 @@ function handleNewNode(child, app) {
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
     const hijackParent = getHijackParent(parent, targetChild, app);
-    /**
-     * If passiveChild is not the child node, insertBefore replaceChild will have a problem, at this time, it will be degraded to appendChild
-     * E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
-     */
     if (hijackParent) {
         /**
          * If parentNode is <micro-app-body>, return rawDocument.body
@@ -6944,11 +7045,28 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
                 });
             }
         }
+        if ((process.env.NODE_ENV !== 'production') &&
+            isIFrameElement(targetChild) &&
+            rawMethod === globalEnv.rawAppendChild) {
+            fixReactHMRConflict(app);
+        }
         /**
          * 1. If passiveChild exists, it must be insertBefore or replaceChild
          * 2. When removeChild, targetChild may not be in microAppHead or head
+         * NOTE:
+         *  1. If passiveChild not in hijackParent, insertBefore replaceChild will be degraded to appendChild
+         *    E.g: document.head.replaceChild(targetChild, document.scripts[0])
+         *  2. If passiveChild not in hijackParent but in parent and method is insertBefore, try insert it into the position corresponding to hijackParent
+         *    E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
+         *    ISSUE: https://github.com/micro-zoe/micro-app/issues/1071
          */
         if (passiveChild && !hijackParent.contains(passiveChild)) {
+            if (rawMethod === globalEnv.rawInsertBefore && parent.contains(passiveChild)) {
+                const indexOfParent = Array.from(parent.childNodes).indexOf(passiveChild);
+                if (hijackParent.childNodes[indexOfParent]) {
+                    return invokeRawMethod(rawMethod, hijackParent, targetChild, hijackParent.childNodes[indexOfParent]);
+                }
+            }
             return globalEnv.rawAppendChild.call(hijackParent, targetChild);
         }
         else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetChild)) {
@@ -6957,11 +7075,6 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             }
             return targetChild;
         }
-        if ((process.env.NODE_ENV !== 'production') &&
-            isIFrameElement(targetChild) &&
-            rawMethod === globalEnv.rawAppendChild) {
-            fixReactHMRConflict(app);
-        }
         return invokeRawMethod(rawMethod, hijackParent, targetChild, passiveChild);
     }
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
@@ -7031,6 +7144,11 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
             currentAppName)) {
         newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
+        if (isStyleElement(newChild)) {
+            const isShadowNode = parent.getRootNode();
+            const isShadowEnvironment = isShadowNode instanceof ShadowRoot;
+            isShadowEnvironment && newChild.setAttribute('ignore', 'true');
+        }
         if (app === null || app === void 0 ? void 0 : app.container) {
             completePathDynamic(app, newChild);
             return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(newChild, app), passiveChild && getMappingNode(passiveChild));
@@ -7117,30 +7235,34 @@ function patchElementAndDocument() {
         this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
         return clonedNode;
     };
-    function getQueryTarget(node) {
+    /**
+     * document.body(head).querySelector(querySelectorAll) hijack to microAppBody(microAppHead).querySelector(querySelectorAll)
+     * NOTE:
+     *  1. May cause some problems!
+     *  2. Add config options?
+     */
+    function getQueryTarget(target) {
         const currentAppName = getCurrentAppName();
-        if ((node === document.body || node === document.head) && currentAppName) {
+        if ((target === document.body || target === document.head) && currentAppName) {
             const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
-                if (node === document.body) {
+                if (target === document.body) {
                     return app.querySelector('micro-app-body');
                 }
-                else if (node === document.head) {
+                else if (target === document.head) {
                     return app.querySelector('micro-app-head');
                 }
             }
         }
-        return null;
+        return target;
     }
     rawRootElement.prototype.querySelector = function querySelector(selectors) {
         var _a;
-        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
-        return globalEnv.rawElementQuerySelector.call(target, selectors);
+        return globalEnv.rawElementQuerySelector.call((_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this, selectors);
     };
     rawRootElement.prototype.querySelectorAll = function querySelectorAll(selectors) {
         var _a;
-        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
-        return globalEnv.rawElementQuerySelectorAll.call(target, selectors);
+        return globalEnv.rawElementQuerySelectorAll.call((_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this, selectors);
     };
     // rewrite setAttribute, complete resource address
     rawRootElement.prototype.setAttribute = function setAttribute(key, value) {
@@ -7268,14 +7390,15 @@ function patchDocument$2() {
         const element = globalEnv.rawCreateElementNS.call(getBindTarget(this), namespaceURI, name, options);
         return markElement(element);
     };
-    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
-        return markElement(element);
-    };
+    // TODO: 放开
     // rawRootDocument.prototype.createTextNode = function createTextNode (data: string): Text {
     //   const element = globalEnv.rawCreateTextNode.call(getBindTarget(this), data)
     //   return markElement(element)
     // }
+    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
+        return markElement(element);
+    };
     rawRootDocument.prototype.createComment = function createComment(data) {
         const element = globalEnv.rawCreateComment.call(getBindTarget(this), data);
         return markElement(element);
@@ -7288,7 +7411,7 @@ function patchDocument$2() {
         if (!currentAppName ||
             !selectors ||
             isUniqueElement(selectors) ||
-            // see https://github.com/micro-zoe/micro-app/issues/56
+            // ISSUE: https://github.com/micro-zoe/micro-app/issues/56
             rawDocument !== _this) {
             return globalEnv.rawQuerySelector.call(_this, selectors);
         }
@@ -7438,8 +7561,8 @@ function initGlobalEnv() {
         // Document proto methods
         const rawCreateElement = rawRootDocument.prototype.createElement;
         const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
-        const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateTextNode = rawRootDocument.prototype.createTextNode;
+        const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateComment = rawRootDocument.prototype.createComment;
         const rawQuerySelector = rawRootDocument.prototype.querySelector;
         const rawQuerySelectorAll = rawRootDocument.prototype.querySelectorAll;
@@ -7999,7 +8122,9 @@ function defineElement(tagName) {
          * @returns router-mode
          */
         getMemoryRouterMode() {
-            return getRouterMode(this.getAttribute('router-mode'), this);
+            return getRouterMode(this.getAttribute('router-mode'), 
+            // is micro-app element set disable-memory-router, like <micro-app disable-memory-router></micro-app>
+            this.compatibleProperties('disable-memory-router') && this.compatibleDisableProperties('disable-memory-router'));
         }
         /**
          * rewrite micro-app.setAttribute, process attr data
@@ -8048,6 +8173,18 @@ function defineElement(tagName) {
             }
             return null;
         }
+        /**
+         * get publicPath from a valid address,it can used in micro-app-devtools
+         */
+        get publicPath() {
+            return getEffectivePath(this.appUrl);
+        }
+        /**
+         * get baseRoute from attribute,it can used in micro-app-devtools
+         */
+        get baseRoute() {
+            return this.getBaseRouteCompatible();
+        }
     }
     globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
 }
@@ -8126,9 +8263,22 @@ function preFetchAction(options) {
                 });
                 const oldOnload = app.onLoad;
                 const oldOnLoadError = app.onLoadError;
-                app.onLoad = (html) => {
+                app.onLoad = (onLoadParam) => {
+                    if (app.isPrerender) {
+                        assign(onLoadParam, {
+                            defaultPage: options['default-page'],
+                            /**
+                             * TODO: 预渲染支持disable-memory-router，默认渲染首页即可，文档中也要保留
+                             * 问题：
+                             *  1、如何确保子应用进行跳转时不影响到浏览器地址？？pure？？
+                             */
+                            routerMode: getRouterMode(options['router-mode']),
+                            baseroute: options.baseroute,
+                            disablePatchRequest: options['disable-patch-request'],
+                        });
+                    }
                     resolve();
-                    oldOnload.call(app, html, options['default-page'], options['disable-patch-request'], getRouterMode(options['router-mode']), options.baseroute);
+                    oldOnload.call(app, onLoadParam);
                 };
                 app.onLoadError = (...rests) => {
                     resolve();