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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.3';
+const version = '1.0.0-rc.5';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -116,6 +116,34 @@ function isMicroAppBody(target) {
 function isProxyDocument(target) {
     return toTypeString(target) === '[object ProxyDocument]';
 }
+function isTargetExtension(path, suffix) {
+    try {
+        return createURL(path).pathname.split('.').pop() === suffix;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+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,13 +207,13 @@ function formatAppURL(url, appName = null) {
     if (!isString(url) || !url)
         return '';
     try {
-        const { origin, pathname, search } = createURL(addProtocol(url));
-        // If it ends with .html/.node/.php/.net/.etc, don’t need to add /
-        if (/\.(\w+)$/.test(pathname)) {
-            return `${origin}${pathname}${search}`;
-        }
-        const fullPath = `${origin}${pathname}/`.replace(/\/\/$/, '/');
-        return /^https?:\/\//.test(fullPath) ? `${fullPath}${search}` : '';
+        const { origin, pathname, search } = createURL(addProtocol(url), (window.rawWindow || window).location.href);
+        /**
+         * keep the original url unchanged, such as .html .node .php .net .etc, search, except hash
+         * BUG FIX: Never using '/' to complete url, refer to https://github.com/micro-zoe/micro-app/issues/1147
+         */
+        const fullPath = `${origin}${pathname}${search}`;
+        return /^https?:\/\//.test(fullPath) ? fullPath : '';
     }
     catch (e) {
         logError(e, appName);
@@ -208,7 +236,9 @@ function formatAppName(name) {
     return name.replace(/(^\d+)|([^\w\d-_])/gi, '');
 }
 /**
- * Get valid address, such as https://xxx/xx/xx.html to https://xxx/xx/
+ * Get valid address, such as
+ *  1. https://domain/xx/xx.html to https://domain/xx/
+ *  2. https://domain/xx to https://domain/xx/
  * @param url app.url
  */
 function getEffectivePath(url) {
@@ -318,21 +348,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 +381,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);
@@ -561,6 +571,17 @@ function getBaseHTMLElement() {
     var _a;
     return (((_a = window.rawWindow) === null || _a === void 0 ? void 0 : _a.HTMLElement) || window.HTMLElement);
 }
+/**
+ * Format event name
+ * In with sandbox, child event and lifeCycles bind to microAppElement, there are two events with same name - mounted unmount, it should be handled specifically to prevent conflicts
+ * Issue: https://github.com/micro-zoe/micro-app/issues/1161
+ * @param type event name
+ * @param appName app name
+ */
+const formatEventList = ['mounted', 'unmount'];
+function formatEventType(type, appName) {
+    return formatEventList.includes(type) ? `${type}-${appName}` : type;
+}
 
 function formatEventInfo(event, element) {
     Object.defineProperties(event, {
@@ -604,19 +625,19 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     formatEventInfo(event, element);
     // global hooks
     if (isFunction((_a = microApp.options.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName])) {
-        microApp.options.lifeCycles[lifecycleName](event);
+        microApp.options.lifeCycles[lifecycleName](event, appName);
     }
     element.dispatchEvent(event);
 }
 /**
  * Dispatch custom event to micro app
  * @param app app
- * @param eventName event name ['unmount', 'appstate-change']
+ * @param eventName event name ['mounted', 'unmount', 'appstate-change', 'statechange']
  * @param detail event detail
  */
 function dispatchCustomEventToMicroApp(app, eventName, detail = {}) {
     var _a;
-    const event = new CustomEvent(eventName, {
+    const event = new CustomEvent(formatEventType(eventName, app.name), {
         detail,
     });
     (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.microAppWindow.dispatchEvent(event);
@@ -660,7 +681,8 @@ class HTMLLoader {
     run(app, successCb) {
         const appName = app.name;
         const htmlUrl = app.ssrUrl || app.url;
-        const htmlPromise = htmlUrl.includes('.js')
+        const isJsResource = isTargetExtension(htmlUrl, 'js');
+        const htmlPromise = isJsResource
             ? Promise.resolve(`<micro-app-head><script src='${htmlUrl}'></script></micro-app-head><micro-app-body></micro-app-body>`)
             : fetchSource(htmlUrl, appName, { cache: 'no-cache' });
         htmlPromise.then((htmlStr) => {
@@ -824,7 +846,7 @@ class CSSParser {
             if (!this.scopecssDisableNextLine &&
                 (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
                 cssValue = cssValue.replace(/url\(["']?([^)"']+)["']?\)/gm, (all, $1) => {
-                    if (/^((data|blob):|#)/.test($1) || /^(https?:)?\/\//.test($1)) {
+                    if (/^((data|blob):|#|%23)/.test($1) || /^(https?:)?\/\//.test($1)) {
                         return all;
                     }
                     // ./a/b.png  ../a/b.png  a/b.png
@@ -1250,7 +1272,7 @@ function extractLinkFromHtml(link, parent, app, isDynamic = false) {
             return { address: href, linkInfo };
         }
     }
-    else if (rel && ['prefetch', 'preload', 'prerender'].includes(rel)) {
+    else if (rel && ['prefetch', 'preload', 'prerender', 'modulepreload'].includes(rel)) {
         // preload prefetch prerender ....
         if (isDynamic) {
             replaceComment = document.createComment(`link element with rel=${rel}${href ? ' & href=' + href : ''} removed by micro-app`);
@@ -1295,12 +1317,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 });
         }
     });
 }
@@ -1470,19 +1492,46 @@ var MicroAppConfig;
     MicroAppConfig["SSR"] = "ssr";
     MicroAppConfig["FIBER"] = "fiber";
 })(MicroAppConfig || (MicroAppConfig = {}));
+/**
+ * global key must be static key, they can not rewrite
+ * e.g.
+ * window.Promise = newValue
+ * new Promise ==> still get old value, not newValue, because they are cached by top function
+ * NOTE:
+ * 1. Do not add fetch, XMLHttpRequest, EventSource
+ */
+const GLOBAL_CACHED_KEY = 'window,self,globalThis,document,Document,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
 // prefetch level
 const PREFETCH_LEVEL = [1, 2, 3];
-// memory router constants
+/**
+ * memory router modes
+ * NOTE:
+ *  1. The only difference between native and native-scope is location.origin, in native-scope mode location.origin point to child app
+ *  2. native mode equal to disable-memory-router
+*/
+// 临时注释，1.0版本放开，默认模式切换为state
+// // default mode, sync child app router info to history.state
+// export const DEFAULT_ROUTER_MODE = 'state'
+// // sync child app router info to browser url as search
+// export const ROUTER_MODE_SEARCH = 'search'
+// 临时放开，1.0版本去除
+const ROUTER_MODE_STATE = 'state';
 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
+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_STATE,
+    ROUTER_MODE_NATIVE,
+    ROUTER_MODE_NATIVE_SCOPE,
+    ROUTER_MODE_PURE,
 ];
 // event bound to child app window
-const SCOPE_WINDOW_EVENT = [
+const BASE_SCOPE_WINDOW_EVENT = [
     'popstate',
     'hashchange',
     'load',
@@ -1493,8 +1542,15 @@ const SCOPE_WINDOW_EVENT = [
     'statechange',
     'mounted',
 ];
+// bind event of with sandbox
+const SCOPE_WINDOW_EVENT_OF_WITH = BASE_SCOPE_WINDOW_EVENT;
+// bind event of iframe sandbox
+const SCOPE_WINDOW_EVENT_OF_IFRAME = BASE_SCOPE_WINDOW_EVENT.concat([
+    'unhandledrejection',
+]);
 // on event bound to child app window
-const SCOPE_WINDOW_ON_EVENT = [
+// TODO: with和iframe处理方式不同，需修改
+const BASE_SCOPE_WINDOW_ON_EVENT = [
     'onpopstate',
     'onhashchange',
     'onload',
@@ -1502,6 +1558,12 @@ const SCOPE_WINDOW_ON_EVENT = [
     'onunload',
     'onerror'
 ];
+// bind on event of with sandbox
+const SCOPE_WINDOW_ON_EVENT_OF_WITH = BASE_SCOPE_WINDOW_ON_EVENT;
+// bind on event of iframe sandbox
+const SCOPE_WINDOW_ON_EVENT_OF_IFRAME = BASE_SCOPE_WINDOW_ON_EVENT.concat([
+    'onunhandledrejection',
+]);
 // event bound to child app document
 const SCOPE_DOCUMENT_EVENT = [
     'DOMContentLoaded',
@@ -1518,15 +1580,13 @@ const GLOBAL_KEY_TO_WINDOW = [
     'globalThis',
 ];
 const RAW_GLOBAL_TARGET = ['rawWindow', 'rawDocument'];
-/**
- * global key must be static key, they can not rewrite
- * e.g.
- * window.Promise = newValue
- * new Promise ==> still get old value, not newValue, because they are cached by top function
- * NOTE:
- * 1. Do not add fetch, XMLHttpRequest, EventSource
- */
-const GLOBAL_CACHED_KEY = 'window,self,globalThis,document,Document,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
+const HIJACK_LOCATION_KEYS = [
+    'host',
+    'hostname',
+    'port',
+    'protocol',
+    'origin',
+];
 
 const scriptTypes = ['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'];
 // whether use type='module' script
@@ -1790,16 +1850,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 +2183,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 +2239,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 +2257,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 +2802,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 +2928,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 +3026,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
@@ -2979,7 +3037,7 @@ function patchWindowProperty(microAppWindow) {
     const rawWindow = globalEnv.rawWindow;
     Object.getOwnPropertyNames(rawWindow)
         .filter((key) => {
-        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT.includes(key);
+        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT_OF_WITH.includes(key);
     })
         .forEach((eventName) => {
         const { enumerable, writable, set } = Object.getOwnPropertyDescriptor(rawWindow, eventName) || {
@@ -3009,22 +3067,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 +3095,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 +3170,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_OF_WITH.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
@@ -3124,6 +3199,7 @@ function patchWindowEffect(microAppWindow) {
      *  window.addEventListener.call(非window, type, listener, options)
      */
     microAppWindow.addEventListener = function (type, listener, options) {
+        type = formatEventType(type, appName);
         const listenerList = eventListenerMap.get(type);
         if (listenerList) {
             listenerList.add(listener);
@@ -3135,6 +3211,7 @@ function patchWindowEffect(microAppWindow) {
         rawAddEventListener.call(getEventTarget(type), type, listener, options);
     };
     microAppWindow.removeEventListener = function (type, listener, options) {
+        type = formatEventType(type, appName);
         const listenerList = eventListenerMap.get(type);
         if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
             listenerList.delete(listener);
@@ -3227,42 +3304,39 @@ function patchWindowEffect(microAppWindow) {
 }
 
 // set micro app state to origin state
-function setMicroState(appName, microState) {
-    if (!isRouterModeCustom(appName)) {
-        const rawState = globalEnv.rawWindow.history.state;
-        const additionalState = {
-            microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
-                [appName]: microState
-            })
-        };
-        // create new state object
-        return assign({}, rawState, additionalState);
-    }
-    return microState;
+function setMicroState(appName, microState, targetLocation) {
+    // TODO: 验证native模式下修改state nextjs路由是否正常
+    const rawState = globalEnv.rawWindow.history.state;
+    const additionalState = {
+        __MICRO_APP_STATE__: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__, {
+            [appName]: {
+                fullPath: targetLocation.pathname + targetLocation.search + targetLocation.hash,
+                state: microState,
+                mode: getRouterMode(appName),
+            }
+        })
+    };
+    // create new state object
+    return assign({}, rawState, additionalState);
 }
 // delete micro app state form origin state
 function removeMicroState(appName, rawState) {
-    if (!isRouterModeCustom(appName)) {
-        if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
-            if (!isUndefined(rawState.microAppState[appName])) {
-                delete rawState.microAppState[appName];
-            }
-            if (!Object.keys(rawState.microAppState).length) {
-                delete rawState.microAppState;
-            }
+    if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__)) {
+        if (!isUndefined(rawState.__MICRO_APP_STATE__[appName])) {
+            delete rawState.__MICRO_APP_STATE__[appName];
+        }
+        if (!Object.keys(rawState.__MICRO_APP_STATE__).length) {
+            delete rawState.__MICRO_APP_STATE__;
         }
-        return assign({}, rawState);
     }
-    return rawState;
+    return assign({}, rawState);
 }
 // get micro app state form origin state
 function getMicroState(appName) {
-    var _a;
+    var _a, _b;
     const rawState = globalEnv.rawWindow.history.state;
-    if (!isRouterModeCustom(appName)) {
-        return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
-    }
-    return rawState;
+    // rawState?.__MICRO_APP_STATE__?.[appName]?.state || (isRouterModeCustom(appName) ? rawState : null)
+    return ((_b = (_a = rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__) === null || _a === void 0 ? void 0 : _a[appName]) === null || _b === void 0 ? void 0 : _b.state) || (isRouterModeCustom(appName) ? rawState : null);
 }
 const ENC_AD_RE = /&/g; // %M1
 const ENC_EQ_RE = /=/g; // %M2
@@ -3298,14 +3372,30 @@ function formatQueryAppName(appName) {
  * @param appName app.name
  */
 function getMicroPathFromURL(appName) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const rawLocation = globalEnv.rawWindow.location;
-    if (!isRouterModeCustom(appName)) {
+    const rawState = globalEnv.rawWindow.history.state;
+    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;
     }
-    return rawLocation.pathname + rawLocation.search + rawLocation.hash;
+    /**
+     * Get fullPath from __MICRO_APP_STATE__
+     * NOTE:
+     *  1. state mode: all base on __MICRO_APP_STATE__
+     *  2. pure mode: navigate by location.xxx may contain one-time information in __MICRO_APP_STATE__
+     *  3. native/scope mode: vue-router@4 will exec replaceState base on state before pushState, like:
+     *    history.replaceState(
+     *      assign({}, history.state, {...}),
+     *      title,
+     *      history.state.current, <---
+     *    )
+     *    when base app jump to another page from child page, it will replace child path with base app path
+     *   e.g: base-home --> child-home --> child-about(will replace with child-home before jump to base-home) --> base-home, when go back, it will back to child-home not child-about
+     *   So we take the fullPath as the standard
+     */
+    return ((_d = (_c = rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__) === null || _c === void 0 ? void 0 : _c[appName]) === null || _d === void 0 ? void 0 : _d.fullPath) || (isRouterModeCustom(appName) ? rawLocation.pathname + rawLocation.search + rawLocation.hash : null);
 }
 /**
  * Attach child app fullPath to browser url
@@ -3313,10 +3403,11 @@ function getMicroPathFromURL(appName) {
  * @param targetLocation location of child app or rawLocation of window
  */
 function setMicroPathToURL(appName, targetLocation) {
-    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
+    const rawLocation = globalEnv.rawWindow.location;
+    let targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
     let isAttach2Hash = false;
-    if (!isRouterModeCustom(appName)) {
-        let { pathname, search, hash } = globalEnv.rawWindow.location;
+    if (isRouterModeSearch(appName)) {
+        let { pathname, search, hash } = rawLocation;
         const queryObject = getQueryObjectFromURL(search, hash);
         const encodedMicroPath = encodeMicroPath(targetFullPath);
         /**
@@ -3326,6 +3417,7 @@ function setMicroPathToURL(appName, targetLocation) {
         // If hash exists and search does not exist, it is considered as a hash route
         if (hash && !search) {
             isAttach2Hash = true;
+            // TODO: 这里和下面的if判断可以简化一下
             if (queryObject.hashQuery) {
                 queryObject.hashQuery[formatQueryAppName(appName)] = encodedMicroPath;
             }
@@ -3353,6 +3445,9 @@ function setMicroPathToURL(appName, targetLocation) {
             isAttach2Hash,
         };
     }
+    if (isRouterModeState(appName) || isRouterModePure(appName)) {
+        targetFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
+    }
     return {
         fullPath: targetFullPath,
         isAttach2Hash,
@@ -3361,13 +3456,12 @@ function setMicroPathToURL(appName, targetLocation) {
 /**
  * Delete child app fullPath from browser url
  * @param appName app.name
- * @param targetLocation target Location, default is rawLocation
  */
-function removeMicroPathFromURL(appName, targetLocation) {
+function removeMicroPathFromURL(appName) {
     var _a, _b, _c, _d;
-    let { pathname, search, hash } = targetLocation || globalEnv.rawWindow.location;
+    let { pathname, search, hash } = 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;
@@ -3428,14 +3522,38 @@ function isEffectiveApp(appName) {
     return !!(app && !app.isPrefetch);
 }
 /**
- * router mode is custom
- * NOTE:
- *  1. if sandbox disabled, router mode defaults to custom
- *  2. if app not exist, router mode defaults to custom
+ * get router mode of app
+ * NOTE: app maybe undefined
+ */
+function getRouterMode(appName) {
+    var _a;
+    return (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.routerMode;
+}
+// router mode is search
+function isRouterModeSearch(appName) {
+    return getRouterMode(appName) === DEFAULT_ROUTER_MODE;
+}
+// router mode is state
+function isRouterModeState(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_STATE;
+}
+// router mode is history
+function isRouterModeNative(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_NATIVE;
+}
+// router mode is disable
+function isRouterModeNativeScope(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_NATIVE_SCOPE;
+}
+// router mode is pure
+function isRouterModePure(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_PURE;
+}
+/**
+ * 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 +3561,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 initRouterMode(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;
 }
 
@@ -3481,7 +3599,21 @@ function addHistoryListener(appName) {
             excludePreRender: true,
         }).includes(appName) &&
             !e.onlyForBrowser) {
+            /**
+             * TODO: vue-router@4 navigate async when receive popstateEvent, but child may respond to popstateEvent immediately(vue2, react), so when go back throw browser child will not unmount sync, and will respond to popstateEvent before base app, this will cause some problems
+             * __MICRO_APP_BASE_ROUTE__不可控，用户设置的值是随机的且不一定使用，用它作为判断依据太过危险
+            */
+            // const microAppWindow = appInstanceMap.get(appName)!.sandBox!.microAppWindow
+            // const rawLocation = globalEnv.rawWindow.location
+            // if (
+            //   !isRouterModeCustom(appName) ||
+            //   !microAppWindow.__MICRO_APP_BASE_ROUTE__ ||
+            //   // 主history、子hash，主、子都是hash如何处理
+            //   microAppWindow.__MICRO_APP_BASE_ROUTE__.includes('#') ||
+            //   `${rawLocation.pathname}/`.startsWith(('/' + microAppWindow.__MICRO_APP_BASE_ROUTE__).replace(/^\/+/, '/'))
+            // ) {
             updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName));
+            // }
         }
     };
     rawWindow.addEventListener('popstate', popStateHandler);
@@ -3529,14 +3661,18 @@ function dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow) {
      * TODO: test
      * angular14 takes e.type as type judgment
      * when e.type is popstate-appName popstate event will be invalid
+     * Object.defineProperty(newPopStateEvent, 'type', {
+     *    value: 'popstate',
+     *    writable: true,
+     *    configurable: true,
+     *    enumerable: true,
+     * })
+     */
+    /**
+     * create PopStateEvent named popstate-appName with sub app state
+     * TODO: feeling like there's something wrong, check carefully
+     *  In native mode, getMicroState(appName) return rawWindow.history.state when use microApp.router.push/replace or other scenes when state.__MICRO_APP_STATE__[appName] is null
      */
-    // Object.defineProperty(newPopStateEvent, 'type', {
-    //   value: 'popstate',
-    //   writable: true,
-    //   configurable: true,
-    //   enumerable: true,
-    // })
-    // create PopStateEvent named popstate-appName with sub app state
     const newPopStateEvent = new PopStateEvent('popstate', { state: getMicroState(appName) });
     microAppWindow.dispatchEvent(newPopStateEvent);
     if (!isIframeSandbox(appName)) {
@@ -3603,7 +3739,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 +3750,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], targetLocation), rests[1]);
+                }
                 if (targetFullPath !== microLocation.fullPath) {
                     updateMicroLocation(appName, targetFullPath, microLocation);
                 }
@@ -3627,8 +3765,12 @@ function createMicroHistory(appName, microLocation) {
     }
     const pushState = getMicroHistoryMethod('pushState');
     const replaceState = getMicroHistoryMethod('replaceState');
-    if (isIframeSandbox(appName))
-        return { pushState, replaceState };
+    if (isIframeSandbox(appName)) {
+        return {
+            pushState,
+            replaceState,
+        };
+    }
     return new Proxy(rawHistory, {
         get(target, key) {
             if (key === 'state') {
@@ -3691,12 +3833,8 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
         const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
         // navigate with native history method
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
-        /**
-         * TODO:
-         *  1. 如果所有模式统一发送popstate事件，则!isRouterModeCustom(appName)要去掉
-         *  2. 如果发送事件，则会导致vue router-view :key='router.path'绑定，无限卸载应用，死循环
-         */
-        if (oldFullPath !== result.fullPath && !isRouterModeCustom(appName)) {
+        // just search mode will dispatch native event
+        if (oldFullPath !== result.fullPath && isRouterModeSearch(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
         }
     }
@@ -3712,22 +3850,22 @@ function attachRouteToBrowserURL(appName, result, state) {
     navigateWithNativeEvent(appName, 'replaceState', result, true, state);
 }
 /**
- * When path is same, keep the microAppState in history.state
- * Fix bug of missing microAppState when base app is next.js or angular
+ * When path is same, keep the __MICRO_APP_STATE__ in history.state
+ * Fix bug of missing __MICRO_APP_STATE__ when base app is next.js or angular
  * @param method history.pushState/replaceState
  */
 function reWriteHistoryMethod(method) {
     const rawWindow = globalEnv.rawWindow;
     return function (...rests) {
         var _a;
-        if (((_a = rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.microAppState) &&
-            (!isPlainObject(rests[0]) || !rests[0].microAppState) &&
+        if (((_a = rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.__MICRO_APP_STATE__) &&
+            (!isPlainObject(rests[0]) || !rests[0].__MICRO_APP_STATE__) &&
             (isString(rests[2]) || isURL(rests[2]))) {
             const currentHref = rawWindow.location.href;
             const targetLocation = createURL(rests[2], currentHref);
             if (targetLocation.href === currentHref) {
                 rests[0] = assign({}, rests[0], {
-                    microAppState: rawWindow.history.state.microAppState,
+                    __MICRO_APP_STATE__: rawWindow.history.state.__MICRO_APP_STATE__,
                 });
             }
         }
@@ -3743,9 +3881,9 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            if (!isRouterModeCustom(appName) && !getMicroPathFromURL(appName)) {
+            if ((isRouterModeSearch(appName) || isRouterModeState(appName)) && !getMicroPathFromURL(appName)) {
                 const app = appInstanceMap.get(appName);
-                attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+                attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName), app.sandBox.proxyWindow.location));
             }
         });
         // fix bug for nest app
@@ -3754,7 +3892,7 @@ function reWriteHistoryMethod(method) {
 }
 /**
  * rewrite history.pushState/replaceState
- * used to fix the problem that the microAppState maybe missing when mainApp navigate to same path
+ * used to fix the problem that the __MICRO_APP_STATE__ 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 patchHistory() {
@@ -3777,7 +3915,7 @@ function createRouterApi() {
      * @param state to.state
      */
     function navigateWithRawHistory(appName, methodName, targetLocation, state) {
-        navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, state !== null && state !== void 0 ? state : null));
+        navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, state !== null && state !== void 0 ? state : null, targetLocation));
         // clear element scope after navigate
         removeDomScope();
     }
@@ -3795,21 +3933,13 @@ 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);
-            /**
-             * TODO:
-             *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
-             *  2. 关闭虚拟路由时跳转方式不同：1、基座跳转但不发送popstate事件 2、控制子应用更新location，内部发送popstate事件。
-             *  核心思路：减小对基座的影响(子应用跳转不向基座发送popstate事件，其他操作一致)，但这是必要的吗，只是多了一个触发popstate的操作
-             *  路由优化方案有两种：
-             *    1、减少对基座的影响，主要是解决vue循环刷新的问题
-             *    2、全局发送popstate事件，解决主、子都是vue3的冲突问题
-             *  两者选一个吧，如果选2，则下面这两行代码可以去掉
-             *  NOTE1: history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
-             *  NOTE2: 关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
-             */
-            if (isRouterModeCustom(appName)) {
+            // pure mode will not call history.pushState/replaceState
+            if (!isRouterModePure(appName)) {
+                const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
+                navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+            }
+            // only search mode will dispatch PopStateEvent to browser
+            if (!isRouterModeSearch(appName)) {
                 updateMicroLocationWithEvent(appName, targetFullPath);
             }
         }
@@ -3834,27 +3964,18 @@ function createRouterApi() {
                      *  2. disable memory-router
                      */
                     /**
-                     * TODO: 子应用开始渲染但是还没渲染完成
-                     *  1、调用跳转改如何处理
+                     * TODO:
+                     *  1、子应用开始渲染但是还没渲染完成，调用跳转改如何处理
                      *  2、iframe的沙箱还没初始化时执行跳转报错，如何处理。。。
-                     *  3、hidden app 是否支持跳转
+                     *  3、hidden app、预渲染 app 是否支持跳转 --- 支持（这里还涉及子应用内部跳转的支持）
                      */
                     if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName)) {
                         const app = appInstanceMap.get(appName);
                         resolve(app.sandBox.sandboxReady.then(() => handleNavigate(appName, app, to, replace)));
                     }
                     else {
-                        reject(logError('navigation failed, app does not exist or is inactive'));
+                        reject(logError('导航失败，请确保子应用渲染后再调用此方法'));
                     }
-                    // /**
-                    //  * app not exit or unmounted, update browser URL with replaceState
-                    //  * use base app location.origin as baseURL
-                    //  * 应用不存在或已卸载，依然使用replaceState来更新浏览器地址 -- 不合理
-                    //  */
-                    // /**
-                    //  * TODO: 应用还没渲染或已经卸载最好不要支持跳转了，我知道这是因为解决一些特殊场景，但这么做是非常反直觉的
-                    //  * 并且在新版本中有多种路由模式，如果应用不存在，我们根本无法知道是哪种模式，那么这里的操作就无意义了。
-                    //  */
                     // const rawLocation = globalEnv.rawWindow.location
                     // const targetLocation = createURL(to.path, rawLocation.origin)
                     // const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash
@@ -3927,9 +4048,9 @@ function createRouterApi() {
      * 3. router mode is custom
      */
     function commonHandlerForAttachToURL(appName) {
-        if (!isRouterModeCustom(appName)) {
+        if (isRouterModeSearch(appName) || isRouterModeState(appName)) {
             const app = appInstanceMap.get(appName);
-            attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+            attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName), app.sandBox.proxyWindow.location));
         }
     }
     /**
@@ -4028,94 +4149,6 @@ function createRouterApi() {
 }
 const { router, executeNavigationGuard, clearRouterWhenUnmount, } = createRouterApi();
 
-const escape2RawWindowKeys = [
-    'getComputedStyle',
-    'visualViewport',
-    'matchMedia',
-    // 'DOMParser',
-    'ResizeObserver',
-    'IntersectionObserver',
-];
-const escape2RawWindowRegExpKeys = [
-    /animationFrame$/i,
-    /mutationObserver$/i,
-    /height$|width$/i,
-    /offset$/i,
-    // /event$/i,
-    /selection$/i,
-    /^range/i,
-    /^screen/i,
-    /^scroll/i,
-    /X$|Y$/,
-];
-const uniqueDocumentElement = [
-    'body',
-    'head',
-    'html',
-    'title',
-];
-const hijackMicroLocationKeys = [
-    'host',
-    'hostname',
-    'port',
-    'protocol',
-    'origin',
-];
-// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (属性)
-const proxy2RawDocOrShadowKeys = [
-    'childElementCount',
-    'children',
-    'firstElementChild',
-    'firstChild',
-    'lastElementChild',
-    'activeElement',
-    'fullscreenElement',
-    'pictureInPictureElement',
-    'pointerLockElement',
-    'styleSheets',
-];
-// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (方法)
-const proxy2RawDocOrShadowMethods = [
-    'append',
-    'contains',
-    'replaceChildren',
-    'createRange',
-    'getSelection',
-    'elementFromPoint',
-    'elementsFromPoint',
-    'getAnimations',
-];
-// 直接代理到原生document上 (属性)
-const proxy2RawDocumentKeys = [
-    'characterSet',
-    'compatMode',
-    'contentType',
-    'designMode',
-    'dir',
-    'doctype',
-    'embeds',
-    'fullscreenEnabled',
-    'hidden',
-    'implementation',
-    'lastModified',
-    'pictureInPictureEnabled',
-    'plugins',
-    'readyState',
-    'referrer',
-    'visibilityState',
-    'fonts',
-];
-// 直接代理到原生document上 (方法)
-const proxy2RawDocumentMethods = [
-    'execCommand',
-    'createRange',
-    'exitFullscreen',
-    'exitPictureInPicture',
-    'getElementsByTagNameNS',
-    'hasFocus',
-    'prepend',
-];
-
 // origin is readonly, so we ignore when updateMicroLocation
 const locationKeys = ['href', 'pathname', 'search', 'hash', 'host', 'hostname', 'port', 'protocol', 'search'];
 // origin, fullPath is necessary for guardLocation
@@ -4160,38 +4193,46 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
             // if disable memory-router, navigate directly through rawLocation
             if (!isRouterModeCustom(appName)) {
+                methodName = isRouterModePure(appName) ? 'replaceState' : methodName;
                 /**
                  * change hash with location.href will not trigger the browser reload
                  * so we use pushState & reload to imitate href behavior
                  * NOTE:
-                 *    1. if child app only change hash, it should not trigger browser reload
-                 *    2. if address is same and has hash, it should not add route stack
+                 *    1. if child app only change hash, it will not reload browser
+                 *    2. if address is same and has hash, it will not add route stack
                  */
                 if (targetLocation.pathname === proxyLocation.pathname &&
                     targetLocation.search === proxyLocation.search) {
                     let oldHref = null;
-                    if (targetLocation.hash !== proxyLocation.hash) {
-                        if (setMicroPathResult.isAttach2Hash)
+                    // NOTE: if pathname & search is same, it should record router info to history.state in pure mode
+                    if (targetLocation.hash !== proxyLocation.hash || isRouterModePure(appName)) {
+                        // search mode only
+                        if (setMicroPathResult.isAttach2Hash) {
                             oldHref = rawLocation.href;
-                        nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
+                        }
+                        // if router mode is pure and targetLocation.hash exist, it will not call nativeHistoryNavigate
+                        if (!isRouterModePure(appName) || !targetLocation.hash) {
+                            nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath, !isRouterModeSearch(appName) ? setMicroState(appName, null, targetLocation) : null);
+                        }
                     }
                     if (targetLocation.hash) {
-                        dispatchNativeEvent(appName, false, oldHref);
+                        if (isRouterModeSearch(appName)) {
+                            dispatchNativeEvent(appName, false, oldHref);
+                        }
+                        else {
+                            updateMicroLocationWithEvent(appName, targetLocation.pathname + targetLocation.search + targetLocation.hash);
+                        }
                     }
                     else {
                         reload();
                     }
                     return void 0;
-                    /**
-                     * when baseApp is hash router, address change of child can not reload browser
-                     * so we imitate behavior of browser (reload) manually
-                     */
-                }
-                else if (setMicroPathResult.isAttach2Hash) {
-                    nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
-                    reload();
-                    return void 0;
                 }
+                // when pathname or search change, simulate behavior of browser (reload) manually
+                // TODO: state模式下pushState会带上上一个页面的state，会不会有问题，尤其是vue3，应不应该将主应用的state设置为null
+                nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath, !isRouterModeSearch(appName) ? setMicroState(appName, null, targetLocation) : null);
+                reload();
+                return void 0;
             }
             return setMicroPathResult.fullPath;
         }
@@ -4216,7 +4257,9 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
              * pathname: /path ==> /path#hash, /path ==> /path?query
              * search: ?query ==> ?query#hash
              */
-            nativeHistoryNavigate(appName, targetLocation[key] === proxyLocation[key] ? 'replaceState' : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath);
+            nativeHistoryNavigate(appName, (targetLocation[key] === proxyLocation[key] || isRouterModePure(appName))
+                ? 'replaceState'
+                : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath, !isRouterModeSearch(appName) ? setMicroState(appName, null, targetLocation) : null);
             reload();
         }
     }
@@ -4245,16 +4288,6 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
     const proxyLocation = new Proxy({}, {
         get: (_, key) => {
             const target = getTarget();
-            if (isIframe) {
-                // host hostname port protocol
-                if (hijackMicroLocationKeys.includes(key)) {
-                    return childStaticLocation[key];
-                }
-                if (key === 'href') {
-                    // do not use target, because target may be deleted
-                    return target[key].replace(browserHost, childHost);
-                }
-            }
             if (key === 'assign')
                 return assign;
             if (key === 'replace')
@@ -4263,21 +4296,47 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                 return reload;
             if (key === 'self')
                 return target;
+            if (key === 'fullPath')
+                return target.fullPath;
+            /**
+             * Special keys: host, hostname, port, protocol, origin, href
+             * NOTE:
+             *  1. In native mode this keys point to browser, in other mode this keys point to child app origin
+             *  2. In iframe sandbox, iframe.src is base app address, so origin points to the browser by default, we need to replace it with child app origin
+             *  3. In other modes, origin points to child app
+             */
+            if (HIJACK_LOCATION_KEYS.includes(key)) {
+                if (isRouterModeNative(appName)) {
+                    return rawLocation[key];
+                }
+                if (isIframe) {
+                    return childStaticLocation[key];
+                }
+            }
+            if (key === 'href') {
+                if (isRouterModeNative(appName)) {
+                    return target[key].replace(target.origin, rawLocation.origin);
+                }
+                if (isIframe) {
+                    // target may be deleted
+                    return target[key].replace(browserHost, childHost);
+                }
+            }
             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;
                     }
@@ -4309,7 +4368,12 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                         const targetLocation = createURL(targetPath, url);
                         // The same hash will not trigger popStateEvent
                         if (targetLocation.hash !== proxyLocation.hash) {
-                            navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
+                            if (!isRouterModePure(appName)) {
+                                navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, null, targetLocation));
+                            }
+                            if (!isRouterModeSearch(appName)) {
+                                updateMicroLocationWithEvent(appName, targetLocation.pathname + targetLocation.search + targetLocation.hash);
+                            }
                         }
                     }
                 }
@@ -4362,9 +4426,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);
@@ -4374,15 +4440,6 @@ 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常见问题中说明)
- */
 /**
  * The router system has two operations: read and write
  * Read through location and write through history & location
@@ -4407,6 +4464,9 @@ function initRouteStateWithURL(appName, microLocation, defaultPage) {
     const microPath = getMicroPathFromURL(appName);
     if (microPath) {
         updateMicroLocation(appName, microPath, microLocation, 'auto');
+        if (isRouterModePure(appName)) {
+            removePathFromBrowser(appName);
+        }
     }
     else {
         updateBrowserURLWithLocation(appName, microLocation, defaultPage);
@@ -4422,8 +4482,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, microLocation));
+    }
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -4435,11 +4497,12 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
  * @param keepRouteState keep-router-state is only used to control whether to clear the location of microApp, default is false
  */
 function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
-    if (!isRouterModeCustom(appName)) {
-        if (!keepRouteState) {
-            const { pathname, search, hash } = createURL(url);
-            updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
-        }
+    // TODO: keep-router-state 功能太弱，是否可以增加优先级，或者去掉
+    if (!keepRouteState && !isRouterModeCustom(appName)) {
+        const { pathname, search, hash } = createURL(url);
+        updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
+    }
+    if (!isRouterModePure(appName)) {
         removePathFromBrowser(appName);
     }
     clearRouterWhenUnmount(appName);
@@ -4452,10 +4515,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 +4531,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 +4560,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 +4626,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 +4635,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 +4741,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 +4755,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 +4845,7 @@ class WithSandBox {
     }
     /**
      * inject global properties to microAppWindow
+     * TODO: 设置为只读变量
      * @param appName app name
      * @param url app url
      * @param microAppWindow micro window
@@ -4833,6 +4859,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 +4869,6 @@ class WithSandBox {
             pureCreateElement,
             router,
         });
-        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
     }
     /**
      * Record global effect and then release (effect: global event, timeout, data listener)
@@ -4925,7 +4951,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 +4992,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,13 +5160,29 @@ class WithSandBox {
 WithSandBox.activeCount = 0; // number of active sandbox
 
 function patchRouter(appName, url, microAppWindow, browserHost) {
-    const childStaticLocation = new URL(url);
+    const rawHistory = globalEnv.rawWindow.history;
+    const childStaticLocation = createURL(url);
     const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
     const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
     // rewrite microAppWindow.history
     const microHistory = microAppWindow.history;
+    // save history.replaceState, it will be used in updateMicroLocation
     microAppWindow.rawReplaceState = microHistory.replaceState;
+    // rewrite microAppWindow.history
     assign(microHistory, createMicroHistory(appName, microAppWindow.location));
+    // scrollRestoration proxy to rawHistory
+    rawDefineProperties(microHistory, {
+        scrollRestoration: {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return rawHistory.scrollRestoration;
+            },
+            set(value) {
+                rawHistory.scrollRestoration = value;
+            }
+        }
+    });
     /**
      * Init microLocation before exec sandbox.start
      * NOTE:
@@ -5152,6 +5194,87 @@ function patchRouter(appName, url, microAppWindow, browserHost) {
     return createMicroLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost);
 }
 
+const escape2RawWindowKeys = [
+    'getComputedStyle',
+    'visualViewport',
+    'matchMedia',
+    // 'DOMParser',
+    'ResizeObserver',
+    'IntersectionObserver',
+];
+const escape2RawWindowRegExpKeys = [
+    /animationFrame$/i,
+    /mutationObserver$/i,
+    /height$|width$/i,
+    /offset$/i,
+    // /event$/i,
+    /selection$/i,
+    /^range/i,
+    /^screen/i,
+    /^scroll/i,
+    /X$|Y$/,
+];
+const uniqueDocumentElement = [
+    'body',
+    'head',
+    'html',
+    'title',
+];
+// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (属性)
+const proxy2RawDocOrShadowKeys = [
+    'childElementCount',
+    'children',
+    'firstElementChild',
+    'firstChild',
+    'lastElementChild',
+    'activeElement',
+    'fullscreenElement',
+    'pictureInPictureElement',
+    'pointerLockElement',
+    'styleSheets',
+];
+// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (方法)
+const proxy2RawDocOrShadowMethods = [
+    'append',
+    'contains',
+    'replaceChildren',
+    'createRange',
+    'getSelection',
+    'elementFromPoint',
+    'elementsFromPoint',
+    'getAnimations',
+];
+// 直接代理到原生document上 (属性)
+const proxy2RawDocumentKeys = [
+    'characterSet',
+    'compatMode',
+    'contentType',
+    'designMode',
+    'dir',
+    'doctype',
+    'embeds',
+    'fullscreenEnabled',
+    'hidden',
+    'implementation',
+    'lastModified',
+    'pictureInPictureEnabled',
+    'plugins',
+    'readyState',
+    'referrer',
+    'visibilityState',
+    'fonts',
+];
+// 直接代理到原生document上 (方法)
+const proxy2RawDocumentMethods = [
+    'execCommand',
+    'createRange',
+    'exitFullscreen',
+    'exitPictureInPicture',
+    'getElementsByTagNameNS',
+    'hasFocus',
+    'prepend',
+];
+
 /**
  * patch window of child app
  * @param appName app name
@@ -5199,7 +5322,7 @@ function patchWindowProperty$1(appName, microAppWindow) {
             }
             return false;
         });
-        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT.includes(key);
+        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT_OF_IFRAME.includes(key);
     })
         .forEach((eventName) => {
         const { enumerable, writable, set } = Object.getOwnPropertyDescriptor(microAppWindow, eventName) || {
@@ -5227,18 +5350,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 +5386,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);
             }
@@ -5271,7 +5411,7 @@ function patchWindowEffect$1(microAppWindow) {
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     function getEventTarget(type) {
-        return SCOPE_WINDOW_EVENT.includes(type) ? microAppWindow : rawWindow;
+        return SCOPE_WINDOW_EVENT_OF_IFRAME.includes(type) ? microAppWindow : rawWindow;
     }
     // TODO: listener 是否需要绑定microAppWindow，否则函数中的this指向原生window
     microAppWindow.addEventListener = function (type, listener, options) {
@@ -5364,7 +5504,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 +5527,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 +5639,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 +5873,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);
@@ -5797,7 +5949,7 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         configurable: true,
         enumerable: true,
         get() {
-            return this.__PURE_ELEMENT__
+            return this.__PURE_ELEMENT__ || this === microDocument
                 ? rawOwnerDocumentDesc.get.call(this)
                 : microDocument;
         },
@@ -5821,7 +5973,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 +6057,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 +6095,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 +6196,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 +6398,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 +6458,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 +6493,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 || '',
                 });
             }
         }
@@ -6353,6 +6535,7 @@ class CreateApp {
             // mount before prerender exec mount (loading source), set isPrerender to false
             this.isPrerender = false;
             // dispatch state event to micro app
+            // TODO: statechange 还是 state-change，保持一致
             dispatchCustomEventToMicroApp(this, 'statechange', {
                 appState: appStates.LOADING
             });
@@ -6376,6 +6559,14 @@ class CreateApp {
             if (this.isPrerender &&
                 isDivElement(this.container) &&
                 this.container.hasAttribute('prerender')) {
+                /**
+                 * current this.container is <div prerender='true'></div>
+                 * set this.container to <micro-app></micro-app>
+                 * NOTE:
+                 *  1. must exec before this.sandBox.rebuildEffectSnapshot
+                 *  2. must exec before this.preRenderEvents?.forEach((cb) => cb())
+                 */
+                this.container = this.cloneContainer(container, this.container, false);
                 /**
                  * rebuild effect event of window, document, data center
                  * explain:
@@ -6384,14 +6575,6 @@ class CreateApp {
                  * 3. rebuild after js exec end, normal recovery effect event
                  */
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
-                // current this.container is <div prerender='true'></div>
-                cloneContainer(container, this.container, false);
-                /**
-                 * set this.container to <micro-app></micro-app>
-                 * NOTE:
-                 * must exec before this.preRenderEvents?.forEach((cb) => cb())
-                 */
-                this.container = container;
                 (_b = this.preRenderEvents) === null || _b === void 0 ? void 0 : _b.forEach((cb) => cb());
                 // reset isPrerender config
                 this.isPrerender = false;
@@ -6421,7 +6604,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 +6622,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 +6793,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 +6820,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 +6852,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 +6863,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();
@@ -6686,6 +6871,14 @@ class CreateApp {
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
         var _a, _b;
+        /**
+         * NOTE:
+         *  1. this.container must set to container(micro-app element) before exec rebuildEffectSnapshot
+         *    ISSUE: https://github.com/micro-zoe/micro-app/issues/1115
+         *  2. rebuildEffectSnapshot must exec before dispatch beforeshow event
+         */
+        const oldContainer = this.container;
+        this.container = container;
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
         // dispatch beforeShow event to micro-app
         dispatchCustomEventToMicroApp(this, 'appstate-change', {
@@ -6694,13 +6887,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.cloneContainer(this.container, oldContainer, 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 +6917,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) {
+            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 +6953,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 +7118,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 +7156,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 +7186,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 +7255,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 +7346,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 +7501,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 +7522,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 +7672,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;
@@ -7723,12 +7957,12 @@ function defineElement(tagName) {
                         /**
                          * url is different & old app is unmounted or prefetch, create new app to replace old one
                          */
-                        logWarn(`the ${oldApp.isPrefetch ? 'prefetch' : 'unmounted'} app with url: ${oldAppUrl} replaced by a new app with url: ${targetUrl}`, this.appName);
+                        logWarn(`the ${oldApp.isPrefetch ? 'prefetch' : 'unmounted'} app with url ${oldAppUrl} replaced by a new app with url ${targetUrl}`, this.appName);
                     }
                     this.handleCreateApp();
                 }
                 else {
-                    logError(`app name conflict, an app named: ${this.appName} with url: ${oldAppUrl} is running`);
+                    logError(`app name conflict, an app named ${this.appName} with url ${oldAppUrl} is running`);
                 }
             }
             else {
@@ -7972,6 +8206,7 @@ function defineElement(tagName) {
                 }
                 else {
                     // get path from browser URL
+                    // TODO: 新版本路由系统要重新兼容ssr
                     let targetPath = getNoHashMicroPathFromURL(this.appName, baseUrl);
                     const defaultPagePath = this.getDefaultPage();
                     if (!targetPath && defaultPagePath) {
@@ -7999,7 +8234,10 @@ function defineElement(tagName) {
          * @returns router-mode
          */
         getMemoryRouterMode() {
-            return getRouterMode(this.getAttribute('router-mode'), this);
+            return initRouterMode(this.getAttribute('router-mode'), 
+            // is micro-app element set disable-memory-router, like <micro-app disable-memory-router></micro-app>
+            // or <micro-app disable-memory-router='false'></micro-app>
+            this.compatibleProperties('disable-memory-router') && this.compatibleDisableProperties('disable-memory-router'));
         }
         /**
          * rewrite micro-app.setAttribute, process attr data
@@ -8048,6 +8286,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 +8376,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: initRouterMode(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();
@@ -8159,7 +8422,7 @@ function getGlobalAssets(assets) {
 // TODO: requestIdleCallback for every file
 function fetchGlobalResources(resources, suffix, sourceHandler) {
     if (isArray(resources)) {
-        const effectiveResource = resources.filter((path) => isString(path) && path.includes(`.${suffix}`) && !sourceHandler.hasInfo(path));
+        const effectiveResource = resources.filter((path) => isString(path) && isTargetExtension(path, suffix) && !sourceHandler.hasInfo(path));
         const fetchResourcePromise = effectiveResource.map((path) => fetchSource(path));
         // fetch resource with stream
         promiseStream(fetchResourcePromise, (res) => {