@micro-zoe/micro-app 1.0.0-alpha.9 → 1.0.0-beta.1

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.9';
+const version = '1.0.0-beta.1';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -7,7 +7,6 @@ const globalThis = (typeof global !== 'undefined')
     : ((typeof window !== 'undefined')
         ? window
         : ((typeof self !== 'undefined') ? self : Function('return this')()));
-const noop = () => { };
 const noopFalse = () => false;
 // Array.isArray
 const isArray = Array.isArray;
@@ -74,13 +73,50 @@ function isShadowRoot(target) {
     return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot;
 }
 function isURL(target) {
-    return target instanceof URL;
+    var _a;
+    return target instanceof URL || !!((_a = target) === null || _a === void 0 ? void 0 : _a.href);
 }
+// iframe element not instanceof base app Element, use tagName instead
 function isElement(target) {
-    return target instanceof Element;
+    var _a;
+    return target instanceof Element || isString((_a = target) === null || _a === void 0 ? void 0 : _a.tagName);
 }
+// iframe node not instanceof base app Node, use nodeType instead
 function isNode(target) {
-    return target instanceof Node;
+    var _a;
+    return target instanceof Node || isNumber((_a = target) === null || _a === void 0 ? void 0 : _a.nodeType);
+}
+function isLinkElement(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'LINK';
+}
+function isStyleElement(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'STYLE';
+}
+function isScriptElement(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'SCRIPT';
+}
+function isIFrameElement(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'IFRAME';
+}
+function isDivElement(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'DIV';
+}
+function isImageElement(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'IMG';
+}
+function isBaseElement(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'BASE';
+}
+function isMicroAppBody(target) {
+    var _a, _b;
+    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'MICRO-APP-BODY';
 }
 // is ProxyDocument
 function isProxyDocument(target) {
@@ -323,6 +359,7 @@ function pureCreateElement(tagName, options) {
 function cloneContainer(origin, target, deep) {
     target.innerHTML = '';
     if (deep) {
+        // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
         const clonedNode = origin.cloneNode(true);
         const fragment = document.createDocumentFragment();
         Array.from(clonedNode.childNodes).forEach((node) => {
@@ -335,6 +372,7 @@ function cloneContainer(origin, target, deep) {
             target.appendChild(node);
         });
     }
+    return target;
 }
 // is invalid key of querySelector
 function isInvalidQuerySelectorKey(key) {
@@ -500,12 +538,17 @@ function isInlineScript(address) {
  * @param appName app.name
  * @param args arguments
  */
-function callFnWithTryCatch(fn, appName, msgSuffix, ...args) {
+function execMicroAppGlobalHook(fn, appName, hookName, ...args) {
     try {
         isFunction(fn) && fn(...args);
     }
     catch (e) {
-        logError(`an error occurred in app ${appName} ${msgSuffix} \n`, null, e);
+        logError(`An error occurred in app ${appName} window.${hookName} \n`, null, e);
+    }
+}
+function clearDOM($dom) {
+    while ($dom === null || $dom === void 0 ? void 0 : $dom.firstChild) {
+        $dom.removeChild($dom.firstChild);
     }
 }
 
@@ -544,6 +587,11 @@ var microGlobalEvent;
     microGlobalEvent["ONMOUNT"] = "onmount";
     microGlobalEvent["ONUNMOUNT"] = "onunmount";
 })(microGlobalEvent || (microGlobalEvent = {}));
+// custom event of child app
+const microAppCustomEvent = [
+    'unmount',
+    'appstate-change',
+];
 // keep-alive status
 var keepAliveStates;
 (function (keepAliveStates) {
@@ -566,7 +614,6 @@ var MicroAppConfig;
     MicroAppConfig["HIDDEN_ROUTER"] = "hidden-router";
     MicroAppConfig["KEEP_ALIVE"] = "keep-alive";
     MicroAppConfig["CLEAR_DATA"] = "clear-data";
-    MicroAppConfig["ESMODULE"] = "esmodule";
     MicroAppConfig["SSR"] = "ssr";
     MicroAppConfig["FIBER"] = "fiber";
 })(MicroAppConfig || (MicroAppConfig = {}));
@@ -1094,9 +1141,6 @@ function dispatchOnErrorEvent(element) {
 function createSourceCenter() {
     const linkList = new Map();
     const scriptList = new Map();
-    // setInterval(() => {
-    //   console.log(linkList, scriptList)
-    // }, 10000);
     function createSourceHandler(targetList) {
         return {
             setInfo(address, info) {
@@ -1138,7 +1182,7 @@ function getExistParseCode(appName, prefix, linkInfo) {
         if (item !== appName) {
             const appSpaceData = appSpace[item];
             if (appSpaceData.parsedCode) {
-                return appSpaceData.parsedCode.replaceAll(new RegExp(createPrefix(item, true), 'g'), prefix);
+                return appSpaceData.parsedCode.replace(new RegExp(createPrefix(item, true), 'g'), prefix);
             }
         }
     }
@@ -1224,18 +1268,18 @@ function fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult) {
         const linkInfo = sourceCenter.link.getInfo(address);
         return linkInfo.code ? linkInfo.code : fetchSource(address, app.name);
     });
-    const fiberLinkTasks = app.isPrefetch || app.fiber ? [] : null;
+    const fiberLinkTasks = fiberStyleResult ? [] : null;
     promiseStream(fetchLinkPromise, (res) => {
         injectFiberTask(fiberLinkTasks, () => fetchLinkSuccess(styleList[res.index], res.data, microAppHead, app));
     }, (err) => {
         logError(err, app.name);
     }, () => {
-        if (fiberLinkTasks) {
-            /**
-             * 1. If fiberLinkTasks is not null, fiberStyleResult is not null
-             * 2. Download link source while processing style
-             * 3. Process style first, and then process link
-             */
+        /**
+         * 1. If fiberStyleResult exist, fiberLinkTasks must exist
+         * 2. Download link source while processing style
+         * 3. Process style first, and then process link
+         */
+        if (fiberStyleResult) {
             fiberStyleResult.then(() => {
                 fiberLinkTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
                 serialExecFiberTasks(fiberLinkTasks);
@@ -1369,10 +1413,10 @@ class Adapter {
             'webpackHotUpdate',
             'Vue',
         ];
-        this.injectReactHRMProperty();
+        this.injectReactHMRProperty();
     }
     // adapter for react
-    injectReactHRMProperty() {
+    injectReactHMRProperty() {
         if ((process.env.NODE_ENV !== 'production')) {
             // react child in non-react env
             this.staticEscapeProperties.push('__REACT_ERROR_OVERLAY_GLOBAL_HOOK__');
@@ -1411,13 +1455,15 @@ function fixReactHMRConflict(app) {
 /**
  * reDefine parentNode of html
  * Scenes:
- *  1. element-ui popover.js
- *     if (html.parentNode === document) ...
+ *  1. element-ui@2/lib/utils/popper.js
+ *    var parent = element.parentNode;
+ *    // root is child app window
+ *    if (parent === root.document) ...
  */
-function throttleDeferForParentNode(proxyDocument) {
+function throttleDeferForParentNode(microDocument) {
     const html = globalEnv.rawDocument.firstElementChild;
-    if (html && html.parentNode !== proxyDocument) {
-        setParentNode(html, proxyDocument);
+    if ((html === null || html === void 0 ? void 0 : html.parentNode) === globalEnv.rawDocument) {
+        setParentNode(html, microDocument);
         defer(() => {
             setParentNode(html, globalEnv.rawDocument);
         });
@@ -1437,6 +1483,72 @@ function setParentNode(target, value) {
         });
     }
 }
+// this events should be sent to the specified app
+const formatEventList = ['unmount', 'appstate-change'];
+/**
+ * Format event name
+ * @param eventName event name
+ * @param appName app name
+ */
+function formatEventName(eventName, appName) {
+    var _a;
+    if (!isIframeSandbox(appName) && (formatEventList.includes(eventName) ||
+        ((eventName === 'popstate' || eventName === 'hashchange') && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.useMemoryRouter)))) {
+        return `${eventName}-${appName}`;
+    }
+    return eventName;
+}
+/**
+ * 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 (proxyWindow && isNode(node) && !node.__MICRO_APP_NAME__) {
+        /**
+         * TODO:
+         *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
+         *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
+         *  2. with沙箱所有node设置__MICRO_APP_NAME__都使用updateElementInfo
+         *  3. 性能: defineProperty的性能肯定不如直接设置
+        */
+        rawDefineProperties(node, {
+            baseURI: {
+                configurable: true,
+                get: () => proxyWindow.location.href,
+            },
+            __MICRO_APP_NAME__: {
+                configurable: true,
+                writable: true,
+                value: appName,
+            },
+        });
+        if (isIframeSandbox(appName)) {
+            rawDefineProperty(node, 'ownerDocument', {
+                configurable: true,
+                get: () => proxyWindow.document,
+            });
+        }
+    }
+    return node;
+}
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
@@ -1447,7 +1559,7 @@ const dynamicElementInMicroAppMap = new WeakMap();
  * @param app app
  */
 function handleNewNode(parent, child, app) {
-    if (child instanceof HTMLStyleElement) {
+    if (isStyleElement(child)) {
         if (child.hasAttribute('exclude')) {
             const replaceComment = document.createComment('style element with exclude attribute ignored by micro-app');
             dynamicElementInMicroAppMap.set(child, replaceComment);
@@ -1458,7 +1570,7 @@ function handleNewNode(parent, child, app) {
         }
         return child;
     }
-    else if (child instanceof HTMLLinkElement) {
+    else if (isLinkElement(child)) {
         if (child.hasAttribute('exclude') || checkExcludeUrl(child.getAttribute('href'), app.name)) {
             const linkReplaceComment = document.createComment('link element with exclude attribute ignored by micro-app');
             dynamicElementInMicroAppMap.set(child, linkReplaceComment);
@@ -1483,7 +1595,7 @@ function handleNewNode(parent, child, app) {
         }
         return child;
     }
-    else if (child instanceof HTMLScriptElement) {
+    else if (isScriptElement(child)) {
         if (child.src &&
             isFunction(microApp.options.excludeAssetFilter) &&
             microApp.options.excludeAssetFilter(child.src)) {
@@ -1513,29 +1625,46 @@ function handleNewNode(parent, child, app) {
  * @param passiveChild second param of insertBefore and replaceChild
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
-    const hijackParent = getHijackParent(parent, app);
+    const hijackParent = getHijackParent(parent, targetChild, app);
     /**
      * If passiveChild is not the child node, insertBefore replaceChild will have a problem, at this time, it will be degraded to appendChild
      * E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
      */
     if (hijackParent) {
         /**
+         * If parentNode is <micro-app-body>, return rawDocument.body
+         * Scenes:
+         *  1. element-ui@2/lib/utils/vue-popper.js
+         *    if (this.popperElm.parentNode === document.body) ...
          * WARNING:
-         * Verifying that the parentNode of the targetChild points to document.body will cause other problems ?
+         *  1. When operate child from parentNode async, may have been unmount
+         *    e.g. target.parentNode.remove(target)
+         * ISSUE:
+         *  1. https://github.com/micro-zoe/micro-app/issues/739
+         *    Solution: Return the true value when node not in document
          */
-        if (hijackParent.tagName === 'MICRO-APP-BODY' && rawMethod !== globalEnv.rawRemoveChild) {
+        if (!isIframeSandbox(app.name) &&
+            isMicroAppBody(hijackParent) &&
+            rawMethod !== globalEnv.rawRemoveChild) {
             const descriptor = Object.getOwnPropertyDescriptor(targetChild, 'parentNode');
-            if (!descriptor || descriptor.configurable) {
-                rawDefineProperty(targetChild, 'parentNode', {
-                    configurable: true,
-                    get() {
-                        /**
-                         * When operate child from parentNode async, may have been unmount
-                         * e.g.
-                         * target.parentNode.remove(target)
-                         */
-                        return !app.container ? hijackParent : document.body;
+            if ((!descriptor || descriptor.configurable) && !targetChild.__MICRO_APP_HAS_DPN__) {
+                rawDefineProperties(targetChild, {
+                    parentNode: {
+                        configurable: true,
+                        get() {
+                            var _a, _b;
+                            const result = globalEnv.rawParentNodeDesc.get.call(this);
+                            if (isMicroAppBody(result) && app.container) {
+                                // TODO: remove getRootElementParentNode
+                                return ((_b = (_a = microApp.options).getRootElementParentNode) === null || _b === void 0 ? void 0 : _b.call(_a, this, app.name)) || document.body;
+                            }
+                            return result;
+                        },
                     },
+                    __MICRO_APP_HAS_DPN__: {
+                        configurable: true,
+                        get: () => true,
+                    }
                 });
             }
         }
@@ -1553,7 +1682,7 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             return targetChild;
         }
         if ((process.env.NODE_ENV !== 'production') &&
-            targetChild instanceof HTMLIFrameElement &&
+            isIFrameElement(targetChild) &&
             rawMethod === globalEnv.rawAppendChild) {
             fixReactHMRConflict(app);
         }
@@ -1562,13 +1691,20 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
 }
 // head/body map to micro-app-head/micro-app-body
-function getHijackParent(node, app) {
-    var _a, _b;
-    if (node === document.head) {
-        return (_a = app === null || app === void 0 ? void 0 : app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-head');
-    }
-    if (node === document.body) {
-        return (_b = app === null || app === void 0 ? void 0 : app.container) === null || _b === void 0 ? void 0 : _b.querySelector('micro-app-body');
+function getHijackParent(parent, targetChild, app) {
+    if (app) {
+        if (parent === document.head) {
+            if (app.iframe && isScriptElement(targetChild)) {
+                return app.sandBox.microHead;
+            }
+            return app.querySelector('micro-app-head');
+        }
+        if (parent === document.body || parent === document.body.parentNode) {
+            if (app.iframe && isScriptElement(targetChild)) {
+                return app.sandBox.microBody;
+            }
+            return app.querySelector('micro-app-body');
+        }
     }
     return null;
 }
@@ -1596,8 +1732,9 @@ function getMappingNode(node) {
 function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
     const currentAppName = getCurrentAppName();
     if (isNode(newChild) &&
+        !newChild.__PURE_ELEMENT__ &&
         (newChild.__MICRO_APP_NAME__ ||
-            (currentAppName && !newChild.__PURE_ELEMENT__))) {
+            currentAppName)) {
         newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
         if (app === null || app === void 0 ? void 0 : app.container) {
@@ -1625,10 +1762,10 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
             const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
                 if (parent === document.head) {
-                    return rawMethod.call(app.container.querySelector('micro-app-head'), newChild);
+                    return rawMethod.call(app.querySelector('micro-app-head'), newChild);
                 }
                 else if (parent === document.body) {
-                    return rawMethod.call(app.container.querySelector('micro-app-body'), newChild);
+                    return rawMethod.call(app.querySelector('micro-app-body'), newChild);
                 }
             }
         }
@@ -1639,7 +1776,7 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
 /**
  * Rewrite element prototype method
  */
-function patchElementPrototypeMethods() {
+function patchElementAndDocument() {
     patchDocument();
     // prototype methods of add element👇
     Element.prototype.appendChild = function appendChild(newChild) {
@@ -1688,6 +1825,71 @@ function patchElementPrototypeMethods() {
         this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
         return clonedNode;
     };
+    function getQueryTarget(node) {
+        const currentAppName = getCurrentAppName();
+        if ((node === document.body || node === document.head) && currentAppName) {
+            const app = appInstanceMap.get(currentAppName);
+            if (app === null || app === void 0 ? void 0 : app.container) {
+                if (node === document.body) {
+                    return app.querySelector('micro-app-body');
+                }
+                else if (node === document.head) {
+                    return app.querySelector('micro-app-head');
+                }
+            }
+        }
+        return null;
+    }
+    Element.prototype.querySelector = function querySelector(selectors) {
+        var _a;
+        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
+        return globalEnv.rawElementQuerySelector.call(target, selectors);
+    };
+    Element.prototype.querySelectorAll = function querySelectorAll(selectors) {
+        var _a;
+        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
+        return globalEnv.rawElementQuerySelectorAll.call(target, selectors);
+    };
+    rawDefineProperty(Element.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) {
+                    child.__MICRO_APP_NAME__ = currentAppName;
+                }
+            });
+        }
+    });
+    // Abandon this way at 2023.2.28 before v1.0.0-beta.0, it will cause vue2 throw error when render again
+    // rawDefineProperty(Node.prototype, 'parentNode', {
+    //   configurable: true,
+    //   enumerable: true,
+    //   get () {
+    //     const result = globalEnv.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)
+    //      * BUG:
+    //      *  1. vue2 umdMode, throw error when render again (<div id='app'></div> will be deleted when render again )
+    //      */
+    //     if (isMicroAppBody(result) && appInstanceMap.get(this.__MICRO_APP_NAME__)?.container) {
+    //       return document.body
+    //     }
+    //     return result
+    //   },
+    //   set: undefined,
+    // })
 }
 /**
  * Mark the newly created element in the micro application
@@ -1721,7 +1923,7 @@ function patchDocument() {
     };
     // query element👇
     function querySelector(selectors) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
@@ -1732,10 +1934,10 @@ function patchDocument() {
             rawDocument !== _this) {
             return globalEnv.rawQuerySelector.call(_this, selectors);
         }
-        return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelector(selectors)) !== null && _d !== void 0 ? _d : null;
+        return (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.querySelector(selectors)) !== null && _c !== void 0 ? _c : null;
     }
     function querySelectorAll(selectors) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
@@ -1745,7 +1947,7 @@ function patchDocument() {
             rawDocument !== _this) {
             return globalEnv.rawQuerySelectorAll.call(_this, selectors);
         }
-        return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll(selectors)) !== null && _d !== void 0 ? _d : [];
+        return (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors)) !== null && _c !== void 0 ? _c : [];
     }
     rawRootDocument.prototype.querySelector = querySelector;
     rawRootDocument.prototype.querySelectorAll = querySelectorAll;
@@ -1833,7 +2035,7 @@ function patchSetAttribute() {
             const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
             if (appName &&
                 appInstanceMap.has(appName) &&
-                (((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
+                (((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);
@@ -1855,7 +2057,7 @@ function releasePatchDocument() {
     rawRootDocument.prototype.getElementsByName = globalEnv.rawGetElementsByName;
 }
 // release patch
-function releasePatches() {
+function releasePatchElementAndDocument() {
     removeDomScope();
     releasePatchDocument();
     Element.prototype.appendChild = globalEnv.rawAppendChild;
@@ -1865,6 +2067,9 @@ function releasePatches() {
     Element.prototype.append = globalEnv.rawAppend;
     Element.prototype.prepend = globalEnv.rawPrepend;
     Element.prototype.cloneNode = globalEnv.rawCloneNode;
+    Element.prototype.querySelector = globalEnv.rawElementQuerySelector;
+    Element.prototype.querySelectorAll = globalEnv.rawElementQuerySelectorAll;
+    rawDefineProperty(Element.prototype, 'innerHTML', globalEnv.rawInnerHTMLDesc);
 }
 // exec when last child unmount
 function releasePatchSetAttribute() {
@@ -1883,16 +2088,21 @@ function rejectMicroAppStyle() {
     }
 }
 
-const globalEnv = {};
+const globalEnv = {
+    // mark current application as base application
+    __MICRO_APP_BASE_APPLICATION__: true,
+    // active sandbox count
+    activeSandbox: 0,
+};
 /**
  * Note loop nesting
  * Only prototype or unique values can be put here
  */
 function initGlobalEnv() {
     if (isBrowser) {
-        const rawWindow = Function('return window')();
-        const rawDocument = Function('return document')();
-        const rawRootDocument = Function('return Document')();
+        const rawWindow = window.rawWindow || Function('return window')();
+        const rawDocument = window.rawDocument || Function('return document')();
+        const rawRootDocument = rawWindow.Document || Function('return Document')();
         const supportModuleScript = isSupportModuleScript();
         /**
          * save patch raw methods
@@ -1906,9 +2116,14 @@ function initGlobalEnv() {
         const rawAppend = Element.prototype.append;
         const rawPrepend = Element.prototype.prepend;
         const rawCloneNode = Element.prototype.cloneNode;
+        const rawElementQuerySelector = Element.prototype.querySelector;
+        const rawElementQuerySelectorAll = Element.prototype.querySelectorAll;
+        const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
+        const rawParentNodeDesc = Object.getOwnPropertyDescriptor(Node.prototype, 'parentNode');
         const rawCreateElement = rawRootDocument.prototype.createElement;
         const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
         const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
+        const rawCreateTextNode = rawRootDocument.prototype.createTextNode;
         const rawQuerySelector = rawRootDocument.prototype.querySelector;
         const rawQuerySelectorAll = rawRootDocument.prototype.querySelectorAll;
         const rawGetElementById = rawRootDocument.prototype.getElementById;
@@ -1926,18 +2141,19 @@ function initGlobalEnv() {
          * save effect raw methods
          * pay attention to this binding, especially setInterval, setTimeout, clearInterval, clearTimeout
          */
-        const rawWindowAddEventListener = rawWindow.addEventListener;
-        const rawWindowRemoveEventListener = rawWindow.removeEventListener;
         const rawSetInterval = rawWindow.setInterval;
         const rawSetTimeout = rawWindow.setTimeout;
         const rawClearInterval = rawWindow.clearInterval;
         const rawClearTimeout = rawWindow.clearTimeout;
         const rawPushState = rawWindow.history.pushState;
         const rawReplaceState = rawWindow.history.replaceState;
+        const rawWindowAddEventListener = rawWindow.addEventListener;
+        const rawWindowRemoveEventListener = rawWindow.removeEventListener;
         const rawDocumentAddEventListener = rawDocument.addEventListener;
         const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
-        // mark current application as base application
-        window.__MICRO_APP_BASE_APPLICATION__ = true;
+        // TODO: 统一使用 EventTarget 去掉上面四个
+        const rawAddEventListener = EventTarget.prototype.addEventListener;
+        const rawRemoveEventListener = EventTarget.prototype.removeEventListener;
         assign(globalEnv, {
             // common global vars
             rawWindow,
@@ -1953,9 +2169,14 @@ function initGlobalEnv() {
             rawAppend,
             rawPrepend,
             rawCloneNode,
+            rawElementQuerySelector,
+            rawElementQuerySelectorAll,
+            rawInnerHTMLDesc,
+            rawParentNodeDesc,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
+            rawCreateTextNode,
             rawQuerySelector,
             rawQuerySelectorAll,
             rawGetElementById,
@@ -1974,6 +2195,8 @@ function initGlobalEnv() {
             rawDocumentRemoveEventListener,
             rawPushState,
             rawReplaceState,
+            rawAddEventListener,
+            rawRemoveEventListener,
         });
         // global effect
         rejectMicroAppStyle();
@@ -1983,7 +2206,7 @@ function initGlobalEnv() {
 const scriptTypes = ['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'];
 // whether use type='module' script
 function isTypeModule(app, scriptInfo) {
-    return scriptInfo.appSpace[app.name].module && (!app.useSandbox || app.esmodule);
+    return scriptInfo.appSpace[app.name].module && (!app.useSandbox || app.iframe);
 }
 // special script element
 function isSpecialScript(app, scriptInfo) {
@@ -2002,11 +2225,17 @@ function isInlineMode(app, scriptInfo) {
     return (app.inline ||
         scriptInfo.appSpace[app.name].inline ||
         isTypeModule(app, scriptInfo) ||
-        isSpecialScript(app, scriptInfo));
+        isSpecialScript(app, scriptInfo) ||
+        app.iframe);
+}
+// TODO: iframe重新插入window前后不一致，通过iframe Function创建的函数无法复用
+function getEffectWindow(app) {
+    return app.iframe ? app.sandBox.microAppWindow : globalEnv.rawWindow;
 }
 // Convert string code to function
-function code2Function(code) {
-    return new Function(code);
+function code2Function(app, code) {
+    const targetWindow = getEffectWindow(app);
+    return new targetWindow.Function(code);
 }
 /**
  * If the appSpace of the current js address has other app, try to reuse parsedFunction of other app
@@ -2014,10 +2243,10 @@ function code2Function(code) {
  * @param scriptInfo scriptInfo of current address
  * @param currentCode pure code of current address
  */
-function getExistParseResult(appName, scriptInfo, currentCode) {
+function getExistParseResult(app, scriptInfo, currentCode) {
     const appSpace = scriptInfo.appSpace;
     for (const item in appSpace) {
-        if (item !== appName) {
+        if (item !== app.name) {
             const appSpaceData = appSpace[item];
             if (appSpaceData.parsedCode === currentCode && appSpaceData.parsedFunction) {
                 return appSpaceData.parsedFunction;
@@ -2030,7 +2259,7 @@ function getExistParseResult(appName, scriptInfo, currentCode) {
  * @returns parsedFunction
  */
 function getParsedFunction(app, scriptInfo, parsedCode) {
-    return getExistParseResult(app.name, scriptInfo, parsedCode) || code2Function(parsedCode);
+    return getExistParseResult(app, scriptInfo, parsedCode) || code2Function(app, parsedCode);
 }
 // Prevent randomly created strings from repeating
 function getUniqueNonceSrc() {
@@ -2054,6 +2283,9 @@ function setConvertScriptAttr(convertScript, attrs) {
 function isWrapInSandBox(app, scriptInfo) {
     return app.useSandbox && !isTypeModule(app, scriptInfo);
 }
+function getSandboxType(app, scriptInfo) {
+    return isWrapInSandBox(app, scriptInfo) ? app.iframe ? 'iframe' : 'with' : 'disable';
+}
 /**
  * Extract script elements
  * @param script script element
@@ -2062,6 +2294,7 @@ function isWrapInSandBox(app, scriptInfo) {
  * @param isDynamic dynamic insert
  */
 function extractScriptElement(script, parent, app, isDynamic = false) {
+    var _a;
     let replaceComment = null;
     let src = script.getAttribute('src');
     if (src)
@@ -2073,6 +2306,10 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         !scriptTypes.includes(script.type)) ||
         script.hasAttribute('ignore') ||
         checkIgnoreUrl(src, app.name)) {
+        // 配置为忽略的脚本，清空 rawDocument.currentScript，避免被忽略的脚本内获取 currentScript 出错
+        if ((_a = globalEnv.rawDocument) === null || _a === void 0 ? void 0 : _a.currentScript) {
+            delete globalEnv.rawDocument.currentScript;
+        }
         return null;
     }
     else if ((globalEnv.supportModuleScript && script.noModule) ||
@@ -2268,13 +2505,13 @@ function fetchScriptSuccess(address, scriptInfo, code, app) {
          */
         if (!appSpaceData.parsedCode) {
             appSpaceData.parsedCode = bindScope(address, app, code, scriptInfo);
-            appSpaceData.wrapInSandBox = isWrapInSandBox(app, scriptInfo);
+            appSpaceData.sandboxType = getSandboxType(app, scriptInfo);
             if (!isInlineMode(app, scriptInfo)) {
                 try {
                     appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
                 }
                 catch (err) {
-                    logWarn('Something went wrong while handling preloaded resources', app.name, '\n', err);
+                    logError('Something went wrong while handling preloaded resources', app.name, '\n', err);
                 }
             }
         }
@@ -2295,7 +2532,8 @@ function execScripts(app, initHook) {
         const appSpaceData = scriptInfo.appSpace[app.name];
         // Notice the second render
         if (appSpaceData.defer || appSpaceData.async) {
-            if (scriptInfo.isExternal && !scriptInfo.code) {
+            // TODO: defer和module彻底分开，不要混在一起
+            if (scriptInfo.isExternal && !scriptInfo.code && !(app.iframe && appSpaceData.module)) {
                 deferScriptPromise.push(fetchSource(address, app.name));
             }
             else {
@@ -2320,7 +2558,7 @@ function execScripts(app, initHook) {
             logError(err, app.name);
         }, () => {
             deferScriptInfo.forEach(([address, scriptInfo]) => {
-                if (scriptInfo.code) {
+                if (isString(scriptInfo.code)) {
                     injectFiberTask(fiberScriptTasks, () => {
                         runScript(address, app, scriptInfo, initHook);
                         !isTypeModule(app, scriptInfo) && initHook(false);
@@ -2364,20 +2602,19 @@ 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];
-        const wrapInSandBox = isWrapInSandBox(app, scriptInfo);
+        const sandboxType = getSandboxType(app, scriptInfo);
         /**
          * NOTE:
          * 1. plugins and wrapCode will only be executed once
          * 2. if parsedCode not exist, parsedFunction is not exist
          * 3. if parsedCode exist, parsedFunction does not necessarily exist
          */
-        if (!appSpaceData.parsedCode || appSpaceData.wrapInSandBox !== wrapInSandBox) {
+        if (!appSpaceData.parsedCode || appSpaceData.sandboxType !== sandboxType) {
             appSpaceData.parsedCode = bindScope(address, app, scriptInfo.code, scriptInfo);
-            appSpaceData.wrapInSandBox = wrapInSandBox;
+            appSpaceData.sandboxType = sandboxType;
             appSpaceData.parsedFunction = null;
         }
         if (isInlineMode(app, scriptInfo)) {
@@ -2385,7 +2622,8 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
             runCode2InlineScript(address, appSpaceData.parsedCode, isTypeModule(app, scriptInfo), scriptElement, appSpaceData.attrs, callback);
             if (!replaceElement) {
                 // TEST IGNORE
-                (_a = app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-body').appendChild(scriptElement);
+                const parent = app.iframe ? app.sandBox.microBody : app.querySelector('micro-app-body');
+                parent === null || parent === void 0 ? void 0 : parent.appendChild(scriptElement);
             }
         }
         else {
@@ -2417,7 +2655,7 @@ function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
         runScript(address, app, scriptInfo, dispatchScriptOnLoadEvent, replaceElement);
         !isTypeModule(app, scriptInfo) && dispatchScriptOnLoadEvent();
     };
-    if (scriptInfo.code) {
+    if (scriptInfo.code || (app.iframe && scriptInfo.appSpace[app.name].module)) {
         defer(runDynamicScript);
     }
     else {
@@ -2464,6 +2702,9 @@ function runCode2InlineScript(address, code, module, scriptElement, attrs, callb
         scriptElement.setAttribute('type', 'module');
         if (callback) {
             callback.moduleCount && callback.moduleCount--;
+            /**
+             * module script will execute onload method only after it insert to document/iframe
+             */
             scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
         }
     }
@@ -2478,7 +2719,7 @@ function runParsedFunction(app, scriptInfo) {
     if (!appSpaceData.parsedFunction) {
         appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
     }
-    appSpaceData.parsedFunction.call(window);
+    appSpaceData.parsedFunction.call(getEffectWindow(app));
 }
 /**
  * bind js scope
@@ -2487,12 +2728,12 @@ function runParsedFunction(app, scriptInfo) {
  * @param scriptInfo source script info
  */
 function bindScope(address, app, code, scriptInfo) {
-    // TODO: cache
+    // TODO: 1、cache 2、esm code is null
     if (isPlainObject(microApp.options.plugins)) {
         code = usePlugins(address, code, app.name, microApp.options.plugins);
     }
     if (isWrapInSandBox(app, scriptInfo)) {
-        return `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
+        return app.iframe ? `(function(window,self,global,location){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyLocation);` : `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
     }
     return code;
 }
@@ -2555,7 +2796,7 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
         flatChildren(child, app, microAppHead, fiberStyleTasks);
     });
     for (const dom of children) {
-        if (dom instanceof HTMLLinkElement) {
+        if (isLinkElement(dom)) {
             if (dom.hasAttribute('exclude') || checkExcludeUrl(dom.getAttribute('href'), app.name)) {
                 parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
             }
@@ -2566,7 +2807,7 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
                 dom.setAttribute('href', CompletionPath(dom.getAttribute('href'), app.url));
             }
         }
-        else if (dom instanceof HTMLStyleElement) {
+        else if (isStyleElement(dom)) {
             if (dom.hasAttribute('exclude')) {
                 parent.replaceChild(document.createComment('style element with exclude attribute ignored by micro-app'), dom);
             }
@@ -2574,10 +2815,10 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
                 injectFiberTask(fiberStyleTasks, () => scopedCSS(dom, app));
             }
         }
-        else if (dom instanceof HTMLScriptElement) {
+        else if (isScriptElement(dom)) {
             extractScriptElement(dom, parent, app);
         }
-        else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
+        else if (isImageElement(dom) && dom.hasAttribute('src')) {
             dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
         }
         /**
@@ -2600,8 +2841,8 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
  */
 function extractSourceDom(htmlStr, app) {
     const wrapElement = getWrapElement(htmlStr);
-    const microAppHead = wrapElement.querySelector('micro-app-head');
-    const microAppBody = wrapElement.querySelector('micro-app-body');
+    const microAppHead = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-head');
+    const microAppBody = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-body');
     if (!microAppHead || !microAppBody) {
         const msg = `element ${microAppHead ? 'body' : 'head'} is missing`;
         app.onerror(new Error(msg));
@@ -2802,7 +3043,7 @@ const eventCenter = new EventCenter();
  * @param appName app.name
  * @param fromBaseApp is from base app
  */
-function formatEventName(appName, fromBaseApp) {
+function createEventName(appName, fromBaseApp) {
     if (!isString(appName) || !appName)
         return '';
     return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
@@ -2881,7 +3122,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
      */
     addDataListener(appName, cb, autoTrigger) {
-        eventCenter.on(formatEventName(formatAppName(appName), false), cb, autoTrigger);
+        eventCenter.on(createEventName(formatAppName(appName), false), cb, autoTrigger);
     }
     /**
      * remove listener
@@ -2889,7 +3130,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param cb listener
      */
     removeDataListener(appName, cb) {
-        isFunction(cb) && eventCenter.off(formatEventName(formatAppName(appName), false), cb);
+        isFunction(cb) && eventCenter.off(createEventName(formatAppName(appName), false), cb);
     }
     /**
      * get data from micro app or base app
@@ -2897,7 +3138,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param fromBaseApp whether get data from base app, default is false
      */
     getData(appName, fromBaseApp = false) {
-        return eventCenter.getData(formatEventName(formatAppName(appName), fromBaseApp));
+        return eventCenter.getData(createEventName(formatAppName(appName), fromBaseApp));
     }
     /**
      * Dispatch data to the specified micro app
@@ -2905,7 +3146,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param data data
      */
     setData(appName, data, nextStep, force) {
-        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data, (resArr) => isFunction(nextStep) && nextStep(resArr), force);
+        eventCenter.dispatch(createEventName(formatAppName(appName), true), data, (resArr) => isFunction(nextStep) && nextStep(resArr), force);
     }
     forceSetData(appName, data, nextStep) {
         this.setData(appName, data, nextStep, true);
@@ -2916,14 +3157,14 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param fromBaseApp whether clear data from child app, default is true
      */
     clearData(appName, fromBaseApp = true) {
-        eventCenter.clearData(formatEventName(formatAppName(appName), fromBaseApp));
+        eventCenter.clearData(createEventName(formatAppName(appName), fromBaseApp));
     }
     /**
      * clear all listener for specified micro app
      * @param appName app.name
      */
     clearDataListener(appName) {
-        eventCenter.off(formatEventName(formatAppName(appName), false));
+        eventCenter.off(createEventName(formatAppName(appName), false));
     }
 }
 // Event center for sub app
@@ -2940,20 +3181,20 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
      */
     addDataListener(cb, autoTrigger) {
         cb.__AUTO_TRIGGER__ = autoTrigger;
-        eventCenter.on(formatEventName(this.appName, true), cb, autoTrigger);
+        eventCenter.on(createEventName(this.appName, true), cb, autoTrigger);
     }
     /**
      * remove listener
      * @param cb listener
      */
     removeDataListener(cb) {
-        isFunction(cb) && eventCenter.off(formatEventName(this.appName, true), cb);
+        isFunction(cb) && eventCenter.off(createEventName(this.appName, true), cb);
     }
     /**
      * get data from base app
      */
     getData(fromBaseApp = true) {
-        return eventCenter.getData(formatEventName(this.appName, fromBaseApp));
+        return eventCenter.getData(createEventName(this.appName, fromBaseApp));
     }
     /**
      * dispatch data to base app
@@ -2961,12 +3202,12 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
      */
     dispatch(data, nextStep, force) {
         removeDomScope();
-        eventCenter.dispatch(formatEventName(this.appName, false), data, (resArr) => isFunction(nextStep) && nextStep(resArr), force, () => {
+        eventCenter.dispatch(createEventName(this.appName, false), data, (resArr) => isFunction(nextStep) && nextStep(resArr), force, () => {
             const app = appInstanceMap.get(this.appName);
             if ((app === null || app === void 0 ? void 0 : app.container) && isPlainObject(data)) {
                 const event = new CustomEvent('datachange', {
                     detail: {
-                        data: eventCenter.getData(formatEventName(this.appName, false))
+                        data: eventCenter.getData(createEventName(this.appName, false))
                     }
                 });
                 getRootContainer(app.container).dispatchEvent(event);
@@ -2981,33 +3222,35 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
      * @param fromBaseApp whether clear data from base app, default is false
      */
     clearData(fromBaseApp = false) {
-        eventCenter.clearData(formatEventName(this.appName, fromBaseApp));
+        eventCenter.clearData(createEventName(this.appName, fromBaseApp));
     }
     /**
      * clear all listeners
      */
     clearDataListener() {
-        eventCenter.off(formatEventName(this.appName, true));
+        eventCenter.off(createEventName(this.appName, true));
     }
 }
 /**
  * Record UMD function before exec umdHookMount
- * @param microAppEventCenter
+ * NOTE: record maybe call twice when unmount prerender, keep-alive app manually with umd mode
+ * @param microAppEventCenter instance of EventCenterForMicroApp
  */
 function recordDataCenterSnapshot(microAppEventCenter) {
-    const appName = microAppEventCenter.appName;
-    microAppEventCenter.umdDataListeners = { global: new Set(), normal: new Set() };
-    const globalEventInfo = eventCenter.eventList.get('global');
-    if (globalEventInfo) {
-        for (const cb of globalEventInfo.callbacks) {
-            if (appName === cb.__APP_NAME__) {
-                microAppEventCenter.umdDataListeners.global.add(cb);
+    if (microAppEventCenter && !microAppEventCenter.umdDataListeners) {
+        microAppEventCenter.umdDataListeners = { global: new Set(), normal: new Set() };
+        const globalEventInfo = eventCenter.eventList.get('global');
+        if (globalEventInfo) {
+            for (const cb of globalEventInfo.callbacks) {
+                if (microAppEventCenter.appName === cb.__APP_NAME__) {
+                    microAppEventCenter.umdDataListeners.global.add(cb);
+                }
             }
         }
-    }
-    const subAppEventInfo = eventCenter.eventList.get(formatEventName(appName, true));
-    if (subAppEventInfo) {
-        microAppEventCenter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
+        const subAppEventInfo = eventCenter.eventList.get(createEventName(microAppEventCenter.appName, true));
+        if (subAppEventInfo) {
+            microAppEventCenter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
+        }
     }
 }
 /**
@@ -3015,13 +3258,24 @@ function recordDataCenterSnapshot(microAppEventCenter) {
  * @param microAppEventCenter instance of EventCenterForMicroApp
  */
 function rebuildDataCenterSnapshot(microAppEventCenter) {
-    for (const cb of microAppEventCenter.umdDataListeners.global) {
-        microAppEventCenter.addGlobalDataListener(cb, cb.__AUTO_TRIGGER__);
-    }
-    for (const cb of microAppEventCenter.umdDataListeners.normal) {
-        microAppEventCenter.addDataListener(cb, cb.__AUTO_TRIGGER__);
+    // in withSandbox preRender mode with module script, umdDataListeners maybe undefined
+    if (microAppEventCenter === null || microAppEventCenter === void 0 ? void 0 : microAppEventCenter.umdDataListeners) {
+        for (const cb of microAppEventCenter.umdDataListeners.global) {
+            microAppEventCenter.addGlobalDataListener(cb, cb.__AUTO_TRIGGER__);
+        }
+        for (const cb of microAppEventCenter.umdDataListeners.normal) {
+            microAppEventCenter.addDataListener(cb, cb.__AUTO_TRIGGER__);
+        }
+        resetDataCenterSnapshot(microAppEventCenter);
     }
 }
+/**
+ * delete umdDataListeners from microAppEventCenter
+ * @param microAppEventCenter instance of EventCenterForMicroApp
+ */
+function resetDataCenterSnapshot(microAppEventCenter) {
+    delete microAppEventCenter.umdDataListeners;
+}
 
 // 管理 app 的单例
 class AppManager {
@@ -3084,12 +3338,12 @@ function isConstructorFunction(value) {
     return value.__MICRO_APP_IS_CONSTRUCTOR__ = isConstructor(value);
 }
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawObject(rawObject, value, key = 'WINDOW') {
-    const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
-    if (value[cacheKey])
-        return value[cacheKey];
-    if (!isConstructorFunction(value) && !isBoundedFunction(value)) {
-        const bindRawObjectValue = value.bind(rawObject);
+function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
+    if (isFunction(value) && !isConstructorFunction(value) && !isBoundedFunction(value)) {
+        const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
+        if (value[cacheKey])
+            return value[cacheKey];
+        const bindRawObjectValue = value.bind(rawTarget);
         for (const key in value) {
             bindRawObjectValue[key] = value[key];
         }
@@ -3106,21 +3360,6 @@ function bindFunctionToRawObject(rawObject, value, key = 'WINDOW') {
     return value;
 }
 
-// this events should be sent to the specified app
-const formatEventList = ['unmount', 'appstate-change'];
-/**
- * Format event name
- * @param eventName event name
- * @param appName app name
- */
-function formatEventName$1(eventName, appName) {
-    var _a;
-    if (formatEventList.includes(eventName) ||
-        ((eventName === 'popstate' || eventName === 'hashchange') && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.useMemoryRouter))) {
-        return `${eventName}-${appName}`;
-    }
-    return eventName;
-}
 // document.onclick binding list, the binding function of each application is unique
 const documentClickListMap = new Map();
 let hasRewriteDocumentOnClick = false;
@@ -3231,7 +3470,7 @@ function effect(appName, microAppWindow) {
     const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
     // listener may be null, e.g test-passive
     microAppWindow.addEventListener = function (type, listener, options) {
-        type = formatEventName$1(type, appName);
+        type = formatEventName(type, appName);
         const listenerList = eventListenerMap.get(type);
         if (listenerList) {
             listenerList.add(listener);
@@ -3243,7 +3482,7 @@ function effect(appName, microAppWindow) {
         rawWindowAddEventListener.call(rawWindow, type, listener, options);
     };
     microAppWindow.removeEventListener = function (type, listener, options) {
-        type = formatEventName$1(type, appName);
+        type = formatEventName(type, appName);
         const listenerList = eventListenerMap.get(type);
         if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
             listenerList.delete(listener);
@@ -3270,39 +3509,32 @@ function effect(appName, microAppWindow) {
     };
     const sstWindowListenerMap = new Map();
     const sstDocumentListenerMap = new Map();
-    let sstIntervalIdMap = new Map();
-    let sstTimeoutIdMap = new Map();
     let sstOnClickHandler;
-    const clearSnapshotData = () => {
+    // reset snapshot data
+    const reset = () => {
         sstWindowListenerMap.clear();
-        sstIntervalIdMap.clear();
-        sstTimeoutIdMap.clear();
         sstDocumentListenerMap.clear();
         sstOnClickHandler = null;
     };
     /**
-     * record event and timer
-     * Scenes:
-     * 1. exec umdMountHook in umd mode
-     * 2. hidden keep-alive app
-     * 3. after init prerender app
+     * NOTE:
+     *  1. about timer(events & properties should record & rebuild at all modes, exclude default mode)
+     *  2. record maybe call twice when unmount prerender, keep-alive app manually with umd mode
+     * 4 modes: default-mode、umd-mode、prerender、keep-alive
+     * Solution:
+     *  1. default-mode(normal): clear events & timers, not record & rebuild anything
+     *  2. umd-mode(normal): not clear timers, record & rebuild events
+     *  3. prerender/keep-alive(default, umd): not clear timers, record & rebuild events
      */
-    const recordEffect = () => {
+    const record = () => {
         // record window event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
                 sstWindowListenerMap.set(type, new Set(listenerList));
             }
         });
-        // record timers
-        if (intervalIdMap.size) {
-            sstIntervalIdMap = new Map(intervalIdMap);
-        }
-        if (timeoutIdMap.size) {
-            sstTimeoutIdMap = new Map(timeoutIdMap);
-        }
         // record onclick handler
-        sstOnClickHandler = documentClickListMap.get(appName);
+        sstOnClickHandler = sstOnClickHandler || documentClickListMap.get(appName);
         // record document event
         const documentAppListenersMap = documentEventListenerMap.get(appName);
         if (documentAppListenersMap) {
@@ -3314,20 +3546,13 @@ function effect(appName, microAppWindow) {
         }
     };
     // rebuild event and timer before remount app
-    const rebuildEffect = () => {
+    const rebuild = () => {
         // rebuild window event
         sstWindowListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
                 microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
         });
-        // rebuild timer
-        sstIntervalIdMap.forEach((info) => {
-            microAppWindow.setInterval(info.handler, info.timeout, ...info.args);
-        });
-        sstTimeoutIdMap.forEach((info) => {
-            microAppWindow.setTimeout(info.handler, info.timeout, ...info.args);
-        });
         // rebuild onclick event
         sstOnClickHandler && documentClickListMap.set(appName, sstOnClickHandler);
         /**
@@ -3341,10 +3566,10 @@ function effect(appName, microAppWindow) {
             }
         });
         removeDomScope();
-        clearSnapshotData();
+        reset();
     };
     // release all event listener & interval & timeout when unmount app
-    const releaseEffect = () => {
+    const release = ({ umdMode, isPrerender, keepAlive, destroy }) => {
         // Clear window binding events
         if (eventListenerMap.size) {
             eventListenerMap.forEach((listenerList, type) => {
@@ -3354,17 +3579,15 @@ function effect(appName, microAppWindow) {
             });
             eventListenerMap.clear();
         }
-        // Clear timers
-        if (intervalIdMap.size) {
+        // default mode(not keep-alive or isPrerender)
+        if ((!umdMode && !keepAlive && !isPrerender) || destroy) {
             intervalIdMap.forEach((_, intervalId) => {
                 rawClearInterval.call(rawWindow, intervalId);
             });
-            intervalIdMap.clear();
-        }
-        if (timeoutIdMap.size) {
             timeoutIdMap.forEach((_, timeoutId) => {
                 rawClearTimeout.call(rawWindow, timeoutId);
             });
+            intervalIdMap.clear();
             timeoutIdMap.clear();
         }
         // Clear the function bound by micro application through document.onclick
@@ -3381,9 +3604,10 @@ function effect(appName, microAppWindow) {
         }
     };
     return {
-        recordEffect,
-        rebuildEffect,
-        releaseEffect,
+        reset,
+        record,
+        rebuild,
+        release,
     };
 }
 
@@ -3578,25 +3802,29 @@ function addHistoryListener(appName) {
          * 1. unmount app & hidden keep-alive app will not receive popstate event
          * 2. filter out onlyForBrowser
          */
-        if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName) &&
+        if (getActiveApps({
+            excludeHiddenApp: true,
+            excludePreRender: true,
+        }).includes(appName) &&
             !e.onlyForBrowser) {
             const microPath = getMicroPathFromURL(appName);
             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 microPath is empty
             if (microPath) {
                 const oldHash = proxyWindow.location.hash;
-                updateMicroLocation(appName, microPath, proxyWindow.location);
+                updateMicroLocation(appName, microPath, microAppWindow.location);
                 isHashChange = proxyWindow.location.hash !== oldHash;
             }
             // dispatch formatted popStateEvent to child
-            dispatchPopStateEventToMicroApp(appName, proxyWindow);
+            dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
             // dispatch formatted hashChangeEvent to child when hash change
             if (isHashChange)
-                dispatchHashChangeEventToMicroApp(appName, proxyWindow, oldHref);
+                dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
             // clear element scope before trigger event of next app
             removeDomScope();
         }
@@ -3612,10 +3840,9 @@ function addHistoryListener(appName) {
  * @param proxyWindow sandbox window
  * @param eventState history.state
  */
-function dispatchPopStateEventToMicroApp(appName, proxyWindow) {
-    // create PopStateEvent named popstate-appName with sub app state
-    const newPopStateEvent = new PopStateEvent(formatEventName$1('popstate', appName), { state: getMicroState(appName) });
+function dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow) {
     /**
+     * TODO: test
      * angular14 takes e.type as type judgment
      * when e.type is popstate-appName popstate event will be invalid
      */
@@ -3625,7 +3852,14 @@ function dispatchPopStateEventToMicroApp(appName, proxyWindow) {
     //   configurable: true,
     //   enumerable: true,
     // })
-    globalEnv.rawWindow.dispatchEvent(newPopStateEvent);
+    // create PopStateEvent named popstate-appName with sub app state
+    const newPopStateEvent = new PopStateEvent(formatEventName('popstate', appName), { state: getMicroState(appName) });
+    if (isIframeSandbox(appName)) {
+        microAppWindow.dispatchEvent(newPopStateEvent);
+    }
+    else {
+        globalEnv.rawWindow.dispatchEvent(newPopStateEvent);
+    }
     // call function window.onpopstate if it exists
     isFunction(proxyWindow.onpopstate) && proxyWindow.onpopstate(newPopStateEvent);
 }
@@ -3635,12 +3869,17 @@ function dispatchPopStateEventToMicroApp(appName, proxyWindow) {
  * @param proxyWindow sandbox window
  * @param oldHref old href
  */
-function dispatchHashChangeEventToMicroApp(appName, proxyWindow, oldHref) {
-    const newHashChangeEvent = new HashChangeEvent(formatEventName$1('hashchange', appName), {
+function dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref) {
+    const newHashChangeEvent = new HashChangeEvent(formatEventName('hashchange', appName), {
         newURL: proxyWindow.location.href,
         oldURL: oldHref,
     });
-    globalEnv.rawWindow.dispatchEvent(newHashChangeEvent);
+    if (isIframeSandbox(appName)) {
+        microAppWindow.dispatchEvent(newHashChangeEvent);
+    }
+    else {
+        globalEnv.rawWindow.dispatchEvent(newHashChangeEvent);
+    }
     // call function window.onhashchange if it exists
     isFunction(proxyWindow.onhashchange) && proxyWindow.onhashchange(newHashChangeEvent);
 }
@@ -3692,22 +3931,26 @@ function createMicroHistory(appName, microLocation) {
     const rawHistory = globalEnv.rawWindow.history;
     function getMicroHistoryMethod(methodName) {
         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);
-                if (targetLocation.origin === microLocation.origin) {
-                    navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
-                    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                    if (targetFullPath !== microLocation.fullPath) {
-                        updateMicroLocation(appName, targetFullPath, microLocation);
-                    }
-                    return void 0;
+                const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
+                navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
+                if (targetFullPath !== microLocation.fullPath) {
+                    updateMicroLocation(appName, targetFullPath, microLocation);
                 }
+                (_c = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : (_b = _a.sandBox).updateIframeBase) === null || _c === void 0 ? void 0 : _c.call(_b);
+            }
+            else {
+                nativeHistoryNavigate(appName, methodName, rests[2], rests[0], rests[1]);
             }
-            nativeHistoryNavigate(appName, methodName, rests[2], rests[0], rests[1]);
         };
     }
     const pushState = getMicroHistoryMethod('pushState');
     const replaceState = getMicroHistoryMethod('replaceState');
+    if (isIframeSandbox(appName))
+        return { pushState, replaceState };
     return new Proxy(rawHistory, {
         get(target, key) {
             if (key === 'state') {
@@ -3719,8 +3962,7 @@ function createMicroHistory(appName, microLocation) {
             else if (key === 'replaceState') {
                 return replaceState;
             }
-            const rawValue = Reflect.get(target, key);
-            return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'HISTORY') : rawValue;
+            return bindFunctionToRawTarget(Reflect.get(target, key), target, 'HISTORY');
         },
         set(target, key, value) {
             Reflect.set(target, key, value);
@@ -3765,6 +4007,7 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
     if (isEffectiveApp(appName)) {
         const rawLocation = globalEnv.rawWindow.location;
         const oldFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
+        // oldHref use for hashChangeEvent of base app
         const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
         // navigate with native history method
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
@@ -3873,8 +4116,9 @@ function createRouterApi() {
                     const microLocation = app.sandBox.proxyWindow.location;
                     const targetLocation = createURL(to.path, microLocation.href);
                     // Only get path data, even if the origin is different from microApp
+                    const currentFullPath = microLocation.pathname + microLocation.search + microLocation.hash;
                     const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                    if (microLocation.fullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
+                    if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
                         const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
                         navigateWithRawHistory(appName, methodName, targetLocation, to.state);
                     }
@@ -4023,8 +4267,7 @@ function createRouterApi() {
                 baseRouterProxy = new Proxy(baseRouter, {
                     get(target, key) {
                         removeDomScope();
-                        const rawValue = Reflect.get(target, key);
-                        return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'BASEROUTER') : rawValue;
+                        return bindFunctionToRawTarget(Reflect.get(target, key), target, 'BASEROUTER');
                     },
                     set(target, key, value) {
                         Reflect.set(target, key, value);
@@ -4052,9 +4295,118 @@ function createRouterApi() {
 }
 const { router, executeNavigationGuard, clearRouterWhenUnmount, } = createRouterApi();
 
-const shadowLocationKeys = ['href', 'pathname', 'search', 'hash'];
+const escape2RawWindowKeys = [
+    'getComputedStyle',
+    'visualViewport',
+    'matchMedia',
+    // 'DOMParser',
+    'ResizeObserver',
+    'IntersectionObserver',
+];
+const escape2RawWindowRegExpKeys = [
+    /animationFrame$/i,
+    /mutationObserver$/i,
+    /height$|width$/i,
+    /offset$/i,
+    // /event$/i,
+    /^screen/i,
+    /^scroll/i,
+    /X$|Y$/,
+];
+const scopeIframeWindowOnEvent = [
+    'onload',
+    'onbeforeunload',
+    'onunload',
+];
+const scopeIframeWindowEvent = [
+    'hashchange',
+    'popstate',
+    'DOMContentLoaded',
+    'load',
+    'beforeunload',
+    'unload',
+].concat(microAppCustomEvent);
+const scopeIframeDocumentEvent = [
+    'DOMContentLoaded',
+    'readystatechange',
+];
+const scopeIframeDocumentOnEvent = [
+    'onreadystatechange',
+];
+const uniqueDocumentElement = [
+    'body',
+    'head',
+    'html',
+    'title',
+];
+const hijackMicroLocationKeys = [
+    'host',
+    'hostname',
+    'port',
+    'protocol',
+    'origin',
+];
+// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (属性)
+const proxy2RawDocOrShadowKeys = [
+    'childElementCount',
+    'children',
+    'firstElementChild',
+    'firstChild',
+    'lastElementChild',
+    'activeElement',
+    'fullscreenElement',
+    'pictureInPictureElement',
+    'pointerLockElement',
+    'styleSheets',
+];
+// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (方法)
+const proxy2RawDocOrShadowMethods = [
+    'append',
+    'contains',
+    'replaceChildren',
+    'getSelection',
+    'elementFromPoint',
+    'elementsFromPoint',
+    'getAnimations',
+];
+// 直接代理到原生document上 (属性)
+const proxy2RawDocumentKeys = [
+    'characterSet',
+    'compatMode',
+    'contentType',
+    'designMode',
+    'dir',
+    'doctype',
+    'embeds',
+    'fullscreenEnabled',
+    'hidden',
+    'implementation',
+    'lastModified',
+    'pictureInPictureEnabled',
+    'plugins',
+    'readyState',
+    'referrer',
+    'visibilityState',
+    'fonts',
+];
+// 直接代理到原生document上 (方法)
+const proxy2RawDocumentMethods = [
+    'execCommand',
+    'createRange',
+    'exitFullscreen',
+    'exitPictureInPicture',
+    'getElementsByTagNameNS',
+    'hasFocus',
+    'prepend',
+];
+const globalPropertyList = [
+    'window',
+    'self',
+    'globalThis'
+];
+
 // origin is readonly, so we ignore when updateMicroLocation
-const locationKeys = [...shadowLocationKeys, 'host', 'hostname', 'port', 'protocol', 'search'];
+const locationKeys = ['href', 'pathname', 'search', 'hash', 'host', 'hostname', 'port', 'protocol', 'search'];
 // origin, fullPath is necessary for guardLocation
 const guardLocationKeys = [...locationKeys, 'origin', 'fullPath'];
 /**
@@ -4062,19 +4414,27 @@ const guardLocationKeys = [...locationKeys, 'origin', 'fullPath'];
  * MDN https://developer.mozilla.org/en-US/docs/Web/API/Location
  * @param appName app name
  * @param url app url
+ * @param microAppWindow iframeWindow, iframe only
+ * @param childStaticLocation real child location info, iframe only
+ * @param browserHost host of browser, iframe only
+ * @param childHost host of child app, iframe only
  */
-function createMicroLocation(appName, url) {
+function createMicroLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost) {
     const rawWindow = globalEnv.rawWindow;
     const rawLocation = rawWindow.location;
-    // microLocation is the location of child app, it is globally unique
-    const microLocation = createURL(url);
-    // shadowLocation is the current location information (href, pathname, search, hash)
-    const shadowLocation = {
-        href: microLocation.href,
-        pathname: microLocation.pathname,
-        search: microLocation.search,
-        hash: microLocation.hash,
-    };
+    const isIframe = !!microAppWindow;
+    /**
+     * withLocation is microLocation for with sandbox
+     * it is globally unique for child app
+     */
+    const withLocation = createURL(url);
+    /**
+     * In iframe, jump through raw iframeLocation will cause microAppWindow.location reset
+     * So we get location dynamically
+     */
+    function getTarget() {
+        return isIframe ? microAppWindow.location : withLocation;
+    }
     /**
      * Common handler for href, assign, replace
      * It is mainly used to deal with special scenes about hash
@@ -4082,10 +4442,10 @@ function createMicroLocation(appName, url) {
      * @param methodName pushState/replaceState
      * @returns origin value or formatted value
      */
-    const commonHandler = (value, methodName) => {
-        const targetLocation = createURL(value, microLocation.href);
+    function commonHandler(value, methodName) {
+        const targetLocation = createURL(value, proxyLocation.href);
         // Even if the origin is the same, developers still have the possibility of want to jump to a new page
-        if (targetLocation.origin === microLocation.origin) {
+        if (targetLocation.origin === proxyLocation.origin) {
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
             /**
              * change hash with location.href will not trigger the browser reload
@@ -4094,10 +4454,10 @@ function createMicroLocation(appName, url) {
              *    1. if child app only change hash, it should not trigger browser reload
              *    2. if address is same and has hash, it should not add route stack
              */
-            if (targetLocation.pathname === shadowLocation.pathname &&
-                targetLocation.search === shadowLocation.search) {
+            if (targetLocation.pathname === proxyLocation.pathname &&
+                targetLocation.search === proxyLocation.search) {
                 let oldHref = null;
-                if (targetLocation.hash !== shadowLocation.hash) {
+                if (targetLocation.hash !== proxyLocation.hash) {
                     if (setMicroPathResult.isAttach2Hash)
                         oldHref = rawLocation.href;
                     nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
@@ -4106,35 +4466,22 @@ function createMicroLocation(appName, url) {
                     dispatchNativeEvent(appName, false, oldHref);
                 }
                 else {
-                    rawReload();
+                    reload();
                 }
                 return void 0;
                 /**
                  * when baseApp is hash router, address change of child can not reload browser
-                 * so we imitate behavior of browser (reload)
+                 * so we imitate behavior of browser (reload) manually
                  */
             }
             else if (setMicroPathResult.isAttach2Hash) {
                 nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
-                rawReload();
+                reload();
                 return void 0;
             }
-            value = setMicroPathResult.fullPath;
+            return setMicroPathResult.fullPath;
         }
         return value;
-    };
-    /**
-     * create location PropertyDescriptor (href, pathname, search, hash)
-     * @param key property name
-     * @param setter setter of location property
-     */
-    function createPropertyDescriptor(getter, setter) {
-        return {
-            enumerable: true,
-            configurable: true,
-            get: getter,
-            set: setter,
-        };
     }
     /**
      * common handler for location.pathname & location.search
@@ -4144,7 +4491,7 @@ function createMicroLocation(appName, url) {
     function handleForPathNameAndSearch(targetPath, key) {
         const targetLocation = createURL(targetPath, url);
         // When the browser url has a hash value, the same pathname/search will not refresh browser
-        if (targetLocation[key] === shadowLocation[key] && shadowLocation.hash) {
+        if (targetLocation[key] === proxyLocation[key] && proxyLocation.hash) {
             // The href has not changed, not need to dispatch hashchange event
             dispatchNativeEvent(appName, false);
         }
@@ -4155,58 +4502,96 @@ function createMicroLocation(appName, url) {
              * pathname: /path ==> /path#hash, /path ==> /path?query
              * search: ?query ==> ?query#hash
              */
-            nativeHistoryNavigate(appName, targetLocation[key] === shadowLocation[key] ? 'replaceState' : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath);
-            rawReload();
+            nativeHistoryNavigate(appName, targetLocation[key] === proxyLocation[key] ? 'replaceState' : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath);
+            reload();
         }
     }
-    function rawReload() {
-        isEffectiveApp(appName) && rawLocation.reload();
-    }
-    /**
-     * Special processing for four keys: href, pathname, search and hash
-     * They take values from shadowLocation, and require special operations when assigning values
-     */
-    rawDefineProperties(microLocation, {
-        href: createPropertyDescriptor(() => shadowLocation.href, (value) => {
-            if (isEffectiveApp(appName)) {
-                const targetPath = commonHandler(value, 'pushState');
-                if (targetPath)
-                    rawLocation.href = targetPath;
-            }
-        }),
-        pathname: createPropertyDescriptor(() => shadowLocation.pathname, (value) => {
-            const targetPath = ('/' + value).replace(/^\/+/, '/') + shadowLocation.search + shadowLocation.hash;
-            handleForPathNameAndSearch(targetPath, 'pathname');
-        }),
-        search: createPropertyDescriptor(() => shadowLocation.search, (value) => {
-            const targetPath = shadowLocation.pathname + ('?' + value).replace(/^\?+/, '?') + shadowLocation.hash;
-            handleForPathNameAndSearch(targetPath, 'search');
-        }),
-        hash: createPropertyDescriptor(() => shadowLocation.hash, (value) => {
-            const targetPath = shadowLocation.pathname + shadowLocation.search + ('#' + value).replace(/^#+/, '#');
-            const targetLocation = createURL(targetPath, url);
-            // The same hash will not trigger popStateEvent
-            if (targetLocation.hash !== shadowLocation.hash) {
-                navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
-            }
-        }),
-        fullPath: createPropertyDescriptor(() => shadowLocation.pathname + shadowLocation.search + shadowLocation.hash, noop),
-    });
     const createLocationMethod = (locationMethodName) => {
         return function (value) {
             if (isEffectiveApp(appName)) {
                 const targetPath = commonHandler(value, locationMethodName === 'assign' ? 'pushState' : 'replaceState');
-                if (targetPath)
-                    rawLocation[locationMethodName](targetPath);
+                if (targetPath) {
+                    // Same as href, complete targetPath with browser origin in vite env
+                    rawLocation[locationMethodName](createURL(targetPath, rawLocation.origin).href);
+                }
             }
         };
     };
-    return assign(microLocation, {
-        assign: createLocationMethod('assign'),
-        replace: createLocationMethod('replace'),
-        reload: (forcedReload) => rawLocation.reload(forcedReload),
-        shadowLocation,
+    const assign = createLocationMethod('assign');
+    const replace = createLocationMethod('replace');
+    const reload = (forcedReload) => rawLocation.reload(forcedReload);
+    rawDefineProperty(getTarget(), 'fullPath', {
+        enumerable: true,
+        configurable: true,
+        get: () => proxyLocation.pathname + proxyLocation.search + proxyLocation.hash,
+    });
+    /**
+     * location.assign/replace is readonly, cannot be proxy, so we use empty object as proxy target
+     */
+    const proxyLocation = new Proxy({}, {
+        get: (_, key) => {
+            const target = getTarget();
+            if (isIframe) {
+                // host hostname port protocol
+                if (hijackMicroLocationKeys.includes(key)) {
+                    return childStaticLocation[key];
+                }
+                if (key === 'href') {
+                    // do not use target, because target may be deleted
+                    return target[key].replace(browserHost, childHost);
+                }
+            }
+            if (key === 'assign')
+                return assign;
+            if (key === 'replace')
+                return replace;
+            if (key === 'reload')
+                return reload;
+            if (key === 'self')
+                return target;
+            return bindFunctionToRawTarget(Reflect.get(target, key), target, 'LOCATION');
+        },
+        set: (_, key, value) => {
+            if (isEffectiveApp(appName)) {
+                const target = getTarget();
+                if (key === 'href') {
+                    const targetPath = commonHandler(value, 'pushState');
+                    /**
+                     * In vite, targetPath without origin will be completed with child origin
+                     * So we use browser origin to complete targetPath to avoid this problem
+                     * But, why child app can affect browser jump?
+                     * Guess(need check):
+                     *  1. vite records the origin when init
+                     *  2. listen for browser jump and automatically complete the address
+                     */
+                    if (targetPath) {
+                        rawLocation.href = createURL(targetPath, rawLocation.origin).href;
+                    }
+                }
+                else if (key === 'pathname') {
+                    const targetPath = ('/' + value).replace(/^\/+/, '/') + proxyLocation.search + proxyLocation.hash;
+                    handleForPathNameAndSearch(targetPath, 'pathname');
+                }
+                else if (key === 'search') {
+                    const targetPath = proxyLocation.pathname + ('?' + value).replace(/^\?+/, '?') + proxyLocation.hash;
+                    handleForPathNameAndSearch(targetPath, 'search');
+                }
+                else if (key === 'hash') {
+                    const targetPath = proxyLocation.pathname + proxyLocation.search + ('#' + value).replace(/^#+/, '#');
+                    const targetLocation = createURL(targetPath, url);
+                    // The same hash will not trigger popStateEvent
+                    if (targetLocation.hash !== proxyLocation.hash) {
+                        navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
+                    }
+                }
+                else {
+                    Reflect.set(target, key, value);
+                }
+            }
+            return true;
+        },
     });
+    return proxyLocation;
 }
 /**
  * create guardLocation by microLocation, used for router guard
@@ -4238,17 +4623,17 @@ function autoTriggerNavigationGuard(appName, microLocation) {
  * @param type auto prevent
  */
 function updateMicroLocation(appName, path, microLocation, type) {
-    const newLocation = createURL(path, microLocation.href);
+    var _a;
     // record old values of microLocation to `from`
     const from = createGuardLocation(appName, microLocation);
-    for (const key of locationKeys) {
-        if (shadowLocationKeys.includes(key)) {
-            // reference of shadowLocation
-            microLocation.shadowLocation[key] = newLocation[key];
-        }
-        else {
-            // @ts-ignore reference of microLocation
-            microLocation[key] = newLocation[key];
+    const newLocation = createURL(path, 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);
+    }
+    else {
+        for (const key of locationKeys) {
+            microLocation.self[key] = newLocation[key];
         }
     }
     // update latest values of microLocation to `to`
@@ -4426,8 +4811,8 @@ function useMicroEventSource() {
 }
 
 const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
-const globalPropertyList = ['window', 'self', 'globalThis'];
-class SandBox {
+const globalPropertyList$1 = ['window', 'self', 'globalThis'];
+class WithSandBox {
     constructor(appName, url) {
         /**
          * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
@@ -4478,18 +4863,21 @@ class SandBox {
                 this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
             }
             /**
-             * 1. Prevent the key deleted during sandBox.stop after rewrite
-             * 2. Umd mode will not delete any keys during sandBox.stop
-             * 3. It must not be umd mode when call sandbox.start at the first time
+             * Target: Ensure default mode action exactly same to first time when render again
+             * 1. The following globalKey maybe modified when render, reset them when render again in default mode
+             * 2. Umd mode will not delete any keys during sandBox.stop, ignore umd mode
+             * 3. When sandbox.start called for the first time, it must be the default mode
              */
             if (!umdMode) {
                 this.initGlobalKeysWhenStart(this.microAppWindow, this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, disablePatchRequest);
             }
-            if (++SandBox.activeCount === 1) {
+            if (++globalEnv.activeSandbox === 1) {
+                patchElementAndDocument();
+                patchHistory();
+            }
+            if (++WithSandBox.activeCount === 1) {
                 effectDocumentEvent();
-                patchElementPrototypeMethods();
                 initEnvOfNestedApp();
-                patchHistory();
             }
             fixBabelPolyfill6();
         }
@@ -4498,28 +4886,25 @@ class SandBox {
      * close sandbox and perform some clean up actions
      * @param umdMode is umd mode
      * @param keepRouteState prevent reset route
-     * @param clearEventSource clear MicroEventSource when destroy
+     * @param destroy completely destroy, delete cache resources
      * @param clearData clear data from base app
      */
-    stop({ umdMode, keepRouteState, clearEventSource, clearData, }) {
+    stop({ umdMode, keepRouteState, destroy, clearData, }) {
         if (this.active) {
-            // clear global event, timeout, data listener
-            this.releaseGlobalEffect(clearData);
+            this.recordAndReleaseEffect({ clearData, destroy }, !umdMode || destroy);
             if (this.removeHistoryListener) {
                 this.clearRouteState(keepRouteState);
                 // release listener of popstate
                 this.removeHistoryListener();
             }
-            if (clearEventSource) {
-                clearMicroEventSource(this.microAppWindow.__MICRO_APP_NAME__);
-            }
             /**
              * NOTE:
              *  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
              */
-            if (!umdMode) {
+            if (!umdMode || destroy) {
+                clearMicroEventSource(this.microAppWindow.__MICRO_APP_NAME__);
                 this.injectedKeys.forEach((key) => {
                     Reflect.deleteProperty(this.microAppWindow, key);
                 });
@@ -4529,30 +4914,47 @@ class SandBox {
                 });
                 this.escapeKeys.clear();
             }
-            if (--SandBox.activeCount === 0) {
-                releaseEffectDocumentEvent();
-                releasePatches();
+            if (--globalEnv.activeSandbox === 0) {
+                releasePatchElementAndDocument();
                 releasePatchHistory();
             }
+            if (--WithSandBox.activeCount === 0) {
+                releaseEffectDocumentEvent();
+            }
             this.active = false;
         }
     }
     /**
-     * clear global event, timeout, data listener
+     * Record global effect and then release (effect: global event, timeout, data listener)
      * Scenes:
-     * 1. unmount of normal/umd app
+     * 1. unmount of default/umd app
      * 2. hidden keep-alive app
      * 3. after init prerender app
-     * @param clearData clear data from base app
+     * @param options {
+     *  @param clearData clear data from base app
+     *  @param isPrerender is prerender app
+     *  @param keepAlive is keep-alive app
+     * }
+     * @param preventRecord prevent record effect events
      */
-    releaseGlobalEffect(clearData = false) {
-        this.effectController.releaseEffect();
-        this.microAppWindow.microApp.clearDataListener();
-        this.microAppWindow.microApp.clearGlobalDataListener();
-        if (clearData) {
-            microApp.clearData(this.microAppWindow.__MICRO_APP_NAME__);
-            this.microAppWindow.microApp.clearData();
+    recordAndReleaseEffect(options, preventRecord = false) {
+        if (preventRecord) {
+            this.resetEffectSnapshot();
+        }
+        else {
+            this.recordEffectSnapshot();
         }
+        this.releaseGlobalEffect(options);
+    }
+    /**
+     * reset effect snapshot data in default mode or destroy
+     * Scenes:
+     *  1. unmount hidden keep-alive app manually
+     *  2. unmount prerender app manually
+     */
+    resetEffectSnapshot() {
+        this.effectController.reset();
+        resetDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
      * record umd snapshot before the first execution of umdHookMount
@@ -4563,7 +4965,7 @@ class SandBox {
      */
     recordEffectSnapshot() {
         // this.microAppWindow.__MICRO_APP_UMD_MODE__ = true
-        this.effectController.recordEffect();
+        this.effectController.record();
         recordDataCenterSnapshot(this.microAppWindow.microApp);
         // this.recordUmdInjectedValues = new Map<PropertyKey, unknown>()
         // this.injectedKeys.forEach((key: PropertyKey) => {
@@ -4575,12 +4977,34 @@ class SandBox {
         // this.recordUmdInjectedValues!.forEach((value: unknown, key: PropertyKey) => {
         //   Reflect.set(this.proxyWindow, key, value)
         // })
-        this.effectController.rebuildEffect();
+        this.effectController.rebuild();
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
-    // set __MICRO_APP_PRE_RENDER__ state
-    setPreRenderState(state) {
-        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = state;
+    /**
+     * clear global event, timeout, data listener
+     * Scenes:
+     * 1. unmount of default/umd app
+     * 2. hidden keep-alive app
+     * 3. after init prerender app
+     * @param clearData clear data from base app
+     * @param isPrerender is prerender app
+     * @param keepAlive is keep-alive app
+     * @param destroy completely destroy
+     */
+    releaseGlobalEffect({ clearData = false, isPrerender = false, keepAlive = false, destroy = false, }) {
+        var _a, _b, _c;
+        this.effectController.release({
+            umdMode: this.proxyWindow.__MICRO_APP_UMD_MODE__,
+            isPrerender,
+            keepAlive,
+            destroy,
+        });
+        (_a = this.microAppWindow.microApp) === null || _a === void 0 ? void 0 : _a.clearDataListener();
+        (_b = this.microAppWindow.microApp) === null || _b === void 0 ? void 0 : _b.clearGlobalDataListener();
+        if (clearData) {
+            microApp.clearData(this.microAppWindow.__MICRO_APP_NAME__);
+            (_c = this.microAppWindow.microApp) === null || _c === void 0 ? void 0 : _c.clearData();
+        }
     }
     /**
      * get scopeProperties and escapeProperties from plugins & adapter
@@ -4613,7 +5037,6 @@ class SandBox {
     createProxyWindow(appName) {
         const rawWindow = globalEnv.rawWindow;
         const descriptorTargetMap = new Map();
-        // window.xxx will trigger proxy
         return new Proxy(this.microAppWindow, {
             get: (target, key) => {
                 throttleDeferForSetAppName(appName);
@@ -4621,11 +5044,14 @@ class SandBox {
                     (isString(key) && /^__MICRO_APP_/.test(key)) ||
                     this.scopeProperties.includes(key))
                     return Reflect.get(target, key);
-                const rawValue = Reflect.get(rawWindow, key);
-                return isFunction(rawValue) ? bindFunctionToRawObject(rawWindow, rawValue) : rawValue;
+                return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
             },
             set: (target, key, value) => {
                 if (this.active) {
+                    /**
+                     * TODO:
+                     * 1、location域名相同，子应用内部跳转时的处理
+                     */
                     if (this.adapter.escapeSetterKeyList.includes(key)) {
                         Reflect.set(rawWindow, key, value);
                     }
@@ -4646,15 +5072,15 @@ class SandBox {
                         this.injectedKeys.add(key);
                     }
                     else {
+                        !Reflect.has(target, key) && this.injectedKeys.add(key);
                         Reflect.set(target, key, value);
-                        this.injectedKeys.add(key);
                     }
                     if ((this.escapeProperties.includes(key) ||
                         (this.adapter.staticEscapeProperties.includes(key) &&
                             !Reflect.has(rawWindow, key))) &&
                         !this.scopeProperties.includes(key)) {
+                        !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
                         Reflect.set(rawWindow, key, value);
-                        this.escapeKeys.add(key);
                     }
                 }
                 return true;
@@ -4702,6 +5128,13 @@ class SandBox {
             },
         });
     }
+    // set __MICRO_APP_PRE_RENDER__ state
+    setPreRenderState(state) {
+        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = state;
+    }
+    markUmdMode(state) {
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = state;
+    }
     /**
      * inject global properties to microAppWindow
      * @param microAppWindow micro window
@@ -4714,8 +5147,10 @@ class SandBox {
         microAppWindow.__MICRO_APP_NAME__ = appName;
         microAppWindow.__MICRO_APP_URL__ = url;
         microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
         microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
+        microAppWindow.__MICRO_APP_UMD_MODE__ = false;
         microAppWindow.rawWindow = globalEnv.rawWindow;
         microAppWindow.rawDocument = globalEnv.rawDocument;
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
@@ -4760,7 +5195,7 @@ class SandBox {
         }
         rawDefineProperty(microAppWindow, 'top', this.createDescriptorForMicroAppWindow('top', topValue));
         rawDefineProperty(microAppWindow, 'parent', this.createDescriptorForMicroAppWindow('parent', parentValue));
-        globalPropertyList.forEach((key) => {
+        globalPropertyList$1.forEach((key) => {
             rawDefineProperty(microAppWindow, key, this.createDescriptorForMicroAppWindow(key, this.proxyWindow));
         });
     }
@@ -4890,23 +5325,39 @@ class SandBox {
         });
     }
     initRouteState(defaultPage) {
-        initRouteStateWithURL(this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.location, defaultPage);
+        initRouteStateWithURL(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location, defaultPage);
     }
     clearRouteState(keepRouteState) {
-        clearRouteStateFromURL(this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.__MICRO_APP_URL__, this.proxyWindow.location, keepRouteState);
+        clearRouteStateFromURL(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, this.microAppWindow.location, keepRouteState);
     }
     setRouteInfoForKeepAliveApp() {
-        updateBrowserURLWithLocation(this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.location);
+        updateBrowserURLWithLocation(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location);
     }
     removeRouteInfoForKeepAliveApp() {
-        removeStateAndPathFromBrowser(this.proxyWindow.__MICRO_APP_NAME__);
+        removeStateAndPathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
-     * Create new document and Document
+     * Format all html elements when init
+     * @param container micro app container
      */
-    createProxyDocument(appName) {
-        const rawDocument = globalEnv.rawDocument;
-        const rawRootDocument = globalEnv.rawRootDocument;
+    patchStaticElement(container) {
+        patchElementTree(container, this.microAppWindow.__MICRO_APP_NAME__);
+    }
+    /**
+     * action before exec scripts when mount
+     * Actions:
+     * 1. patch static elements from html
+     * @param container micro app container
+     */
+    actionBeforeExecScripts(container) {
+        this.patchStaticElement(container);
+    }
+    /**
+     * Create new document and Document
+     */
+    createProxyDocument(appName) {
+        const rawDocument = globalEnv.rawDocument;
+        const rawRootDocument = globalEnv.rawRootDocument;
         const createElement = function (tagName, options) {
             const element = globalEnv.rawCreateElement.call(rawDocument, tagName, options);
             element.__MICRO_APP_NAME__ = appName;
@@ -4914,67 +5365,1055 @@ class SandBox {
         };
         const proxyDocument = new Proxy(rawDocument, {
             get: (target, key) => {
-                throttleDeferForSetAppName(appName);
-                throttleDeferForParentNode(proxyDocument);
-                if (key === 'createElement')
-                    return createElement;
-                if (key === Symbol.toStringTag)
-                    return 'ProxyDocument';
-                if (key === 'defaultView')
+                throttleDeferForSetAppName(appName);
+                throttleDeferForParentNode(proxyDocument);
+                if (key === 'createElement')
+                    return createElement;
+                if (key === Symbol.toStringTag)
+                    return 'ProxyDocument';
+                if (key === 'defaultView')
+                    return this.proxyWindow;
+                return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
+            },
+            set: (target, key, value) => {
+                /**
+                 * 1. Fix TypeError: Illegal invocation when set document.title
+                 * 2. If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
+                 */
+                Reflect.set(target, key, value);
+                return true;
+            }
+        });
+        class MicroDocument {
+            static [Symbol.hasInstance](target) {
+                let proto = target;
+                while (proto = Object.getPrototypeOf(proto)) {
+                    if (proto === MicroDocument.prototype) {
+                        return true;
+                    }
+                }
+                return (target === proxyDocument ||
+                    target instanceof rawRootDocument);
+            }
+        }
+        /**
+         * TIP:
+         * 1. child class __proto__, which represents the inherit of the constructor, always points to the parent class
+         * 2. child class prototype.__proto__, which represents the inherit of methods, always points to parent class prototype
+         * e.g.
+         * class B extends A {}
+         * B.__proto__ === A // true
+         * B.prototype.__proto__ === A.prototype // true
+         */
+        Object.setPrototypeOf(MicroDocument, rawRootDocument);
+        // Object.create(rawRootDocument.prototype) will cause MicroDocument and proxyDocument methods not same when exec Document.prototype.xxx = xxx in child app
+        Object.setPrototypeOf(MicroDocument.prototype, new Proxy(rawRootDocument.prototype, {
+            get(target, key) {
+                throttleDeferForSetAppName(appName);
+                return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
+            },
+            set(target, key, value) {
+                Reflect.set(target, key, value);
+                return true;
+            }
+        }));
+        return {
+            proxyDocument,
+            MicroDocument,
+        };
+    }
+}
+WithSandBox.activeCount = 0; // number of active sandbox
+
+function patchIframeRoute(appName, microAppWindow, childFullPath) {
+    const microHistory = microAppWindow.history;
+    microAppWindow.rawReplaceState = microHistory.replaceState;
+    assign(microHistory, createMicroHistory(appName, microAppWindow.location));
+    // exec updateMicroLocation after patch microHistory
+    updateMicroLocation(appName, childFullPath, microAppWindow.location, 'prevent');
+}
+
+function patchIframeWindow(appName, microAppWindow) {
+    const rawWindow = globalEnv.rawWindow;
+    escape2RawWindowKeys.forEach((key) => {
+        microAppWindow[key] = bindFunctionToRawTarget(rawWindow[key], rawWindow);
+    });
+    Object.getOwnPropertyNames(microAppWindow)
+        .filter((key) => {
+        escape2RawWindowRegExpKeys.some((reg) => {
+            if (reg.test(key) && key in microAppWindow.parent) {
+                if (isFunction(rawWindow[key])) {
+                    microAppWindow[key] = bindFunctionToRawTarget(rawWindow[key], rawWindow);
+                }
+                else {
+                    const { configurable, enumerable } = Object.getOwnPropertyDescriptor(microAppWindow, key) || {
+                        configurable: true,
+                        enumerable: true,
+                    };
+                    if (configurable) {
+                        rawDefineProperty(microAppWindow, key, {
+                            configurable,
+                            enumerable,
+                            get: () => rawWindow[key],
+                            set: (value) => { rawWindow[key] = value; },
+                        });
+                    }
+                }
+                return true;
+            }
+            return false;
+        });
+        return /^on/.test(key) && !scopeIframeWindowOnEvent.includes(key);
+    })
+        .forEach((eventName) => {
+        const { enumerable, writable, set } = Object.getOwnPropertyDescriptor(microAppWindow, eventName) || {
+            enumerable: true,
+            writable: true,
+        };
+        try {
+            /**
+             * 如果设置了iframeWindow上的这些on事件，处理函数会设置到原生window上，但this会绑定到iframeWindow
+             * 获取这些值，则直接从原生window上取
+             * 总结：这些on事件全部都代理到原生window上
+             *
+             * 问题：
+             * 1、如果子应用没有设置，基座设置了on事件，子应用触发事件是会不会执行基座的函数？
+             *    比如 基座定义了 window.onpopstate，子应用执行跳转会不会触发基座的onpopstate函数？
+             *
+             * 2、如果基座已经定义了 window.onpopstate，子应用定义会不会覆盖基座的？
+             *    现在的逻辑看来，是会覆盖的，那么问题1就是 肯定的
+             * TODO: 一些特殊事件onpopstate、onhashchange不代理，放在scopeIframeWindowOnEvent中
+             */
+            rawDefineProperty(microAppWindow, eventName, {
+                enumerable,
+                configurable: true,
+                get: () => rawWindow[eventName],
+                set: (writable !== null && writable !== void 0 ? writable : !!set) ? (value) => { rawWindow[eventName] = isFunction(value) ? value.bind(microAppWindow) : value; }
+                    : undefined,
+            });
+        }
+        catch (e) {
+            logWarn(e, appName);
+        }
+    });
+    return windowEffect(microAppWindow);
+}
+function windowEffect(microAppWindow) {
+    const { rawWindow, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
+    const eventListenerMap = new Map();
+    const sstWindowListenerMap = new Map();
+    function getEventTarget(type) {
+        return scopeIframeWindowEvent.includes(type) ? microAppWindow : rawWindow;
+    }
+    microAppWindow.addEventListener = function (type, listener, options) {
+        const listenerList = eventListenerMap.get(type);
+        if (listenerList) {
+            listenerList.add(listener);
+        }
+        else {
+            eventListenerMap.set(type, new Set([listener]));
+        }
+        listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
+        rawAddEventListener.call(getEventTarget(type), type, listener, options);
+    };
+    microAppWindow.removeEventListener = function (type, listener, options) {
+        const listenerList = eventListenerMap.get(type);
+        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
+            listenerList.delete(listener);
+        }
+        rawRemoveEventListener.call(getEventTarget(type), type, listener, options);
+    };
+    const reset = () => {
+        sstWindowListenerMap.clear();
+    };
+    /**
+     * NOTE:
+     *  1. about timer(events & properties should record & rebuild at all modes, exclude default mode)
+     *  2. record maybe call twice when unmount prerender, keep-alive app manually with umd mode
+     * 4 modes: default-mode、umd-mode、prerender、keep-alive
+     * Solution:
+     *  1. default-mode(normal): clear events & timers, not record & rebuild anything
+     *  2. umd-mode(normal): not clear timers, record & rebuild events
+     *  3. prerender/keep-alive(default, umd): not clear timers, record & rebuild events
+     *
+     * TODO: 现在的 清除、记录和恢复操作分散的太零散，sandbox、create_app中都有分散，将代码再优化一下，集中处理
+     */
+    const record = () => {
+        // record window event
+        eventListenerMap.forEach((listenerList, type) => {
+            if (listenerList.size) {
+                sstWindowListenerMap.set(type, new Set(listenerList));
+            }
+        });
+    };
+    // rebuild event and timer before remount app
+    const rebuild = () => {
+        // rebuild window event
+        sstWindowListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
+            }
+        });
+        reset();
+    };
+    const release = () => {
+        // Clear window binding events
+        if (eventListenerMap.size) {
+            eventListenerMap.forEach((listenerList, type) => {
+                for (const listener of listenerList) {
+                    rawRemoveEventListener.call(getEventTarget(type), type, listener);
+                }
+            });
+            eventListenerMap.clear();
+        }
+    };
+    return {
+        reset,
+        record,
+        rebuild,
+        release,
+    };
+}
+
+/**
+ * TODO:
+ *  1、shadowDOM
+ *  2、重构
+ */
+function patchIframeDocument(appName, microAppWindow, proxyLocation) {
+    patchDocumentPrototype(appName, microAppWindow);
+    patchDocumentProperties(appName, microAppWindow, proxyLocation);
+    return documentEffect(appName, microAppWindow);
+}
+function patchDocumentPrototype(appName, microAppWindow) {
+    const rawDocument = globalEnv.rawDocument;
+    const microRootDocument = microAppWindow.Document;
+    const microDocument = microAppWindow.document;
+    microRootDocument.prototype.createElement = function createElement(tagName, options) {
+        const element = globalEnv.rawCreateElement.call(this, tagName, options);
+        return updateElementInfo(element, appName);
+    };
+    microRootDocument.prototype.createTextNode = function createTextNode(data) {
+        const element = globalEnv.rawCreateTextNode.call(this, data);
+        return updateElementInfo(element, appName);
+    };
+    function getDefaultRawTarget(target) {
+        return microDocument !== target ? target : rawDocument;
+    }
+    // query element👇
+    function querySelector(selectors) {
+        var _a, _b;
+        if (isUniqueElement(selectors) ||
+            microDocument !== this) {
+            const _this = getDefaultRawTarget(this);
+            return globalEnv.rawQuerySelector.call(_this, selectors);
+        }
+        return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) !== null && _b !== void 0 ? _b : null;
+    }
+    function querySelectorAll(selectors) {
+        var _a, _b;
+        if (isUniqueElement(selectors) ||
+            microDocument !== this) {
+            const _this = getDefaultRawTarget(this);
+            return globalEnv.rawQuerySelectorAll.call(_this, selectors);
+        }
+        return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
+    }
+    microRootDocument.prototype.querySelector = querySelector;
+    microRootDocument.prototype.querySelectorAll = querySelectorAll;
+    microRootDocument.prototype.getElementById = function getElementById(key) {
+        const _this = getDefaultRawTarget(this);
+        if (isInvalidQuerySelectorKey(key)) {
+            return globalEnv.rawGetElementById.call(_this, key);
+        }
+        try {
+            return querySelector.call(this, `#${key}`);
+        }
+        catch (_a) {
+            return globalEnv.rawGetElementById.call(_this, key);
+        }
+    };
+    microRootDocument.prototype.getElementsByClassName = function getElementsByClassName(key) {
+        const _this = getDefaultRawTarget(this);
+        if (isInvalidQuerySelectorKey(key)) {
+            return globalEnv.rawGetElementsByClassName.call(_this, key);
+        }
+        try {
+            return querySelectorAll.call(this, `.${key}`);
+        }
+        catch (_a) {
+            return globalEnv.rawGetElementsByClassName.call(_this, key);
+        }
+    };
+    microRootDocument.prototype.getElementsByTagName = function getElementsByTagName(key) {
+        var _a;
+        const _this = getDefaultRawTarget(this);
+        if (isUniqueElement(key) ||
+            isInvalidQuerySelectorKey(key) ||
+            (!((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
+            return globalEnv.rawGetElementsByTagName.call(_this, key);
+        }
+        try {
+            return querySelectorAll.call(this, key);
+        }
+        catch (_b) {
+            return globalEnv.rawGetElementsByTagName.call(_this, key);
+        }
+    };
+    microRootDocument.prototype.getElementsByName = function getElementsByName(key) {
+        const _this = getDefaultRawTarget(this);
+        if (isInvalidQuerySelectorKey(key)) {
+            return globalEnv.rawGetElementsByName.call(_this, key);
+        }
+        try {
+            return querySelectorAll.call(this, `[name=${key}]`);
+        }
+        catch (_a) {
+            return globalEnv.rawGetElementsByName.call(_this, key);
+        }
+    };
+}
+function patchDocumentProperties(appName, microAppWindow, proxyLocation) {
+    const rawDocument = globalEnv.rawDocument;
+    const microRootDocument = microAppWindow.Document;
+    const microDocument = microAppWindow.document;
+    const getCommonDescriptor = (key, getter) => {
+        const { enumerable } = Object.getOwnPropertyDescriptor(microRootDocument.prototype, key) || {
+            enumerable: true,
+            writable: true,
+        };
+        return {
+            configurable: true,
+            enumerable,
+            get: getter,
+        };
+    };
+    const createDescriptors = () => {
+        const result = {};
+        const descList = [
+            ['documentURI', () => proxyLocation.href],
+            ['URL', () => proxyLocation.href],
+            ['documentElement', () => rawDocument.documentElement],
+            ['scrollingElement', () => rawDocument.scrollingElement],
+            ['forms', () => microRootDocument.prototype.querySelectorAll.call(microDocument, 'form')],
+            ['images', () => microRootDocument.prototype.querySelectorAll.call(microDocument, 'img')],
+            ['links', () => microRootDocument.prototype.querySelectorAll.call(microDocument, 'a')],
+        ];
+        descList.forEach((desc) => {
+            result[desc[0]] = getCommonDescriptor(desc[0], desc[1]);
+        });
+        // TODO: shadowDOM
+        proxy2RawDocOrShadowKeys.forEach((key) => {
+            result[key] = getCommonDescriptor(key, () => rawDocument[key]);
+        });
+        // TODO: shadowDOM
+        proxy2RawDocOrShadowMethods.forEach((key) => {
+            result[key] = getCommonDescriptor(key, () => bindFunctionToRawTarget(rawDocument[key], rawDocument, 'DOCUMENT'));
+        });
+        proxy2RawDocumentKeys.forEach((key) => {
+            result[key] = getCommonDescriptor(key, () => rawDocument[key]);
+        });
+        proxy2RawDocumentMethods.forEach((key) => {
+            result[key] = getCommonDescriptor(key, () => bindFunctionToRawTarget(rawDocument[key], rawDocument, 'DOCUMENT'));
+        });
+        return result;
+    };
+    rawDefineProperties(microRootDocument.prototype, createDescriptors());
+    // head, body, html, title
+    uniqueDocumentElement.forEach((tagName) => {
+        rawDefineProperty(microDocument, tagName, {
+            enumerable: true,
+            configurable: true,
+            get: () => rawDocument[tagName],
+            set: undefined,
+        });
+    });
+}
+function documentEffect(appName, microAppWindow) {
+    const documentEventListenerMap = new Map();
+    const sstDocumentListenerMap = new Map();
+    let onClickHandler = null;
+    let sstOnClickHandler = null;
+    const microRootDocument = microAppWindow.Document;
+    const microDocument = microAppWindow.document;
+    const { rawDocument, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
+    function getEventTarget(type, bindTarget) {
+        return scopeIframeDocumentEvent.includes(type) ? bindTarget : rawDocument;
+    }
+    microRootDocument.prototype.addEventListener = function (type, listener, options) {
+        const handler = isFunction(listener) ? (listener.__MICRO_APP_BOUND_FUNCTION__ = listener.__MICRO_APP_BOUND_FUNCTION__ || listener.bind(this)) : listener;
+        const appListenersMap = documentEventListenerMap.get(appName);
+        if (appListenersMap) {
+            const appListenerList = appListenersMap.get(type);
+            if (appListenerList) {
+                appListenerList.add(listener);
+            }
+            else {
+                appListenersMap.set(type, new Set([listener]));
+            }
+        }
+        else {
+            documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
+        }
+        listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
+        rawAddEventListener.call(getEventTarget(type, this), type, handler, options);
+    };
+    microRootDocument.prototype.removeEventListener = function (type, listener, options) {
+        const appListenersMap = documentEventListenerMap.get(appName);
+        if (appListenersMap) {
+            const appListenerList = appListenersMap.get(type);
+            if ((appListenerList === null || appListenerList === void 0 ? void 0 : appListenerList.size) && appListenerList.has(listener)) {
+                appListenerList.delete(listener);
+            }
+        }
+        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 上的on开头方法
+    function createSetterHandler(eventName) {
+        if (eventName === 'onclick') {
+            return (value) => {
+                if (isFunction(onClickHandler)) {
+                    rawRemoveEventListener.call(rawDocument, 'click', onClickHandler, false);
+                }
+                if (isFunction(value)) {
+                    onClickHandler = value.bind(microDocument);
+                    rawAddEventListener.call(rawDocument, 'click', onClickHandler, false);
+                }
+                else {
+                    onClickHandler = value;
+                }
+            };
+        }
+        return (value) => { rawDocument[eventName] = isFunction(value) ? value.bind(microDocument) : value; };
+    }
+    /**
+     * TODO:
+     * 1、直接代理到原生document是否正确
+     * 2、shadowDOM
+     */
+    Object.getOwnPropertyNames(microRootDocument.prototype)
+        .filter((key) => /^on/.test(key) && !scopeIframeDocumentOnEvent.includes(key))
+        .forEach((eventName) => {
+        const { enumerable, writable, set } = Object.getOwnPropertyDescriptor(microRootDocument.prototype, eventName) || {
+            enumerable: true,
+            writable: true,
+        };
+        try {
+            rawDefineProperty(microRootDocument.prototype, eventName, {
+                enumerable,
+                configurable: true,
+                get: () => {
+                    if (eventName === 'onclick')
+                        return onClickHandler;
+                    return rawDocument[eventName];
+                },
+                set: (writable !== null && writable !== void 0 ? writable : !!set) ? createSetterHandler(eventName) : undefined,
+            });
+        }
+        catch (e) {
+            logWarn(e, appName);
+        }
+    });
+    const reset = () => {
+        sstDocumentListenerMap.clear();
+        sstOnClickHandler = null;
+    };
+    /**
+     * record event
+     * NOTE:
+     *  1.record maybe call twice when unmount prerender, keep-alive app manually with umd mode
+     * Scenes:
+     *  1. exec umdMountHook in umd mode
+     *  2. hidden keep-alive app
+     *  3. after init prerender app
+     */
+    const record = () => {
+        // record onclick handler
+        sstOnClickHandler = sstOnClickHandler || onClickHandler;
+        // record document event
+        const documentAppListenersMap = documentEventListenerMap.get(appName);
+        if (documentAppListenersMap) {
+            documentAppListenersMap.forEach((listenerList, type) => {
+                if (listenerList.size) {
+                    sstDocumentListenerMap.set(type, new Set(listenerList));
+                }
+            });
+        }
+    };
+    // rebuild event and timer before remount app
+    const rebuild = () => {
+        // rebuild onclick event
+        if (sstOnClickHandler)
+            microDocument.onclick = sstOnClickHandler;
+        sstDocumentListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                microDocument.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
+            }
+        });
+        reset();
+    };
+    const release = () => {
+        // Clear the function bound by micro application through document.onclick
+        if (isFunction(onClickHandler)) {
+            rawRemoveEventListener.call(rawDocument, 'click', onClickHandler);
+            onClickHandler = null;
+        }
+        // Clear document binding event
+        const documentAppListenersMap = documentEventListenerMap.get(appName);
+        if (documentAppListenersMap) {
+            documentAppListenersMap.forEach((listenerList, type) => {
+                for (const listener of listenerList) {
+                    rawRemoveEventListener.call(getEventTarget(type, microDocument), type, (listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_BOUND_FUNCTION__) || listener);
+                }
+            });
+            documentAppListenersMap.clear();
+        }
+    };
+    return {
+        reset,
+        record,
+        rebuild,
+        release,
+    };
+}
+
+function patchIframeElement(appName, url, microAppWindow, iframeSandbox) {
+    patchIframeNode(appName, microAppWindow, iframeSandbox);
+    patchIframeAttribute(appName, url, microAppWindow);
+}
+function patchIframeNode(appName, microAppWindow, iframeSandbox) {
+    const microDocument = microAppWindow.document;
+    const rawDocument = globalEnv.rawDocument;
+    const microRootNode = microAppWindow.Node;
+    const microRootElement = microAppWindow.Element;
+    // const rawMicroGetRootNode = microRootNode.prototype.getRootNode
+    const rawMicroAppendChild = microRootNode.prototype.appendChild;
+    const rawMicroInsertBefore = microRootNode.prototype.insertBefore;
+    const rawMicroReplaceChild = microRootNode.prototype.replaceChild;
+    const rawMicroCloneNode = microRootNode.prototype.cloneNode;
+    const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(microRootElement.prototype, 'innerHTML');
+    const rawParentNodeLDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'parentNode');
+    const isPureNode = (target) => {
+        return (isScriptElement(target) || isBaseElement(target)) && target.__PURE_ELEMENT__;
+    };
+    const getRawTarget = (target) => {
+        if (target === iframeSandbox.microHead) {
+            return rawDocument.head;
+        }
+        else if (target === iframeSandbox.microBody) {
+            return rawDocument.body;
+        }
+        return target;
+    };
+    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) {
+        updateElementInfo(node, appName);
+        // TODO：只有script才可以这样拦截，link、style不应该拦截
+        if (isPureNode(node)) {
+            return rawMicroAppendChild.call(this, node);
+        }
+        const _this = getRawTarget(this);
+        if (_this !== this) {
+            return _this.appendChild(node);
+        }
+        return rawMicroAppendChild.call(_this, node);
+    };
+    // TODO: 更多场景适配
+    microRootNode.prototype.insertBefore = function insertBefore(node, child) {
+        updateElementInfo(node, appName);
+        if (isPureNode(node)) {
+            return rawMicroInsertBefore.call(this, node, child);
+        }
+        const _this = getRawTarget(this);
+        if (_this !== this) {
+            if (child && !_this.contains(child)) {
+                return _this.appendChild(node);
+            }
+            return _this.insertBefore(node, child);
+        }
+        return rawMicroInsertBefore.call(_this, node, child);
+    };
+    // TODO: 更多场景适配
+    microRootNode.prototype.replaceChild = function replaceChild(node, child) {
+        updateElementInfo(node, appName);
+        if (isPureNode(node)) {
+            return rawMicroReplaceChild.call(this, node, child);
+        }
+        const _this = getRawTarget(this);
+        if (_this !== this) {
+            if (child && !_this.contains(child)) {
+                _this.appendChild(node);
+                return child;
+            }
+            return _this.replaceChild(node, child);
+        }
+        return rawMicroReplaceChild.call(_this, node, child);
+    };
+    // 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);
+        },
+        set(code) {
+            rawInnerHTMLDesc.set.call(this, code);
+            Array.from(this.children).forEach((child) => {
+                if (isElement(child)) {
+                    updateElementInfo(child, appName);
+                }
+            });
+        }
+    });
+    // patch parentNode
+    rawDefineProperty(microRootNode.prototype, 'parentNode', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            var _a, _b, _c;
+            // set html.parentNode to microDocument
+            throttleDeferForParentNode(microDocument);
+            const result = rawParentNodeLDesc.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)) || rawDocument.body;
+            }
+            return result;
+        },
+        set: undefined,
+    });
+    // Adapt to new image(...) scene
+    const ImageProxy = new Proxy(microAppWindow.Image, {
+        construct(Target, args) {
+            const elementImage = new Target(...args);
+            updateElementInfo(elementImage, appName);
+            return elementImage;
+        },
+    });
+    rawDefineProperty(microAppWindow, 'Image', {
+        configurable: true,
+        writable: true,
+        value: ImageProxy,
+    });
+    /**
+     * TODO:
+     * 1、append prepend
+     * 2、cloneNode -- 完成
+     * 3、innerHTML
+     * 4、querySelector、querySelectorAll (head, body)
+     * 5、Image -- 完成
+     * 都是Element原型链上的方法
+     */
+}
+function patchIframeAttribute(appName, 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);
+        }
+        rawMicroSetAttribute.call(this, key, value);
+    };
+    const protoAttrList = [
+        [microAppWindow.HTMLImageElement.prototype, 'src'],
+        [microAppWindow.HTMLScriptElement.prototype, 'src'],
+        [microAppWindow.HTMLLinkElement.prototype, 'href'],
+    ];
+    protoAttrList.forEach(([target, attr]) => {
+        const { enumerable, configurable, get, set } = Object.getOwnPropertyDescriptor(target, attr) || {
+            enumerable: true,
+            configurable: true,
+        };
+        rawDefineProperty(target, attr, {
+            enumerable,
+            configurable,
+            get: function () {
+                return get === null || get === void 0 ? void 0 : get.call(this);
+            },
+            set: function (value) {
+                set === null || set === void 0 ? void 0 : set.call(this, CompletionPath(value, url));
+            },
+        });
+    });
+}
+
+class IframeSandbox {
+    constructor(appName, url) {
+        this.active = false;
+        // Properties that can be escape to rawWindow
+        this.escapeProperties = [];
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
+        // TODO: 初始化和每次跳转时都要更新base的href
+        this.updateIframeBase = () => {
+            var _a;
+            (_a = this.baseElement) === null || _a === void 0 ? void 0 : _a.setAttribute('href', this.proxyLocation.protocol + '//' + this.proxyLocation.host + this.proxyLocation.pathname);
+        };
+        const rawLocation = globalEnv.rawWindow.location;
+        const browserHost = rawLocation.protocol + '//' + rawLocation.host;
+        const childStaticLocation = new URL(url);
+        const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
+        const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
+        this.deleteIframeElement = this.createIframeElement(appName, browserHost);
+        this.microAppWindow = this.iframe.contentWindow;
+        this.patchIframe(this.microAppWindow, (resolve) => {
+            // TODO: 优化代码
+            // exec before initStaticGlobalKeys
+            this.createProxyLocation(appName, url, this.microAppWindow, childStaticLocation, browserHost, childHost);
+            this.createProxyWindow(this.microAppWindow);
+            this.initStaticGlobalKeys(appName, url);
+            // get escapeProperties from plugins
+            this.getSpecialProperties(appName);
+            this.createIframeTemplate(this.microAppWindow);
+            patchIframeRoute(appName, this.microAppWindow, childFullPath);
+            this.windowEffect = patchIframeWindow(appName, this.microAppWindow);
+            this.documentEffect = patchIframeDocument(appName, this.microAppWindow, this.proxyLocation);
+            patchIframeElement(appName, url, this.microAppWindow, this);
+            resolve();
+        });
+    }
+    /**
+     * create iframe for sandbox
+     * @param appName app name
+     * @param browserHost browser origin
+     * @returns release callback
+     */
+    createIframeElement(appName, browserHost) {
+        this.iframe = pureCreateElement('iframe');
+        const iframeAttrs = {
+            src: browserHost,
+            style: 'display: none',
+            id: appName,
+        };
+        Object.keys(iframeAttrs).forEach((key) => this.iframe.setAttribute(key, iframeAttrs[key]));
+        // effect action during construct
+        globalEnv.rawDocument.body.appendChild(this.iframe);
+        /**
+         * If dom operated async when unmount, premature deletion of iframe will cause unexpected problems
+         * e.g.
+         *  1. antd: notification.destroy()
+         * WARNING:
+         *  If async operation time is too long, defer cannot avoid the problem
+         * TODO: more test
+         */
+        return () => defer(() => {
+            var _a, _b;
+            // default mode or destroy, iframe will be deleted when unmount
+            (_b = (_a = this.iframe) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.iframe);
+            this.iframe = null;
+        });
+    }
+    start({ baseroute, useMemoryRouter, defaultPage, disablePatchRequest, }) {
+        if (!this.active) {
+            this.active = true;
+            // TODO: 虚拟路由升级
+            if (useMemoryRouter) {
+                this.initRouteState(defaultPage);
+                // unique listener of popstate event for sub app
+                this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
+            }
+            else {
+                this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+            }
+            /**
+             * create base element to iframe
+             * WARNING: This will also affect a, image, link and script
+             */
+            if (!disablePatchRequest) {
+                this.createIframeBase();
+            }
+            if (++globalEnv.activeSandbox === 1) {
+                patchElementAndDocument();
+                patchHistory();
+            }
+            if (++IframeSandbox.activeCount === 1) ;
+        }
+    }
+    stop({ umdMode, keepRouteState, destroy, clearData, }) {
+        if (this.active) {
+            this.recordAndReleaseEffect({ clearData }, !umdMode || destroy);
+            if (this.removeHistoryListener) {
+                this.clearRouteState(keepRouteState);
+                // release listener of popstate
+                this.removeHistoryListener();
+            }
+            if (!umdMode || destroy) {
+                this.deleteIframeElement();
+                this.escapeKeys.forEach((key) => {
+                    Reflect.deleteProperty(globalEnv.rawWindow, key);
+                });
+                this.escapeKeys.clear();
+            }
+            if (--globalEnv.activeSandbox === 0) {
+                releasePatchElementAndDocument();
+                releasePatchHistory();
+            }
+            if (--IframeSandbox.activeCount === 0) ;
+            this.active = false;
+        }
+    }
+    /**
+     * Record global effect and then release (effect: global event, timeout, data listener)
+     * Scenes:
+     * 1. unmount of default/umd app
+     * 2. hidden keep-alive app
+     * 3. after init prerender app
+     * @param options {
+     *  @param clearData clear data from base app
+     *  @param isPrerender is prerender app
+     *  @param keepAlive is keep-alive app
+     * }
+     * @param preventRecord prevent record effect events (default or destroy)
+     */
+    recordAndReleaseEffect(options, preventRecord = false) {
+        if (preventRecord) {
+            this.resetEffectSnapshot();
+        }
+        else {
+            this.recordEffectSnapshot();
+        }
+        this.releaseGlobalEffect(options);
+    }
+    /**
+     * reset effect snapshot data in default mode or destroy
+     * Scenes:
+     *  1. unmount hidden keep-alive app manually
+     *  2. unmount prerender app manually
+     */
+    resetEffectSnapshot() {
+        this.windowEffect.reset();
+        this.documentEffect.reset();
+        resetDataCenterSnapshot(this.microAppWindow.microApp);
+    }
+    /**
+     * record umd snapshot before the first execution of umdHookMount
+     * Scenes:
+     * 1. exec umdMountHook in umd mode
+     * 2. hidden keep-alive app
+     * 3. after init prerender app
+     */
+    recordEffectSnapshot() {
+        this.windowEffect.record();
+        this.documentEffect.record();
+        recordDataCenterSnapshot(this.microAppWindow.microApp);
+    }
+    // rebuild umd snapshot before remount umd app
+    rebuildEffectSnapshot() {
+        this.windowEffect.rebuild();
+        this.documentEffect.rebuild();
+        rebuildDataCenterSnapshot(this.microAppWindow.microApp);
+    }
+    /**
+     * clear global event, timeout, data listener
+     * Scenes:
+     * 1. unmount of normal/umd app
+     * 2. hidden keep-alive app
+     * 3. after init prerender app
+     * @param clearData clear data from base app
+     * @param isPrerender is prerender app
+     * @param keepAlive is keep-alive app
+     */
+    releaseGlobalEffect({ clearData = false }) {
+        var _a, _b, _c;
+        this.windowEffect.release();
+        this.documentEffect.release();
+        (_a = this.microAppWindow.microApp) === null || _a === void 0 ? void 0 : _a.clearDataListener();
+        (_b = this.microAppWindow.microApp) === null || _b === void 0 ? void 0 : _b.clearGlobalDataListener();
+        if (clearData) {
+            microApp.clearData(this.microAppWindow.__MICRO_APP_NAME__);
+            (_c = this.microAppWindow.microApp) === null || _c === void 0 ? void 0 : _c.clearData();
+        }
+    }
+    // set __MICRO_APP_PRE_RENDER__ state
+    setPreRenderState(state) {
+        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = state;
+    }
+    markUmdMode(state) {
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = state;
+    }
+    initStaticGlobalKeys(appName, url) {
+        this.microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        this.microAppWindow.__MICRO_APP_NAME__ = appName;
+        this.microAppWindow.__MICRO_APP_URL__ = url;
+        this.microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
+        this.microAppWindow.__MICRO_APP_WINDOW__ = this.microAppWindow;
+        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        this.microAppWindow.__MICRO_APP_SANDBOX__ = this;
+        this.microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
+        this.microAppWindow.rawWindow = globalEnv.rawWindow;
+        this.microAppWindow.rawDocument = globalEnv.rawDocument;
+        this.microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
+            removeDomScope,
+            pureCreateElement,
+            location: this.proxyLocation,
+            router,
+        });
+    }
+    // TODO: RESTRUCTURE
+    patchIframe(microAppWindow, cb) {
+        const oldMicroDocument = microAppWindow.document;
+        this.sandboxReady = new Promise((resolve) => {
+            (function iframeLocationReady() {
+                setTimeout(() => {
+                    try {
+                        if (microAppWindow.document === oldMicroDocument) {
+                            iframeLocationReady();
+                        }
+                        else {
+                            /**
+                             * NOTE:
+                             *  1. microAppWindow will not be recreated
+                             *  2. the properties of microAppWindow may be recreated, such as document
+                             *  3. the variables added to microAppWindow may be cleared
+                             */
+                            microAppWindow.stop();
+                            cb(resolve);
+                        }
+                    }
+                    catch (e) {
+                        iframeLocationReady();
+                    }
+                }, 0);
+            })();
+        });
+    }
+    // TODO: RESTRUCTURE
+    createIframeTemplate(microAppWindow) {
+        const microDocument = microAppWindow.document;
+        clearDOM(microDocument);
+        const html = microDocument.createElement('html');
+        html.innerHTML = '<head></head><body></body>';
+        microDocument.appendChild(html);
+        // 记录iframe原生body
+        this.microBody = microDocument.body;
+        this.microHead = microDocument.head;
+    }
+    /**
+     * baseElement will complete the relative address of element according to the URL
+     * e.g: a image link script fetch ajax EventSource
+     */
+    createIframeBase() {
+        this.baseElement = pureCreateElement('base');
+        this.updateIframeBase();
+        this.microHead.appendChild(this.baseElement);
+    }
+    createProxyLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost) {
+        this.proxyLocation = createMicroLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost);
+    }
+    createProxyWindow(microAppWindow) {
+        const rawWindow = globalEnv.rawWindow;
+        this.proxyWindow = new Proxy(microAppWindow, {
+            get: (target, key) => {
+                if (key === 'location') {
+                    return this.proxyLocation;
+                }
+                if (globalPropertyList.includes(key.toString())) {
                     return this.proxyWindow;
-                const rawValue = Reflect.get(target, key);
-                return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
+                }
+                return bindFunctionToRawTarget(Reflect.get(target, key), target);
             },
             set: (target, key, value) => {
-                /**
-                 * 1. Fix TypeError: Illegal invocation when set document.title
-                 * 2. If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
-                 */
-                Reflect.set(target, key, value);
+                if (this.active) {
+                    /**
+                     * TODO:
+                     * 1、location域名相同，子应用内部跳转时的处理
+                     * 2、和with沙箱的变量相同，提取成公共数组
+                     */
+                    if (key === 'location') {
+                        return Reflect.set(rawWindow, key, value);
+                    }
+                    Reflect.set(target, key, value);
+                    if (this.escapeProperties.includes(key)) {
+                        !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
+                        Reflect.set(rawWindow, key, value);
+                    }
+                }
                 return true;
-            }
+            },
+            has: (target, key) => key in target,
+            deleteProperty: (target, key) => {
+                if (Reflect.has(target, key)) {
+                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
+                    return Reflect.deleteProperty(target, key);
+                }
+                return true;
+            },
         });
-        class MicroDocument {
-            static [Symbol.hasInstance](target) {
-                let proto = target;
-                while (proto = Object.getPrototypeOf(proto)) {
-                    if (proto === MicroDocument.prototype) {
-                        return true;
+    }
+    /**
+     * get escapeProperties from plugins & adapter
+     * @param appName app name
+     */
+    getSpecialProperties(appName) {
+        var _a;
+        if (isPlainObject(microApp.options.plugins)) {
+            this.commonActionForSpecialProperties(microApp.options.plugins.global);
+            this.commonActionForSpecialProperties((_a = microApp.options.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+        }
+    }
+    // common action for global plugins and module plugins
+    commonActionForSpecialProperties(plugins) {
+        if (isArray(plugins)) {
+            for (const plugin of plugins) {
+                if (isPlainObject(plugin)) {
+                    if (isArray(plugin.escapeProperties)) {
+                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
                     }
                 }
-                return (target === proxyDocument ||
-                    target instanceof rawRootDocument);
             }
         }
-        /**
-         * TIP:
-         * 1. child class __proto__, which represents the inherit of the constructor, always points to the parent class
-         * 2. child class prototype.__proto__, which represents the inherit of methods, always points to parent class prototype
-         * e.g.
-         * class B extends A {}
-         * B.__proto__ === A // true
-         * B.prototype.__proto__ === A.prototype // true
-         */
-        Object.setPrototypeOf(MicroDocument, rawRootDocument);
-        // Object.create(rawRootDocument.prototype) will cause MicroDocument and proxyDocument methods not same when exec Document.prototype.xxx = xxx in child app
-        Object.setPrototypeOf(MicroDocument.prototype, new Proxy(rawRootDocument.prototype, {
-            get(target, key) {
-                throttleDeferForSetAppName(appName);
-                const rawValue = Reflect.get(target, key);
-                return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
-            },
-            set(target, key, value) {
-                Reflect.set(target, key, value);
-                return true;
-            }
-        }));
-        return {
-            proxyDocument,
-            MicroDocument,
-        };
+    }
+    initRouteState(defaultPage) {
+        initRouteStateWithURL(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location, defaultPage);
+    }
+    clearRouteState(keepRouteState) {
+        clearRouteStateFromURL(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, this.microAppWindow.location, keepRouteState);
+    }
+    setRouteInfoForKeepAliveApp() {
+        updateBrowserURLWithLocation(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location);
+    }
+    removeRouteInfoForKeepAliveApp() {
+        removeStateAndPathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
+    }
+    /**
+     * Format all html elements when init
+     * @param container micro app container
+     */
+    patchStaticElement(container) {
+        patchElementTree(container, this.microAppWindow.__MICRO_APP_NAME__);
+    }
+    /**
+     * Actions:
+     * 1. patch static elements from html
+     * @param container micro app container
+     */
+    actionBeforeExecScripts(container) {
+        this.patchStaticElement(container);
     }
 }
-SandBox.activeCount = 0; // number of active sandbox
+IframeSandbox.activeCount = 0; // number of active sandbox
 
 function formatEventInfo(event, element) {
     Object.defineProperties(event, {
@@ -5024,38 +6463,40 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
 }
 /**
  * Dispatch custom event to micro app
+ * @param app app
  * @param eventName event name
- * @param appName app name
  * @param detail event detail
  */
-function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
-    const event = new CustomEvent(formatEventName$1(eventName, appName), {
+function dispatchCustomEventToMicroApp(app, eventName, detail = {}) {
+    const event = new CustomEvent(formatEventName(eventName, app.name), {
         detail,
     });
-    window.dispatchEvent(event);
+    const target = app.iframe ? app.sandBox.microAppWindow : window;
+    target.dispatchEvent(event);
 }
 
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, container, scopecss, useSandbox, inline, esmodule, ssrUrl, isPrefetch, prefetchLevel, }) {
+    constructor({ name, url, container, scopecss, useSandbox, inline, iframe, ssrUrl, isPrefetch, prefetchLevel, }) {
         this.state = appStates.CREATED;
         this.keepAliveState = null;
-        this.keepAliveContainer = null;
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
         this.umdHookUnmount = null;
-        this.libraryName = null;
         this.umdMode = false;
+        // TODO: 类型优化，加上iframe沙箱
         this.sandBox = null;
         this.fiber = false;
         this.useMemoryRouter = true;
+        appInstanceMap.set(name, this);
+        // init actions
         this.name = name;
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
         this.inline = inline !== null && inline !== void 0 ? inline : false;
-        this.esmodule = esmodule !== null && esmodule !== void 0 ? esmodule : false;
+        this.iframe = iframe !== null && iframe !== void 0 ? iframe : false;
         // not exist when prefetch 👇
         this.container = container !== null && container !== void 0 ? container : null;
         this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
@@ -5063,15 +6504,13 @@ class CreateApp {
         this.isPrefetch = isPrefetch !== null && isPrefetch !== void 0 ? isPrefetch : false;
         this.isPrerender = prefetchLevel === 3;
         this.prefetchLevel = prefetchLevel;
-        // init actions
-        appInstanceMap.set(this.name, this);
         this.source = { html: null, links: new Set(), scripts: new Set() };
         this.loadSourceCode();
-        this.useSandbox && (this.sandBox = new SandBox(name, url));
+        this.createSandbox();
     }
     // Load resources
     loadSourceCode() {
-        this.state = appStates.LOADING;
+        this.setAppState(appStates.LOADING);
         HTMLLoader.getInstance().run(this, extractSourceDom);
     }
     /**
@@ -5081,7 +6520,7 @@ class CreateApp {
         var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
-            this.state = appStates.LOADED;
+            this.setAppState(appStates.LOADED);
             if (!this.isPrefetch && appStates.UNMOUNT !== this.state) {
                 getRootContainer(this.container).mount(this);
             }
@@ -5092,7 +6531,7 @@ class CreateApp {
                  * 1. fiber forced on
                  * 2. only virtual router support
                  *
-                 * NOTE: (4P: not - update browser url, dispatch popstateEvent, reload window, dispatch lifecycle event)
+                 * NOTE: (Don't update browser url, dispatch popstateEvent, reload window, dispatch lifecycle event)
                  * 1. pushState/replaceState in child can update microLocation, but will not attach router info to browser url
                  * 2. prevent dispatch popstate/hashchange event to browser
                  * 3. all navigation actions of location are invalid (In the future, we can consider update microLocation without trigger browser reload)
@@ -5112,7 +6551,6 @@ class CreateApp {
                     useMemoryRouter: true,
                     baseroute: '',
                     fiber: true,
-                    esmodule: this.esmodule,
                     defaultPage: defaultPage !== null && defaultPage !== void 0 ? defaultPage : '',
                     disablePatchRequest: disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : false,
                 });
@@ -5127,7 +6565,7 @@ class CreateApp {
         this.loadSourceLevel = -1;
         if (appStates.UNMOUNT !== this.state) {
             this.onerror(e);
-            this.state = appStates.LOAD_FAILED;
+            this.setAppState(appStates.LOAD_FAILED);
         }
     }
     /**
@@ -5139,150 +6577,151 @@ class CreateApp {
      * @param baseroute route prefix, default is ''
      * @param disablePatchRequest prevent rewrite request method of child app
      * @param fiber run js in fiber mode
-     * @param esmodule support type='module' script
      */
-    mount({ container, inline, useMemoryRouter, defaultPage, baseroute, disablePatchRequest, fiber, esmodule, }) {
-        var _a, _b, _c, _d, _e, _f;
+    mount({ container, inline, useMemoryRouter, defaultPage, baseroute, disablePatchRequest, fiber, }) {
         if (this.loadSourceLevel !== 2) {
             /**
-             * unmount prefetch app when loading source, when mount again before loading end,
-             * isPrefetch & isPrerender will be reset, and this.container sill be null
-             * so we should set this.container
+             * container cannot be null when load end
+             * NOTE:
+             *  1. render prefetch app before load end
+             *  2. unmount prefetch app and mount again before load end
              */
             this.container = container;
             // mount before prerender exec mount (loading source), set isPrerender to false
             this.isPrerender = false;
             // reset app state to LOADING
-            this.state = appStates.LOADING;
+            this.setAppState(appStates.LOADING);
             return;
         }
-        /**
-         * Mount app with prerender, this.container is empty
-         * When rendering again, identify prerender by this.container
-         * Transfer the contents of div to the <micro-app> tag
-         *
-         * Special scenes:
-         * 1. mount before prerender exec mount (loading source)
-         * 2. mount when prerender js executing
-         * 3. mount after prerender js exec end
-         *
-         * TODO: test shadowDOM
-         */
-        if (this.container instanceof HTMLDivElement &&
-            this.container.hasAttribute('prerender')) {
-            /**
-             * rebuild effect event of window, document, data center
-             * explain:
-             * 1. rebuild before exec mount, do nothing
-             * 2. rebuild when js executing, recovery recorded effect event, because prerender fiber mode
-             * 3. rebuild after js exec end, normal recovery effect event
-             */
-            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
-            // current this.container is <div prerender='true'></div>
-            cloneContainer(this.container, container, false);
+        this.createSandbox();
+        const nextAction = () => {
+            var _a, _b, _c, _d, _e, _f, _g;
             /**
-             * set this.container to <micro-app></micro-app>
-             * NOTE:
-             * must before exec this.preRenderEvent?.forEach((cb) => cb())
+             * Special scenes:
+             * 1. mount before prerender exec mount (loading source)
+             * 2. mount when prerender js executing
+             * 3. mount after prerender js exec end
+             * 4. mount after prerender unmounted
+             *
+             * TODO: test shadowDOM
              */
-            this.container = container;
-            (_b = this.preRenderEvent) === null || _b === void 0 ? void 0 : _b.forEach((cb) => cb());
-            // reset isPrerender config
-            this.isPrerender = false;
-            this.preRenderEvent = undefined;
-            // attach router info to browser url
-            router.attachToURL(this.name);
-            return (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.setPreRenderState(false);
-        }
-        this.container = container;
-        this.inline = inline;
-        this.esmodule = esmodule;
-        this.fiber = fiber;
-        // use in sandbox/effect
-        this.useMemoryRouter = useMemoryRouter;
-        // this.hiddenRouter = hiddenRouter ?? this.hiddenRouter
-        const dispatchBeforeMount = () => {
-            dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
-        };
-        if (this.isPrerender) {
-            ((_d = this.preRenderEvent) !== null && _d !== void 0 ? _d : (this.preRenderEvent = [])).push(dispatchBeforeMount);
-        }
-        else {
-            dispatchBeforeMount();
-        }
-        this.state = appStates.MOUNTING;
-        cloneContainer(this.source.html, this.container, !this.umdMode);
-        (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
-            umdMode: this.umdMode,
-            baseroute,
-            useMemoryRouter,
-            defaultPage,
-            disablePatchRequest,
-        });
-        let umdHookMountResult; // result of mount function
-        if (!this.umdMode) {
-            let hasDispatchMountedEvent = false;
-            // if all js are executed, param isFinished will be true
-            execScripts(this, (isFinished) => {
-                var _a;
+            if (this.isPrerender &&
+                isDivElement(this.container) &&
+                this.container.hasAttribute('prerender')) {
+                /**
+                 * rebuild effect event of window, document, data center
+                 * explain:
+                 * 1. rebuild before exec mount, do nothing
+                 * 2. rebuild when js executing, recovery recorded effect event, because prerender fiber mode
+                 * 3. rebuild after js exec end, normal recovery effect event
+                 */
+                (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
+                // current this.container is <div prerender='true'></div>
+                cloneContainer(this.container, container, false);
+                /**
+                 * set this.container to <micro-app></micro-app>
+                 * NOTE:
+                 * must exec before this.preRenderEvents?.forEach((cb) => cb())
+                 */
+                this.container = container;
+                (_b = this.preRenderEvents) === null || _b === void 0 ? void 0 : _b.forEach((cb) => cb());
+                // reset isPrerender config
+                this.isPrerender = false;
+                this.preRenderEvents = null;
+                // attach router info to browser url
+                router.attachToURL(this.name);
+                (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.setPreRenderState(false);
+            }
+            else {
+                this.container = container;
+                this.inline = inline;
+                this.fiber = fiber;
+                // use in sandbox/effect
+                this.useMemoryRouter = useMemoryRouter;
+                // this.hiddenRouter = hiddenRouter ?? this.hiddenRouter
+                const dispatchBeforeMount = () => dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+                if (this.isPrerender) {
+                    ((_d = this.preRenderEvents) !== null && _d !== void 0 ? _d : (this.preRenderEvents = [])).push(dispatchBeforeMount);
+                }
+                else {
+                    dispatchBeforeMount();
+                }
+                this.setAppState(appStates.MOUNTING);
+                // TODO: 将所有cloneContainer中的'as Element'去掉，兼容shadowRoot的场景
+                cloneContainer(this.source.html, this.container, !this.umdMode);
+                (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
+                    umdMode: this.umdMode,
+                    baseroute,
+                    useMemoryRouter,
+                    defaultPage,
+                    disablePatchRequest,
+                });
                 if (!this.umdMode) {
-                    const { mount, unmount } = this.getUmdLibraryHooks();
-                    /**
-                     * umdHookUnmount can works in non UMD mode
-                     * register with window.unmount
-                     */
-                    this.umdHookUnmount = unmount;
-                    // if mount & unmount is function, the sub app is umd mode
-                    if (isFunction(mount) && isFunction(unmount)) {
-                        this.umdHookMount = mount;
-                        this.umdMode = true;
-                        if (this.sandBox)
-                            this.sandBox.proxyWindow.__MICRO_APP_UMD_MODE__ = true;
-                        // this.sandBox?.recordEffectSnapshot()
-                        try {
-                            umdHookMountResult = this.umdHookMount(microApp.getData(this.name, true));
+                    // 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
+                             */
+                            this.umdHookUnmount = unmount;
+                            // 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);
+                                try {
+                                    this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
+                                }
+                                catch (e) {
+                                    logError('An error occurred in function mount \n', this.name, e);
+                                }
+                            }
+                            else if (isFinished === true) {
+                                this.handleMounted();
+                            }
                         }
-                        catch (e) {
-                            logError('an error occurred in the mount function \n', this.name, e);
-                        }
-                    }
+                    });
                 }
-                if (!hasDispatchMountedEvent && (isFinished === true || this.umdMode)) {
-                    hasDispatchMountedEvent = true;
-                    const dispatchMounted = () => this.handleMounted(umdHookMountResult);
-                    if (this.isPrerender) {
-                        ((_a = this.preRenderEvent) !== null && _a !== void 0 ? _a : (this.preRenderEvent = [])).push(dispatchMounted);
-                        this.recordAndReleaseEffect();
+                else {
+                    (_g = this.sandBox) === null || _g === void 0 ? void 0 : _g.rebuildEffectSnapshot();
+                    try {
+                        this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
                     }
-                    else {
-                        dispatchMounted();
+                    catch (e) {
+                        logError('An error occurred in function mount \n', this.name, e);
                     }
                 }
-            });
-        }
-        else {
-            (_f = this.sandBox) === null || _f === void 0 ? void 0 : _f.rebuildEffectSnapshot();
-            try {
-                umdHookMountResult = this.umdHookMount();
-            }
-            catch (e) {
-                logError('an error occurred in the mount function \n', this.name, e);
             }
-            this.handleMounted(umdHookMountResult);
-        }
+        };
+        // TODO: any替换为iframe沙箱类型
+        this.iframe ? this.sandBox.sandboxReady.then(nextAction) : nextAction();
     }
     /**
      * handle for promise umdHookMount
      * @param umdHookMountResult result of umdHookMount
      */
     handleMounted(umdHookMountResult) {
-        if (isPromise(umdHookMountResult)) {
-            umdHookMountResult
-                .then(() => this.dispatchMountedEvent())
-                .catch((e) => this.onerror(e));
+        var _a, _b;
+        const dispatchAction = () => {
+            if (isPromise(umdHookMountResult)) {
+                umdHookMountResult
+                    .then(() => this.dispatchMountedEvent())
+                    .catch((e) => this.onerror(e));
+            }
+            else {
+                this.dispatchMountedEvent();
+            }
+        };
+        if (this.isPrerender) {
+            (_a = this.preRenderEvents) === null || _a === void 0 ? void 0 : _a.push(dispatchAction);
+            (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ isPrerender: true });
         }
         else {
-            this.dispatchMountedEvent();
+            dispatchAction();
         }
     }
     /**
@@ -5290,9 +6729,9 @@ class CreateApp {
      */
     dispatchMountedEvent() {
         if (appStates.UNMOUNT !== this.state) {
-            this.state = appStates.MOUNTED;
+            this.setAppState(appStates.MOUNTED);
             // call window.onmount of child app
-            callFnWithTryCatch(this.getGlobalEventListener(microGlobalEvent.ONMOUNT), this.name, `window.${microGlobalEvent.ONMOUNT}`, microApp.getData(this.name, true));
+            execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONMOUNT), this.name, microGlobalEvent.ONMOUNT, microApp.getData(this.name, true));
             // dispatch event mounted to parent
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
         }
@@ -5306,30 +6745,25 @@ class CreateApp {
      * @param unmountcb callback of unmount
      */
     unmount({ destroy, clearData, keepRouteState, unmountcb, }) {
-        if (this.state === appStates.LOAD_FAILED) {
-            destroy = true;
-        }
-        this.state = appStates.UNMOUNT;
-        this.keepAliveState = null;
-        this.keepAliveContainer = null;
+        var _a;
+        destroy = destroy || this.state === appStates.LOAD_FAILED;
+        this.setAppState(appStates.UNMOUNT);
         // result of unmount function
-        let umdHookUnmountResult;
+        let umdHookUnmountResult = null;
         /**
          * send an unmount event to the micro app or call umd unmount hook
          * before the sandbox is cleared
          */
-        if (isFunction(this.umdHookUnmount)) {
-            try {
-                umdHookUnmountResult = this.umdHookUnmount(microApp.getData(this.name, true));
-            }
-            catch (e) {
-                logError('an error occurred in the unmount function \n', this.name, e);
-            }
+        try {
+            umdHookUnmountResult = (_a = this.umdHookUnmount) === null || _a === void 0 ? void 0 : _a.call(this, microApp.getData(this.name, true));
+        }
+        catch (e) {
+            logError('An error occurred in function unmount \n', this.name, e);
         }
-        // call window.onunmount of child app
-        callFnWithTryCatch(this.getGlobalEventListener(microGlobalEvent.ONUNMOUNT), this.name, `window.${microGlobalEvent.ONUNMOUNT}`);
         // dispatch unmount event to micro app
-        dispatchCustomEventToMicroApp('unmount', this.name);
+        dispatchCustomEventToMicroApp(this, 'unmount');
+        // call window.onunmount of child app
+        execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONUNMOUNT), this.name, microGlobalEvent.ONUNMOUNT);
         this.handleUnmounted(destroy, clearData, keepRouteState, umdHookUnmountResult, unmountcb);
     }
     /**
@@ -5341,19 +6775,17 @@ class CreateApp {
      * @param unmountcb callback of unmount
      */
     handleUnmounted(destroy, clearData, keepRouteState, umdHookUnmountResult, unmountcb) {
-        const unmountParam = {
+        const nextAction = () => this.actionsForUnmount({
             destroy,
             clearData,
             keepRouteState,
             unmountcb,
-        };
+        });
         if (isPromise(umdHookUnmountResult)) {
-            umdHookUnmountResult
-                .then(() => this.actionsForUnmount(unmountParam))
-                .catch(() => this.actionsForUnmount(unmountParam));
+            umdHookUnmountResult.then(nextAction).catch(nextAction);
         }
         else {
-            this.actionsForUnmount(unmountParam);
+            nextAction();
         }
     }
     /**
@@ -5364,26 +6796,20 @@ class CreateApp {
      * @param unmountcb callback of unmount
      */
     actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb }) {
-        var _a, _b;
-        if (destroy) {
-            this.actionsForCompletelyDestroy();
-        }
-        else if (this.umdMode && this.container.childElementCount) {
+        var _a;
+        if (this.umdMode && this.container && !destroy) {
             cloneContainer(this.container, this.source.html, false);
         }
-        if (this.umdMode) {
-            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordEffectSnapshot();
-        }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
          * NOTE:
          * 1. if destroy is true, clear route state
          * 2. umd mode and keep-alive will not clear EventSource
          */
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.stop({
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop({
             umdMode: this.umdMode,
             keepRouteState: keepRouteState && !destroy,
-            clearEventSource: !this.umdMode || destroy,
+            destroy,
             clearData: clearData || destroy,
         });
         if (!getActiveApps().length) {
@@ -5391,63 +6817,67 @@ class CreateApp {
         }
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
-        this.resetConfig();
-        unmountcb && unmountcb();
+        this.clearOptions(destroy);
+        unmountcb === null || unmountcb === void 0 ? void 0 : unmountcb();
     }
-    resetConfig() {
+    clearOptions(destroy) {
         this.container.innerHTML = '';
         this.container = null;
         this.isPrerender = false;
-        this.preRenderEvent = undefined;
+        this.preRenderEvents = null;
+        this.setKeepAliveState(null);
+        // in iframe sandbox & default mode, delete the sandbox & iframeElement
+        if (this.iframe && !this.umdMode)
+            this.sandBox = null;
+        if (destroy)
+            this.actionsForCompletelyDestroy();
     }
     // actions for completely destroy
     actionsForCompletelyDestroy() {
-        if (!this.useSandbox && this.umdMode) {
-            delete window[this.libraryName];
-        }
+        var _a, _b;
+        (_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.deleteIframeElement) === null || _b === void 0 ? void 0 : _b.call(_a);
         sourceCenter.script.deleteInlineInfo(this.source.scripts);
         appInstanceMap.delete(this.name);
     }
     // hidden app when disconnectedCallback called with keep-alive
     hiddenKeepAliveApp(callback) {
-        var _a;
-        const oldContainer = this.container;
-        cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
-        this.container = this.keepAliveContainer;
-        this.keepAliveState = keepAliveStates.KEEP_ALIVE_HIDDEN;
-        // event should dispatch before clone node
-        // dispatch afterHidden event to micro-app
-        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+        var _a, _b;
+        this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_HIDDEN);
+        /**
+         * event should dispatch before clone node
+         * dispatch afterHidden event to micro-app
+         */
+        dispatchCustomEventToMicroApp(this, 'appstate-change', {
             appState: 'afterhidden',
         });
         // dispatch afterHidden event to base app
-        dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERHIDDEN);
         if (this.useMemoryRouter) {
             // called after lifeCyclesEvent
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
         }
-        this.recordAndReleaseEffect();
-        callback && callback();
+        this.container = cloneContainer(this.container, pureCreateElement('div'), false);
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
+        callback === null || callback === void 0 ? void 0 : callback();
     }
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
         var _a, _b;
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
         // dispatch beforeShow event to micro-app
-        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+        dispatchCustomEventToMicroApp(this, 'appstate-change', {
             appState: 'beforeshow',
         });
         // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
-        cloneContainer(this.container, container, false);
-        this.container = container;
-        this.keepAliveState = keepAliveStates.KEEP_ALIVE_SHOW;
+        this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
+        this.container = cloneContainer(this.container, container, false);
         if (this.useMemoryRouter) {
             // called before lifeCyclesEvent
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
         }
         // dispatch afterShow event to micro-app
-        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+        dispatchCustomEventToMicroApp(this, 'appstate-change', {
             appState: 'aftershow',
         });
         // dispatch afterShow event to base app
@@ -5460,48 +6890,71 @@ class CreateApp {
     onerror(e) {
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
     }
+    /**
+     * Scene:
+     *  1. create app
+     *  2. remount of default mode with iframe sandbox
+     *    In default mode with iframe sandbox, unmount app will delete iframeElement & sandBox, and create sandBox when mount again, used to solve the problem that module script cannot be execute when append it again
+     */
+    createSandbox() {
+        if (this.useSandbox && !this.sandBox) {
+            if (this.iframe) {
+                this.sandBox = new IframeSandbox(this.name, this.url);
+            }
+            else {
+                this.sandBox = new WithSandBox(this.name, this.url);
+            }
+        }
+    }
+    // set app state
+    setAppState(state) {
+        this.state = state;
+    }
     // get app state
     getAppState() {
         return this.state;
     }
+    // set keep-alive state
+    setKeepAliveState(state) {
+        this.keepAliveState = state;
+    }
     // get keep-alive state
     getKeepAliveState() {
         return this.keepAliveState;
     }
     // get umd library, if it not exist, return empty object
     getUmdLibraryHooks() {
-        var _a, _b, _c, _d;
         // after execScripts, the app maybe unmounted
-        if (appStates.UNMOUNT !== this.state) {
-            const global = ((_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) !== null && _b !== void 0 ? _b : globalEnv.rawWindow);
-            this.libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
-            if (isObject(global[this.libraryName])) {
-                return global[this.libraryName];
+        if (appStates.UNMOUNT !== this.state && 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: (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.proxyWindow.mount,
-                unmount: (_d = this.sandBox) === null || _d === void 0 ? void 0 : _d.proxyWindow.unmount,
+                mount: proxyWindow.mount,
+                unmount: proxyWindow.unmount,
             };
         }
         return {};
     }
-    getGlobalEventListener(eventName) {
-        var _a;
-        // @ts-ignore
-        const listener = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow[eventName];
+    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];
         return isFunction(listener) ? listener : null;
     }
-    /**
-     * Record global effect and then release (effect: global event, timeout, data listener)
-     * Scenes:
-     * 1. hidden keep-alive app
-     * 2. after init prerender app
-     */
-    recordAndReleaseEffect() {
-        var _a, _b;
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordEffectSnapshot();
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.releaseGlobalEffect();
+    querySelector(selectors) {
+        return this.container ? globalEnv.rawElementQuerySelector.call(this.container, selectors) : null;
     }
+    querySelectorAll(selectors) {
+        return this.container ? globalEnv.rawElementQuerySelectorAll.call(this.container, selectors) : [];
+    }
+}
+// iframe route mode
+function isIframeSandbox(appName) {
+    var _a, _b;
+    return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.iframe) !== null && _b !== void 0 ? _b : false;
 }
 
 /**
@@ -5530,12 +6983,14 @@ function defineElement(tagName) {
                 const formatAttrName = formatAppName(this.getAttribute('name'));
                 const formatAttrUrl = formatAppURL(this.getAttribute('url'), this.appName);
                 if (this.legalAttribute('name', formatAttrName) && this.legalAttribute('url', formatAttrUrl)) {
-                    const existApp = appInstanceMap.get(formatAttrName);
-                    if (formatAttrName !== this.appName && existApp) {
-                        // handling of cached and non-prefetch apps
-                        if (appStates.UNMOUNT !== existApp.getAppState() &&
-                            keepAliveStates.KEEP_ALIVE_HIDDEN !== existApp.getKeepAliveState() &&
-                            !existApp.isPrefetch) {
+                    const oldApp = appInstanceMap.get(formatAttrName);
+                    /**
+                     * If oldApp exist & appName is different, determine whether oldApp is running
+                     */
+                    if (formatAttrName !== this.appName && oldApp) {
+                        if (oldApp.getAppState() !== appStates.UNMOUNT &&
+                            oldApp.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN &&
+                            !oldApp.isPrefetch) {
                             this.setAttribute('name', this.appName);
                             return logError(`app name conflict, an app named ${formatAttrName} is running`);
                         }
@@ -5543,16 +6998,16 @@ function defineElement(tagName) {
                     if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
                         if (formatAttrName === this.appName) {
                             this.handleUnmount(true, () => {
-                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
+                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                             });
                         }
                         else if (this.getKeepAliveModeResult()) {
                             this.handleHiddenKeepAliveApp();
-                            this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
+                            this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                         }
                         else {
                             this.handleUnmount(this.getDestroyCompatibleResult(), () => {
-                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
+                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                             });
                         }
                     }
@@ -5684,37 +7139,35 @@ function defineElement(tagName) {
             }
             this.updateSsrUrl(this.appUrl);
             if (appInstanceMap.has(this.appName)) {
-                const app = appInstanceMap.get(this.appName);
-                const existAppUrl = app.ssrUrl || app.url;
-                const targetAppUrl = this.ssrUrl || this.appUrl;
+                const oldApp = appInstanceMap.get(this.appName);
+                const oldAppUrl = oldApp.ssrUrl || oldApp.url;
+                const targetUrl = this.ssrUrl || this.appUrl;
                 /**
                  * NOTE:
                  * 1. keep-alive don't care about ssrUrl
                  * 2. Even if the keep-alive app is pushed into the background, it is still active and cannot be replaced. Otherwise, it is difficult for developers to troubleshoot in case of conflict and  will leave developers at a loss
                  * 3. When scopecss, useSandbox of prefetch app different from target app, delete prefetch app and create new one
                  */
-                if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN &&
-                    app.url === this.appUrl) {
-                    this.handleShowKeepAliveApp(app);
+                if (oldApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN &&
+                    oldApp.url === this.appUrl) {
+                    this.handleShowKeepAliveApp(oldApp);
                 }
-                else if (existAppUrl === targetAppUrl && (app.getAppState() === appStates.UNMOUNT ||
-                    (app.isPrefetch && (app.scopecss === this.isScopecss() &&
-                        app.useSandbox === this.isSandbox())))) {
-                    this.handleAppMount(app);
+                else if (oldAppUrl === targetUrl && (oldApp.getAppState() === appStates.UNMOUNT ||
+                    (oldApp.isPrefetch &&
+                        this.sameCoreOptions(oldApp)))) {
+                    this.handleAppMount(oldApp);
                 }
-                else if (app.isPrefetch || app.getAppState() === appStates.UNMOUNT) {
-                    if ((process.env.NODE_ENV !== 'production') &&
-                        app.scopecss === this.isScopecss() &&
-                        app.useSandbox === this.isSandbox()) {
+                else if (oldApp.isPrefetch || oldApp.getAppState() === appStates.UNMOUNT) {
+                    if ((process.env.NODE_ENV !== 'production') && this.sameCoreOptions(oldApp)) {
                         /**
                          * url is different & old app is unmounted or prefetch, create new app to replace old one
                          */
-                        logWarn(`the ${app.isPrefetch ? 'prefetch' : 'unmounted'} app with url: ${existAppUrl} replaced by a new app with url: ${targetAppUrl}`, this.appName);
+                        logWarn(`the ${oldApp.isPrefetch ? 'prefetch' : 'unmounted'} app with url: ${oldAppUrl} replaced by a new app with url: ${targetUrl}`, this.appName);
                     }
                     this.handleCreateApp();
                 }
                 else {
-                    logError(`app name conflict, an app named: ${this.appName} with url: ${existAppUrl} is running`);
+                    logError(`app name conflict, an app named: ${this.appName} with url: ${oldAppUrl} is running`);
                 }
             }
             else {
@@ -5722,7 +7175,7 @@ function defineElement(tagName) {
             }
         }
         // remount app or create app if attribute url or name change
-        actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp) {
+        actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp) {
             var _a;
             /**
              * do not add judgment of formatAttrUrl === this.appUrl
@@ -5735,26 +7188,38 @@ function defineElement(tagName) {
                 this.setAttribute('name', this.appName);
             }
             /**
-             * when existApp not null: this.appName === existApp.name
-             * scene1: if formatAttrName and this.appName are equal: exitApp is the current app, the url must be different, existApp has been unmounted
-             * scene2: if formatAttrName and this.appName are different: existApp must be prefetch or unmounted, if url is equal, then just mount, if url is different, then create new app to replace existApp
+             * when oldApp not null: this.appName === oldApp.name
+             * scene1: if formatAttrName and this.appName are equal: exitApp is the current app, the url must be different, oldApp has been unmounted
+             * scene2: if formatAttrName and this.appName are different: oldApp must be prefetch or unmounted, if url is equal, then just mount, if url is different, then create new app to replace oldApp
              * scene3: url is different but ssrUrl is equal
              * scene4: url is equal but ssrUrl is different, if url is equal, name must different
-             * scene5: if existApp is KEEP_ALIVE_HIDDEN, name must different
+             * scene5: if oldApp is KEEP_ALIVE_HIDDEN, name must different
              */
-            if (existApp) {
-                if (existApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
-                    if (existApp.url === this.appUrl) {
-                        this.handleShowKeepAliveApp(existApp);
+            if (oldApp) {
+                if (oldApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                    if (oldApp.url === this.appUrl) {
+                        this.handleShowKeepAliveApp(oldApp);
                     }
                     else {
                         // the hidden keep-alive app is still active
                         logError(`app name conflict, an app named ${this.appName} is running`);
                     }
+                    /**
+                     * TODO:
+                     *  1. oldApp必是unmountApp或preFetchApp，这里还应该考虑沙箱、iframe、样式隔离不一致的情况
+                     *  2. unmountApp要不要判断样式隔离、沙箱、iframe，然后彻底删除并再次渲染？(包括handleConnected里的处理，先不改？)
+                     * 推荐：if (
+                     *  oldApp.url === this.appUrl &&
+                     *  oldApp.ssrUrl === this.ssrUrl && (
+                     *    oldApp.getAppState() === appStates.UNMOUNT ||
+                     *    (oldApp.isPrefetch && this.sameCoreOptions(oldApp))
+                     *  )
+                     * )
+                     */
                 }
-                else if (existApp.url === this.appUrl && existApp.ssrUrl === this.ssrUrl) {
+                else if (oldApp.url === this.appUrl && oldApp.ssrUrl === this.ssrUrl) {
                     // mount app
-                    this.handleAppMount(existApp);
+                    this.handleAppMount(oldApp);
                 }
                 else {
                     this.handleCreateApp();
@@ -5778,24 +7243,39 @@ function defineElement(tagName) {
         }
         // create app instance
         handleCreateApp() {
-            var _a;
+            const createAppInstance = () => {
+                var _a;
+                return new CreateApp({
+                    name: this.appName,
+                    url: this.appUrl,
+                    scopecss: this.useScopecss(),
+                    useSandbox: this.useSandbox(),
+                    inline: this.getDisposeResult('inline'),
+                    iframe: this.getDisposeResult('iframe'),
+                    container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
+                    ssrUrl: this.ssrUrl,
+                });
+            };
             /**
-             * actions for destroy old app
-             * fix of unmounted umd app with disableSandbox
+             * Actions for destroy old app
+             * If oldApp exist, it must be 3 scenes:
+             *  1. oldApp is unmounted app (url is is different)
+             *  2. oldApp is prefetch, not prerender (url, scopecss, useSandbox, iframe is different)
+             *  3. oldApp is prerender (url, scopecss, useSandbox, iframe is different)
              */
-            if (appInstanceMap.has(this.appName)) {
-                appInstanceMap.get(this.appName).actionsForCompletelyDestroy();
+            const oldApp = appInstanceMap.get(this.appName);
+            if (oldApp) {
+                if (oldApp.isPrerender) {
+                    this.handleUnmount(true, createAppInstance);
+                }
+                else {
+                    oldApp.actionsForCompletelyDestroy();
+                    createAppInstance();
+                }
+            }
+            else {
+                createAppInstance();
             }
-            new CreateApp({
-                name: this.appName,
-                url: this.appUrl,
-                scopecss: this.isScopecss(),
-                useSandbox: this.isSandbox(),
-                inline: this.getDisposeResult('inline'),
-                esmodule: this.getDisposeResult('esmodule'),
-                container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
-                ssrUrl: this.ssrUrl,
-            });
         }
         /**
          * mount app
@@ -5821,7 +7301,6 @@ function defineElement(tagName) {
                 baseroute: this.getBaseRouteCompatible(),
                 disablePatchRequest: this.getDisposeResult('disable-patch-request'),
                 fiber: this.getDisposeResult('fiber'),
-                esmodule: this.getDisposeResult('esmodule'),
             });
         }
         /**
@@ -5860,10 +7339,10 @@ function defineElement(tagName) {
          * @param name Configuration item name
          */
         getDisposeResult(name) {
-            return (this.compatibleSpecialProperties(name) || !!microApp.options[name]) && this.compatibleDisableSpecialProperties(name);
+            return (this.compatibleProperties(name) || !!microApp.options[name]) && this.compatibleDisableProperties(name);
         }
         // compatible of disableScopecss & disableSandbox
-        compatibleSpecialProperties(name) {
+        compatibleProperties(name) {
             if (name === 'disable-scopecss') {
                 return this.hasAttribute('disable-scopecss') || this.hasAttribute('disableScopecss');
             }
@@ -5873,7 +7352,7 @@ function defineElement(tagName) {
             return this.hasAttribute(name);
         }
         // compatible of disableScopecss & disableSandbox
-        compatibleDisableSpecialProperties(name) {
+        compatibleDisableProperties(name) {
             if (name === 'disable-scopecss') {
                 return this.getAttribute('disable-scopecss') !== 'false' && this.getAttribute('disableScopecss') !== 'false';
             }
@@ -5882,12 +7361,20 @@ function defineElement(tagName) {
             }
             return this.getAttribute(name) !== 'false';
         }
-        isScopecss() {
+        useScopecss() {
             return !(this.getDisposeResult('disable-scopecss') || this.getDisposeResult('shadowDOM'));
         }
-        isSandbox() {
+        useSandbox() {
             return !this.getDisposeResult('disable-sandbox');
         }
+        /**
+         * Determine whether the core options of the existApp is consistent with the new one
+         */
+        sameCoreOptions(app) {
+            return (app.scopecss === this.useScopecss() &&
+                app.useSandbox === this.useSandbox() &&
+                app.iframe === this.getDisposeResult('iframe'));
+        }
         /**
          * 2021-09-08
          * get baseRoute
@@ -5972,7 +7459,7 @@ function defineElement(tagName) {
  *  {
  *    name: string,
  *    url: string,
- *    esmodule: boolean,
+ *    iframe: boolean,
  *    inline: boolean,
  *    'disable-scopecss': boolean,
  *    'disable-sandbox': boolean,
@@ -6036,7 +7523,7 @@ function preFetchAction(options) {
                     scopecss: !((_b = (_a = options['disable-scopecss']) !== null && _a !== void 0 ? _a : options.disableScopecss) !== null && _b !== void 0 ? _b : microApp.options['disable-scopecss']),
                     useSandbox: !((_d = (_c = options['disable-sandbox']) !== null && _c !== void 0 ? _c : options.disableSandbox) !== null && _d !== void 0 ? _d : microApp.options['disable-sandbox']),
                     inline: (_e = options.inline) !== null && _e !== void 0 ? _e : microApp.options.inline,
-                    esmodule: (_f = options.esmodule) !== null && _f !== void 0 ? _f : microApp.options.esmodule,
+                    iframe: (_f = options.iframe) !== null && _f !== void 0 ? _f : microApp.options.iframe,
                     prefetchLevel: options.level && PREFETCH_LEVEL.includes(options.level) ? options.level : microApp.options.prefetchLevel && PREFETCH_LEVEL.includes(microApp.options.prefetchLevel) ? microApp.options.prefetchLevel : 2,
                 });
                 const oldOnload = app.onLoad;
@@ -6135,10 +7622,19 @@ function unmountApp(appName, options) {
     return new Promise((resolve) => {
         if (app) {
             if (app.getAppState() === appStates.UNMOUNT || app.isPrefetch) {
-                if (options === null || options === void 0 ? void 0 : options.destroy) {
-                    app.actionsForCompletelyDestroy();
+                if (app.isPrerender) {
+                    app.unmount({
+                        destroy: !!(options === null || options === void 0 ? void 0 : options.destroy),
+                        clearData: !!(options === null || options === void 0 ? void 0 : options.clearData),
+                        keepRouteState: false,
+                        unmountcb: resolve.bind(null, true)
+                    });
+                }
+                else {
+                    if (options === null || options === void 0 ? void 0 : options.destroy)
+                        app.actionsForCompletelyDestroy();
+                    resolve(true);
                 }
-                resolve(true);
             }
             else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
@@ -6188,7 +7684,7 @@ function unmountApp(appName, options) {
                 else if ((options === null || options === void 0 ? void 0 : options.clearAliveState) && container.hasAttribute('keep-alive')) {
                     const keepAliveAttrValue = container.getAttribute('keep-alive');
                     container.removeAttribute('keep-alive');
-                    let clearDataAttrValue;
+                    let clearDataAttrValue = null;
                     if (options.clearData) {
                         clearDataAttrValue = container.getAttribute('clear-data');
                         container.setAttribute('clear-data', 'true');
@@ -6198,7 +7694,7 @@ function unmountApp(appName, options) {
                     isString(clearDataAttrValue) && container.setAttribute('clear-data', clearDataAttrValue);
                 }
                 else {
-                    let clearDataAttrValue;
+                    let clearDataAttrValue = null;
                     if (options === null || options === void 0 ? void 0 : options.clearData) {
                         clearDataAttrValue = container.getAttribute('clear-data');
                         container.setAttribute('clear-data', 'true');
@@ -6321,10 +7817,10 @@ class MicroApp extends EventCenterForBaseApp {
                 return logError(`${options.tagName} is invalid tagName`);
             }
         }
-        if (window.customElements.get(this.tagName)) {
+        initGlobalEnv();
+        if (globalEnv.rawWindow.customElements.get(this.tagName)) {
             return logWarn(`element ${this.tagName} is already defined`);
         }
-        initGlobalEnv();
         if (isPlainObject(options)) {
             this.options = options;
             options['disable-scopecss'] = (_a = options['disable-scopecss']) !== null && _a !== void 0 ? _a : options.disableScopecss;