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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.2';
+const version = '1.0.0-rc.4';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -15,7 +15,9 @@ const assign = Object.assign;
 // Object prototype methods
 const rawDefineProperty = Object.defineProperty;
 const rawDefineProperties = Object.defineProperties;
+const rawToString = Object.prototype.toString;
 const rawHasOwnProperty = Object.prototype.hasOwnProperty;
+const toTypeString = (value) => rawToString.call(value);
 // is Undefined
 function isUndefined(target) {
     return target === undefined;
@@ -42,15 +44,15 @@ function isFunction(target) {
 }
 // is PlainObject
 function isPlainObject(target) {
-    return toString.call(target) === '[object Object]';
+    return toTypeString(target) === '[object Object]';
 }
 // is Object
 function isObject(target) {
-    return typeof target === 'object';
+    return !isNull(target) && typeof target === 'object';
 }
 // is Promise
 function isPromise(target) {
-    return toString.call(target) === '[object Promise]';
+    return toTypeString(target) === '[object Promise]';
 }
 // is bind function
 function isBoundFunction(target) {
@@ -87,40 +89,52 @@ function isNode(target) {
     return target instanceof Node || isNumber((_a = target) === null || _a === void 0 ? void 0 : _a.nodeType);
 }
 function isLinkElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'LINK';
+    return toTypeString(target) === '[object HTMLLinkElement]';
 }
 function isStyleElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'STYLE';
+    return toTypeString(target) === '[object HTMLStyleElement]';
 }
 function isScriptElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'SCRIPT';
+    return toTypeString(target) === '[object HTMLScriptElement]';
 }
 function isIFrameElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'IFRAME';
+    return toTypeString(target) === '[object HTMLIFrameElement]';
 }
 function isDivElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'DIV';
+    return toTypeString(target) === '[object HTMLDivElement]';
 }
 function isImageElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'IMG';
+    return toTypeString(target) === '[object HTMLImageElement]';
 }
 function isBaseElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'BASE';
