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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.4';
+const version = '1.0.0-rc.6';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -56,7 +56,8 @@ function isPromise(target) {
 }
 // is bind function
 function isBoundFunction(target) {
-    return isFunction(target) && target.name.indexOf('bound ') === 0 && !target.hasOwnProperty('prototype');
+    var _a;
+    return isFunction(target) && ((_a = target.name) === null || _a === void 0 ? void 0 : _a.indexOf('bound ')) === 0 && !target.hasOwnProperty('prototype');
 }
 // is constructor function
 function isConstructor(target) {
@@ -109,13 +110,27 @@ function isImageElement(target) {
 function isBaseElement(target) {
     return toTypeString(target) === '[object HTMLBaseElement]';
 }
+function isDocumentFragment(target) {
+    return toTypeString(target) === '[object DocumentFragment]';
+}
 function isMicroAppBody(target) {
     return isElement(target) && target.tagName.toUpperCase() === 'MICRO-APP-BODY';
 }
+function isMicroAppHead(target) {
+    return isElement(target) && target.tagName.toUpperCase() === 'MICRO-APP-HEAD';
+}
 // is ProxyDocument
 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');
@@ -172,6 +187,14 @@ function logWarn(msg, appName = null, ...rest) {
 function defer(fn, ...args) {
     Promise.resolve().then(fn.bind(null, ...args));
 }
+/**
+ * async execution with macro task
+ * @param fn callback
+ * @param args params
+ */
+function macro(fn, delay = 0, ...args) {
+    setTimeout(fn.bind(null, ...args), delay);
+}
 /**
  * create URL as MicroLocation
  */
@@ -200,12 +223,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,14 +251,15 @@ 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) {
     const { origin, pathname } = createURL(url);
     if (/\.(\w+)$/.test(pathname)) {
-        const fullPath = `${origin}${pathname}`;
-        const pathArr = fullPath.split('/');
+        const pathArr = `${origin}${pathname}`.split('/');
         pathArr.pop();
         return pathArr.join('/') + '/';
     }
@@ -334,33 +358,65 @@ function promiseRequestIdle(callback) {
 /**
  * Record the currently running app.name
  */
-let currentMicroAppName = null;
+let currentAppName = null;
 function setCurrentAppName(appName) {
-    currentMicroAppName = appName;
+    currentAppName = appName;
 }
 // get the currently running app.name
 function getCurrentAppName() {
-    return currentMicroAppName;
+    return currentAppName;
 }
-// Clear appName
-let preventSetAppName = false;
-function removeDomScope(force) {
-    setCurrentAppName(null);
-    if (force && !preventSetAppName) {
-        preventSetAppName = true;
+function throttleDeferForSetAppName(appName) {
+    if (currentAppName !== appName && !getPreventSetState()) {
+        setCurrentAppName(appName);
         defer(() => {
-            preventSetAppName = false;
+            setCurrentAppName(null);
         });
     }
 }
-function throttleDeferForSetAppName(appName) {
-    if (currentMicroAppName !== appName && !preventSetAppName) {
-        setCurrentAppName(appName);
+// only for iframe document.body(head).querySelector(querySelectorAll)
+let iframeCurrentAppName = null;
+function setIframeCurrentAppName(appName) {
+    iframeCurrentAppName = appName;
+}
+function getIframeCurrentAppName() {
+    return iframeCurrentAppName;
+}
+function throttleDeferForIframeAppName(appName) {
+    if (iframeCurrentAppName !== appName && !getPreventSetState()) {
+        setIframeCurrentAppName(appName);
         defer(() => {
-            setCurrentAppName(null);
+            setIframeCurrentAppName(null);
         });
     }
 }
+// prevent set app name
+let preventSetState = false;
+function getPreventSetState() {
+    return preventSetState;
+}
+/**
+ * prevent set appName
+ * usage:
+ * removeDomScope(true)
+ * -----> element scope point to base app <-----
+ * removeDomScope(false)
+ */
+function removeDomScope(force) {
+    if (force !== false) {
+        setCurrentAppName(null);
+        setIframeCurrentAppName(null);
+        if (force && !preventSetState) {
+            preventSetState = true;
+            defer(() => {
+                preventSetState = false;
+            });
+        }
+    }
+    else {
+        preventSetState = false;
+    }
+}
 /**
  * Create pure elements
  */
@@ -553,13 +609,39 @@ function clearDOM($dom) {
         $dom.removeChild($dom.firstChild);
     }
 }
+function instanceOf(instance, constructor) {
+    if (instance === null || instance === undefined) {
+        return false;
+    }
+    else if (!isFunction(constructor)) {
+        throw new TypeError("Right-hand side of 'instanceof' is not callable");
+    }
+    let proto = Object.getPrototypeOf(instance);
+    while (proto) {
+        if (proto === constructor.prototype) {
+            return true;
+        }
+        proto = Object.getPrototypeOf(proto);
+    }
+    return false;
+}
 /**
- * get HTMLElement from base app
- * @returns 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
  */
-function getBaseHTMLElement() {
-    var _a;
-    return (((_a = window.rawWindow) === null || _a === void 0 ? void 0 : _a.HTMLElement) || window.HTMLElement);
+const formatEventList = ['mounted', 'unmount'];
+function formatEventType(type, appName) {
+    return formatEventList.includes(type) ? `${type}-${appName}` : type;
+}
+/**
+ * Is the object empty
+ * target maybe number, string, array ...
+ */
+function isEmptyObject(target) {
+    return isPlainObject(target) ? !Object.keys(target).length : true;
 }
 
 function formatEventInfo(event, element) {
@@ -587,7 +669,7 @@ function formatEventInfo(event, element) {
 function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     var _a;
     if (!element) {
-        return logError(`element does not exist in lifecycle ${lifecycleName}`, appName);
+        return logWarn(`element does not exist in lifecycle ${lifecycleName}`, appName);
     }
     element = getRootContainer(element);
     // clear dom scope before dispatch lifeCycles event to base app, especially mounted & unmount
@@ -604,19 +686,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 +742,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) => {
@@ -793,9 +876,24 @@ class CSSParser {
         const m = this.commonMatch(/^[^{]+/, skip);
         if (!m)
             return false;
+        /**
+         * NOTE:
+         *  1. :is(h1, h2, h3):has(+ h2, + h3, + h4) {}
+         *    should be ==> micro-app[name=xxx] :is(h1, h2, h3):has(+ h2, + h3, + h4) {}
+         *  2. :dir(ltr) {}
+         *    should be ==> micro-app[name=xxx] :dir(ltr) {}
+         *  3. body :not(div, .fancy) {}
+         *    should be ==> micro-app[name=xxx] micro-app-body :not(div, .fancy) {}
+         *  4. .a, .b, li:nth-child(3)
+         *    should be ==> micro-app[name=xxx] .a, micro-app[name=xxx] .b, micro-app[name=xxx] li:nth-child(3)
+         *  5. :is(.a, .b, .c) a {}
+         *    should be ==> micro-app[name=xxx] :is(.a, .b, .c) a {}
+         *  6. :where(.a, .b, .c) a {}
+         *    should be ==> micro-app[name=xxx] :where(.a, .b, .c) a {}
+         */
         return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
             selector = trim(selector);
-            if (!(this.scopecssDisableNextLine ||
+            if (selector && !(this.scopecssDisableNextLine ||
                 (this.scopecssDisable && (!this.scopecssDisableSelectors.length ||
                     this.scopecssDisableSelectors.includes(selector))) ||
                 rootSelectorREG.test(selector))) {
@@ -818,13 +916,13 @@ class CSSParser {
             return parseError("Declaration missing '}'", this.linkPath);
         return true;
     }
-    matchAllDeclarations(nesting = 1) {
+    matchAllDeclarations(nesting = 0) {
         let cssValue = this.commonMatch(/^(?:url\(["']?(?:[^)"'}]+)["']?\)|[^{}/])*/, true)[0];
         if (cssValue) {
             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
@@ -840,14 +938,6 @@ class CSSParser {
         this.scopecssDisableNextLine = false;
         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) === '/') {
             if (this.cssText.charAt(1) === '*') {
@@ -857,10 +947,16 @@ class CSSParser {
                 this.commonMatch(/\/+/);
             }
         }
-        if (this.cssText.charAt(0) === '{') {
-            this.commonMatch(/{+\s*/);
+        else if (this.cssText.charAt(0) === '{') {
+            this.matchOpenBrace();
             nesting++;
         }
+        else if (this.cssText.charAt(0) === '}') {
+            if (nesting < 1)
+                return;
+            this.matchCloseBrace();
+            nesting--;
+        }
         return this.matchAllDeclarations(nesting);
     }
     matchAtRule() {
@@ -879,7 +975,8 @@ class CSSParser {
             this.documentRule() ||
             this.pageRule() ||
             this.hostRule() ||
-            this.fontFaceRule();
+            this.fontFaceRule() ||
+            this.layerRule();
     }
     // :global is CSS Modules rule, it will be converted to normal syntax
     // private matchGlobalRule (): boolean | void {
@@ -941,6 +1038,19 @@ class CSSParser {
             return false;
         return this.commonHandlerForAtRuleWithSelfRule('font-face');
     }
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
+    layerRule() {
+        if (!this.commonMatch(/^@layer\s*([^{;]+)/))
+            return false;
+        if (!this.matchOpenBrace())
+            return !!this.commonMatch(/^[;]+/);
+        this.matchComments();
+        this.matchRules();
+        if (!this.matchCloseBrace())
+            return parseError('@layer missing \'}\'', this.linkPath);
+        this.matchLeadingSpaces();
+        return true;
+    }
     // common matcher for @media, @supports, @document, @host, :global, @container
     createMatcherForRuleWithChildRule(reg, name) {
         return () => {
@@ -1036,7 +1146,7 @@ class CSSParser {
         return this.commonMatch(/^{\s*/);
     }
     matchCloseBrace() {
-        return this.commonMatch(/^}/);
+        return this.commonMatch(/^}\s*/);
     }
     // match and slice the leading spaces
     matchLeadingSpaces() {
@@ -1250,7 +1360,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', 'icon'].includes(rel)) {
         // preload prefetch prerender ....
         if (isDynamic) {
             replaceComment = document.createComment(`link element with rel=${rel}${href ? ' & href=' + href : ''} removed by micro-app`);
@@ -1464,23 +1574,37 @@ var MicroAppConfig;
     MicroAppConfig["DISABLE_MEMORY_ROUTER"] = "disable-memory-router";
     MicroAppConfig["DISABLE_PATCH_REQUEST"] = "disable-patch-request";
     MicroAppConfig["KEEP_ROUTER_STATE"] = "keep-router-state";
-    MicroAppConfig["HIDDEN_ROUTER"] = "hidden-router";
     MicroAppConfig["KEEP_ALIVE"] = "keep-alive";
     MicroAppConfig["CLEAR_DATA"] = "clear-data";
     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,32 +1612,45 @@ 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',
-    'beforeunload',
     'unload',
     'unmount',
     'appstate-change',
     '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',
+    'message'
+]);
 // on event bound to child app window
 // TODO: with和iframe处理方式不同，需修改
-const SCOPE_WINDOW_ON_EVENT = [
+const BASE_SCOPE_WINDOW_ON_EVENT = [
     'onpopstate',
     'onhashchange',
     'onload',
-    'onbeforeunload',
     'onunload',
     'onerror'
+    // 'onbeforeunload', // remove at 2024.5.30 by cangdu
 ];
+// 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 +1667,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
@@ -1938,6 +2073,7 @@ function execScripts(app, initHook) {
  * @param callback callback of module script
  */
 function runScript(address, app, scriptInfo, callback, replaceElement) {
+    var _a;
     try {
         actionsBeforeRunScript(app);
         const appSpaceData = scriptInfo.appSpace[app.name];
@@ -1968,7 +2104,7 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
              */
             if (!replaceElement) {
                 // TEST IGNORE
-                const parent = app.iframe ? app.sandBox.microBody : app.querySelector('micro-app-body');
+                const parent = app.iframe ? (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.microBody : app.querySelector('micro-app-body');
                 parent === null || parent === void 0 ? void 0 : parent.appendChild(scriptElement);
             }
         }
@@ -1990,7 +2126,7 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
  * @param originScript origin script element
  */
 function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
-    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment(`dynamic script with src='${address}' extract by micro-app`);
     const dispatchScriptOnLoadEvent = () => dispatchOnLoadEvent(originScript);
     const runDynamicScript = () => {
         const descriptor = Object.getOwnPropertyDescriptor(globalEnv.rawDocument, 'currentScript');
@@ -2024,7 +2160,7 @@ function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
  * @param scriptInfo scriptInfo
  */
 function runDynamicInlineScript(address, app, scriptInfo) {
-    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic inline script extract by micro-app');
     runScript(address, app, scriptInfo, void 0, replaceElement);
     return replaceElement;
 }
@@ -2202,7 +2338,7 @@ function extractSourceDom(htmlStr, app) {
     const fiberStyleTasks = app.isPrefetch || app.fiber ? [] : null;
     flatChildren(wrapElement, app, microAppHead, fiberStyleTasks);
     /**
-     * Style and link are parallel, because it takes a lot of time for link to request resources. During this period, style processing can be performed to improve efficiency.
+     * Style and link are parallel, as it takes a lot of time for link to request resources. During this period, style processing can be performed to improve efficiency.
      */
     const fiberStyleResult = serialExecFiberTasks(fiberStyleTasks);
     if (app.source.links.size) {
@@ -2397,7 +2533,7 @@ const eventCenter = new EventCenter();
 function createEventName(appName, fromBaseApp) {
     if (!isString(appName) || !appName)
         return '';
-    return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
+    return fromBaseApp ? `__${appName}_from_base_app__` : `__${appName}_from_micro_app__`;
 }
 // Global data
 class EventCenterForGlobal {
@@ -2696,7 +2832,15 @@ function isConstructorFunction(value) {
 }
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
-    if (isFunction(value) && !isConstructorFunction(value) && !isBoundedFunction(value)) {
+    /**
+     * In safari, nest app like: A -> B -> C
+     * if B is iframe sandbox, and C is with sandbox, same property of document in C is abnormal
+     * e.g:
+     *  document.all:
+     *    - typeof document.all ==> 'function'
+     *    - document.all.bind ==> undefined
+     */
+    if (isFunction(value) && !isConstructorFunction(value) && !isBoundedFunction(value) && value.bind) {
         const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
         if (value[cacheKey])
             return value[cacheKey];
@@ -2717,6 +2861,198 @@ function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
     return value;
 }
 
+class BaseSandbox {
+    constructor(appName, url) {
+        // keys that can only assigned to rawWindow
+        this.rawWindowScopeKeyList = [
+            'location',
+        ];
+        // keys that can escape to rawWindow
+        this.staticEscapeProperties = [
+            'System',
+            '__cjsWrapper',
+        ];
+        // keys that scoped in child app
+        this.staticScopeProperties = [
+            '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.appName = appName;
+        this.url = url;
+        this.injectReactHMRProperty();
+    }
+    // adapter for react
+    injectReactHMRProperty() {
+        if ((process.env.NODE_ENV !== 'production')) {
+            // react child in non-react env
+            this.staticEscapeProperties.push('__REACT_ERROR_OVERLAY_GLOBAL_HOOK__');
+            // in react parent
+            if (globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__) {
+                this.staticScopeProperties = this.staticScopeProperties.concat([
+                    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
+                    '__reactRefreshInjected',
+                ]);
+            }
+        }
+    }
+}
+/**
+ * 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)
+        globalEnv.rawWindow._babelPolyfill = false;
+}
+/**
+ * Fix error of hot reload when parent&child created by create-react-app in development environment
+ * Issue: https://github.com/micro-zoe/micro-app/issues/382
+ */
+function fixReactHMRConflict(app) {
+    var _a;
+    if ((process.env.NODE_ENV !== 'production')) {
+        const rawReactErrorHook = globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        const childReactErrorHook = (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        if (rawReactErrorHook && childReactErrorHook) {
+            globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = childReactErrorHook;
+            defer(() => {
+                globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = rawReactErrorHook;
+            });
+        }
+    }
+}
+/**
+ * update dom tree of target dom
+ * @param container target dom
+ * @param appName app name
+ */
+function patchElementTree(container, appName) {
+    const children = Array.from(container.childNodes);
+    children.length && children.forEach((child) => {
+        patchElementTree(child, appName);
+    });
+    updateElementInfo(container, appName);
+}
+/**
+ * rewrite baseURI, ownerDocument, __MICRO_APP_NAME__ of target node
+ * @param node target node
+ * @param appName app name
+ * @returns target node
+ */
+function updateElementInfo(node, appName) {
+    var _a, _b;
+    if (appName &&
+        isNode(node) &&
+        node.__MICRO_APP_NAME__ !== appName &&
+        !node.__PURE_ELEMENT__ &&
+        !getPreventSetState()) {
+        /**
+         * TODO:
+         *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
+         *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
+        */
+        rawDefineProperties(node, {
+            __MICRO_APP_NAME__: {
+                configurable: true,
+                enumerable: true,
+                writable: true,
+                value: appName,
+            },
+        });
+        /**
+         * In FireFox, iframe Node.prototype will point to native Node.prototype after insert to document
+         *
+         * Performance:
+         *  iframe element.__proto__ === browser HTMLElement.prototype // Chrome: false, FireFox: true
+         *  iframe element.__proto__ === iframe HTMLElement.prototype // Chrome: true, FireFox: false
+         *
+         * NOTE:
+         *  1. Node.prototype.baseURI
+         *  2. Node.prototype.ownerDocument
+         *  3. Node.prototype.parentNode
+         *  4. Node.prototype.getRootNode
+         *  5. Node.prototype.cloneNode
+         *  6. Element.prototype.innerHTML
+         *  7. Image
+         */
+        if (isIframeSandbox(appName)) {
+            const proxyWindow = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow;
+            if (proxyWindow) {
+                rawDefineProperties(node, {
+                    baseURI: {
+                        configurable: true,
+                        enumerable: true,
+                        get: () => proxyWindow.location.href,
+                    },
+                    ownerDocument: {
+                        configurable: true,
+                        enumerable: true,
+                        get: () => node !== proxyWindow.document ? proxyWindow.document : null,
+                    },
+                    parentNode: getIframeParentNodeDesc(appName, globalEnv.rawParentNodeDesc),
+                    getRootNode: {
+                        configurable: true,
+                        enumerable: true,
+                        writable: true,
+                        value: function getRootNode() {
+                            return proxyWindow.document;
+                        }
+                    },
+                });
+            }
+        }
+    }
+    return node;
+}
+/**
+ * get Descriptor of Node.prototype.parentNode for iframe
+ * @param appName app name
+ * @param parentNode parentNode Descriptor of iframe or browser
+ */
+function getIframeParentNodeDesc(appName, parentNodeDesc) {
+    return {
+        configurable: true,
+        enumerable: true,
+        get() {
+            var _a, _b, _c, _d;
+            throttleDeferForIframeAppName(appName);
+            const result = (_a = parentNodeDesc.get) === null || _a === void 0 ? void 0 : _a.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) ...
+             * e.g.:
+             *  1. element-ui@2.x el-dropdown
+             * WARNING:
+             *  Will it cause other problems ?
+             *  e.g. target.parentNode.remove(target)
+             */
+            if (isMicroAppBody(result) && ((_b = appInstanceMap.get(appName)) === null || _b === void 0 ? void 0 : _b.container)) {
+                return ((_d = (_c = microApp.options).getRootElementParentNode) === null || _d === void 0 ? void 0 : _d.call(_c, this, appName)) || globalEnv.rawDocument.body;
+            }
+            return result;
+        }
+    };
+}
+
 /**
  * create proxyDocument and MicroDocument, rewrite document of child app
  * @param appName app name
@@ -2757,13 +3093,11 @@ function createProxyDocument(appName, sandbox) {
     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;
+        return updateElementInfo(element, appName);
     }
     function createElementNS(namespaceURI, name, options) {
         const element = rawCreateElementNS.call(rawDocument, namespaceURI, name, options);
-        element.__MICRO_APP_NAME__ = appName;
-        return element;
+        return updateElementInfo(element, appName);
     }
     /**
      * TODO:
@@ -2989,7 +3323,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 +3472,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 +3485,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 +3497,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 +3590,44 @@ 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 ? targetLocation.pathname + targetLocation.search + targetLocation.hash : null,
+                state: microState !== null && microState !== void 0 ? microState : null,
+                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 !isEmptyObject(rawState) ? assign({}, rawState) : null;
 }
 // get micro app state form origin state
 function getMicroState(appName) {
+    var _a, _b;
+    const rawState = globalEnv.rawWindow.history.state;
+    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) || null;
+}
+// get micro app router info state form origin state
+function getMicroRouterInfoState(appName) {
     var _a;
     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;
+    return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__) === null || _a === void 0 ? void 0 : _a[appName]) || null;
 }
 const ENC_AD_RE = /&/g; // %M1
 const ENC_EQ_RE = /=/g; // %M2
@@ -3325,17 +3663,35 @@ 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 mode: vue-router@4 will exec replaceState with history.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 standard
+     */
+    // 问题：1、同一个页面多个子应用，一个修改后... --- native模式不支持多个子应用同时渲染，多个子应用推荐使用其它模式
+    // if (isRouterModeCustom(appName)) {
+    //   return rawLocation.pathname + rawLocation.search + rawLocation.hash
+    // }
+    // return rawState?.__MICRO_APP_STATE__?.[appName]?.fullPath || null
+    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 +3699,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 +3713,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 +3741,9 @@ function setMicroPathToURL(appName, targetLocation) {
             isAttach2Hash,
         };
     }
+    if (isRouterModeState(appName) || isRouterModePure(appName)) {
+        targetFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
+    }
     return {
         fullPath: targetFullPath,
         isAttach2Hash,
@@ -3391,11 +3752,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 +3817,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 +3860,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
@@ -3518,6 +3886,7 @@ function addHistoryListener(appName) {
     const rawWindow = globalEnv.rawWindow;
     // handle popstate event and distribute to child app
     const popStateHandler = (e) => {
+        var _a, _b, _c;
         /**
          * 1. unmount app & hidden keep-alive app will not receive popstate event
          * 2. filter out onlyForBrowser
@@ -3527,7 +3896,28 @@ function addHistoryListener(appName) {
             excludePreRender: true,
         }).includes(appName) &&
             !e.onlyForBrowser) {
-            updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName));
+            /**
+             * base app may respond to popstateEvent async(lazy load page & browser back/forward), but child app will respond to popstateEvent immediately(vue2, react), this will cause some problems
+             * 2 solutions:
+             *  1. child app respond to popstateEvent async -- router-event-delay
+             *  2. child app will not respond to popstateEvent in some scenarios (history.state===null || history.state?__MICRO_APP_STATE__[appName])
+             * NOTE 1:
+             *  1. browser back/forward
+             *  2. location.hash/search/pathname = xxx
+             *  3. <a href="/#/xxx">, <a href="/xxx">
+             *  4. history.back/go/forward
+             *  5. history.pushState/replaceState
+             *
+             * NOTE2:
+             *  1、react16 hash mode navigate by location.hash = xxx, history.state is always null, but react16 respond to popstateEvent sync
+             *  2、multiple child apps may has problems
+             */
+            if (!isRouterModeCustom(appName) ||
+                !globalEnv.rawWindow.history.state ||
+                getMicroRouterInfoState(appName)) {
+                const container = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container;
+                macro(() => updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName)), (_c = (_b = (container && getRootContainer(container))) === null || _b === void 0 ? void 0 : _b.getRouterEventDelay()) !== null && _c !== void 0 ? _c : 0);
+            }
         }
     };
     rawWindow.addEventListener('popstate', popStateHandler);
@@ -3545,24 +3935,26 @@ function addHistoryListener(appName) {
  */
 function updateMicroLocationWithEvent(appName, targetFullPath) {
     const app = appInstanceMap.get(appName);
-    const proxyWindow = app.sandBox.proxyWindow;
-    const microAppWindow = app.sandBox.microAppWindow;
-    let isHashChange = false;
-    // for hashChangeEvent
-    const oldHref = proxyWindow.location.href;
-    // Do not attach micro state to url when targetFullPath is empty
-    if (targetFullPath) {
-        const oldHash = proxyWindow.location.hash;
-        updateMicroLocation(appName, targetFullPath, microAppWindow.location);
-        isHashChange = proxyWindow.location.hash !== oldHash;
-    }
-    // dispatch formatted popStateEvent to child
-    dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
-    // dispatch formatted hashChangeEvent to child when hash change
-    if (isHashChange)
-        dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
-    // clear element scope before trigger event of next app
-    removeDomScope();
+    if (app === null || app === void 0 ? void 0 : app.sandBox) {
+        const proxyWindow = app.sandBox.proxyWindow;
+        const microAppWindow = app.sandBox.microAppWindow;
+        let isHashChange = false;
+        // for hashChangeEvent
+        const oldHref = proxyWindow.location.href;
+        // Do not attach micro state to url when targetFullPath is empty
+        if (targetFullPath) {
+            const oldHash = proxyWindow.location.hash;
+            updateMicroLocation(appName, targetFullPath, microAppWindow.location);
+            isHashChange = proxyWindow.location.hash !== oldHash;
+        }
+        // dispatch formatted popStateEvent to child
+        dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
+        // dispatch formatted hashChangeEvent to child when hash change
+        if (isHashChange)
+            dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
+        // clear element scope before trigger event of next app
+        removeDomScope();
+    }
 }
 /**
  * dispatch formatted popstate event to microApp
@@ -3575,14 +3967,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)) {
@@ -3657,26 +4053,29 @@ function createMicroHistory(appName, microLocation) {
         return function (...rests) {
             var _a, _b, _c;
             // TODO: 测试iframe的URL兼容isURL的情况
-            if (isString(rests[2]) || isURL(rests[2])) {
-                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]);
-                }
-                if (targetFullPath !== microLocation.fullPath) {
-                    updateMicroLocation(appName, targetFullPath, microLocation);
-                }
-                (_c = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : (_b = _a.sandBox).updateIframeBase) === null || _c === void 0 ? void 0 : _c.call(_b);
+            rests[2] = isUndefined(rests[2]) || isNull(rests[2]) || ('' + rests[2] === '') ? microLocation.href : '' + rests[2];
+            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], targetLocation), rests[1]);
             }
-            else {
-                nativeHistoryNavigate(appName, methodName, rests[2], rests[0], rests[1]);
+            if (targetFullPath !== microLocation.fullPath) {
+                updateMicroLocation(appName, targetFullPath, microLocation);
             }
+            (_c = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : (_b = _a.sandBox).updateIframeBase) === null || _c === void 0 ? void 0 : _c.call(_b);
         };
     }
     const pushState = getMicroHistoryMethod('pushState');
     const replaceState = getMicroHistoryMethod('replaceState');
-    if (isIframeSandbox(appName))
-        return { pushState, replaceState };
+    if (isIframeSandbox(appName)) {
+        return {
+            pushState,
+            replaceState,
+            go(delta) {
+                return rawHistory.go(delta);
+            }
+        };
+    }
     return new Proxy(rawHistory, {
         get(target, key) {
             if (key === 'state') {
@@ -3739,11 +4138,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 +4155,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,10 +4186,24 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            if (isRouterModeSearch(appName) && !getMicroPathFromURL(appName)) {
+            // TODO: 大部分情况下，history.pushState 都是先执行，micro-app后卸载，所以会产生一种情况：跳转到新地址后，search模式会在url上添加参数，卸载后再将参数删除，所以会导致浏览器地址闪烁，是否需要去掉这个功能
+            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));
             }
+            if (isRouterModeCustom(appName) && !getMicroRouterInfoState(appName)) {
+                nativeHistoryNavigate(appName, 'replaceState', rawWindow.location.href, setMicroState(appName));
+            }
+            // if (isRouterModeCustom(appName) || isRouterModeSearch(appName)) {
+            /**
+               * history.pushState/replaceState后主动触发子应用响应
+               * 问题：子应用的卸载可能是异步的，而跳转的地址不一定在基础路径中，太快响应pushState可能会导致url地址被子应用改变或者子应用404，Promise太快卸载时出问题、setTimeout太慢keep-alive二次渲染后出问题
+               *  1、history.pushState/replaceState执行后，子应用以异步的形式被主应用卸载，Promise响应时子应用还在，导致子应用跳转404后者浏览器url被子应用修改，产生异常
+               *  2、keep-alive应用二次渲染时，由于setTimeout响应过慢，子应用在渲染后才接受到popstate事件，响应新的url，从而导致状态丢失
+               *  3、同一个页面多个子应用，修改地址响应
+               *  4、vue3跳转前会执行一次replace，有没有影响？
+               */
+            // }
         });
         // fix bug for nest app
         removeDomScope();
@@ -3802,7 +4211,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 +4234,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 +4252,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 +4283,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 +4367,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 +4468,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 +4511,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 +4576,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 +4617,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 +4687,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);
+                            }
                         }
                     }
                 }
@@ -4407,12 +4734,12 @@ function autoTriggerNavigationGuard(appName, microLocation) {
  * @param microLocation micro app location
  * @param type auto prevent
  */
-function updateMicroLocation(appName, path, microLocation, type) {
+function updateMicroLocation(appName, targetFullPath, microLocation, type) {
     var _a;
     // record old values of microLocation to `from`
     const from = createGuardLocation(appName, microLocation);
     // if is iframeSandbox, microLocation muse be rawLocation of iframe, not proxyLocation
-    const newLocation = createURL(path, microLocation.href);
+    const newLocation = createURL(targetFullPath, microLocation.href);
     if (isIframeSandbox(appName)) {
         const microAppWindow = appInstanceMap.get(appName).sandBox.microAppWindow;
         (_a = microAppWindow.rawReplaceState) === null || _a === void 0 ? void 0 : _a.call(microAppWindow.history, getMicroState(appName), '', newLocation.href);
@@ -4424,6 +4751,20 @@ function updateMicroLocation(appName, path, microLocation, type) {
         }
         microLocation.self.href = targetHref;
     }
+    /**
+     * native模式从state中取值，而浏览器地址的修改无法控制，很可能出现浏览器地址和__MICRO_APP_STATE__不一致的情况
+     * 尤其是在初始化和前进后退时，由于vue-router4会主动修改url地址，倒是上述情况经常出现
+     * 为了结局这个问题，在子应用初始化和响应popstate事件后，判断__MICRO_APP_STATE__和浏览器地址是否一致，如果不一致，则将浏览器地址更新为__MICRO_APP_STATE__的地址
+     * 说明：
+     *  1、如果__MICRO_APP_STATE__和url不一样，那么更新url的操作是对的，否则会产生url和渲染页面不一致的问题，开发者会更加困惑
+     *  2、当native模式有多个子应用同时存在，其中一个修改url地址，另外一个并不会改变__MICRO_APP_STATE__，刷新就产生问题，不一致，第二是根据谁更新url？
+     */
+    const rawLocation = globalEnv.rawWindow.location;
+    if (isRouterModeCustom(appName) &&
+        (targetFullPath !== rawLocation.pathname + rawLocation.search + rawLocation.hash) &&
+        type !== 'prevent') {
+        nativeHistoryNavigate(appName, 'replaceState', targetFullPath, globalEnv.rawWindow.history.state);
+    }
     // update latest values of microLocation to `to`
     const to = createGuardLocation(appName, microLocation);
     // The hook called only when fullPath changed
@@ -4432,11 +4773,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 +4797,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 +4817,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 +4830,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);
 }
@@ -4510,130 +4848,6 @@ function removePathFromBrowser(appName) {
     attachRouteToBrowserURL(appName, removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
-class BaseSandbox {
-    constructor() {
-        // keys that can only assigned to rawWindow
-        this.rawWindowScopeKeyList = [
-            'location',
-        ];
-        // keys that can escape to rawWindow
-        this.staticEscapeProperties = [
-            'System',
-            '__cjsWrapper',
-        ];
-        // keys that scoped in child app
-        this.staticScopeProperties = [
-            '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
-    injectReactHMRProperty() {
-        if ((process.env.NODE_ENV !== 'production')) {
-            // react child in non-react env
-            this.staticEscapeProperties.push('__REACT_ERROR_OVERLAY_GLOBAL_HOOK__');
-            // in react parent
-            if (globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__) {
-                this.staticScopeProperties = this.staticScopeProperties.concat([
-                    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
-                    '__reactRefreshInjected',
-                ]);
-            }
-        }
-    }
-}
-/**
- * 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)
-        globalEnv.rawWindow._babelPolyfill = false;
-}
-/**
- * Fix error of hot reload when parent&child created by create-react-app in development environment
- * Issue: https://github.com/micro-zoe/micro-app/issues/382
- */
-function fixReactHMRConflict(app) {
-    var _a;
-    if ((process.env.NODE_ENV !== 'production')) {
-        const rawReactErrorHook = globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
-        const childReactErrorHook = (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
-        if (rawReactErrorHook && childReactErrorHook) {
-            globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = childReactErrorHook;
-            defer(() => {
-                globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = rawReactErrorHook;
-            });
-        }
-    }
-}
-/**
- * update dom tree of target dom
- * @param container target dom
- * @param appName app name
- */
-function patchElementTree(container, appName) {
-    const children = Array.from(container.children);
-    children.length && children.forEach((child) => {
-        patchElementTree(child, appName);
-    });
-    for (const child of children) {
-        updateElementInfo(child, appName);
-    }
-}
-/**
- * rewrite baseURI, ownerDocument, __MICRO_APP_NAME__ of target node
- * @param node target node
- * @param appName app name
- * @returns target node
- */
-function updateElementInfo(node, appName) {
-    var _a, _b;
-    const proxyWindow = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow;
-    if (isNode(node) &&
-        !node.__MICRO_APP_NAME__ &&
-        !node.__PURE_ELEMENT__ &&
-        proxyWindow) {
-        /**
-         * TODO:
-         *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
-         *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
-         *  2. with沙箱所有node设置__MICRO_APP_NAME__都使用updateElementInfo
-        */
-        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__: {
-                configurable: true,
-                writable: true,
-                value: appName,
-            },
-        });
-    }
-    return node;
-}
-
 /**
  * https://developer.mozilla.org/en-US/docs/Web/API/fetch
  * Promise<Response> fetch(input[, init])
@@ -4738,7 +4952,7 @@ function useMicroEventSource() {
 const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
 class WithSandBox extends BaseSandbox {
     constructor(appName, url) {
-        super();
+        super(appName, url);
         this.active = false;
         this.microAppWindow = new CustomWindow(); // Proxy target
         this.patchWith((resolve) => {
@@ -4819,6 +5033,7 @@ class WithSandBox extends BaseSandbox {
          *  1. injectedKeys and escapeKeys must be placed at the back
          *  2. if key in initial microAppWindow, and then rewrite, this key will be delete from microAppWindow when stop, and lost when restart
          *  3. umd mode will not delete global keys
+         *  4. mount & unmount hook should delete in default mode when stop
          */
         if (!umdMode || destroy) {
             clearMicroEventSource(this.microAppWindow.__MICRO_APP_NAME__);
@@ -4830,6 +5045,7 @@ class WithSandBox extends BaseSandbox {
                 Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
+            this.clearHijackUmdHooks();
         }
         if (--globalEnv.activeSandbox === 0) {
             releasePatchElementAndDocument();
@@ -4862,6 +5078,7 @@ class WithSandBox extends BaseSandbox {
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
             removeDomScope,
             pureCreateElement,
+            location: microAppWindow.location,
             router,
         });
     }
@@ -5143,10 +5360,49 @@ class WithSandBox extends BaseSandbox {
      * action before exec scripts when mount
      * Actions:
      * 1. patch static elements from html
+     * 2. hijack umd hooks -- mount, unmount, micro-app-appName
      * @param container micro app container
      */
-    actionBeforeExecScripts(container) {
+    actionsBeforeExecScripts(container, handleUmdHooks) {
         this.patchStaticElement(container);
+        this.clearHijackUmdHooks = this.hijackUmdHooks(this.appName, this.microAppWindow, handleUmdHooks);
+    }
+    // hijack mount, unmount, micro-app-appName hook to microAppWindow
+    hijackUmdHooks(appName, microAppWindow, handleUmdHooks) {
+        let mount, unmount, microAppLibrary;
+        rawDefineProperties(microAppWindow, {
+            mount: {
+                configurable: true,
+                get: () => mount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !mount) {
+                        handleUmdHooks(mount = value, unmount);
+                    }
+                }
+            },
+            unmount: {
+                configurable: true,
+                get: () => unmount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !unmount) {
+                        handleUmdHooks(mount, unmount = value);
+                    }
+                }
+            },
+            [`micro-app-${appName}`]: {
+                configurable: true,
+                get: () => microAppLibrary,
+                set: (value) => {
+                    if (this.active && isPlainObject(value) && !microAppLibrary) {
+                        microAppLibrary = value;
+                        handleUmdHooks(microAppLibrary.mount, microAppLibrary.unmount);
+                    }
+                }
+            }
+        });
+        return () => {
+            mount = unmount = microAppLibrary = null;
+        };
     }
     setStaticAppState(state) {
         this.microAppWindow.__MICRO_APP_STATE__ = state;
@@ -5155,13 +5411,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 +5445,87 @@ function patchRouter(appName, url, microAppWindow, browserHost) {
     return createMicroLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost);
 }
 
+const escape2RawWindowKeys = [
+    'getComputedStyle',
+    // FIX ISSUE: https://github.com/micro-zoe/micro-app/issues/1292
+    'DOMParser',
+    'visualViewport',
+    'matchMedia',
+    'ResizeObserver',
+    'IntersectionObserver',
+];
+const escape2RawWindowRegExpKeys = [
+    /animationFrame$/i,
+    /mutationObserver$/i,
+    /height$|width$/i,
+    /offset$/i,
+    /selection$/i,
+    /^range/i,
+    /^screen/i,
+    /^scroll/i,
+    /X$|Y$/,
+];
+const uniqueDocumentElement = [
+    'body',
+    'head',
+    'html',
+    'title',
+];
+// proxy to shadowRoot or rawDocument (property)
+const proxy2RawDocOrShadowKeys = [
+    'childElementCount',
+    'children',
+    'firstElementChild',
+    'firstChild',
+    'lastElementChild',
+    'activeElement',
+    'fullscreenElement',
+    'pictureInPictureElement',
+    'pointerLockElement',
+    'styleSheets',
+];
+// proxy to shadowRoot or rawDocument (method)
+const proxy2RawDocOrShadowMethods = [
+    'append',
+    'contains',
+    'replaceChildren',
+    'createRange',
+    'getSelection',
+    'elementFromPoint',
+    'elementsFromPoint',
+    'getAnimations',
+];
+// proxy to rawDocument (property)
+const proxy2RawDocumentKeys = [
+    'characterSet',
+    'compatMode',
+    'contentType',
+    'designMode',
+    'dir',
+    'doctype',
+    'embeds',
+    'fullscreenEnabled',
+    'hidden',
+    'implementation',
+    'lastModified',
+    'pictureInPictureEnabled',
+    'plugins',
+    'readyState',
+    'referrer',
+    'visibilityState',
+    'fonts',
+];
+// proxy to rawDocument (method)
+const proxy2RawDocumentMethods = [
+    'execCommand',
+    'createRange',
+    'exitFullscreen',
+    'exitPictureInPicture',
+    'getElementsByTagNameNS',
+    'hasFocus',
+    'prepend',
+];
+
 /**
  * patch window of child app
  * @param appName app name
@@ -5220,7 +5573,41 @@ function patchWindowProperty$1(appName, microAppWindow) {
             }
             return false;
         });
-        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT.includes(key);
+        /**
+         * In FireFox, iframe Element.prototype will point to native Element.prototype after insert to document
+         * Rewrite all constructor's Symbol.hasInstance of iframeWindow
+         * NOTE:
+         *  1. native event instanceof iframe window.Event
+         *  2. native node instanceof iframe window.Node
+         *  3. native element instanceof iframe window.Element
+         *  4. native url instanceof iframe window.URL
+         *  ...
+         */
+        if (isConstructor(microAppWindow[key]) && key in rawWindow) {
+            rawDefineProperty(microAppWindow[key], Symbol.hasInstance, {
+                configurable: true,
+                enumerable: false,
+                value(target) {
+                    return target instanceof rawWindow[key] || instanceOf(target, microAppWindow[key]);
+                },
+            });
+        }
+        // hijackInstanceOfWindowRegExpKeys.some((reg: RegExp) => {
+        //   if (reg.test(key) && key in rawWindow) {
+        //     rawDefineProperty(microAppWindow[key], Symbol.hasInstance, {
+        //       configurable: true,
+        //       enumerable: false,
+        //       value: (target: unknown) => {
+        //         return target instanceof rawWindow[key]
+        //           ? true
+        //           : instanceOf(target, microAppWindow[key])
+        //       },
+        //     })
+        //     return true
+        //   }
+        //   return false
+        // })
+        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT_OF_IFRAME.includes(key);
     })
         .forEach((eventName) => {
         const { enumerable, writable, set } = Object.getOwnPropertyDescriptor(microAppWindow, eventName) || {
@@ -5305,11 +5692,15 @@ function createProxyWindow$1(microAppWindow, sandbox) {
     sandbox.proxyWindow = proxyWindow;
 }
 function patchWindowEffect$1(microAppWindow) {
-    const { rawWindow, rawAddEventListener, rawRemoveEventListener } = globalEnv;
+    const { rawWindow, rawAddEventListener, rawRemoveEventListener, rawDispatchEvent } = globalEnv;
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     function getEventTarget(type) {
-        return SCOPE_WINDOW_EVENT.includes(type) ? microAppWindow : rawWindow;
+        /**
+         * TODO: SCOPE_WINDOW_EVENT_OF_IFRAME的事件非常少，有可能导致问题
+         *  1、一些未知的需要绑定到iframe的事件被错误的绑定到原生window上
+         */
+        return SCOPE_WINDOW_EVENT_OF_IFRAME.includes(type) ? microAppWindow : rawWindow;
     }
     // TODO: listener 是否需要绑定microAppWindow，否则函数中的this指向原生window
     microAppWindow.addEventListener = function (type, listener, options) {
@@ -5330,6 +5721,9 @@ function patchWindowEffect$1(microAppWindow) {
         }
         rawRemoveEventListener.call(getEventTarget(type), type, listener, options);
     };
+    microAppWindow.dispatchEvent = function (event) {
+        return rawDispatchEvent.call(getEventTarget(event === null || event === void 0 ? void 0 : event.type), event);
+    };
     const reset = () => {
         sstEventListenerMap.clear();
     };
@@ -5441,34 +5835,43 @@ function patchDocumentPrototype(appName, microAppWindow) {
         const element = rawMicroCreateComment.call(this, data);
         return updateElementInfo(element, appName);
     };
-    function getDefaultRawTarget(target) {
-        return microDocument !== target ? target : rawDocument;
+    function getBindTarget(target) {
+        /**
+         * handler for:
+         *  1. document.getElementsByTagName('head')[0].querySelector('script')
+         *  2. document.querySelector('body').querySelectorAll('script')
+         *  ...
+         */
+        throttleDeferForIframeAppName(appName);
+        // DOMParser.document !== microDocument
+        return microDocument === target ? rawDocument : target;
     }
     // query element👇
     function querySelector(selectors) {
-        var _a, _b;
+        var _a, _b, _c;
+        const _this = getBindTarget(this);
         if (!selectors ||
             isUniqueElement(selectors) ||
-            microDocument !== this) {
-            const _this = getDefaultRawTarget(this);
+            rawDocument !== _this) {
             return rawMicroQuerySelector.call(_this, selectors);
         }
-        return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) !== null && _b !== void 0 ? _b : null;
+        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) !== null && _b !== void 0 ? _b : rawMicroQuerySelector.call(microDocument, selectors)) !== null && _c !== void 0 ? _c : null;
     }
     function querySelectorAll(selectors) {
         var _a, _b;
+        const _this = getBindTarget(this);
         if (!selectors ||
             isUniqueElement(selectors) ||
-            microDocument !== this) {
-            const _this = getDefaultRawTarget(this);
+            rawDocument !== _this) {
             return rawMicroQuerySelectorAll.call(_this, selectors);
         }
-        return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
+        const result = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
+        return result.length ? result : rawMicroQuerySelectorAll.call(microDocument, selectors);
     }
     microRootDocument.prototype.querySelector = querySelector;
     microRootDocument.prototype.querySelectorAll = querySelectorAll;
     microRootDocument.prototype.getElementById = function getElementById(key) {
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementById.call(_this, key);
         }
@@ -5480,7 +5883,7 @@ function patchDocumentPrototype(appName, microAppWindow) {
         }
     };
     microRootDocument.prototype.getElementsByClassName = function getElementsByClassName(key) {
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByClassName.call(_this, key);
         }
@@ -5492,7 +5895,7 @@ function patchDocumentPrototype(appName, microAppWindow) {
         }
     };
     microRootDocument.prototype.getElementsByTagName = function getElementsByTagName(key) {
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isUniqueElement(key) ||
             isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByTagName.call(_this, key);
@@ -5508,7 +5911,7 @@ function patchDocumentPrototype(appName, microAppWindow) {
         }
     };
     microRootDocument.prototype.getElementsByName = function getElementsByName(key) {
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByName.call(_this, key);
         }
@@ -5575,7 +5978,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
             enumerable: true,
             configurable: true,
             get: () => {
-                throttleDeferForSetAppName(appName);
+                throttleDeferForIframeAppName(appName);
                 return rawDocument[tagName];
             },
             set: (value) => { rawDocument[tagName] = value; },
@@ -5583,7 +5986,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
     });
 }
 function patchDocumentEffect(appName, microAppWindow) {
-    const { rawDocument, rawAddEventListener, rawRemoveEventListener } = globalEnv;
+    const { rawDocument, rawAddEventListener, rawRemoveEventListener, rawDispatchEvent } = globalEnv;
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     let onClickHandler = null;
@@ -5613,6 +6016,9 @@ function patchDocumentEffect(appName, microAppWindow) {
         const handler = (listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_BOUND_FUNCTION__) || listener;
         rawRemoveEventListener.call(getEventTarget(type, this), type, handler, options);
     };
+    microRootDocument.prototype.dispatchEvent = function (event) {
+        return rawDispatchEvent.call(getEventTarget(event === null || event === void 0 ? void 0 : event.type, this), event);
+    };
     // 重新定义microRootDocument.prototype 上的on开头方法
     function createSetterHandler(eventName) {
         if (eventName === 'onclick') {
@@ -5733,12 +6139,18 @@ function patchElement(appName, url, microAppWindow, sandbox) {
     patchIframeNode(appName, microAppWindow, sandbox);
     patchIframeAttribute(url, microAppWindow);
 }
+/**
+ * patch iframe Node/Element
+ *
+ */
 function patchIframeNode(appName, microAppWindow, sandbox) {
     const rawRootElement = globalEnv.rawRootElement; // native root Element
+    const rawRootNode = globalEnv.rawRootNode;
     const rawDocument = globalEnv.rawDocument;
     const microDocument = microAppWindow.document;
     const microRootNode = microAppWindow.Node;
     const microRootElement = microAppWindow.Element;
+    const microDocumentFragment = microAppWindow.DocumentFragment;
     // const rawMicroGetRootNode = microRootNode.prototype.getRootNode
     const rawMicroAppendChild = microRootNode.prototype.appendChild;
     const rawMicroInsertBefore = microRootNode.prototype.insertBefore;
@@ -5746,6 +6158,8 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
     const rawMicroRemoveChild = microRootNode.prototype.removeChild;
     const rawMicroAppend = microRootElement.prototype.append;
     const rawMicroPrepend = microRootElement.prototype.prepend;
+    const rawMicroFragmentAppend = microDocumentFragment.prototype.append;
+    const rawMicroFragmentPrepend = microDocumentFragment.prototype.prepend;
     const rawMicroInsertAdjacentElement = microRootElement.prototype.insertAdjacentElement;
     const rawMicroCloneNode = microRootNode.prototype.cloneNode;
     const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(microRootElement.prototype, 'innerHTML');
@@ -5763,42 +6177,34 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         }
         return parent;
     };
-    microRootNode.prototype.getRootNode = function getRootNode() {
-        return microDocument;
-        // TODO: 什么情况下返回原生document?
-        // const rootNode = rawMicroGetRootNode.call(this, options)
-        // if (rootNode === appInstanceMap.get(appName)?.container) return microDocument
-        // return rootNode
-    };
     microRootNode.prototype.appendChild = function appendChild(node) {
-        // TODO: 有必要执行这么多次updateElementInfo？
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroAppendChild.call(this, node);
         }
-        return rawRootElement.prototype.appendChild.call(getRawTarget(this), node);
+        return rawRootNode.prototype.appendChild.call(getRawTarget(this), node);
     };
     microRootNode.prototype.insertBefore = function insertBefore(node, child) {
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroInsertBefore.call(this, node, child);
         }
-        return rawRootElement.prototype.insertBefore.call(getRawTarget(this), node, child);
+        return rawRootNode.prototype.insertBefore.call(getRawTarget(this), node, child);
     };
     microRootNode.prototype.replaceChild = function replaceChild(node, child) {
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroReplaceChild.call(this, node, child);
         }
-        return rawRootElement.prototype.replaceChild.call(getRawTarget(this), node, child);
+        return rawRootNode.prototype.replaceChild.call(getRawTarget(this), node, child);
     };
     microRootNode.prototype.removeChild = function removeChild(oldChild) {
         if (isPureNode(oldChild) || this.contains(oldChild)) {
             return rawMicroRemoveChild.call(this, oldChild);
         }
-        return rawRootElement.prototype.removeChild.call(getRawTarget(this), oldChild);
+        return rawRootNode.prototype.removeChild.call(getRawTarget(this), oldChild);
     };
-    microRootElement.prototype.append = function append(...nodes) {
+    microDocumentFragment.prototype.append = microRootElement.prototype.append = function append(...nodes) {
         let i = 0;
         let hasPureNode = false;
         while (i < nodes.length) {
@@ -5808,11 +6214,11 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
             i++;
         }
         if (hasPureNode) {
-            return rawMicroAppend.call(this, ...nodes);
+            return (isDocumentFragment(this) ? rawMicroFragmentAppend : rawMicroAppend).call(this, ...nodes);
         }
         return rawRootElement.prototype.append.call(getRawTarget(this), ...nodes);
     };
-    microRootElement.prototype.prepend = function prepend(...nodes) {
+    microDocumentFragment.prototype.prepend = microRootElement.prototype.prepend = function prepend(...nodes) {
         let i = 0;
         let hasPureNode = false;
         while (i < nodes.length) {
@@ -5822,7 +6228,7 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
             i++;
         }
         if (hasPureNode) {
-            return rawMicroPrepend.call(this, ...nodes);
+            return (isDocumentFragment(this) ? rawMicroFragmentPrepend : rawMicroPrepend).call(this, ...nodes);
         }
         return rawRootElement.prototype.prepend.call(getRawTarget(this), ...nodes);
     };
@@ -5838,28 +6244,53 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         }
         return rawRootElement.prototype.insertAdjacentElement.call(getRawTarget(this), where, element);
     };
-    // patch cloneNode
-    microRootNode.prototype.cloneNode = function cloneNode(deep) {
-        const clonedNode = rawMicroCloneNode.call(this, deep);
-        return updateElementInfo(clonedNode, appName);
-    };
+    /**
+     * Specific prototype properties:
+     * 1. baseURI
+     * 2. ownerDocument
+     * 3. parentNode
+     * 4. innerHTML
+     */
+    rawDefineProperty(microRootNode.prototype, 'baseURI', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return sandbox.proxyWindow.location.href;
+        },
+    });
     rawDefineProperty(microRootNode.prototype, 'ownerDocument', {
         configurable: true,
         enumerable: true,
         get() {
-            return this.__PURE_ELEMENT__
-                ? rawOwnerDocumentDesc.get.call(this)
-                : microDocument;
+            var _a;
+            return this.__PURE_ELEMENT__ || this === microDocument
+                ? (_a = rawOwnerDocumentDesc.get) === null || _a === void 0 ? void 0 : _a.call(this) : microDocument;
         },
     });
+    // patch parentNode
+    rawDefineProperty(microRootNode.prototype, 'parentNode', getIframeParentNodeDesc(appName, rawParentNodeDesc));
+    microRootNode.prototype.getRootNode = function getRootNode() {
+        return microDocument;
+        // TODO: any case return document?
+        // const rootNode = rawMicroGetRootNode.call(this, options)
+        // if (rootNode === appInstanceMap.get(appName)?.container) return microDocument
+        // return rootNode
+    };
+    // patch cloneNode
+    microRootNode.prototype.cloneNode = function cloneNode(deep) {
+        const clonedNode = rawMicroCloneNode.call(this, deep);
+        return updateElementInfo(clonedNode, appName);
+    };
     rawDefineProperty(microRootElement.prototype, 'innerHTML', {
         configurable: true,
         enumerable: true,
         get() {
-            return rawInnerHTMLDesc.get.call(this);
+            var _a;
+            return (_a = rawInnerHTMLDesc.get) === null || _a === void 0 ? void 0 : _a.call(this);
         },
         set(code) {
-            rawInnerHTMLDesc.set.call(this, code);
+            var _a;
+            (_a = rawInnerHTMLDesc.set) === null || _a === void 0 ? void 0 : _a.call(this, code);
             Array.from(this.children).forEach((child) => {
                 if (isElement(child)) {
                     updateElementInfo(child, appName);
@@ -5867,34 +6298,6 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
             });
         }
     });
-    // patch parentNode
-    rawDefineProperty(microRootNode.prototype, 'parentNode', {
-        configurable: true,
-        enumerable: true,
-        get() {
-            var _a, _b, _c;
-            /**
-             * set current appName for hijack parentNode of html
-             * NOTE:
-             *  1. Is there a problem with setting the current appName in iframe mode
-             */
-            throttleDeferForSetAppName(appName);
-            const result = rawParentNodeDesc.get.call(this);
-            /**
-              * If parentNode is <micro-app-body>, return rawDocument.body
-              * Scenes:
-              *  1. element-ui@2/lib/utils/vue-popper.js
-              *    if (this.popperElm.parentNode === document.body) ...
-              * WARNING:
-              *  Will it cause other problems ?
-              *  e.g. target.parentNode.remove(target)
-              */
-            if (isMicroAppBody(result) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
-                return ((_c = (_b = microApp.options).getRootElementParentNode) === null || _c === void 0 ? void 0 : _c.call(_b, this, appName)) || globalEnv.rawDocument.body;
-            }
-            return result;
-        }
-    });
     // Adapt to new image(...) scene
     const ImageProxy = new Proxy(microAppWindow.Image, {
         construct(Target, args) {
@@ -5913,16 +6316,24 @@ function patchIframeAttribute(url, microAppWindow) {
     const microRootElement = microAppWindow.Element;
     const rawMicroSetAttribute = microRootElement.prototype.setAttribute;
     microRootElement.prototype.setAttribute = function setAttribute(key, value) {
-        if (((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
-            (key === 'href' && /^link$/i.test(this.tagName))) {
-            value = CompletionPath(value, url);
+        if (/^micro-app(-\S+)?/i.test(this.tagName) &&
+            key === 'data' &&
+            this.setAttribute !== microRootElement.prototype.setAttribute) {
+            this.setAttribute(key, value);
+        }
+        else {
+            if (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
+                (key === 'href' && /^(link|image)$/i.test(this.tagName))) {
+                value = CompletionPath(value, url);
+            }
+            rawMicroSetAttribute.call(this, key, value);
         }
-        rawMicroSetAttribute.call(this, key, value);
     };
     const protoAttrList = [
         [microAppWindow.HTMLImageElement.prototype, 'src'],
         [microAppWindow.HTMLScriptElement.prototype, 'src'],
         [microAppWindow.HTMLLinkElement.prototype, 'href'],
+        [microAppWindow.SVGImageElement.prototype, 'href'],
     ];
     /**
      * element.setAttribute does not trigger this actions:
@@ -5999,9 +6410,10 @@ class IframeSandbox {
     createIframeElement(appName, browserPath) {
         this.iframe = pureCreateElement('iframe');
         const iframeAttrs = {
+            id: appName,
             src: microApp.options.iframeSrc || browserPath,
             style: 'display: none',
-            id: appName,
+            'powered-by': 'micro-app',
         };
         Object.keys(iframeAttrs).forEach((key) => this.iframe.setAttribute(key, iframeAttrs[key]));
         // effect action during construct
@@ -6035,15 +6447,6 @@ class IframeSandbox {
          *  1. iframe router and browser router are separated, we should update iframe router manually
          *  2. withSandbox location is browser location when disable memory-router, so no need to do anything
          */
-        /**
-         * TODO:
-         * 1. iframe关闭虚拟路由系统后，default-page无法使用，推荐用户直接使用浏览器地址控制首页渲染
-         *    补充：keep-router-state 也无法配置，因为keep-router-state一定为true。
-         * 2. 导航拦截、current.route 可以正常使用
-         * 3. 可以正常控制子应用跳转，方式还是自上而下(也可以是子应用内部跳转，这种方式更好一点，减小对基座的影响，不会导致vue的循环刷新)
-         * 4. 关闭虚拟路由以后会对应 route-mode='custom' 模式，包括with沙箱也会这么做
-         * 5. 关闭虚拟路由是指尽可能模拟没有虚拟路由的情况，子应用直接获取浏览器location和history，控制浏览器跳转
-         */
         this.initRouteState(defaultPage);
         // unique listener of popstate event for child app
         this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
@@ -6066,6 +6469,7 @@ class IframeSandbox {
     }
     stop({ umdMode, keepRouteState, destroy, clearData, }) {
         var _a;
+        // sandbox.stop may exec before sandbox.start, e.g: iframe sandbox + default mode + remount
         if (!this.active)
             return;
         this.recordAndReleaseEffect({ clearData }, !umdMode || destroy);
@@ -6081,6 +6485,7 @@ class IframeSandbox {
                 Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
+            this.clearHijackUmdHooks();
         }
         if (--globalEnv.activeSandbox === 0) {
             releasePatchElementAndDocument();
@@ -6299,10 +6704,49 @@ class IframeSandbox {
      * action before exec scripts when mount
      * Actions:
      * 1. patch static elements from html
+     * 2. hijack umd hooks -- mount, unmount, micro-app-appName
      * @param container micro app container
      */
-    actionBeforeExecScripts(container) {
+    actionsBeforeExecScripts(container, handleUmdHooks) {
         this.patchStaticElement(container);
+        this.clearHijackUmdHooks = this.hijackUmdHooks(this.appName, this.microAppWindow, handleUmdHooks);
+    }
+    // hijack mount, unmount, micro-app-appName hook to microAppWindow
+    hijackUmdHooks(appName, microAppWindow, handleUmdHooks) {
+        let mount, unmount, microAppLibrary;
+        rawDefineProperties(microAppWindow, {
+            mount: {
+                configurable: true,
+                get: () => mount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !mount) {
+                        handleUmdHooks(mount = value, unmount);
+                    }
+                }
+            },
+            unmount: {
+                configurable: true,
+                get: () => unmount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !unmount) {
+                        handleUmdHooks(mount, unmount = value);
+                    }
+                }
+            },
+            [`micro-app-${appName}`]: {
+                configurable: true,
+                get: () => microAppLibrary,
+                set: (value) => {
+                    if (this.active && isPlainObject(value) && !microAppLibrary) {
+                        microAppLibrary = value;
+                        handleUmdHooks(microAppLibrary.mount, microAppLibrary.unmount);
+                    }
+                }
+            }
+        });
+        return () => {
+            mount = unmount = microAppLibrary = null;
+        };
     }
     setStaticAppState(state) {
         this.microAppWindow.__MICRO_APP_STATE__ = state;
@@ -6319,7 +6763,6 @@ class CreateApp {
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
         this.umdHookUnmount = null;
-        this.lifeCycleState = null;
         this.umdMode = false;
         // TODO: 类型优化，加上iframe沙箱
         this.sandBox = null;
@@ -6364,7 +6807,9 @@ class CreateApp {
         var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
-            if (!this.isPrefetch && !this.isUnmounted()) {
+            if (this.isUnmounted())
+                return;
+            if (!this.isPrefetch) {
                 getRootContainer(this.container).mount(this);
             }
             else if (this.isPrerender) {
@@ -6433,6 +6878,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 +6902,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 +6918,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;
@@ -6486,7 +6932,6 @@ class CreateApp {
                 this.fiber = fiber;
                 this.routerMode = routerMode;
                 const dispatchBeforeMount = () => {
-                    this.setLifeCycleState(lifeCycles.BEFOREMOUNT);
                     dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
                 };
                 if (this.isPrerender) {
@@ -6500,7 +6945,7 @@ class CreateApp {
                 dispatchCustomEventToMicroApp(this, 'statechange', {
                     appState: appStates.MOUNTING
                 });
-                // TODO: 将所有cloneContainer中的'as Element'去掉，兼容shadowRoot的场景
+                // TODO: 兼容shadowRoot的场景
                 this.cloneContainer(this.container, this.source.html, !this.umdMode);
                 (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
                     umdMode: this.umdMode,
@@ -6509,38 +6954,35 @@ class CreateApp {
                     disablePatchRequest,
                 });
                 if (!this.umdMode) {
-                    // update element info of html
-                    (_f = this.sandBox) === null || _f === void 0 ? void 0 : _f.actionBeforeExecScripts(this.container);
-                    // if all js are executed, param isFinished will be true
-                    execScripts(this, (isFinished) => {
-                        if (!this.umdMode) {
-                            const { mount, unmount } = this.getUmdLibraryHooks();
-                            /**
-                             * umdHookUnmount can works in default mode
-                             * register through window.unmount
-                             */
-                            // TODO: 不对，这里要改，因为unmount不一定是函数
-                            this.umdHookUnmount = unmount;
+                    // patch element info of html
+                    (_f = this.sandBox) === null || _f === void 0 ? void 0 : _f.actionsBeforeExecScripts(this.container, (mount, unmount) => {
+                        var _a;
+                        if (!this.umdMode && !this.isUnmounted()) {
+                            this.umdHookMount = isFunction(mount) ? mount : null;
+                            // umdHookUnmount can works in default mode, register by window.unmount
+                            this.umdHookUnmount = isFunction(unmount) ? unmount : null;
                             // if mount & unmount is function, the sub app is umd mode
-                            if (isFunction(mount) && isFunction(unmount)) {
-                                this.umdHookMount = mount;
-                                // sandbox must exist
-                                this.sandBox.markUmdMode(this.umdMode = true);
+                            if (isFunction(this.umdHookMount) && isFunction(this.umdHookUnmount)) {
+                                (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.markUmdMode(this.umdMode = true);
                                 try {
-                                    this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
+                                    // if appState is mounted, it means that isFinished is true and this.handleMounted has already been executed, just exec this.umdHookMount
+                                    if (this.getAppState() === appStates.MOUNTED) {
+                                        this.umdHookMount(microApp.getData(this.name, true));
+                                    }
+                                    else {
+                                        this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
+                                    }
                                 }
                                 catch (e) {
-                                    /**
-                                     * TODO:
-                                     *  1. 是否应该直接抛出错误
-                                     *  2. 是否应该触发error生命周期
-                                     */
-                                    logError('An error occurred in window.mount \n', this.name, e);
+                                    logError('An error occurred when mount \n', this.name, e);
                                 }
                             }
-                            else if (isFinished === true) {
-                                this.handleMounted();
-                            }
+                        }
+                    });
+                    // if all js are executed, param isFinished will be true
+                    execScripts(this, (isFinished) => {
+                        if (!this.umdMode && isFinished === true) {
+                            this.handleMounted();
                         }
                     });
                 }
@@ -6550,13 +6992,22 @@ class CreateApp {
                         this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
                     }
                     catch (e) {
-                        logError('An error occurred in window.mount \n', this.name, e);
+                        logError('An error occurred when mount \n', this.name, e);
                     }
                 }
             }
         };
+        /**
+         * Initialization of sandbox is async, especially iframe sandbox are macro tasks
+         * when child apps switch quickly, we need to pay attention to the following points:
+         * NOTE:
+         *  1. unmount app before exec nextAction (especially: iframe sandbox + default mode + remount)
+         *     this.container is null, this.sandBox will not start
+         *  2. remount app of note 1
+         *  3. unmount app during exec js
+         */
         // TODO: 可优化？
-        this.sandBox ? this.sandBox.sandboxReady.then(nextAction) : nextAction();
+        this.sandBox ? this.sandBox.sandboxReady.then(() => !this.isUnmounted() && nextAction()) : nextAction();
     }
     /**
      * handle for promise umdHookMount
@@ -6565,16 +7016,17 @@ class CreateApp {
     handleMounted(umdHookMountResult) {
         var _a, _b;
         const dispatchAction = () => {
+            const nextAction = () => this.actionsAfterMounted();
             if (isPromise(umdHookMountResult)) {
                 umdHookMountResult
-                    .then(() => this.dispatchMountedEvent())
+                    .then(nextAction)
                     .catch((e) => {
                     logError('An error occurred in window.mount \n', this.name, e);
-                    this.dispatchMountedEvent();
+                    nextAction();
                 });
             }
             else {
-                this.dispatchMountedEvent();
+                nextAction();
             }
         };
         if (this.isPrerender) {
@@ -6588,7 +7040,7 @@ class CreateApp {
     /**
      * dispatch mounted event when app run finished
      */
-    dispatchMountedEvent() {
+    actionsAfterMounted() {
         var _a;
         if (!this.isUnmounted()) {
             this.setAppState(appStates.MOUNTED);
@@ -6600,7 +7052,6 @@ class CreateApp {
             });
             // 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);
             /**
@@ -6623,6 +7074,8 @@ class CreateApp {
      * unmount app
      * NOTE:
      *  1. do not add any params on account of unmountApp
+     *  2. this.container maybe null: Initialization of sandbox is async, child app may unmount before exec nextAction of mount
+     *  3. unmount app when loading files (this.container is not null)
      * @param destroy completely destroy, delete cache resources
      * @param clearData clear data of dateCenter
      * @param keepRouteState keep route state when unmount, default is false
@@ -6632,29 +7085,12 @@ class CreateApp {
         var _a;
         destroy = destroy || this.state === appStates.LOAD_FAILED;
         this.setAppState(appStates.UNMOUNT);
-        let umdHookUnmountResult = null;
         try {
-            // call umd unmount hook before the sandbox is cleared
-            umdHookUnmountResult = (_a = this.umdHookUnmount) === null || _a === void 0 ? void 0 : _a.call(this, microApp.getData(this.name, true));
+            this.handleUnmounted(destroy, clearData, keepRouteState, unmountcb, (_a = this.umdHookUnmount) === null || _a === void 0 ? void 0 : _a.call(this, microApp.getData(this.name, true)));
         }
         catch (e) {
-            logError('An error occurred in window.unmount \n', this.name, e);
+            logError('An error occurred when 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
-        execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONUNMOUNT), this.name, microGlobalEvent.ONUNMOUNT);
-        this.handleUnmounted({
-            destroy,
-            clearData,
-            keepRouteState,
-            unmountcb,
-            umdHookUnmountResult,
-        });
     }
     /**
      * handle for promise umdHookUnmount
@@ -6664,8 +7100,16 @@ class CreateApp {
      * @param unmountcb callback of unmount
      * @param umdHookUnmountResult result of umdHookUnmount
      */
-    handleUnmounted({ destroy, clearData, keepRouteState, unmountcb, umdHookUnmountResult, }) {
-        const nextAction = () => this.actionsForUnmount({
+    handleUnmounted(destroy, clearData, keepRouteState, unmountcb, umdHookUnmountResult) {
+        // 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
+        execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONUNMOUNT), this.name, microGlobalEvent.ONUNMOUNT);
+        const nextAction = () => this.actionsAfterUnmounted({
             destroy,
             clearData,
             keepRouteState,
@@ -6674,7 +7118,12 @@ class CreateApp {
         if (isPromise(umdHookUnmountResult)) {
             // async window.unmount will cause appName bind error in nest app
             removeDomScope();
-            umdHookUnmountResult.then(nextAction).catch(nextAction);
+            umdHookUnmountResult
+                .then(nextAction)
+                .catch((e) => {
+                logError('An error occurred in window.unmount \n', this.name, e);
+                nextAction();
+            });
         }
         else {
             nextAction();
@@ -6687,7 +7136,7 @@ class CreateApp {
      * @param keepRouteState keep route state when unmount, default is false
      * @param unmountcb callback of unmount
      */
-    actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb, }) {
+    actionsAfterUnmounted({ destroy, clearData, keepRouteState, unmountcb, }) {
         var _a;
         if (this.umdMode && this.container && !destroy) {
             this.cloneContainer(this.source.html, this.container, false);
@@ -6704,20 +7153,33 @@ 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);
         unmountcb === null || unmountcb === void 0 ? void 0 : unmountcb();
     }
     clearOptions(destroy) {
-        this.container.innerHTML = '';
-        this.container = null;
+        var _a, _b;
         this.isPrerender = false;
         this.preRenderEvents = null;
         this.setKeepAliveState(null);
+        if (this.container) {
+            this.container.innerHTML = '';
+            this.container = null;
+        }
+        else if (!this.umdMode) {
+            /**
+             * this.container is null means sandBox.start has not exec, so sandBox.stop won't exec either
+             * we should remove iframeElement in default mode manually
+             */
+            (_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.deleteIframeElement) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
         // in iframe sandbox & default mode, delete the sandbox & iframeElement
-        // TODO: with沙箱与iframe沙箱保持一致：with沙箱默认模式下删除 或者 iframe沙箱umd模式下保留
+        /**
+         * TODO:
+         *  1. with沙箱与iframe沙箱保持一致：with沙箱默认模式下删除 或者 iframe沙箱umd模式下保留
+         *  2. 接1.0，this.sandBox置空，还需要注意后续app.sandBox相关操作，比如 scripts.ts --> app.iframe ? app.sandBox!.microBody : app.querySelector('micro-app-body')，如果是fiber或者预加载，会存在卸载后js还在处理的情况
+         */
         if (this.iframe && !this.umdMode)
             this.sandBox = null;
         if (destroy)
@@ -6746,7 +7208,6 @@ 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 (isRouterModeSearch(this.name)) {
@@ -6768,6 +7229,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,11 +7245,11 @@ 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信息更新浏览器地址？
-         *  暂时不这么做吧，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
+         *  暂时不这么做，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
          */
         if (isRouterModeSearch(this.name)) {
             // called before lifeCyclesEvent
@@ -6790,7 +7259,6 @@ 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);
     }
@@ -6799,7 +7267,6 @@ class CreateApp {
      * @param e Error
      */
     onerror(e) {
-        this.setLifeCycleState(lifeCycles.ERROR);
         // dispatch state event to micro app
         dispatchCustomEventToMicroApp(this, 'statechange', {
             appState: appStates.LOAD_FAILED
@@ -6820,13 +7287,13 @@ class CreateApp {
     }
     /**
      * clone origin elements to target
-     * @param origin Cloned element
      * @param target Accept cloned elements
+     * @param origin Cloned element
      * @param deep deep clone or transfer dom
      */
     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);
@@ -6856,14 +7323,6 @@ class CreateApp {
     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;
@@ -6880,23 +7339,6 @@ class CreateApp {
     isHidden() {
         return keepAliveStates.KEEP_ALIVE_HIDDEN === this.keepAliveState;
     }
-    // get umd library, if it not exist, return empty object
-    getUmdLibraryHooks() {
-        // after execScripts, the app maybe unmounted
-        if (!this.isUnmounted() && this.sandBox) {
-            const libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
-            const proxyWindow = this.sandBox.proxyWindow;
-            // compatible with pre versions
-            if (isObject(proxyWindow[libraryName])) {
-                return proxyWindow[libraryName];
-            }
-            return {
-                mount: proxyWindow.mount,
-                unmount: proxyWindow.unmount,
-            };
-        }
-        return {};
-    }
     getMicroAppGlobalHook(eventName) {
         var _a, _b;
         const listener = (_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) === null || _b === void 0 ? void 0 : _b[eventName];
@@ -7002,11 +7444,11 @@ function handleNewNode(child, app) {
  * @param app app
  * @param method raw method
  * @param parent parent node
- * @param targetChild target node
- * @param passiveChild second param of insertBefore and replaceChild
+ * @param targetNode target node
+ * @param passiveNode second param of insertBefore and replaceChild
  */
-function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
-    const hijackParent = getHijackParent(parent, targetChild, app);
+function invokePrototypeMethod(app, rawMethod, parent, targetNode, passiveNode) {
+    const hijackParent = getHijackParent(parent, targetNode, app);
     if (hijackParent) {
         /**
          * If parentNode is <micro-app-body>, return rawDocument.body
@@ -7023,9 +7465,9 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
         if (!isIframeSandbox(app.name) &&
             isMicroAppBody(hijackParent) &&
             rawMethod !== globalEnv.rawRemoveChild) {
-            const descriptor = Object.getOwnPropertyDescriptor(targetChild, 'parentNode');
-            if ((!descriptor || descriptor.configurable) && !targetChild.__MICRO_APP_HAS_DPN__) {
-                rawDefineProperties(targetChild, {
+            const descriptor = Object.getOwnPropertyDescriptor(targetNode, 'parentNode');
+            if ((!descriptor || descriptor.configurable) && !targetNode.__MICRO_APP_HAS_DPN__) {
+                rawDefineProperties(targetNode, {
                     parentNode: {
                         configurable: true,
                         get() {
@@ -7046,68 +7488,84 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             }
         }
         if ((process.env.NODE_ENV !== 'production') &&
-            isIFrameElement(targetChild) &&
+            isIFrameElement(targetNode) &&
             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
+         * 1. If passiveNode exists, it must be insertBefore or replaceChild
+         * 2. When removeChild, targetNode 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])
+         *  1. If passiveNode not in hijackParent, insertBefore replaceChild will be degraded to appendChild
+         *    E.g: document.head.replaceChild(targetNode, document.scripts[0])
+         *  2. If passiveNode not in hijackParent but in parent and method is insertBefore, try insert it into the position corresponding to hijackParent
+         *    E.g: document.head.insertBefore(targetNode, 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 (passiveNode && !hijackParent.contains(passiveNode)) {
+            if (rawMethod === globalEnv.rawInsertBefore && parent.contains(passiveNode)) {
+                const indexOfParent = Array.from(parent.childNodes).indexOf(passiveNode);
                 if (hijackParent.childNodes[indexOfParent]) {
-                    return invokeRawMethod(rawMethod, hijackParent, targetChild, hijackParent.childNodes[indexOfParent]);
+                    return invokeRawMethod(rawMethod, hijackParent, targetNode, hijackParent.childNodes[indexOfParent], app);
                 }
             }
-            return globalEnv.rawAppendChild.call(hijackParent, targetChild);
+            return globalEnv.rawAppendChild.call(hijackParent, targetNode);
         }
-        else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetChild)) {
-            if (parent.contains(targetChild)) {
-                return rawMethod.call(parent, targetChild);
+        else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetNode)) {
+            if (parent.contains(targetNode)) {
+                return rawMethod.call(parent, targetNode);
             }
-            return targetChild;
+            return targetNode;
         }
-        return invokeRawMethod(rawMethod, hijackParent, targetChild, passiveChild);
+        return invokeRawMethod(rawMethod, hijackParent, targetNode, passiveNode, app);
     }
-    return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
+    return invokeRawMethod(rawMethod, parent, targetNode, passiveNode, app);
 }
 // head/body map to micro-app-head/micro-app-body
-function getHijackParent(parent, targetChild, app) {
+function getHijackParent(parent, targetNode, app) {
     if (app) {
         if (parent === document.head) {
-            if (app.iframe && isScriptElement(targetChild)) {
+            if (app.iframe && isScriptElement(targetNode)) {
                 return app.sandBox.microHead;
             }
             return app.querySelector('micro-app-head');
         }
         if (parent === document.body || parent === document.body.parentNode) {
-            if (app.iframe && isScriptElement(targetChild)) {
+            if (app.iframe && isScriptElement(targetNode)) {
                 return app.sandBox.microBody;
             }
             return app.querySelector('micro-app-body');
         }
-        if (app.iframe && isScriptElement(targetChild)) {
+        if (app.iframe && isScriptElement(targetNode)) {
             return app.sandBox.microBody;
         }
     }
     return null;
 }
-function invokeRawMethod(rawMethod, parent, targetChild, passiveChild) {
+function invokeRawMethod(rawMethod, parent, targetNode, passiveNode, app) {
     if (isPendMethod(rawMethod)) {
-        return rawMethod.call(parent, targetChild);
+        /**
+         * In iframe sandbox, script will pend to iframe.body, so we should reset rawMethod, because:
+         * Element.prototype.append === DocumentFragment.prototype.append ==> false
+         * Element.prototype.prepend === DocumentFragment.prototype.prepend ==> false
+         */
+        if ((app === null || app === void 0 ? void 0 : app.iframe) && isScriptElement(targetNode)) {
+            if (rawMethod === globalEnv.rawFragmentAppend) {
+                rawMethod = globalEnv.rawAppend;
+            }
+            else if (rawMethod === globalEnv.rawFragmentPrepend) {
+                rawMethod = globalEnv.rawPrepend;
+            }
+        }
+        return rawMethod.call(parent, targetNode);
     }
-    return rawMethod.call(parent, targetChild, passiveChild);
+    return rawMethod.call(parent, targetNode, passiveNode);
 }
 function isPendMethod(method) {
-    return method === globalEnv.rawAppend || method === globalEnv.rawPrepend;
+    return (method === globalEnv.rawAppend ||
+        method === globalEnv.rawPrepend ||
+        method === globalEnv.rawFragmentAppend ||
+        method === globalEnv.rawFragmentPrepend);
 }
 /**
  * Attempt to complete the static resource address again before insert the node
@@ -7124,7 +7582,7 @@ function completePathDynamic(app, newChild) {
                 globalEnv.rawSetAttribute.call(newChild, 'srcset', CompletionPath(newChild.getAttribute('srcset'), app.url));
             }
         }
-        else if (/^link$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
+        else if (/^(link|image)$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
             globalEnv.rawSetAttribute.call(newChild, 'href', CompletionPath(newChild.getAttribute('href'), app.url));
         }
     }
@@ -7133,31 +7591,26 @@ function completePathDynamic(app, newChild) {
  * method of handle new node
  * @param parent parent node
  * @param newChild new node
- * @param passiveChild passive node
+ * @param passiveNode passive node
  * @param rawMethod method
  */
-function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
+function commonElementHandler(parent, newChild, passiveNode, rawMethod) {
     const currentAppName = getCurrentAppName();
     if (isNode(newChild) &&
         !newChild.__PURE_ELEMENT__ &&
         (newChild.__MICRO_APP_NAME__ ||
             currentAppName)) {
-        newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
+        updateElementInfo(newChild, 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) {
+            if (isStyleElement(newChild)) {
+                parent.getRootNode() instanceof ShadowRoot && newChild.setAttribute('ignore', 'true');
+            }
             completePathDynamic(app, newChild);
-            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(newChild, app), passiveChild && getMappingNode(passiveChild));
+            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(newChild, app), passiveNode && getMappingNode(passiveNode));
         }
     }
-    if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        return rawMethod.call(parent, newChild);
-    }
-    return rawMethod.call(parent, newChild, passiveChild);
+    return invokeRawMethod(rawMethod, parent, newChild, passiveNode);
 }
 /**
  * Rewrite element prototype method
@@ -7166,36 +7619,19 @@ function patchElementAndDocument() {
     patchDocument$2();
     const rawRootElement = globalEnv.rawRootElement;
     const rawRootNode = globalEnv.rawRootNode;
+    const rawDocumentFragment = globalEnv.rawDocumentFragment;
     // prototype methods of add element👇
-    rawRootElement.prototype.appendChild = function appendChild(newChild) {
+    rawRootNode.prototype.appendChild = function appendChild(newChild) {
         return commonElementHandler(this, newChild, null, globalEnv.rawAppendChild);
     };
-    rawRootElement.prototype.insertBefore = function insertBefore(newChild, refChild) {
+    rawRootNode.prototype.insertBefore = function insertBefore(newChild, refChild) {
         return commonElementHandler(this, newChild, refChild, globalEnv.rawInsertBefore);
     };
-    rawRootElement.prototype.replaceChild = function replaceChild(newChild, oldChild) {
+    rawRootNode.prototype.replaceChild = function replaceChild(newChild, oldChild) {
         return commonElementHandler(this, newChild, oldChild, globalEnv.rawReplaceChild);
     };
-    rawRootElement.prototype.append = function append(...nodes) {
-        let i = 0;
-        while (i < nodes.length) {
-            let node = nodes[i];
-            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
-            commonElementHandler(this, markElement(node), null, globalEnv.rawAppend);
-            i++;
-        }
-    };
-    rawRootElement.prototype.prepend = function prepend(...nodes) {
-        let i = nodes.length;
-        while (i > 0) {
-            let node = nodes[i - 1];
-            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
-            commonElementHandler(this, markElement(node), null, globalEnv.rawPrepend);
-            i--;
-        }
-    };
     // prototype methods of delete element👇
-    rawRootElement.prototype.removeChild = function removeChild(oldChild) {
+    rawRootNode.prototype.removeChild = function removeChild(oldChild) {
         if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
             const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
@@ -7210,6 +7646,24 @@ function patchElementAndDocument() {
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
     };
+    rawDocumentFragment.prototype.append = rawRootElement.prototype.append = function append(...nodes) {
+        let i = 0;
+        while (i < nodes.length) {
+            let node = nodes[i];
+            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
+            commonElementHandler(this, markElement(node), null, isDocumentFragment(this) ? globalEnv.rawFragmentAppend : globalEnv.rawAppend);
+            i++;
+        }
+    };
+    rawDocumentFragment.prototype.prepend = rawRootElement.prototype.prepend = function prepend(...nodes) {
+        let i = nodes.length;
+        while (i > 0) {
+            let node = nodes[i - 1];
+            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
+            commonElementHandler(this, markElement(node), null, isDocumentFragment(this) ? globalEnv.rawFragmentPrepend : globalEnv.rawPrepend);
+            i--;
+        }
+    };
     /**
      * The insertAdjacentElement method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.
      * NOTE:
@@ -7229,52 +7683,81 @@ function patchElementAndDocument() {
         }
         return globalEnv.rawInsertAdjacentElement.call(this, where, element);
     };
-    // patch cloneNode
-    rawRootElement.prototype.cloneNode = function cloneNode(deep) {
-        const clonedNode = globalEnv.rawCloneNode.call(this, deep);
-        this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
-        return clonedNode;
-    };
     /**
      * 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 ((target === document.body || target === document.head) && currentAppName) {
+    function getElementQueryTarget(targetNode) {
+        const currentAppName = getIframeCurrentAppName() || getCurrentAppName();
+        if ((targetNode === document.body || targetNode === document.head) && currentAppName) {
             const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
-                if (target === document.body) {
+                if (targetNode === document.body) {
                     return app.querySelector('micro-app-body');
                 }
-                else if (target === document.head) {
+                else if (targetNode === document.head) {
                     return app.querySelector('micro-app-head');
                 }
             }
         }
-        return target;
+        return targetNode;
+    }
+    /**
+     * In iframe sandbox, script will render to iframe instead of micro-app-body
+     * So when query elements, we need to search both micro-app and iframe
+     * @param isEmpty get empty result
+     * @param targetNode targetNode element
+     * @param result origin result
+     * @param selectors selectors
+     * @param methodName querySelector or querySelectorAll
+     */
+    function getElementQueryResult(isEmpty, targetNode, result, selectors, methodName) {
+        if (isEmpty) {
+            const currentAppName = getIframeCurrentAppName() || getCurrentAppName();
+            if (currentAppName && isIframeSandbox(currentAppName)) {
+                const app = appInstanceMap.get(currentAppName);
+                if (isMicroAppHead(targetNode)) {
+                    return app.sandBox.microHead[methodName](selectors);
+                }
+                if (isMicroAppBody(targetNode)) {
+                    return app.sandBox.microBody[methodName](selectors);
+                }
+            }
+        }
+        return result;
     }
     rawRootElement.prototype.querySelector = function querySelector(selectors) {
         var _a;
-        return globalEnv.rawElementQuerySelector.call((_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this, selectors);
+        const _this = (_a = getElementQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
+        const result = globalEnv.rawElementQuerySelector.call(_this, selectors);
+        return getElementQueryResult(isNull(result) && _this !== this, _this, result, selectors, 'querySelector');
     };
     rawRootElement.prototype.querySelectorAll = function querySelectorAll(selectors) {
         var _a;
-        return globalEnv.rawElementQuerySelectorAll.call((_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this, selectors);
+        const _this = (_a = getElementQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
+        const result = globalEnv.rawElementQuerySelectorAll.call(_this, selectors);
+        return getElementQueryResult(!result.length && _this !== this, _this, result, selectors, 'querySelectorAll');
     };
     // rewrite setAttribute, complete resource address
     rawRootElement.prototype.setAttribute = function setAttribute(key, value) {
-        const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
-        if (appName &&
-            appInstanceMap.has(appName) &&
-            (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
-                (key === 'href' && /^link$/i.test(this.tagName)))) {
-            const app = appInstanceMap.get(appName);
-            value = CompletionPath(value, app.url);
+        if (/^micro-app(-\S+)?/i.test(this.tagName) &&
+            key === 'data' &&
+            this.setAttribute !== rawRootElement.prototype.setAttribute) {
+            this.setAttribute(key, value);
+        }
+        else {
+            const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
+            if (appName &&
+                appInstanceMap.has(appName) &&
+                (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
+                    (key === 'href' && /^(link|image)$/i.test(this.tagName)))) {
+                const app = appInstanceMap.get(appName);
+                value = CompletionPath(value, app.url);
+            }
+            globalEnv.rawSetAttribute.call(this, key, value);
         }
-        globalEnv.rawSetAttribute.call(this, key, value);
     };
     /**
      * TODO: 兼容直接通过img.src等操作设置的资源
@@ -7301,7 +7784,7 @@ function patchElementAndDocument() {
     //       return get?.call(this)
     //     },
     //     set: function (value) {
-    //       const currentAppName = getCurrentAppName()
+    //       const currentAppName = this.__MICRO_APP_NAME__ || getCurrentAppName()
     //       if (currentAppName && appInstanceMap.has(currentAppName)) {
     //         const app = appInstanceMap.get(currentAppName)
     //         value = CompletionPath(value, app!.url)
@@ -7310,41 +7793,25 @@ function patchElementAndDocument() {
     //     },
     //   })
     // })
-    rawDefineProperty(rawRootElement.prototype, 'innerHTML', {
-        configurable: true,
-        enumerable: true,
-        get() {
-            return globalEnv.rawInnerHTMLDesc.get.call(this);
-        },
-        set(code) {
-            globalEnv.rawInnerHTMLDesc.set.call(this, code);
-            const currentAppName = getCurrentAppName();
-            Array.from(this.children).forEach((child) => {
-                if (isElement(child) && currentAppName) {
-                    // TODO: 使用updateElementInfo进行更新
-                    child.__MICRO_APP_NAME__ = currentAppName;
-                }
-            });
-        }
-    });
     rawDefineProperty(rawRootNode.prototype, 'parentNode', {
         configurable: true,
         enumerable: true,
         get() {
             var _a, _b, _c;
             /**
-             * hijack parentNode of html
+             * hijack parentNode of html for with sandbox
              * Scenes:
              *  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();
+            const currentAppName = getIframeCurrentAppName() || 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;
                 if (microDocument)
                     return microDocument;
             }
+            // NOTE: run after hijack html.parentNode
             const result = globalEnv.rawParentNodeDesc.get.call(this);
             /**
              * If parentNode is <micro-app-body>, return rawDocument.body
@@ -7363,16 +7830,34 @@ function patchElementAndDocument() {
             return result;
         },
     });
+    rawDefineProperty(rawRootElement.prototype, 'innerHTML', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return globalEnv.rawInnerHTMLDesc.get.call(this);
+        },
+        set(code) {
+            globalEnv.rawInnerHTMLDesc.set.call(this, code);
+            const currentAppName = this.__MICRO_APP_NAME__ || getCurrentAppName();
+            Array.from(this.children).forEach((child) => {
+                if (isElement(child) && currentAppName) {
+                    updateElementInfo(child, currentAppName);
+                }
+            });
+        }
+    });
+    // patch cloneNode
+    rawRootNode.prototype.cloneNode = function cloneNode(deep) {
+        const clonedNode = globalEnv.rawCloneNode.call(this, deep);
+        return updateElementInfo(clonedNode, this.__MICRO_APP_NAME__);
+    };
 }
 /**
  * Mark the newly created element in the micro application
  * @param element new element
  */
 function markElement(element) {
-    const currentAppName = getCurrentAppName();
-    if (currentAppName)
-        element.__MICRO_APP_NAME__ = currentAppName;
-    return element;
+    return updateElementInfo(element, getCurrentAppName());
 }
 // methods of document
 function patchDocument$2() {
@@ -7503,18 +7988,18 @@ function releasePatchElementAndDocument() {
     releasePatchDocument();
     const rawRootElement = globalEnv.rawRootElement;
     const rawRootNode = globalEnv.rawRootNode;
-    rawRootElement.prototype.appendChild = globalEnv.rawAppendChild;
-    rawRootElement.prototype.insertBefore = globalEnv.rawInsertBefore;
-    rawRootElement.prototype.replaceChild = globalEnv.rawReplaceChild;
-    rawRootElement.prototype.removeChild = globalEnv.rawRemoveChild;
+    rawRootNode.prototype.appendChild = globalEnv.rawAppendChild;
+    rawRootNode.prototype.insertBefore = globalEnv.rawInsertBefore;
+    rawRootNode.prototype.replaceChild = globalEnv.rawReplaceChild;
+    rawRootNode.prototype.removeChild = globalEnv.rawRemoveChild;
+    rawRootNode.prototype.cloneNode = globalEnv.rawCloneNode;
     rawRootElement.prototype.append = globalEnv.rawAppend;
     rawRootElement.prototype.prepend = globalEnv.rawPrepend;
-    rawRootElement.prototype.cloneNode = globalEnv.rawCloneNode;
     rawRootElement.prototype.querySelector = globalEnv.rawElementQuerySelector;
     rawRootElement.prototype.querySelectorAll = globalEnv.rawElementQuerySelectorAll;
     rawRootElement.prototype.setAttribute = globalEnv.rawSetAttribute;
-    rawDefineProperty(rawRootElement.prototype, 'innerHTML', globalEnv.rawInnerHTMLDesc);
     rawDefineProperty(rawRootNode.prototype, 'parentNode', globalEnv.rawParentNodeDesc);
+    rawDefineProperty(rawRootElement.prototype, 'innerHTML', globalEnv.rawInnerHTMLDesc);
 }
 // Set the style of micro-app-head and micro-app-body
 let hasRejectMicroAppStyle = false;
@@ -7544,15 +8029,18 @@ function initGlobalEnv() {
         const rawRootElement = rawWindow.Element;
         const rawRootNode = rawWindow.Node;
         const rawRootEventTarget = rawWindow.EventTarget;
+        const rawDocumentFragment = rawWindow.DocumentFragment;
         // save patch raw methods, pay attention to this binding
+        const rawAppendChild = rawRootNode.prototype.appendChild;
+        const rawInsertBefore = rawRootNode.prototype.insertBefore;
+        const rawReplaceChild = rawRootNode.prototype.replaceChild;
+        const rawRemoveChild = rawRootNode.prototype.removeChild;
         const rawSetAttribute = rawRootElement.prototype.setAttribute;
-        const rawAppendChild = rawRootElement.prototype.appendChild;
-        const rawInsertBefore = rawRootElement.prototype.insertBefore;
-        const rawReplaceChild = rawRootElement.prototype.replaceChild;
-        const rawRemoveChild = rawRootElement.prototype.removeChild;
         const rawAppend = rawRootElement.prototype.append;
         const rawPrepend = rawRootElement.prototype.prepend;
-        const rawCloneNode = rawRootElement.prototype.cloneNode;
+        const rawFragmentAppend = rawDocumentFragment.prototype.append;
+        const rawFragmentPrepend = rawDocumentFragment.prototype.prepend;
+        const rawCloneNode = rawRootNode.prototype.cloneNode;
         const rawElementQuerySelector = rawRootElement.prototype.querySelector;
         const rawElementQuerySelectorAll = rawRootElement.prototype.querySelectorAll;
         const rawInsertAdjacentElement = rawRootElement.prototype.insertAdjacentElement;
@@ -7570,13 +8058,10 @@ function initGlobalEnv() {
         const rawGetElementsByClassName = rawRootDocument.prototype.getElementsByClassName;
         const rawGetElementsByTagName = rawRootDocument.prototype.getElementsByTagName;
         const rawGetElementsByName = rawRootDocument.prototype.getElementsByName;
-        const ImageProxy = new Proxy(Image, {
+        // TODO: 将ImageProxy移出去
+        const ImageProxy = new Proxy(rawWindow.Image, {
             construct(Target, args) {
-                const elementImage = new Target(...args);
-                const currentAppName = getCurrentAppName();
-                if (currentAppName)
-                    elementImage.__MICRO_APP_NAME__ = currentAppName;
-                return elementImage;
+                return updateElementInfo(new Target(...args), getCurrentAppName());
             },
         });
         /**
@@ -7602,6 +8087,7 @@ function initGlobalEnv() {
             rawRootDocument,
             rawRootElement,
             rawRootNode,
+            rawDocumentFragment,
             // source/patch
             rawSetAttribute,
             rawAppendChild,
@@ -7610,6 +8096,8 @@ function initGlobalEnv() {
             rawRemoveChild,
             rawAppend,
             rawPrepend,
+            rawFragmentAppend,
+            rawFragmentPrepend,
             rawCloneNode,
             rawElementQuerySelector,
             rawElementQuerySelectorAll,
@@ -7649,7 +8137,7 @@ function initGlobalEnv() {
  * @param tagName element name
 */
 function defineElement(tagName) {
-    class MicroAppElement extends getBaseHTMLElement() {
+    class MicroAppElement extends HTMLElement {
         constructor() {
             super(...arguments);
             this.isWaiting = false;
@@ -7714,6 +8202,13 @@ function defineElement(tagName) {
         // baseRoute: route prefix, default is ''
         // keep-alive: open keep-alive mode
         connectedCallback() {
+            /**
+             * In FireFox, iframe Node.prototype will point to native Node.prototype after insert to document
+             * If <micro-app>.prototype is not MicroAppElement.prototype, we should reset it
+             */
+            if (Object.getPrototypeOf(this) !== MicroAppElement.prototype) {
+                Object.setPrototypeOf(this, MicroAppElement.prototype);
+            }
             const cacheCount = ++this.connectedCount;
             this.connectStateMap.set(cacheCount, true);
             /**
@@ -7846,12 +8341,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 +8590,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 +8618,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'));
         }
         /**
@@ -8150,6 +8647,17 @@ function defineElement(tagName) {
                 globalEnv.rawSetAttribute.call(this, key, value);
             }
         }
+        /**
+         * get delay time of router event
+         * @returns delay time
+         */
+        getRouterEventDelay() {
+            let delay = parseInt(this.getAttribute('router-event-delay'));
+            if (isNaN(delay)) {
+                delay = parseInt((isFunction(microApp.options['router-event-delay']) ? microApp.options['router-event-delay'](this.appName) : microApp.options['router-event-delay']));
+            }
+            return !isNaN(delay) ? delay : 0;
+        }
         /**
          * Data from the base application
          */
@@ -8186,7 +8694,7 @@ function defineElement(tagName) {
             return this.getBaseRouteCompatible();
         }
     }
-    globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
+    window.customElements.define(tagName, MicroAppElement);
 }
 
 /**
@@ -8218,7 +8726,7 @@ function preFetch(apps, delay) {
         const delayTime = isNumber(delay) ? delay : microApp.options.prefetchDelay;
         /**
          * TODO: remove setTimeout
-         * Is there a better way?
+         * 如果要保留setTimeout，则需要考虑清空定时器的情况
          */
         setTimeout(() => {
             // releasePrefetchEffect()
@@ -8272,7 +8780,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 +8817,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) => {
@@ -8453,7 +8961,7 @@ function unmountApp(appName, options) {
             }
         }
         else {
-            logWarn(`app ${appName} does not exist`);
+            logWarn(`app ${appName} does not exist when unmountApp`);
             resolve(false);
         }
     });
@@ -8483,7 +8991,7 @@ function reload(appName, destroy) {
             }
         }
         else {
-            logWarn(`app ${appName} does not exist`);
+            logWarn(`app ${appName} does not exist when reload app`);
             resolve(false);
         }
     });
@@ -8538,20 +9046,6 @@ 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);
@@ -8566,7 +9060,6 @@ class MicroApp extends EventCenterForBaseApp {
         this.getAllApps = getAllApps;
         this.reload = reload;
         this.renderApp = renderApp;
-        this.getAppStatus = getAppStatus;
     }
     start(options) {
         var _a, _b;
@@ -8591,7 +9084,7 @@ class MicroApp extends EventCenterForBaseApp {
             }
         }
         initGlobalEnv();
-        if (globalEnv.rawWindow.customElements.get(this.tagName)) {
+        if (window.customElements.get(this.tagName)) {
             return logWarn(`element ${this.tagName} is already defined`);
         }
         if (isPlainObject(options)) {
@@ -8622,5 +9115,5 @@ class MicroApp extends EventCenterForBaseApp {
 const microApp = new MicroApp();
 
 export default microApp;
-export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, getAppStatus, preFetch, pureCreateElement, reload, removeDomScope, renderApp, unmountAllApps, unmountApp, version };
+export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, reload, removeDomScope, renderApp, unmountAllApps, unmountApp, version };
 //# sourceMappingURL=index.esm.js.map