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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.4';
+const version = '1.0.0-rc.5';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -116,6 +116,14 @@ 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');
@@ -200,12 +208,12 @@ function formatAppURL(url, appName = null) {
         return '';
     try {
         const { origin, pathname, search } = createURL(addProtocol(url), (window.rawWindow || window).location.href);
-        // If it ends with .html/.node/.php/.net/.etc, don’t need to add /
-        if (/\.(\w+)$/.test(pathname)) {
-            return `${origin}${pathname}${search}`;
-        }
-        const fullPath = `${origin}${pathname}/`.replace(/\/\/$/, '/');
-        return /^https?:\/\//.test(fullPath) ? `${fullPath}${search}` : '';
+        /**
+         * 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);
@@ -228,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) {
@@ -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`);
@@ -1470,17 +1492,32 @@ 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
-// default mode, child router info will sync to browser url
-const DEFAULT_ROUTER_MODE = 'search';
 /**
- * render base on browser url, and location.origin location.href point to base app
- * equal to disable-memory-router
+ * 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';
+// 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';
@@ -1488,12 +1525,13 @@ const ROUTER_MODE_NATIVE_SCOPE = 'native-scope';
 const ROUTER_MODE_PURE = 'pure';
 const ROUTER_MODE_LIST = [
     DEFAULT_ROUTER_MODE,
+    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',
@@ -1504,9 +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
 // TODO: with和iframe处理方式不同，需修改
-const SCOPE_WINDOW_ON_EVENT = [
+const BASE_SCOPE_WINDOW_ON_EVENT = [
     'onpopstate',
     'onhashchange',
     'onload',
@@ -1514,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',
@@ -1530,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
@@ -2989,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) || {
@@ -3138,7 +3186,7 @@ function patchWindowEffect(microAppWindow, appName) {
      */
     function getEventTarget(type) {
         var _a;
-        if (SCOPE_WINDOW_EVENT.includes(type) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
+        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;
@@ -3151,6 +3199,7 @@ function patchWindowEffect(microAppWindow, appName) {
      *  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);
@@ -3162,6 +3211,7 @@ function patchWindowEffect(microAppWindow, appName) {
         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);
@@ -3254,42 +3304,39 @@ function patchWindowEffect(microAppWindow, appName) {
 }
 
 // set micro app state to origin state
-function setMicroState(appName, microState) {
-    if (isRouterModeSearch(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 (isRouterModeSearch(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 (isRouterModeSearch(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
@@ -3325,17 +3372,30 @@ function formatQueryAppName(appName) {
  * @param appName app.name
  */
 function getMicroPathFromURL(appName) {
-    var _a, _b;
-    // TODO: pure模式从state中获取地址
-    if (isRouterModePure(appName))
-        return null;
+    var _a, _b, _c, _d;
     const rawLocation = globalEnv.rawWindow.location;
+    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
@@ -3343,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 (isRouterModeSearch(appName)) {
-        let { pathname, search, hash } = globalEnv.rawWindow.location;
+        let { pathname, search, hash } = rawLocation;
         const queryObject = getQueryObjectFromURL(search, hash);
         const encodedMicroPath = encodeMicroPath(targetFullPath);
         /**
@@ -3356,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;
             }
@@ -3383,6 +3445,9 @@ function setMicroPathToURL(appName, targetLocation) {
             isAttach2Hash,
         };
     }
+    if (isRouterModeState(appName) || isRouterModePure(appName)) {
+        targetFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
+    }
     return {
         fullPath: targetFullPath,
         isAttach2Hash,
@@ -3391,11 +3456,10 @@ 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 (isRouterModeSearch(appName)) {
         const queryObject = getQueryObjectFromURL(search, hash);
@@ -3457,25 +3521,33 @@ function isEffectiveApp(appName) {
      */
     return !!(app && !app.isPrefetch);
 }
+/**
+ * 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) {
-    const app = appInstanceMap.get(appName);
-    return !!(app && app.sandBox && app.routerMode === DEFAULT_ROUTER_MODE);
+    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) {
-    const app = appInstanceMap.get(appName);
-    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_NATIVE);
+    return getRouterMode(appName) === ROUTER_MODE_NATIVE;
 }
 // router mode is disable
 function isRouterModeNativeScope(appName) {
-    const app = appInstanceMap.get(appName);
-    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_NATIVE_SCOPE);
+    return getRouterMode(appName) === ROUTER_MODE_NATIVE_SCOPE;
 }
 // router mode is pure
 function isRouterModePure(appName) {
-    const app = appInstanceMap.get(appName);
-    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_PURE);
+    return getRouterMode(appName) === ROUTER_MODE_PURE;
 }
 /**
  * router mode is history or disable
@@ -3492,7 +3564,7 @@ function isRouterModeCustom(appName) {
  * @param inlineDisableMemoryRouter disable-memory-router set by micro-app element or prerender
  * @returns router mode
  */
-function getRouterMode(mode, inlineDisableMemoryRouter) {
+function initRouterMode(mode, inlineDisableMemoryRouter) {
     /**
      * compatible with disable-memory-router in older versions
      * if disable-memory-router is true, router-mode will be disable
@@ -3527,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);
@@ -3575,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)) {
@@ -3661,7 +3751,7 @@ function createMicroHistory(appName, microLocation) {
                 const targetLocation = createURL(rests[2], microLocation.href);
                 const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
                 if (!isRouterModePure(appName)) {
-                    navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
+                    navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0], targetLocation), rests[1]);
                 }
                 if (targetFullPath !== microLocation.fullPath) {
                     updateMicroLocation(appName, targetFullPath, microLocation);
@@ -3675,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') {
@@ -3739,11 +3833,7 @@ 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事件，则isRouterModeSearch(appName)要去掉
-         *  2. 如果发送事件，则会导致vue router-view :key='router.path'绑定，无限卸载应用，死循环
-         */
+        // just search mode will dispatch native event
         if (oldFullPath !== result.fullPath && isRouterModeSearch(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
         }
@@ -3760,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__,
                 });
             }
         }
@@ -3791,9 +3881,9 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            if (isRouterModeSearch(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
@@ -3802,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() {
@@ -3825,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();
     }
@@ -3843,23 +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) {
+            // 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);
             }
-            /**
-             * 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) || isRouterModePure(appName)) {
+            // only search mode will dispatch PopStateEvent to browser
+            if (!isRouterModeSearch(appName)) {
                 updateMicroLocationWithEvent(appName, targetFullPath);
             }
         }
@@ -3884,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
@@ -3977,9 +4048,9 @@ function createRouterApi() {
      * 3. router mode is custom
      */
     function commonHandlerForAttachToURL(appName) {
-        if (isRouterModeSearch(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));
         }
     }
     /**
@@ -4078,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
@@ -4209,39 +4192,47 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
         if (targetLocation.origin === proxyLocation.origin) {
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
             // if disable memory-router, navigate directly through rawLocation
-            if (isRouterModeSearch(appName)) {
+            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;
         }
@@ -4266,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();
         }
     }
@@ -4305,17 +4298,27 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                 return target;
             if (key === 'fullPath')
                 return target.fullPath;
-            if (isRouterModeNative(appName)) {
-                return bindFunctionToRawTarget(Reflect.get(rawLocation, key), rawLocation, 'LOCATION');
-            }
-            // src of iframe is base app address, it needs to be replaced separately
-            if (isIframe) {
-                // host hostname port protocol
-                if (hijackMicroLocationKeys.includes(key)) {
+            /**
+             * 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') {
-                    // do not use target, because target may be deleted
+            }
+            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);
                 }
             }
@@ -4365,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);
+                            }
                         }
                     }
                 }
@@ -4432,11 +4440,6 @@ function updateMicroLocation(appName, path, microLocation, type) {
     }
 }
 
-/**
- * TODO: 关于关闭虚拟路由系统的custom、history模式
- * 1. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
- * 2. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
- */
 /**
  * The router system has two operations: read and write
  * Read through location and write through history & location
@@ -4461,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);
@@ -4478,7 +4484,7 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
     if (!isRouterModePure(appName)) {
         // attach microApp route info to browser URL
-        attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
+        attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null, microLocation));
     }
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
@@ -4491,14 +4497,13 @@ 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');
-        }
-        if (!isRouterModePure(appName)) {
-            removePathFromBrowser(appName);
-        }
+    // 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);
 }
@@ -5155,13 +5160,29 @@ class WithSandBox extends BaseSandbox {
 WithSandBox.activeCount = 0; // number of active sandbox
 
 function patchRouter(appName, url, microAppWindow, browserHost) {
+    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:
@@ -5173,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
@@ -5220,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) || {
@@ -5309,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) {
@@ -5847,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;
         },
@@ -6433,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
             });
@@ -6456,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:
@@ -6464,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>
-                this.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;
@@ -6768,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', {
@@ -6776,7 +6887,7 @@ class CreateApp {
         // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
-        this.container = this.cloneContainer(container, this.container, false);
+        this.cloneContainer(this.container, oldContainer, false);
         /**
          * TODO:
          *  问题：当路由模式为custom时，keep-alive应用在重新展示，是否需要根据子应用location信息更新浏览器地址？
@@ -6826,7 +6937,7 @@ class CreateApp {
      */
     cloneContainer(target, origin, deep) {
         // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
-        if (origin) {
+        if (origin && target) {
             target.innerHTML = '';
             Array.from(deep ? this.parseHtmlString(origin.innerHTML).childNodes : origin.childNodes).forEach((node) => {
                 target.appendChild(node);
@@ -7846,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 {
@@ -8095,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) {
@@ -8122,8 +8234,9 @@ function defineElement(tagName) {
          * @returns router-mode
          */
         getMemoryRouterMode() {
-            return getRouterMode(this.getAttribute('router-mode'), 
+            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'));
         }
         /**
@@ -8272,7 +8385,7 @@ function preFetchAction(options) {
                              * 问题：
                              *  1、如何确保子应用进行跳转时不影响到浏览器地址？？pure？？
                              */
-                            routerMode: getRouterMode(options['router-mode']),
+                            routerMode: initRouterMode(options['router-mode']),
                             baseroute: options.baseroute,
                             disablePatchRequest: options['disable-patch-request'],
                         });
@@ -8309,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) => {