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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.5';
+const version = '1.0.0-rc.7';
 // 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,9 +110,15 @@ 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]';
@@ -180,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
  */
@@ -244,8 +259,7 @@ function formatAppName(name) {
 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('/') + '/';
     }
@@ -344,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
  */
@@ -563,13 +609,21 @@ function clearDOM($dom) {
         $dom.removeChild($dom.firstChild);
     }
 }
-/**
- * get HTMLElement from base app
- * @returns HTMLElement
- */
-function getBaseHTMLElement() {
-    var _a;
-    return (((_a = window.rawWindow) === null || _a === void 0 ? void 0 : _a.HTMLElement) || window.HTMLElement);
+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;
 }
 /**
  * Format event name
@@ -582,6 +636,13 @@ 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) {
     Object.defineProperties(event, {
@@ -608,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
@@ -815,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))) {
@@ -840,7 +916,7 @@ 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 &&
@@ -862,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) === '*') {
@@ -879,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() {
@@ -901,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 {
@@ -963,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 () => {
@@ -1058,7 +1146,7 @@ class CSSParser {
         return this.commonMatch(/^{\s*/);
     }
     matchCloseBrace() {
-        return this.commonMatch(/^}/);
+        return this.commonMatch(/^}\s*/);
     }
     // match and slice the leading spaces
     matchLeadingSpaces() {
@@ -1272,7 +1360,7 @@ function extractLinkFromHtml(link, parent, app, isDynamic = false) {
             return { address: href, linkInfo };
         }
     }