+    return toTypeString(target) === '[object HTMLBaseElement]';
 }
 function isMicroAppBody(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'MICRO-APP-BODY';
+    return isElement(target) && target.tagName.toUpperCase() === 'MICRO-APP-BODY';
 }
 // is ProxyDocument
 function isProxyDocument(target) {
-    return toString.call(target) === '[object ProxyDocument]';
+    return toTypeString(target) === '[object ProxyDocument]';
+}
+function includes(target, searchElement, fromIndex) {
+    if (target == null) {
+        throw new TypeError('includes target is null or undefined');
+    }
+    const O = Object(target);
+    const len = parseInt(O.length, 10) || 0;
+    if (len === 0)
+        return false;
+    // @ts-ignore
+    fromIndex = parseInt(fromIndex, 10) || 0;
+    let i = Math.max(fromIndex >= 0 ? fromIndex : len + fromIndex, 0);
+    while (i < len) {
+        // NaN !== NaN
+        if (searchElement === O[i] || (searchElement !== searchElement && O[i] !== O[i])) {
+            return true;
+        }
+        i++;
+    }
+    return false;
 }
 /**
  * format error log
@@ -185,7 +199,7 @@ function formatAppURL(url, appName = null) {
     if (!isString(url) || !url)
         return '';
     try {
-        const { origin, pathname, search } = createURL(addProtocol(url));
+        const { origin, pathname, search } = createURL(addProtocol(url), (window.rawWindow || window).location.href);
         // If it ends with .html/.node/.php/.net/.etc, don’t need to add /
         if (/\.(\w+)$/.test(pathname)) {
             return `${origin}${pathname}${search}`;
@@ -324,21 +338,28 @@ let currentMicroAppName = null;
 function setCurrentAppName(appName) {
     currentMicroAppName = appName;
 }
-function throttleDeferForSetAppName(appName) {
-    if (currentMicroAppName !== appName) {
-        setCurrentAppName(appName);
-        defer(() => {
-            setCurrentAppName(null);
-        });
-    }
-}
 // get the currently running app.name
 function getCurrentAppName() {
     return currentMicroAppName;
 }
 // Clear appName
-function removeDomScope() {
+let preventSetAppName = false;
+function removeDomScope(force) {
     setCurrentAppName(null);
+    if (force && !preventSetAppName) {
+        preventSetAppName = true;
+        defer(() => {
+            preventSetAppName = false;
+        });
+    }
+}
+function throttleDeferForSetAppName(appName) {
+    if (currentMicroAppName !== appName && !preventSetAppName) {
+        setCurrentAppName(appName);
+        defer(() => {
+            setCurrentAppName(null);
+        });
+    }
 }
 /**
  * Create pure elements
@@ -350,33 +371,6 @@ function pureCreateElement(tagName, options) {
     element.__PURE_ELEMENT__ = true;
     return element;
 }
-/**
- * clone origin elements to target
- * @param origin Cloned element
- * @param target Accept cloned elements
- * @param deep deep clone or transfer dom
- */
-function cloneContainer(target, origin, deep) {
-    // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
-    if (origin) {
-        target.innerHTML = '';
-        if (deep) {
-            // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
-            const clonedNode = origin.cloneNode(true);
-            const fragment = document.createDocumentFragment();
-            Array.from(clonedNode.childNodes).forEach((node) => {
-                fragment.appendChild(node);
-            });
-            target.appendChild(fragment);
-        }
-        else {
-            Array.from(origin.childNodes).forEach((node) => {
-                target.appendChild(node);
-            });
-        }
-    }
-    return target;
-}
 // is invalid key of querySelector
 function isInvalidQuerySelectorKey(key) {
     return !key || /(^\d)|([^\w\d-_\u4e00-\u9fa5])/gi.test(key);
@@ -666,7 +660,10 @@ class HTMLLoader {
     run(app, successCb) {
         const appName = app.name;
         const htmlUrl = app.ssrUrl || app.url;
-        fetchSource(htmlUrl, appName, { cache: 'no-cache' }).then((htmlStr) => {
+        const htmlPromise = htmlUrl.includes('.js')
+            ? 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) => {
             if (!htmlStr) {
                 const msg = 'html is empty, please check in detail';
                 app.onerror(new Error(msg));
@@ -821,8 +818,8 @@ class CSSParser {
             return parseError("Declaration missing '}'", this.linkPath);
         return true;
     }
-    matchAllDeclarations() {
-        let cssValue = this.commonMatch(/^(?:url\(["']?(?:[^)"'}]+)["']?\)|[^}/])*/, true)[0];
+    matchAllDeclarations(nesting = 1) {
+        let cssValue = this.commonMatch(/^(?:url\(["']?(?:[^)"'}]+)["']?\)|[^{}/])*/, true)[0];
         if (cssValue) {
             if (!this.scopecssDisableNextLine &&
                 (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
@@ -841,16 +838,30 @@ class CSSParser {
         }
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        if (!this.cssText || this.cssText.charAt(0) === '}')
+        if (!this.cssText)
             return;
+        if (this.cssText.charAt(0) === '}') {
+            if (!nesting)
+                return;
+            if (nesting > 1) {
+                this.commonMatch(/}+/);
+            }
+            return this.matchAllDeclarations(nesting - 1);
+        }
         // extract comments in declarations
-        if (this.cssText.charAt(0) === '/' && this.cssText.charAt(1) === '*') {
-            this.matchComments();
+        if (this.cssText.charAt(0) === '/') {
+            if (this.cssText.charAt(1) === '*') {
+                this.matchComments();
+            }
+            else {
+                this.commonMatch(/\/+/);
+            }
         }
-        else {
-            this.commonMatch(/\/+/);
+        if (this.cssText.charAt(0) === '{') {
+            this.commonMatch(/{+\s*/);
+            nesting++;
         }
-        return this.matchAllDeclarations();
+        return this.matchAllDeclarations(nesting);
     }
     matchAtRule() {
         if (this.cssText[0] !== '@')
@@ -1284,12 +1295,12 @@ function fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult) {
          */
         if (fiberStyleResult) {
             fiberStyleResult.then(() => {
-                fiberLinkTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                fiberLinkTasks.push(() => Promise.resolve(app.onLoad({ html: wrapElement })));
                 serialExecFiberTasks(fiberLinkTasks);
             });
         }
         else {
-            app.onLoad(wrapElement);
+            app.onLoad({ html: wrapElement });
         }
     });
 }
@@ -1462,13 +1473,24 @@ var MicroAppConfig;
 // prefetch level
 const PREFETCH_LEVEL = [1, 2, 3];
 // memory router constants
+// default mode, child router info will sync to browser url
 const DEFAULT_ROUTER_MODE = 'search';
-const ROUTER_MODE_HISTORY = 'history';
-const ROUTER_MODE_CUSTOM = 'custom';
+/**
+ * render base on browser url, and location.origin location.href point to base app
+ * equal to disable-memory-router
+ * NOTE:
+ *  1. The only difference between native and native-scope is location.origin, in native-scope mode location.origin point to child app
+*/
+const ROUTER_MODE_NATIVE = 'native';
+// render base on browser url, but location.origin location.href point to child app
+const ROUTER_MODE_NATIVE_SCOPE = 'native-scope';
+// search mode, but child router info will not sync to browser url
+const ROUTER_MODE_PURE = 'pure';
 const ROUTER_MODE_LIST = [
     DEFAULT_ROUTER_MODE,
-    ROUTER_MODE_HISTORY,
-    ROUTER_MODE_CUSTOM,
+    ROUTER_MODE_NATIVE,
+    ROUTER_MODE_NATIVE_SCOPE,
+    ROUTER_MODE_PURE,
 ];
 // event bound to child app window
 const SCOPE_WINDOW_EVENT = [
@@ -1479,14 +1501,18 @@ const SCOPE_WINDOW_EVENT = [
     'unload',
     'unmount',
     'appstate-change',
+    'statechange',
+    'mounted',
 ];
 // on event bound to child app window
+// TODO: with和iframe处理方式不同，需修改
 const SCOPE_WINDOW_ON_EVENT = [
     'onpopstate',
     'onhashchange',
     'onload',
     'onbeforeunload',
     'onunload',
+    'onerror'
 ];
 // event bound to child app document
 const SCOPE_DOCUMENT_EVENT = [
@@ -1776,16 +1802,16 @@ function fetchScriptsFromHtml(wrapElement, app) {
             logError(err, app.name);
         }, () => {
             if (fiberScriptTasks) {
-                fiberScriptTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                fiberScriptTasks.push(() => Promise.resolve(app.onLoad({ html: wrapElement })));
                 serialExecFiberTasks(fiberScriptTasks);
             }
             else {
-                app.onLoad(wrapElement);
+                app.onLoad({ html: wrapElement });
             }
         });
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
 }
 /**
@@ -1952,6 +1978,8 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
     }
     catch (e) {
         console.error(`[micro-app from ${replaceElement ? 'runDynamicScript' : 'runScript'}] app ${app.name}: `, e, address);
+        // throw error in with sandbox to parent app
+        throw e;
     }
 }
 /**
@@ -2107,15 +2135,6 @@ function processCode(configs, code, address) {
     }, code);
 }
 
-/**
- * transform html string to dom
- * @param str string dom
- */
-function getWrapElement(str) {
-    const wrapDiv = pureCreateElement('div');
-    wrapDiv.innerHTML = str;
-    return wrapDiv;
-}
 /**
  * Recursively process each child element
  * @param parent parent element
@@ -2172,7 +2191,7 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
  * @param app app
  */
 function extractSourceDom(htmlStr, app) {
-    const wrapElement = getWrapElement(htmlStr);
+    const wrapElement = app.parseHtmlString(htmlStr);
     const microAppHead = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-head');
     const microAppBody = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-body');
     if (!microAppHead || !microAppBody) {
@@ -2190,16 +2209,16 @@ function extractSourceDom(htmlStr, app) {
         fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult);
     }
     else if (fiberStyleResult) {
-        fiberStyleResult.then(() => app.onLoad(wrapElement));
+        fiberStyleResult.then(() => app.onLoad({ html: wrapElement }));
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
     if (app.source.scripts.size) {
         fetchScriptsFromHtml(wrapElement, app);
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
 }
 
@@ -2735,12 +2754,17 @@ function createProxyDocument(appName, sandbox) {
     const sstEventListenerMap = new Map();
     let onClickHandler = null;
     let sstOnClickHandler = null;
-    const { rawDocument, rawCreateElement, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
+    const { rawDocument, rawCreateElement, rawCreateElementNS, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
     function createElement(tagName, options) {
         const element = rawCreateElement.call(rawDocument, tagName, options);
         element.__MICRO_APP_NAME__ = appName;
         return element;
     }
+    function createElementNS(namespaceURI, name, options) {
+        const element = rawCreateElementNS.call(rawDocument, namespaceURI, name, options);
+        element.__MICRO_APP_NAME__ = appName;
+        return element;
+    }
     /**
      * TODO:
      *  1. listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
@@ -2856,6 +2880,8 @@ function createProxyDocument(appName, sandbox) {
             // TODO: 转换成数据形式，类似iframe的方式
             if (key === 'createElement')
                 return createElement;
+            if (key === 'createElementNS')
+                return createElementNS;
             if (key === Symbol.toStringTag)
                 return 'ProxyDocument';
             if (key === 'defaultView')
@@ -2908,7 +2934,8 @@ function createMicroDocument(appName, proxyDocument) {
     class MicroDocument {
         static [Symbol.hasInstance](target) {
             let proto = target;
-            while (proto = Object.getPrototypeOf(proto)) {
+            while (proto) {
+                proto = Object.getPrototypeOf(proto);
                 if (proto === MicroDocument.prototype) {
                     return true;
                 }
@@ -2951,7 +2978,7 @@ function createMicroDocument(appName, proxyDocument) {
 function patchWindow(appName, microAppWindow, sandbox) {
     patchWindowProperty(microAppWindow);
     createProxyWindow(appName, microAppWindow, sandbox);
-    return patchWindowEffect(microAppWindow);
+    return patchWindowEffect(microAppWindow, appName);
 }
 /**
  * rewrite special properties of window
@@ -2992,22 +3019,22 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
             throttleDeferForSetAppName(appName);
             if (Reflect.has(target, key) ||
                 (isString(key) && /^__MICRO_APP_/.test(key)) ||
-                sandbox.scopeProperties.includes(key)) {
-                if (RAW_GLOBAL_TARGET.includes(key))
+                includes(sandbox.scopeProperties, key)) {
+                if (includes(RAW_GLOBAL_TARGET, key))
                     removeDomScope();
                 return Reflect.get(target, key);
             }
             return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
         },
         set: (target, key, value) => {
-            if (sandbox.adapter.escapeSetterKeyList.includes(key)) {
+            if (includes(sandbox.rawWindowScopeKeyList, key)) {
                 Reflect.set(rawWindow, key, value);
             }
             else if (
             // target.hasOwnProperty has been rewritten
             !rawHasOwnProperty.call(target, key) &&
                 rawHasOwnProperty.call(rawWindow, key) &&
-                !sandbox.scopeProperties.includes(key)) {
+                !includes(sandbox.scopeProperties, key)) {
                 const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
                 const { configurable, enumerable, writable, set } = descriptor;
                 // set value because it can be set
@@ -3020,32 +3047,37 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
                 sandbox.injectedKeys.add(key);
             }
             else {
-                !Reflect.has(target, key) && sandbox.injectedKeys.add(key);
+                // all scopeProperties will add to injectedKeys, use for key in window (Proxy.has)
+                if (!Reflect.has(target, key) || includes(sandbox.scopeProperties, key)) {
+                    sandbox.injectedKeys.add(key);
+                }
                 Reflect.set(target, key, value);
             }
-            if ((sandbox.escapeProperties.includes(key) ||
-                (sandbox.adapter.staticEscapeProperties.includes(key) &&
+            if ((includes(sandbox.escapeProperties, key) ||
+                (
+                // TODO: staticEscapeProperties 合并到 escapeProperties
+                includes(sandbox.staticEscapeProperties, key) &&
                     !Reflect.has(rawWindow, key))) &&
-                !sandbox.scopeProperties.includes(key)) {
+                !includes(sandbox.scopeProperties, key)) {
                 !Reflect.has(rawWindow, key) && sandbox.escapeKeys.add(key);
                 Reflect.set(rawWindow, key, value);
             }
             return true;
         },
         has: (target, key) => {
-            if (sandbox.scopeProperties.includes(key)) {
-                /**
-                 * Some keywords, such as Vue, need to meet two conditions at the same time:
-                 * 1. 'Vue' in window --> false
-                 * 2. Vue (top level variable) // undefined
-                 * Issue https://github.com/micro-zoe/micro-app/issues/686
-                 */
-                if (sandbox.adapter.staticScopeProperties.includes(key)) {
-                    return !!target[key];
+            /**
+             * Some keywords, such as Vue, need to meet two conditions at the same time:
+             * 1. window.Vue --> undefined
+             * 2. 'Vue' in window --> false
+             * Issue https://github.com/micro-zoe/micro-app/issues/686
+             */
+            if (includes(sandbox.scopeProperties, key)) {
+                if (sandbox.injectedKeys.has(key)) {
+                    return Reflect.has(target, key); // true
                 }
-                return key in target;
+                return !!target[key]; // false
             }
-            return key in target || key in rawWindow;
+            return Reflect.has(target, key) || Reflect.has(rawWindow, key);
         },
         // Object.getOwnPropertyDescriptor(window, key)
         getOwnPropertyDescriptor: (target, key) => {
@@ -3090,14 +3122,26 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
  * Rewrite side-effect events
  * @param microAppWindow micro window
  */
-function patchWindowEffect(microAppWindow) {
+function patchWindowEffect(microAppWindow, appName) {
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     const intervalIdMap = new Map();
     const timeoutIdMap = new Map();
     const { rawWindow, rawAddEventListener, rawRemoveEventListener, rawDispatchEvent, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, } = globalEnv;
+    /**
+     * All events will bind to microAppElement or rawWindow
+     * Some special events, such as popstate、load、unmount、appstate-change、statechange..., bind to microAppElement, others bind to rawWindow
+     * NOTE:
+     *  1、At first, microAppWindow = new EventTarget(), but it can not compatible with iOS 14 or below, so microAppElement was used instead. (2024.1.22)
+     * @param type event name
+     * @returns microAppElement/rawWindow
+     */
     function getEventTarget(type) {
-        return SCOPE_WINDOW_EVENT.includes(type) ? microAppWindow : rawWindow;
+        var _a;
+        if (SCOPE_WINDOW_EVENT.includes(type) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
+            return getRootContainer(appInstanceMap.get(appName).container);
+        }
+        return rawWindow;
     }
     /**
      * listener may be null, e.g test-passive
@@ -3211,7 +3255,7 @@ function patchWindowEffect(microAppWindow) {
 
 // set micro app state to origin state
 function setMicroState(appName, microState) {
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         const rawState = globalEnv.rawWindow.history.state;
         const additionalState = {
             microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
@@ -3225,7 +3269,7 @@ function setMicroState(appName, microState) {
 }
 // delete micro app state form origin state
 function removeMicroState(appName, rawState) {
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
             if (!isUndefined(rawState.microAppState[appName])) {
                 delete rawState.microAppState[appName];
@@ -3242,7 +3286,7 @@ function removeMicroState(appName, rawState) {
 function getMicroState(appName) {
     var _a;
     const rawState = globalEnv.rawWindow.history.state;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
     }
     return rawState;
@@ -3282,8 +3326,11 @@ function formatQueryAppName(appName) {
  */
 function getMicroPathFromURL(appName) {
     var _a, _b;
+    // TODO: pure模式从state中获取地址
+    if (isRouterModePure(appName))
+        return null;
     const rawLocation = globalEnv.rawWindow.location;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         const queryObject = getQueryObjectFromURL(rawLocation.search, rawLocation.hash);
         const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
         return isString(microPath) ? decodeMicroPath(microPath) : null;
@@ -3298,7 +3345,7 @@ function getMicroPathFromURL(appName) {
 function setMicroPathToURL(appName, targetLocation) {
     const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
     let isAttach2Hash = false;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         let { pathname, search, hash } = globalEnv.rawWindow.location;
         const queryObject = getQueryObjectFromURL(search, hash);
         const encodedMicroPath = encodeMicroPath(targetFullPath);
@@ -3350,7 +3397,7 @@ function removeMicroPathFromURL(appName, targetLocation) {
     var _a, _b, _c, _d;
     let { pathname, search, hash } = targetLocation || globalEnv.rawWindow.location;
     let isAttach2Hash = false;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         const queryObject = getQueryObjectFromURL(search, hash);
         if ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) {
             isAttach2Hash = true;
@@ -3410,15 +3457,31 @@ function isEffectiveApp(appName) {
      */
     return !!(app && !app.isPrefetch);
 }
+// router mode is search
+function isRouterModeSearch(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === DEFAULT_ROUTER_MODE);
+}
+// router mode is history
+function isRouterModeNative(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_NATIVE);
+}
+// router mode is disable
+function isRouterModeNativeScope(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_NATIVE_SCOPE);
+}
+// router mode is pure
+function isRouterModePure(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.routerMode === ROUTER_MODE_PURE);
+}
 /**
- * router mode is custom
- * NOTE:
- *  1. if sandbox disabled, router mode defaults to custom
- *  2. if app not exist, router mode defaults to custom
+ * router mode is history or disable
  */
 function isRouterModeCustom(appName) {
-    const app = appInstanceMap.get(appName);
-    return !app || !app.sandBox || app.routerMode === ROUTER_MODE_CUSTOM;
+    return isRouterModeNative(appName) || isRouterModeNativeScope(appName);
 }
 /**
  * get memory router mode of child app
@@ -3426,21 +3489,21 @@ function isRouterModeCustom(appName) {
  *  1. if microAppElement exists, it means the app render by the micro-app element
  *  2. if microAppElement not exists, it means it is prerender app
  * @param mode native config
- * @param microAppElement micro-app element
- * @returns mode
+ * @param inlineDisableMemoryRouter disable-memory-router set by micro-app element or prerender
+ * @returns router mode
  */
-function getRouterMode(mode, microAppElement) {
-    let routerMode;
+function getRouterMode(mode, inlineDisableMemoryRouter) {
     /**
      * compatible with disable-memory-router in older versions
-     * if disable-memory-router is true, router-mode will be custom
+     * if disable-memory-router is true, router-mode will be disable
+     * Priority:
+     *  inline disable-memory-router > inline router-mode > global disable-memory-router > global router-mode
      */
-    if (microAppElement) {
-        routerMode = microAppElement.getDisposeResult('disable-memory-router') ? ROUTER_MODE_CUSTOM : mode || microApp.options['router-mode'] || '';
-    }
-    else {
-        routerMode = microApp.options['disable-memory-router'] ? ROUTER_MODE_CUSTOM : mode || microApp.options['router-mode'] || '';
-    }
+    const routerMode = ((inlineDisableMemoryRouter && ROUTER_MODE_NATIVE) ||
+        mode ||
+        (microApp.options['disable-memory-router'] && ROUTER_MODE_NATIVE) ||
+        microApp.options['router-mode'] ||
+        DEFAULT_ROUTER_MODE);
     return ROUTER_MODE_LIST.includes(routerMode) ? routerMode : DEFAULT_ROUTER_MODE;
 }
 
@@ -3586,7 +3649,7 @@ function dispatchNativeEvent(appName, onlyForBrowser, oldHref) {
  * create proxyHistory for microApp
  * MDN https://developer.mozilla.org/en-US/docs/Web/API/History
  * @param appName app name
- * @param microLocation microApp location
+ * @param microLocation microApp location(with: proxyLocation iframe: iframeWindow.location)
  */
 function createMicroHistory(appName, microLocation) {
     const rawHistory = globalEnv.rawWindow.history;
@@ -3597,7 +3660,9 @@ function createMicroHistory(appName, microLocation) {
             if (isString(rests[2]) || isURL(rests[2])) {
                 const targetLocation = createURL(rests[2], microLocation.href);
                 const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
+                if (!isRouterModePure(appName)) {
+                    navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
+                }
                 if (targetFullPath !== microLocation.fullPath) {
                     updateMicroLocation(appName, targetFullPath, microLocation);
                 }
@@ -3676,10 +3741,10 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
         /**
          * TODO:
-         *  1. 如果所有模式统一发送popstate事件，则!isRouterModeCustom(appName)要去掉
+         *  1. 如果所有模式统一发送popstate事件，则isRouterModeSearch(appName)要去掉
          *  2. 如果发送事件，则会导致vue router-view :key='router.path'绑定，无限卸载应用，死循环
          */
-        if (oldFullPath !== result.fullPath && !isRouterModeCustom(appName)) {
+        if (oldFullPath !== result.fullPath && isRouterModeSearch(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
         }
     }
@@ -3726,7 +3791,7 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            if (!isRouterModeCustom(appName) && !getMicroPathFromURL(appName)) {
+            if (isRouterModeSearch(appName) && !getMicroPathFromURL(appName)) {
                 const app = appInstanceMap.get(appName);
                 attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
             }
@@ -3778,8 +3843,10 @@ function createRouterApi() {
         const currentFullPath = microLocation.pathname + microLocation.search + microLocation.hash;
         const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
         if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
-            const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
-            navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+            if (!isRouterModePure(appName)) {
+                const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
+                navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+            }
             /**
              * TODO:
              *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
@@ -3792,7 +3859,7 @@ function createRouterApi() {
              *  NOTE1: history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
              *  NOTE2: 关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
              */
-            if (isRouterModeCustom(appName)) {
+            if (isRouterModeCustom(appName) || isRouterModePure(appName)) {
                 updateMicroLocationWithEvent(appName, targetFullPath);
             }
         }
@@ -3807,52 +3874,53 @@ function createRouterApi() {
      */
     function createNavigationMethod(replace) {
         return function (to) {
-            const appName = formatAppName(to.name);
-            if (appName && isString(to.path)) {
-                /**
-                 * active apps, exclude prerender app or hidden keep-alive app
-                 * NOTE:
-                 *  1. prerender app or hidden keep-alive app clear and record popstate event, so we cannot control app jump through the API
-                 *  2. disable memory-router
-                 */
-                /**
-                 * TODO: 子应用开始渲染但是还没渲染完成
-                 *  1、调用跳转改如何处理
-                 *  2、iframe的沙箱还没初始化时执行跳转报错，如何处理。。。
-                 *  3、hidden app 是否支持跳转
-                 */
-                if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName)) {
-                    const app = appInstanceMap.get(appName);
-                    const navigateAction = () => handleNavigate(appName, app, to, replace);
-                    app.iframe ? app.sandBox.sandboxReady.then(navigateAction) : navigateAction();
+            return new Promise((resolve, reject) => {
+                const appName = formatAppName(to.name);
+                if (appName && isString(to.path)) {
+                    /**
+                     * active apps, exclude prerender app or hidden keep-alive app
+                     * NOTE:
+                     *  1. prerender app or hidden keep-alive app clear and record popstate event, so we cannot control app jump through the API
+                     *  2. disable memory-router
+                     */
+                    /**
+                     * TODO: 子应用开始渲染但是还没渲染完成
+                     *  1、调用跳转改如何处理
+                     *  2、iframe的沙箱还没初始化时执行跳转报错，如何处理。。。
+                     *  3、hidden 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'));
+                    }
+                    // /**
+                    //  * 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
+                    // if (getMicroPathFromURL(appName) !== targetFullPath) {
+                    //   navigateWithRawHistory(
+                    //     appName,
+                    //     to.replace === false ? 'pushState' : 'replaceState',
+                    //     targetLocation,
+                    //     to.state,
+                    //   )
+                    // }
                 }
                 else {
-                    logWarn('navigation failed, app does not exist or is inactive');
+                    reject(logError(`navigation failed, name & path are required when use router.${replace ? 'replace' : 'push'}`));
                 }
-                // /**
-                //  * 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
-                // if (getMicroPathFromURL(appName) !== targetFullPath) {
-                //   navigateWithRawHistory(
-                //     appName,
-                //     to.replace === false ? 'pushState' : 'replaceState',
-                //     targetLocation,
-                //     to.state,
-                //   )
-                // }
-            }
-            else {
-                logError(`navigation failed, name & path are required when use router.${replace ? 'replace' : 'push'}`);
-            }
+            });
         };
     }
     // create method of router.go/back/forward
@@ -3909,7 +3977,7 @@ function createRouterApi() {
      * 3. router mode is custom
      */
     function commonHandlerForAttachToURL(appName) {
-        if (!isRouterModeCustom(appName)) {
+        if (isRouterModeSearch(appName)) {
             const app = appInstanceMap.get(appName);
             attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
         }
@@ -4141,7 +4209,7 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
         if (targetLocation.origin === proxyLocation.origin) {
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
             // if disable memory-router, navigate directly through rawLocation
-            if (!isRouterModeCustom(appName)) {
+            if (isRouterModeSearch(appName)) {
                 /**
                  * change hash with location.href will not trigger the browser reload
                  * so we use pushState & reload to imitate href behavior
@@ -4227,6 +4295,20 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
     const proxyLocation = new Proxy({}, {
         get: (_, key) => {
             const target = getTarget();
+            if (key === 'assign')
+                return assign;
+            if (key === 'replace')
+                return replace;
+            if (key === 'reload')
+                return reload;
+            if (key === 'self')
+                return target;
+            if (key === 'fullPath')
+                return target.fullPath;
+            if (isRouterModeNative(appName)) {
+                return bindFunctionToRawTarget(Reflect.get(rawLocation, key), rawLocation, 'LOCATION');
+            }
+            // src of iframe is base app address, it needs to be replaced separately
             if (isIframe) {
                 // host hostname port protocol
                 if (hijackMicroLocationKeys.includes(key)) {
@@ -4237,29 +4319,21 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                     return target[key].replace(browserHost, childHost);
                 }
             }
-            if (key === 'assign')
-                return assign;
-            if (key === 'replace')
-                return replace;
-            if (key === 'reload')
-                return reload;
-            if (key === 'self')
-                return target;
             return bindFunctionToRawTarget(Reflect.get(target, key), target, 'LOCATION');
         },
         set: (_, key, value) => {
             if (isEffectiveApp(appName)) {
                 const target = getTarget();
                 if (key === 'href') {
-                    const targetPath = commonHandler(value, 'pushState');
                     /**
                      * In vite, targetPath without origin will be completed with child origin
                      * So we use browser origin to complete targetPath to avoid this problem
-                     * But, why child app can affect browser jump?
-                     * Guess(need check):
-                     *  1. vite records the origin when init
-                     *  2. listen for browser jump and automatically complete the address
+                     * NOTE:
+                     *  1. history mode & value is childOrigin + path ==> jump to browserOrigin + path
+                     *  2. disable mode & value is childOrigin + path ==> jump to childOrigin + path
+                     *  3. search mode & value is browserOrigin + path ==> jump to browserOrigin + path
                      */
+                    const targetPath = commonHandler(value, 'pushState');
                     if (targetPath) {
                         rawLocation.href = createURL(targetPath, rawLocation.origin).href;
                     }
@@ -4344,9 +4418,11 @@ function updateMicroLocation(appName, path, microLocation, type) {
         (_a = microAppWindow.rawReplaceState) === null || _a === void 0 ? void 0 : _a.call(microAppWindow.history, getMicroState(appName), '', newLocation.href);
     }
     else {
-        for (const key of locationKeys) {
-            microLocation.self[key] = newLocation[key];
+        let targetHref = newLocation.href;
+        if (microLocation.self.origin !== newLocation.origin) {
+            targetHref = targetHref.replace(newLocation.origin, microLocation.self.origin);
         }
+        microLocation.self.href = targetHref;
     }
     // update latest values of microLocation to `to`
     const to = createGuardLocation(appName, microLocation);
@@ -4357,13 +4433,9 @@ function updateMicroLocation(appName, path, microLocation, type) {
 }
 
 /**
- * TODO: 关于关闭虚拟路由系统的临时笔记 - 即custom模式，虚拟路由不支持关闭
- * 1. with沙箱关闭虚拟路由最好和iframe保持一致
- * 2. default-page无法使用，但是用基座的地址可以实现一样的效果
- * 3. keep-router-state功能失效，因为始终为true
- * 4. 基座控制子应用跳转地址改变，正确的值为：baseRoute + 子应用地址，这要在文档中说明，否则很容易出错，确实也很难理解
- * 5. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
- * 6. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
+ * TODO: 关于关闭虚拟路由系统的custom、history模式
+ * 1. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
+ * 2. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
  */
 /**
  * The router system has two operations: read and write
@@ -4404,8 +4476,10 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     // update microLocation with defaultPage
     if (defaultPage)
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
-    // attach microApp route info to browser URL
-    attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
+    if (!isRouterModePure(appName)) {
+        // attach microApp route info to browser URL
+        attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
+    }
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -4422,7 +4496,9 @@ function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
             const { pathname, search, hash } = createURL(url);
             updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
         }
-        removePathFromBrowser(appName);
+        if (!isRouterModePure(appName)) {
+            removePathFromBrowser(appName);
+        }
     }
     clearRouterWhenUnmount(appName);
 }
@@ -4434,10 +4510,10 @@ function removePathFromBrowser(appName) {
     attachRouteToBrowserURL(appName, removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
-class Adapter {
+class BaseSandbox {
     constructor() {
         // keys that can only assigned to rawWindow
-        this.escapeSetterKeyList = [
+        this.rawWindowScopeKeyList = [
             'location',
         ];
         // keys that can escape to rawWindow
@@ -4450,7 +4526,18 @@ class Adapter {
             'webpackJsonp',
             'webpackHotUpdate',
             'Vue',
+            // TODO: 是否可以和constants/SCOPE_WINDOW_ON_EVENT合并
+            'onpopstate',
+            'onhashchange',
         ];
+        // Properties that can only get and set in microAppWindow, will not escape to rawWindow
+        this.scopeProperties = Array.from(this.staticScopeProperties);
+        // Properties that can be escape to rawWindow
+        this.escapeProperties = [];
+        // Properties newly added to microAppWindow
+        this.injectedKeys = new Set();
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
         this.injectReactHMRProperty();
     }
     // adapter for react
@@ -4468,6 +4555,14 @@ class Adapter {
         }
     }
 }
+/**
+ * TODO:
+ *  1、将class Adapter去掉，改为CustomWindow，或者让CustomWindow继承Adapter
+ *  2、with沙箱中的常量放入CustomWindow，虽然和iframe沙箱不一致，但更合理
+ * 修改时机：在iframe沙箱支持插件后再修改
+ */
+class CustomWindow {
+}
 // Fix conflict of babel-polyfill@6.x
 function fixBabelPolyfill6() {
     if (globalEnv.rawWindow._babelPolyfill)
@@ -4522,11 +4617,11 @@ function updateElementInfo(node, appName) {
          *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
          *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
          *  2. with沙箱所有node设置__MICRO_APP_NAME__都使用updateElementInfo
-         *  3. 性能: defineProperty的性能肯定不如直接设置
         */
         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__: {
@@ -4535,12 +4630,6 @@ function updateElementInfo(node, appName) {
                 value: appName,
             },
         });
-        if (isIframeSandbox(appName)) {
-            rawDefineProperty(node, 'ownerDocument', {
-                configurable: true,
-                get: () => proxyWindow.document,
-            });
-        }
     }
     return node;
 }
@@ -4647,32 +4736,26 @@ 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.adapter = new Adapter();
-        // get scopeProperties and escapeProperties from plugins
-        this.getSpecialProperties(appName);
-        // create location, history for child app
-        this.patchRouter(appName, url, this.microAppWindow);
-        // patch window of child app
-        this.windowEffect = patchWindow(appName, this.microAppWindow, this);
-        // patch document of child app
-        this.documentEffect = patchDocument(appName, this.microAppWindow, this);
-        // inject global properties
-        this.initStaticGlobalKeys(appName, url, this.microAppWindow);
+        this.microAppWindow = new CustomWindow(); // Proxy target
+        this.patchWith((resolve) => {
+            // get scopeProperties and escapeProperties from plugins
+            this.getSpecialProperties(appName);
+            // create location, history for child app
+            this.patchRouter(appName, url, this.microAppWindow);
+            // patch window of child app
+            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();
+        });
     }
     /**
      * open sandbox and perform some initial actions
@@ -4690,7 +4773,9 @@ class WithSandBox {
         this.initRouteState(defaultPage);
         // unique listener of popstate event for sub app
         this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        if (isRouterModeCustom(this.microAppWindow.__MICRO_APP_NAME__)) {
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        }
         /* --- memory router part --- end */
         /**
          * Target: Ensure default mode action exactly same to first time when render again
@@ -4755,6 +4840,7 @@ class WithSandBox {
     }
     /**
      * inject global properties to microAppWindow
+     * TODO: 设置为只读变量
      * @param appName app name
      * @param url app url
      * @param microAppWindow micro window
@@ -4768,6 +4854,7 @@ class WithSandBox {
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
         microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
         microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
         microAppWindow.__MICRO_APP_SANDBOX__ = this;
         microAppWindow.__MICRO_APP_SANDBOX_TYPE__ = 'with';
         microAppWindow.rawWindow = globalEnv.rawWindow;
@@ -4777,7 +4864,6 @@ class WithSandBox {
             pureCreateElement,
             router,
         });
-        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
     }
     /**
      * Record global effect and then release (effect: global event, timeout, data listener)
@@ -4860,7 +4946,6 @@ class WithSandBox {
      */
     getSpecialProperties(appName) {
         var _a;
-        this.scopeProperties = this.scopeProperties.concat(this.adapter.staticScopeProperties);
         if (isPlainObject(microApp.options.plugins)) {
             this.commonActionForSpecialProperties(microApp.options.plugins.global);
             this.commonActionForSpecialProperties((_a = microApp.options.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
@@ -4888,6 +4973,9 @@ class WithSandBox {
     markUmdMode(state) {
         this.microAppWindow.__MICRO_APP_UMD_MODE__ = state;
     }
+    patchWith(cb) {
+        this.sandboxReady = new Promise((resolve) => cb(resolve));
+    }
     // properties associated with the native window
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
         let topValue, parentValue;
@@ -4899,9 +4987,10 @@ class WithSandBox {
             topValue = rawWindow.top;
             parentValue = rawWindow.parent;
         }
-        // TODO: 用rawDefineProperties
-        rawDefineProperty(microAppWindow, 'top', this.createDescriptorForMicroAppWindow('top', topValue));
-        rawDefineProperty(microAppWindow, 'parent', this.createDescriptorForMicroAppWindow('parent', parentValue));
+        rawDefineProperties(microAppWindow, {
+            top: this.createDescriptorForMicroAppWindow('top', topValue),
+            parent: this.createDescriptorForMicroAppWindow('parent', parentValue),
+        });
         GLOBAL_KEY_TO_WINDOW.forEach((key) => {
             rawDefineProperty(microAppWindow, key, this.createDescriptorForMicroAppWindow(key, this.proxyWindow));
         });
@@ -5059,11 +5148,14 @@ class WithSandBox {
     actionBeforeExecScripts(container) {
         this.patchStaticElement(container);
     }
+    setStaticAppState(state) {
+        this.microAppWindow.__MICRO_APP_STATE__ = state;
+    }
 }
 WithSandBox.activeCount = 0; // number of active sandbox
 
 function patchRouter(appName, url, microAppWindow, browserHost) {
-    const childStaticLocation = new URL(url);
+    const childStaticLocation = createURL(url);
     const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
     const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
     // rewrite microAppWindow.history
@@ -5156,18 +5248,35 @@ function patchWindowProperty$1(appName, microAppWindow) {
  */
 function createProxyWindow$1(microAppWindow, sandbox) {
     const rawWindow = globalEnv.rawWindow;
-    const customProperties = [];
+    const customProperties = new Set();
+    /**
+     * proxyWindow will only take effect in certain scenes, such as window.key
+     * e.g:
+     *  1. window.key in normal app --> fall into proxyWindow
+     *  2. window.key in module app(vite), fall into microAppWindow(iframeWindow)
+     *  3. if (key)... --> fall into microAppWindow(iframeWindow)
+     */
     const proxyWindow = new Proxy(microAppWindow, {
         get: (target, key) => {
             if (key === 'location') {
                 return sandbox.proxyLocation;
             }
-            if (GLOBAL_KEY_TO_WINDOW.includes(key.toString())) {
+            if (includes(GLOBAL_KEY_TO_WINDOW, key)) {
                 return proxyWindow;
             }
-            if (customProperties.includes(key)) {
+            if (customProperties.has(key)) {
                 return Reflect.get(target, key);
             }
+            /**
+             * Same as proxyWindow, escapeProperties will only take effect in certain scenes
+             * e.g:
+             *  1. window.key in normal app --> fall into proxyWindow, escapeProperties will effect
+             *  2. window.key in module app(vite), fall into microAppWindow(iframeWindow), escapeProperties will not take effect
+             *  3. if (key)... --> fall into microAppWindow(iframeWindow), escapeProperties will not take effect
+             */
+            if (includes(sandbox.escapeProperties, key) && !Reflect.has(target, key)) {
+                return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
+            }
             return bindFunctionToRawTarget(Reflect.get(target, key), target);
         },
         set: (target, key, value) => {
@@ -5175,10 +5284,10 @@ function createProxyWindow$1(microAppWindow, sandbox) {
                 return Reflect.set(rawWindow, key, value);
             }
             if (!Reflect.has(target, key)) {
-                customProperties.push(key);
+                customProperties.add(key);
             }
             Reflect.set(target, key, value);
-            if (sandbox.escapeProperties.includes(key)) {
+            if (includes(sandbox.escapeProperties, key)) {
                 !Reflect.has(rawWindow, key) && sandbox.escapeKeys.add(key);
                 Reflect.set(rawWindow, key, value);
             }
@@ -5293,7 +5402,9 @@ function patchDocumentPrototype(appName, microAppWindow) {
     const microRootDocument = microAppWindow.Document;
     const microDocument = microAppWindow.document;
     const rawMicroCreateElement = microRootDocument.prototype.createElement;
+    const rawMicroCreateElementNS = microRootDocument.prototype.createElementNS;
     const rawMicroCreateTextNode = microRootDocument.prototype.createTextNode;
+    const rawMicroCreateDocumentFragment = microRootDocument.prototype.createDocumentFragment;
     const rawMicroCreateComment = microRootDocument.prototype.createComment;
     const rawMicroQuerySelector = microRootDocument.prototype.querySelector;
     const rawMicroQuerySelectorAll = microRootDocument.prototype.querySelectorAll;
@@ -5314,10 +5425,18 @@ function patchDocumentPrototype(appName, microAppWindow) {
         const element = rawMicroCreateElement.call(this, tagName, options);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
+        const element = rawMicroCreateElementNS.call(this, namespaceURI, name, options);
+        return updateElementInfo(element, appName);
+    };
     microRootDocument.prototype.createTextNode = function createTextNode(data) {
         const element = rawMicroCreateTextNode.call(this, data);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = rawMicroCreateDocumentFragment.call(this);
+        return updateElementInfo(element, appName);
+    };
     microRootDocument.prototype.createComment = function createComment(data) {
         const element = rawMicroCreateComment.call(this, data);
         return updateElementInfo(element, appName);
@@ -5418,6 +5537,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
     const createDescriptors = () => {
         const result = {};
         const descList = [
+            // if disable-memory-router or router-mode='disable', href point to base app
             ['documentURI', () => sandbox.proxyLocation.href],
             ['URL', () => sandbox.proxyLocation.href],
             ['documentElement', () => rawDocument.documentElement],
@@ -5454,7 +5574,10 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
         rawDefineProperty(microDocument, tagName, {
             enumerable: true,
             configurable: true,
-            get: () => rawDocument[tagName],
+            get: () => {
+                throttleDeferForSetAppName(appName);
+                return rawDocument[tagName];
+            },
             set: (value) => { rawDocument[tagName] = value; },
         });
     });
@@ -5626,7 +5749,8 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
     const rawMicroInsertAdjacentElement = microRootElement.prototype.insertAdjacentElement;
     const rawMicroCloneNode = microRootNode.prototype.cloneNode;
     const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(microRootElement.prototype, 'innerHTML');
-    const rawParentNodeLDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'parentNode');
+    const rawParentNodeDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'parentNode');
+    const rawOwnerDocumentDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'ownerDocument');
     const isPureNode = (target) => {
         return (isScriptElement(target) || isBaseElement(target)) && target.__PURE_ELEMENT__;
     };
@@ -5647,6 +5771,7 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         // return rootNode
     };
     microRootNode.prototype.appendChild = function appendChild(node) {
+        // TODO: 有必要执行这么多次updateElementInfo？
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroAppendChild.call(this, node);
@@ -5718,6 +5843,15 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         const clonedNode = rawMicroCloneNode.call(this, deep);
         return updateElementInfo(clonedNode, appName);
     };
+    rawDefineProperty(microRootNode.prototype, 'ownerDocument', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return this.__PURE_ELEMENT__
+                ? rawOwnerDocumentDesc.get.call(this)
+                : microDocument;
+        },
+    });
     rawDefineProperty(microRootElement.prototype, 'innerHTML', {
         configurable: true,
         enumerable: true,
@@ -5745,21 +5879,21 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
              *  1. Is there a problem with setting the current appName in iframe mode
              */
             throttleDeferForSetAppName(appName);
-            const result = rawParentNodeLDesc.get.call(this);
+            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 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)) || rawDocument.body;
+                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, {
@@ -5821,14 +5955,17 @@ class IframeSandbox {
         this.escapeProperties = [];
         // Properties escape to rawWindow, cleared when unmount
         this.escapeKeys = new Set();
-        // TODO: 初始化和每次跳转时都要更新base的href
+        // 初始化和每次跳转时都要更新base的href
         this.updateIframeBase = () => {
             var _a;
-            (_a = this.baseElement) === null || _a === void 0 ? void 0 : _a.setAttribute('href', this.proxyLocation.protocol + '//' + this.proxyLocation.host + this.proxyLocation.pathname);
+            // origin must be child app origin
+            (_a = this.baseElement) === null || _a === void 0 ? void 0 : _a.setAttribute('href', createURL(this.url).origin + this.proxyLocation.pathname);
         };
+        this.appName = appName;
+        this.url = url;
         const rawLocation = globalEnv.rawWindow.location;
         const browserHost = rawLocation.protocol + '//' + rawLocation.host;
-        this.deleteIframeElement = this.createIframeElement(appName, browserHost);
+        this.deleteIframeElement = this.createIframeElement(appName, browserHost + rawLocation.pathname);
         this.microAppWindow = this.iframe.contentWindow;
         this.patchIframe(this.microAppWindow, (resolve) => {
             // create new html to iframe
@@ -5856,13 +5993,13 @@ class IframeSandbox {
     /**
      * create iframe for sandbox
      * @param appName app name
-     * @param browserHost browser origin
+     * @param browserPath browser origin
      * @returns release callback
      */
-    createIframeElement(appName, browserHost) {
+    createIframeElement(appName, browserPath) {
         this.iframe = pureCreateElement('iframe');
         const iframeAttrs = {
-            src: browserHost,
+            src: microApp.options.iframeSrc || browserPath,
             style: 'display: none',
             id: appName,
         };
@@ -5910,7 +6047,9 @@ class IframeSandbox {
         this.initRouteState(defaultPage);
         // unique listener of popstate event for child app
         this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        if (isRouterModeCustom(this.microAppWindow.__MICRO_APP_NAME__)) {
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        }
         /* --- memory router part --- end */
         /**
          * create base element to iframe
@@ -5955,6 +6094,7 @@ class IframeSandbox {
      * NOTE:
      *  1. execute as early as possible
      *  2. run after patchRouter & createProxyWindow
+     * TODO: 设置为只读变量
      */
     initStaticGlobalKeys(appName, url, microAppWindow) {
         microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
@@ -6156,6 +6296,7 @@ class IframeSandbox {
         patchElementTree(container, this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
+     * action before exec scripts when mount
      * Actions:
      * 1. patch static elements from html
      * @param container micro app container
@@ -6163,6 +6304,9 @@ class IframeSandbox {
     actionBeforeExecScripts(container) {
         this.patchStaticElement(container);
     }
+    setStaticAppState(state) {
+        this.microAppWindow.__MICRO_APP_STATE__ = state;
+    }
 }
 IframeSandbox.activeCount = 0; // number of active sandbox
 
@@ -6175,6 +6319,7 @@ class CreateApp {
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
         this.umdHookUnmount = null;
+        this.lifeCycleState = null;
         this.umdMode = false;
         // TODO: 类型优化，加上iframe沙箱
         this.sandBox = null;
@@ -6211,8 +6356,11 @@ class CreateApp {
     }
     /**
      * When resource is loaded, mount app if it is not prefetch or unmount
+     * defaultPage disablePatchRequest routerMode baseroute is only for prerender app
      */
-    onLoad(html, defaultPage, disablePatchRequest, routerMode, baseroute) {
+    onLoad({ html, 
+    // below params is only for prerender app
+    defaultPage, routerMode, baseroute, disablePatchRequest, }) {
         var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
@@ -6243,11 +6391,11 @@ class CreateApp {
                 this.mount({
                     container,
                     inline: this.inline,
-                    routerMode: routerMode,
-                    baseroute: baseroute || '',
                     fiber: true,
                     defaultPage: defaultPage || '',
                     disablePatchRequest: disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : false,
+                    routerMode: routerMode,
+                    baseroute: baseroute || '',
                 });
             }
         }
@@ -6284,6 +6432,10 @@ class CreateApp {
             this.container = container;
             // mount before prerender exec mount (loading source), set isPrerender to false
             this.isPrerender = false;
+            // dispatch state event to micro app
+            dispatchCustomEventToMicroApp(this, 'statechange', {
+                appState: appStates.LOADING
+            });
             // reset app state to LOADING
             return this.setAppState(appStates.LOADING);
         }
@@ -6313,7 +6465,7 @@ class CreateApp {
                  */
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
                 // current this.container is <div prerender='true'></div>
-                cloneContainer(container, this.container, false);
+                this.cloneContainer(container, this.container, false);
                 /**
                  * set this.container to <micro-app></micro-app>
                  * NOTE:
@@ -6333,7 +6485,10 @@ class CreateApp {
                 this.inline = this.getInlineModeState(inline);
                 this.fiber = fiber;
                 this.routerMode = routerMode;
-                const dispatchBeforeMount = () => dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+                const dispatchBeforeMount = () => {
+                    this.setLifeCycleState(lifeCycles.BEFOREMOUNT);
+                    dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+                };
                 if (this.isPrerender) {
                     ((_d = this.preRenderEvents) !== null && _d !== void 0 ? _d : (this.preRenderEvents = [])).push(dispatchBeforeMount);
                 }
@@ -6341,8 +6496,12 @@ class CreateApp {
                     dispatchBeforeMount();
                 }
                 this.setAppState(appStates.MOUNTING);
+                // dispatch state event to micro app
+                dispatchCustomEventToMicroApp(this, 'statechange', {
+                    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,
@@ -6360,6 +6519,7 @@ class CreateApp {
                              * umdHookUnmount can works in default mode
                              * register through window.unmount
                              */
+                            // TODO: 不对，这里要改，因为unmount不一定是函数
                             this.umdHookUnmount = unmount;
                             // if mount & unmount is function, the sub app is umd mode
                             if (isFunction(mount) && isFunction(unmount)) {
@@ -6395,8 +6555,8 @@ class CreateApp {
                 }
             }
         };
-        // TODO: any替换为iframe沙箱类型
-        this.iframe ? this.sandBox.sandboxReady.then(nextAction) : nextAction();
+        // TODO: 可优化？
+        this.sandBox ? this.sandBox.sandboxReady.then(nextAction) : nextAction();
     }
     /**
      * handle for promise umdHookMount
@@ -6434,6 +6594,13 @@ class CreateApp {
             this.setAppState(appStates.MOUNTED);
             // call window.onmount of child app
             execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONMOUNT), this.name, microGlobalEvent.ONMOUNT, microApp.getData(this.name, true));
+            // dispatch state event to micro app
+            dispatchCustomEventToMicroApp(this, 'statechange', {
+                appState: appStates.MOUNTED
+            });
+            // dispatch mounted event to micro app
+            dispatchCustomEventToMicroApp(this, 'mounted');
+            this.setLifeCycleState(lifeCycles.MOUNTED);
             // dispatch event mounted to parent
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
             /**
@@ -6473,6 +6640,10 @@ class CreateApp {
         catch (e) {
             logError('An error occurred in window.unmount \n', this.name, e);
         }
+        // dispatch state event to micro app
+        dispatchCustomEventToMicroApp(this, 'statechange', {
+            appState: appStates.UNMOUNT
+        });
         // dispatch unmount event to micro app
         dispatchCustomEventToMicroApp(this, 'unmount');
         // call window.onunmount of child app
@@ -6519,7 +6690,7 @@ class CreateApp {
     actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb, }) {
         var _a;
         if (this.umdMode && this.container && !destroy) {
-            cloneContainer(this.source.html, this.container, false);
+            this.cloneContainer(this.source.html, this.container, false);
         }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
@@ -6533,6 +6704,7 @@ class CreateApp {
             destroy,
             clearData: clearData || destroy,
         });
+        this.setLifeCycleState(lifeCycles.UNMOUNT);
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
         this.clearOptions(destroy);
@@ -6545,6 +6717,7 @@ class CreateApp {
         this.preRenderEvents = null;
         this.setKeepAliveState(null);
         // in iframe sandbox & default mode, delete the sandbox & iframeElement
+        // TODO: with沙箱与iframe沙箱保持一致：with沙箱默认模式下删除 或者 iframe沙箱umd模式下保留
         if (this.iframe && !this.umdMode)
             this.sandBox = null;
         if (destroy)
@@ -6573,9 +6746,10 @@ class CreateApp {
         dispatchCustomEventToMicroApp(this, 'appstate-change', {
             appState: 'afterhidden',
         });
+        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();
         }
@@ -6586,7 +6760,7 @@ class CreateApp {
             getRootContainer(this.container).unmount();
         }
         else {
-            this.container = cloneContainer(pureCreateElement('div'), this.container, false);
+            this.container = this.cloneContainer(pureCreateElement('div'), this.container, false);
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
         }
         callback === null || callback === void 0 ? void 0 : callback();
@@ -6602,13 +6776,13 @@ class CreateApp {
         // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
-        this.container = cloneContainer(container, this.container, false);
+        this.container = this.cloneContainer(container, this.container, false);
         /**
          * TODO:
          *  问题：当路由模式为custom时，keep-alive应用在重新展示，是否需要根据子应用location信息更新浏览器地址？
          *  暂时不这么做吧，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
          */
-        if (this.routerMode !== ROUTER_MODE_CUSTOM) {
+        if (isRouterModeSearch(this.name)) {
             // called before lifeCyclesEvent
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
         }
@@ -6616,6 +6790,7 @@ class CreateApp {
         dispatchCustomEventToMicroApp(this, 'appstate-change', {
             appState: 'aftershow',
         });
+        this.setLifeCycleState(lifeCycles.AFTERSHOW);
         // dispatch afterShow event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERSHOW);
     }
@@ -6624,8 +6799,41 @@ class CreateApp {
      * @param e Error
      */
     onerror(e) {
+        this.setLifeCycleState(lifeCycles.ERROR);
+        // dispatch state event to micro app
+        dispatchCustomEventToMicroApp(this, 'statechange', {
+            appState: appStates.LOAD_FAILED
+        });
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
     }
+    /**
+     * Parse htmlString to DOM
+     * NOTE: iframe sandbox will use DOMParser of iframeWindow, with sandbox will use DOMParser of base app
+     * @param htmlString DOMString
+     * @returns parsed DOM
+     */
+    parseHtmlString(htmlString) {
+        var _a;
+        const DOMParser = ((_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) ? this.sandBox.proxyWindow.DOMParser
+            : globalEnv.rawWindow.DOMParser;
+        return (new DOMParser()).parseFromString(htmlString, 'text/html').body;
+    }
+    /**
+     * clone origin elements to target
+     * @param origin Cloned element
+     * @param target Accept cloned elements
+     * @param deep deep clone or transfer dom
+     */
+    cloneContainer(target, origin, deep) {
+        // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
+        if (origin) {
+            target.innerHTML = '';
+            Array.from(deep ? this.parseHtmlString(origin.innerHTML).childNodes : origin.childNodes).forEach((node) => {
+                target.appendChild(node);
+            });
+        }
+        return target;
+    }
     /**
      * Scene:
      *  1. create app
@@ -6634,22 +6842,28 @@ 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
     setAppState(state) {
+        var _a;
         this.state = state;
+        // set window.__MICRO_APP_STATE__
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.setStaticAppState(state);
     }
     // get app state
     getAppState() {
         return this.state;
     }
+    // set app lifeCycleState
+    setLifeCycleState(state) {
+        this.lifeCycleState = state;
+    }
+    // get app lifeCycleState
+    getLifeCycleState() {
+        return this.lifeCycleState || '';
+    }
     // set keep-alive state
     setKeepAliveState(state) {
         this.keepAliveState = state;
@@ -6793,10 +7007,6 @@ function handleNewNode(child, app) {
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
     const hijackParent = getHijackParent(parent, targetChild, app);
-    /**
-     * If passiveChild is not the child node, insertBefore replaceChild will have a problem, at this time, it will be degraded to appendChild
-     * E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
-     */
     if (hijackParent) {
         /**
          * If parentNode is <micro-app-body>, return rawDocument.body
@@ -6835,11 +7045,28 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
                 });
             }
         }
+        if ((process.env.NODE_ENV !== 'production') &&
+            isIFrameElement(targetChild) &&
+            rawMethod === globalEnv.rawAppendChild) {
+            fixReactHMRConflict(app);
+        }
         /**
          * 1. If passiveChild exists, it must be insertBefore or replaceChild
          * 2. When removeChild, targetChild may not be in microAppHead or head
+         * NOTE:
+         *  1. If passiveChild not in hijackParent, insertBefore replaceChild will be degraded to appendChild
+         *    E.g: document.head.replaceChild(targetChild, document.scripts[0])
+         *  2. If passiveChild not in hijackParent but in parent and method is insertBefore, try insert it into the position corresponding to hijackParent
+         *    E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
+         *    ISSUE: https://github.com/micro-zoe/micro-app/issues/1071
          */
         if (passiveChild && !hijackParent.contains(passiveChild)) {
+            if (rawMethod === globalEnv.rawInsertBefore && parent.contains(passiveChild)) {
+                const indexOfParent = Array.from(parent.childNodes).indexOf(passiveChild);
+                if (hijackParent.childNodes[indexOfParent]) {
+                    return invokeRawMethod(rawMethod, hijackParent, targetChild, hijackParent.childNodes[indexOfParent]);
+                }
+            }
             return globalEnv.rawAppendChild.call(hijackParent, targetChild);
         }
         else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetChild)) {
@@ -6848,11 +7075,6 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             }
             return targetChild;
         }
-        if ((process.env.NODE_ENV !== 'production') &&
-            isIFrameElement(targetChild) &&
-            rawMethod === globalEnv.rawAppendChild) {
-            fixReactHMRConflict(app);
-        }
         return invokeRawMethod(rawMethod, hijackParent, targetChild, passiveChild);
     }
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
@@ -6922,6 +7144,11 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
             currentAppName)) {
         newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
+        if (isStyleElement(newChild)) {
+            const isShadowNode = parent.getRootNode();
+            const isShadowEnvironment = isShadowNode instanceof ShadowRoot;
+            isShadowEnvironment && newChild.setAttribute('ignore', 'true');
+        }
         if (app === null || app === void 0 ? void 0 : app.container) {
             completePathDynamic(app, newChild);
             return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(newChild, app), passiveChild && getMappingNode(passiveChild));
@@ -7008,30 +7235,34 @@ function patchElementAndDocument() {
         this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
         return clonedNode;
     };
-    function getQueryTarget(node) {
+    /**
+     * document.body(head).querySelector(querySelectorAll) hijack to microAppBody(microAppHead).querySelector(querySelectorAll)
+     * NOTE:
+     *  1. May cause some problems!
+     *  2. Add config options?
+     */
+    function getQueryTarget(target) {
         const currentAppName = getCurrentAppName();
-        if ((node === document.body || node === document.head) && currentAppName) {
+        if ((target === document.body || target === document.head) && currentAppName) {
             const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
-                if (node === document.body) {
+                if (target === document.body) {
                     return app.querySelector('micro-app-body');
                 }
-                else if (node === document.head) {
+                else if (target === document.head) {
                     return app.querySelector('micro-app-head');
                 }
             }
         }
-        return null;
+        return target;
     }
     rawRootElement.prototype.querySelector = function querySelector(selectors) {
         var _a;
-        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
-        return globalEnv.rawElementQuerySelector.call(target, selectors);
+        return globalEnv.rawElementQuerySelector.call((_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this, selectors);
     };
     rawRootElement.prototype.querySelectorAll = function querySelectorAll(selectors) {
         var _a;
-        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
-        return globalEnv.rawElementQuerySelectorAll.call(target, selectors);
+        return globalEnv.rawElementQuerySelectorAll.call((_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this, selectors);
     };
     // rewrite setAttribute, complete resource address
     rawRootElement.prototype.setAttribute = function setAttribute(key, value) {
@@ -7090,6 +7321,7 @@ function patchElementAndDocument() {
             const currentAppName = getCurrentAppName();
             Array.from(this.children).forEach((child) => {
                 if (isElement(child) && currentAppName) {
+                    // TODO: 使用updateElementInfo进行更新
                     child.__MICRO_APP_NAME__ = currentAppName;
                 }
             });
@@ -7106,7 +7338,7 @@ function patchElementAndDocument() {
              *  1. element-ui@2/lib/utils/popper.js
              *    // root is child app window, so root.document is proxyDocument or microDocument
              *    if (element.parentNode === root.document) ...
-             */
+            */
             const currentAppName = getCurrentAppName();
             if (currentAppName && this === globalEnv.rawDocument.firstElementChild) {
                 const microDocument = (_c = (_b = (_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow) === null || _c === void 0 ? void 0 : _c.document;
@@ -7158,14 +7390,15 @@ function patchDocument$2() {
         const element = globalEnv.rawCreateElementNS.call(getBindTarget(this), namespaceURI, name, options);
         return markElement(element);
     };
-    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
-        return markElement(element);
-    };
+    // TODO: 放开
     // rawRootDocument.prototype.createTextNode = function createTextNode (data: string): Text {
     //   const element = globalEnv.rawCreateTextNode.call(getBindTarget(this), data)
     //   return markElement(element)
     // }
+    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
+        return markElement(element);
+    };
     rawRootDocument.prototype.createComment = function createComment(data) {
         const element = globalEnv.rawCreateComment.call(getBindTarget(this), data);
         return markElement(element);
@@ -7178,7 +7411,7 @@ function patchDocument$2() {
         if (!currentAppName ||
             !selectors ||
             isUniqueElement(selectors) ||
-            // see https://github.com/micro-zoe/micro-app/issues/56
+            // ISSUE: https://github.com/micro-zoe/micro-app/issues/56
             rawDocument !== _this) {
             return globalEnv.rawQuerySelector.call(_this, selectors);
         }
@@ -7328,8 +7561,8 @@ function initGlobalEnv() {
         // Document proto methods
         const rawCreateElement = rawRootDocument.prototype.createElement;
         const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
-        const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateTextNode = rawRootDocument.prototype.createTextNode;
+        const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateComment = rawRootDocument.prototype.createComment;
         const rawQuerySelector = rawRootDocument.prototype.querySelector;
         const rawQuerySelectorAll = rawRootDocument.prototype.querySelectorAll;
@@ -7889,7 +8122,9 @@ function defineElement(tagName) {
          * @returns router-mode
          */
         getMemoryRouterMode() {
-            return getRouterMode(this.getAttribute('router-mode'), this);
+            return getRouterMode(this.getAttribute('router-mode'), 
+            // is micro-app element set disable-memory-router, like <micro-app disable-memory-router></micro-app>
+            this.compatibleProperties('disable-memory-router') && this.compatibleDisableProperties('disable-memory-router'));
         }
         /**
          * rewrite micro-app.setAttribute, process attr data
@@ -7938,6 +8173,18 @@ function defineElement(tagName) {
             }
             return null;
         }
+        /**
+         * get publicPath from a valid address,it can used in micro-app-devtools
+         */
+        get publicPath() {
+            return getEffectivePath(this.appUrl);
+        }
+        /**
+         * get baseRoute from attribute,it can used in micro-app-devtools
+         */
+        get baseRoute() {
+            return this.getBaseRouteCompatible();
+        }
     }
     globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
 }
@@ -8016,9 +8263,22 @@ function preFetchAction(options) {
                 });
                 const oldOnload = app.onLoad;
                 const oldOnLoadError = app.onLoadError;
-                app.onLoad = (html) => {
+                app.onLoad = (onLoadParam) => {
+                    if (app.isPrerender) {
+                        assign(onLoadParam, {
+                            defaultPage: options['default-page'],
+                            /**
+                             * TODO: 预渲染支持disable-memory-router，默认渲染首页即可，文档中也要保留
+                             * 问题：
+                             *  1、如何确保子应用进行跳转时不影响到浏览器地址？？pure？？
+                             */
+                            routerMode: getRouterMode(options['router-mode']),
+                            baseroute: options.baseroute,
+                            disablePatchRequest: options['disable-patch-request'],
+                        });
+                    }
                     resolve();
-                    oldOnload.call(app, html, options['default-page'], options['disable-patch-request'], getRouterMode(options['router-mode']), options.baseroute);
+                    oldOnload.call(app, onLoadParam);
                 };
                 app.onLoadError = (...rests) => {
                     resolve();
@@ -8278,6 +8538,20 @@ function renderApp(options) {
         container.appendChild(microAppElement);
     });
 }
+/**
+ * get app state
+ * @param appName app.name
+ * @returns app.state
+ */
+function getAppStatus(appName) {
+    const app = appInstanceMap.get(formatAppName(appName));
+    if (app) {
+        return app.getLifeCycleState();
+    }
+    else {
+        logWarn(`app ${appName} does not exist`);
+    }
+}
 class MicroApp extends EventCenterForBaseApp {
     constructor() {
         super(...arguments);
@@ -8292,6 +8566,7 @@ class MicroApp extends EventCenterForBaseApp {
         this.getAllApps = getAllApps;
         this.reload = reload;
         this.renderApp = renderApp;
+        this.getAppStatus = getAppStatus;
     }
     start(options) {
         var _a, _b;
@@ -8347,5 +8622,5 @@ class MicroApp extends EventCenterForBaseApp {
 const microApp = new MicroApp();
 
 export default microApp;
-export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, reload, removeDomScope, renderApp, unmountAllApps, unmountApp, version };
+export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, getAppStatus, preFetch, pureCreateElement, reload, removeDomScope, renderApp, unmountAllApps, unmountApp, version };
 //# sourceMappingURL=index.esm.js.map