-    else if (rel && ['prefetch', 'preload', 'prerender', 'modulepreload'].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`);
@@ -1486,7 +1574,6 @@ 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";
@@ -1535,7 +1622,6 @@ const BASE_SCOPE_WINDOW_EVENT = [
     'popstate',
     'hashchange',
     'load',
-    'beforeunload',
     'unload',
     'unmount',
     'appstate-change',
@@ -1547,6 +1633,7 @@ 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处理方式不同，需修改
@@ -1554,9 +1641,9 @@ 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;
@@ -1986,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];
@@ -2016,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);
             }
         }
@@ -2038,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');
@@ -2072,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;
 }
@@ -2250,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) {
@@ -2445,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 {
@@ -2744,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];
@@ -2765,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
@@ -2805,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:
@@ -3310,11 +3596,11 @@ function setMicroState(appName, microState, targetLocation) {
     const additionalState = {
         __MICRO_APP_STATE__: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__, {
             [appName]: {
-                fullPath: targetLocation.pathname + targetLocation.search + targetLocation.hash,
-                state: microState,
+                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);
@@ -3329,14 +3615,19 @@ function removeMicroState(appName, rawState) {
             delete rawState.__MICRO_APP_STATE__;
         }
     }
-    return assign({}, 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;
-    // rawState?.__MICRO_APP_STATE__?.[appName]?.state || (isRouterModeCustom(appName) ? rawState : null)
-    return ((_b = (_a = rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__) === null || _a === void 0 ? void 0 : _a[appName]) === null || _b === void 0 ? void 0 : _b.state) || (isRouterModeCustom(appName) ? rawState : null);
+    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;
+    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
@@ -3385,7 +3676,7 @@ function getMicroPathFromURL(appName) {
      * NOTE:
      *  1. state mode: all base on __MICRO_APP_STATE__
      *  2. pure mode: navigate by location.xxx may contain one-time information in __MICRO_APP_STATE__
-     *  3. native/scope mode: vue-router@4 will exec replaceState base on state before pushState, like:
+     *  3. native mode: vue-router@4 will exec replaceState with history.state before pushState, like:
      *    history.replaceState(
      *      assign({}, history.state, {...}),
      *      title,
@@ -3393,8 +3684,13 @@ function getMicroPathFromURL(appName) {
      *    )
      *    when base app jump to another page from child page, it will replace child path with base app path
      *   e.g: base-home --> child-home --> child-about(will replace with child-home before jump to base-home) --> base-home, when go back, it will back to child-home not child-about
-     *   So we take the fullPath as the standard
+     *   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);
 }
 /**
@@ -3590,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
@@ -3600,20 +3897,27 @@ function addHistoryListener(appName) {
         }).includes(appName) &&
             !e.onlyForBrowser) {
             /**
-             * TODO: vue-router@4 navigate async when receive popstateEvent, but child may respond to popstateEvent immediately(vue2, react), so when go back throw browser child will not unmount sync, and will respond to popstateEvent before base app, this will cause some problems
-             * __MICRO_APP_BASE_ROUTE__不可控，用户设置的值是随机的且不一定使用，用它作为判断依据太过危险
-            */
-            // const microAppWindow = appInstanceMap.get(appName)!.sandBox!.microAppWindow
-            // const rawLocation = globalEnv.rawWindow.location
-            // if (
-            //   !isRouterModeCustom(appName) ||
-            //   !microAppWindow.__MICRO_APP_BASE_ROUTE__ ||
-            //   // 主history、子hash，主、子都是hash如何处理
-            //   microAppWindow.__MICRO_APP_BASE_ROUTE__.includes('#') ||
-            //   `${rawLocation.pathname}/`.startsWith(('/' + microAppWindow.__MICRO_APP_BASE_ROUTE__).replace(/^\/+/, '/'))
-            // ) {
-            updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName));
-            // }
+             * 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);
@@ -3631,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
@@ -3747,20 +4053,16 @@ 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], targetLocation), 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');
@@ -3769,6 +4071,9 @@ function createMicroHistory(appName, microLocation) {
         return {
             pushState,
             replaceState,
+            go(delta) {
+                return rawHistory.go(delta);
+            }
         };
     }
     return new Proxy(rawHistory, {
@@ -3881,10 +4186,24 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(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), 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();
@@ -4415,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);
@@ -4432,6 +4751,20 @@ function updateMicroLocation(appName, path, microLocation, type) {
         }
         microLocation.self.href = targetHref;
     }
+    /**
+     * The native mode also base of history.state, and the modification of the browser url cannot be controlled. It is very likely that the browser url and __MICRO_APP_STATE__ are different.
+     * Especially during init of child or forward and backward of browser, because vue-router@4 will actively modify the browser URL, the above situation often occurs
+     * To solve this problem, after child app is initialized and responds to the popstateEvent, it is determined whether __MICRO_APP_STATE__ and the browser url are different. If they are different, the browser url will updated to the address of __MICRO_APP_STATE__
+     * NOTE:
+     *  1. If __MICRO_APP_STATE__ is different from the URL, then the operation of updating the URL is correct, otherwise there will be a problem of inconsistency between the URL and the rendered page
+     *  2. When there are multiple child app in native mode, if one of them changes the URL address, the other one will not change __MICRO_APP_STATE__, and refresh browser will cause problems
+     */
+    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
@@ -4515,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])
@@ -4743,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) => {
@@ -4824,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__);
@@ -4835,6 +5045,7 @@ class WithSandBox extends BaseSandbox {
                 Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
+            this.clearHijackUmdHooks();
         }
         if (--globalEnv.activeSandbox === 0) {
             releasePatchElementAndDocument();
@@ -4867,6 +5078,7 @@ class WithSandBox extends BaseSandbox {
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
             removeDomScope,
             pureCreateElement,
+            location: microAppWindow.location,
             router,
         });
     }
@@ -5148,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;
@@ -5196,9 +5447,10 @@ function patchRouter(appName, url, microAppWindow, browserHost) {
 
 const escape2RawWindowKeys = [
     'getComputedStyle',
+    // FIX ISSUE: https://github.com/micro-zoe/micro-app/issues/1292
+    'DOMParser',
     'visualViewport',
     'matchMedia',
-    // 'DOMParser',
     'ResizeObserver',
     'IntersectionObserver',
 ];
@@ -5207,7 +5459,6 @@ const escape2RawWindowRegExpKeys = [
     /mutationObserver$/i,
     /height$|width$/i,
     /offset$/i,
-    // /event$/i,
     /selection$/i,
     /^range/i,
     /^screen/i,
@@ -5220,7 +5471,7 @@ const uniqueDocumentElement = [
     'html',
     'title',
 ];
-// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (属性)
+// proxy to shadowRoot or rawDocument (property)
 const proxy2RawDocOrShadowKeys = [
     'childElementCount',
     'children',
@@ -5233,7 +5484,7 @@ const proxy2RawDocOrShadowKeys = [
     'pointerLockElement',
     'styleSheets',
 ];
-// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (方法)
+// proxy to shadowRoot or rawDocument (method)
 const proxy2RawDocOrShadowMethods = [
     'append',
     'contains',
@@ -5244,7 +5495,7 @@ const proxy2RawDocOrShadowMethods = [
     'elementsFromPoint',
     'getAnimations',
 ];
-// 直接代理到原生document上 (属性)
+// proxy to rawDocument (property)
 const proxy2RawDocumentKeys = [
     'characterSet',
     'compatMode',
@@ -5264,7 +5515,7 @@ const proxy2RawDocumentKeys = [
     'visibilityState',
     'fonts',
 ];
-// 直接代理到原生document上 (方法)
+// proxy to rawDocument (method)
 const proxy2RawDocumentMethods = [
     'execCommand',
     'createRange',
@@ -5322,6 +5573,40 @@ function patchWindowProperty$1(appName, microAppWindow) {
             }
             return false;
         });
+        /**
+         * 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) => {
@@ -5407,10 +5692,14 @@ 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) {
+        /**
+         * TODO: SCOPE_WINDOW_EVENT_OF_IFRAME的事件非常少，有可能导致问题
+         *  1、一些未知的需要绑定到iframe的事件被错误的绑定到原生window上
+         */
         return SCOPE_WINDOW_EVENT_OF_IFRAME.includes(type) ? microAppWindow : rawWindow;
     }
     // TODO: listener 是否需要绑定microAppWindow，否则函数中的this指向原生window
@@ -5432,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();
     };
@@ -5543,34 +5835,55 @@ 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;
+        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;
+        /**
+         * The child app cannot query the base element inside iframe
+         * Same for querySelectorAll
+         *
+         * Scenes:
+         *  1. vue-router@4.x --> createWebHistory(base?: string)
+         *    const baseEl = document.querySelector('base')
+         *    base = (baseEl && baseEl.getAttribute('href')) || '/'
+         *
+         * Issue: https://github.com/micro-zoe/micro-app/issues/1335
+         */
+        const result = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);
+        return result || selectors === 'base' ? result : rawMicroQuerySelector.call(microDocument, selectors);
     }
     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 || selectors === 'base' ? 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);
         }
@@ -5582,7 +5895,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);
         }
@@ -5594,12 +5907,13 @@ 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);
+            // just script, not base
         }
-        else if (/^script|base$/i.test(key)) {
+        else if (/^script$/i.test(key)) {
             return rawMicroGetElementsByTagName.call(microDocument, key);
         }
         try {
@@ -5610,7 +5924,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);
         }
@@ -5677,7 +5991,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
             enumerable: true,
             configurable: true,
             get: () => {
-                throttleDeferForSetAppName(appName);
+                throttleDeferForIframeAppName(appName);
                 return rawDocument[tagName];
             },
             set: (value) => { rawDocument[tagName] = value; },
@@ -5685,7 +5999,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;
@@ -5715,6 +6029,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') {
@@ -5835,12 +6152,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;
@@ -5848,6 +6171,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');
@@ -5865,42 +6190,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) {
@@ -5910,11 +6227,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) {
@@ -5924,7 +6241,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);
     };
@@ -5940,28 +6257,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() {
+            var _a;
             return this.__PURE_ELEMENT__ || this === microDocument
-                ? rawOwnerDocumentDesc.get.call(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);
@@ -5969,34 +6311,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) {
@@ -6015,16 +6329,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:
@@ -6057,7 +6379,7 @@ class IframeSandbox {
         this.escapeProperties = [];
         // Properties escape to rawWindow, cleared when unmount
         this.escapeKeys = new Set();
-        // 初始化和每次跳转时都要更新base的href
+        // Update the base.href when initial and each redirect
         this.updateIframeBase = () => {
             var _a;
             // origin must be child app origin
@@ -6101,9 +6423,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
@@ -6137,15 +6460,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__);
@@ -6168,6 +6482,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);
@@ -6183,6 +6498,7 @@ class IframeSandbox {
                 Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
+            this.clearHijackUmdHooks();
         }
         if (--globalEnv.activeSandbox === 0) {
             releasePatchElementAndDocument();
@@ -6401,10 +6717,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;
@@ -6421,7 +6776,6 @@ class CreateApp {
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
         this.umdHookUnmount = null;
-        this.lifeCycleState = null;
         this.umdMode = false;
         // TODO: 类型优化，加上iframe沙箱
         this.sandBox = null;
@@ -6466,7 +6820,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) {
@@ -6589,7 +6945,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) {
@@ -6603,7 +6958,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,
@@ -6612,38 +6967,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();
                         }
                     });
                 }
@@ -6653,13 +7005,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
@@ -6668,16 +7029,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) {
@@ -6691,7 +7053,7 @@ class CreateApp {
     /**
      * dispatch mounted event when app run finished
      */
-    dispatchMountedEvent() {
+    actionsAfterMounted() {
         var _a;
         if (!this.isUnmounted()) {
             this.setAppState(appStates.MOUNTED);
@@ -6703,7 +7065,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);
             /**
@@ -6726,6 +7087,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
@@ -6735,29 +7098,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
@@ -6767,8 +7113,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,
@@ -6777,7 +7131,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();
@@ -6790,7 +7149,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);
@@ -6807,20 +7166,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)
@@ -6849,7 +7221,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)) {
@@ -6891,7 +7262,7 @@ class CreateApp {
         /**
          * TODO:
          *  问题：当路由模式为custom时，keep-alive应用在重新展示，是否需要根据子应用location信息更新浏览器地址？
-         *  暂时不这么做吧，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
+         *  暂时不这么做，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
          */
         if (isRouterModeSearch(this.name)) {
             // called before lifeCyclesEvent
@@ -6901,7 +7272,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);
     }
@@ -6910,7 +7280,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
@@ -6931,8 +7300,8 @@ 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) {
@@ -6967,14 +7336,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;
@@ -6991,23 +7352,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];
@@ -7113,11 +7457,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
@@ -7134,9 +7478,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() {
@@ -7157,68 +7501,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
@@ -7235,7 +7595,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));
         }
     }
@@ -7244,31 +7604,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
@@ -7277,36 +7632,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) {
@@ -7321,6 +7659,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:
@@ -7340,52 +7696,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等操作设置的资源
@@ -7412,7 +7797,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)
@@ -7421,41 +7806,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
@@ -7474,16 +7843,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() {
@@ -7614,18 +8001,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;
@@ -7655,15 +8042,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;
@@ -7681,13 +8071,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());
             },
         });
         /**
@@ -7713,6 +8100,7 @@ function initGlobalEnv() {
             rawRootDocument,
             rawRootElement,
             rawRootNode,
+            rawDocumentFragment,
             // source/patch
             rawSetAttribute,
             rawAppendChild,
@@ -7721,6 +8109,8 @@ function initGlobalEnv() {
             rawRemoveChild,
             rawAppend,
             rawPrepend,
+            rawFragmentAppend,
+            rawFragmentPrepend,
             rawCloneNode,
             rawElementQuerySelector,
             rawElementQuerySelectorAll,
@@ -7760,7 +8150,7 @@ function initGlobalEnv() {
  * @param tagName element name
 */
 function defineElement(tagName) {
-    class MicroAppElement extends getBaseHTMLElement() {
+    class MicroAppElement extends HTMLElement {
         constructor() {
             super(...arguments);
             this.isWaiting = false;
@@ -7825,6 +8215,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);
             /**
@@ -8263,6 +8660,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
          */
@@ -8299,7 +8707,7 @@ function defineElement(tagName) {
             return this.getBaseRouteCompatible();
         }
     }
-    globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
+    window.customElements.define(tagName, MicroAppElement);
 }
 
 /**
@@ -8331,7 +8739,7 @@ function preFetch(apps, delay) {
         const delayTime = isNumber(delay) ? delay : microApp.options.prefetchDelay;
         /**
          * TODO: remove setTimeout
-         * Is there a better way?
+         * 如果要保留setTimeout，则需要考虑清空定时器的情况
          */
         setTimeout(() => {
             // releasePrefetchEffect()
@@ -8566,7 +8974,7 @@ function unmountApp(appName, options) {
             }
         }
         else {
-            logWarn(`app ${appName} does not exist`);
+            logWarn(`app ${appName} does not exist when unmountApp`);
             resolve(false);
         }
     });
@@ -8596,7 +9004,7 @@ function reload(appName, destroy) {
             }
         }
         else {
-            logWarn(`app ${appName} does not exist`);
+            logWarn(`app ${appName} does not exist when reload app`);
             resolve(false);
         }
     });
@@ -8651,20 +9059,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);
@@ -8679,7 +9073,6 @@ class MicroApp extends EventCenterForBaseApp {
         this.getAllApps = getAllApps;
         this.reload = reload;
         this.renderApp = renderApp;
-        this.getAppStatus = getAppStatus;
     }
     start(options) {
         var _a, _b;
@@ -8704,7 +9097,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)) {
@@ -8735,5 +9128,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