@micro-zoe/micro-app 0.8.0 → 0.8.4

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.8.0';
+const version = '0.8.4';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -153,10 +153,10 @@ function CompletionPath(path, baseURI) {
 /**
  * Get the folder where the link resource is located,
  * which is used to complete the relative address in the css
- * @param linkpath full link address
+ * @param linkPath full link address
  */
-function getLinkFileDir(linkpath) {
-    const pathArr = linkpath.split('/');
+function getLinkFileDir(linkPath) {
+    const pathArr = linkPath.split('/');
     pathArr.pop();
     return addProtocol(pathArr.join('/') + '/');
 }
@@ -224,7 +224,7 @@ const requestIdleCallback = globalThis.requestIdleCallback ||
                     return Math.max(0, 50 - (Date.now() - lastTime));
                 },
             });
-        }, 1);
+        }, 50);
     };
 /**
  * Record the currently running app.name
@@ -233,13 +233,10 @@ let currentMicroAppName = null;
 function setCurrentAppName(appName) {
     currentMicroAppName = appName;
 }
-let isWaitingForReset = false;
 function throttleDeferForSetAppName(appName) {
-    if (!isWaitingForReset || currentMicroAppName !== appName) {
-        isWaitingForReset = true;
+    if (currentMicroAppName !== appName) {
         setCurrentAppName(appName);
         defer(() => {
-            isWaitingForReset = false;
             setCurrentAppName(null);
         });
     }
@@ -306,6 +303,9 @@ function getRootContainer(target) {
 function trim(str) {
     return str ? str.replace(/^\s+|\s+$/g, '') : '';
 }
+function isFireFox() {
+    return navigator.userAgent.indexOf('Firefox') > -1;
+}
 
 var ObservedAttrName;
 (function (ObservedAttrName) {
@@ -362,13 +362,12 @@ function fetchSource(url, appName = null, options = {}) {
 // common reg
 const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/;
 const bodySelectorREG = /(^|\s+)((html[\s>~]+body)|body)(?=[\s>~[.#:]+|$)/;
-const cssUrlREG = /url\(["']?([^)"']+)["']?\)/gm;
-function parseError(msg, linkpath) {
-    msg = linkpath ? `${linkpath}:${msg}` : msg;
+function parseError(msg, linkPath) {
+    msg = linkPath ? `${linkPath} ${msg}` : msg;
     const err = new Error(msg);
     err.reason = msg;
-    if (linkpath) {
-        err.filename = linkpath;
+    if (linkPath) {
+        err.filename = linkPath;
     }
     throw err;
 }
@@ -376,14 +375,14 @@ function parseError(msg, linkpath) {
  * Reference resources https://github.com/reworkcss/css
  * CSSParser mainly deals with 3 scenes: styleRule, @, and comment
  * And scopecss deals with 2 scenes: selector & url
- * It can also disable scopecss with inline comments
+ * And can also disable scopecss with inline comments
  */
 class CSSParser {
     constructor() {
         this.cssText = ''; // css content
         this.prefix = ''; // prefix as micro-app[name=xxx]
         this.baseURI = ''; // domain name
-        this.linkpath = ''; // link resource address, if it is the style converted from link, it will have linkpath
+        this.linkPath = ''; // link resource address, if it is the style converted from link, it will have linkPath
         this.result = ''; // parsed cssText
         this.scopecssDisable = false; // use block comments /* scopecss-disable */ to disable scopecss in your file, and use /* scopecss-enable */ to enable scopecss
         this.scopecssDisableSelectors = []; // disable or enable scopecss for specific selectors
@@ -401,16 +400,16 @@ class CSSParser {
         // https://developer.mozilla.org/en-US/docs/Web/API/CSSNamespaceRule
         this.namespaceRule = this.createMatcherForNoneBraceAtRule('namespace');
     }
-    exec(cssText, prefix, baseURI, linkpath) {
+    exec(cssText, prefix, baseURI, linkPath) {
         this.cssText = cssText;
         this.prefix = prefix;
         this.baseURI = baseURI;
-        this.linkpath = linkpath || '';
+        this.linkPath = linkPath || '';
         this.matchRules();
-        return this.result;
+        return isFireFox() ? decodeURIComponent(this.result) : this.result;
     }
     reset() {
-        this.cssText = this.prefix = this.baseURI = this.linkpath = this.result = '';
+        this.cssText = this.prefix = this.baseURI = this.linkPath = this.result = '';
         this.scopecssDisable = this.scopecssDisableNextLine = false;
         this.scopecssDisableSelectors = [];
     }
@@ -426,92 +425,76 @@ class CSSParser {
     }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule
     matchStyleRule() {
-        const selectorList = this.formatSelector();
+        const selectors = this.formatSelector(true);
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        if (!selectorList)
-            return parseError('selector missing', this.linkpath);
-        this.result += selectorList.join(', ');
+        if (!selectors)
+            return parseError('selector missing', this.linkPath);
+        this.recordResult(selectors);
         this.matchComments();
         this.styleDeclarations();
         this.matchLeadingSpaces();
         return true;
     }
+    formatSelector(skip) {
+        const m = this.commonMatch(/^([^{]+)/, skip);
+        if (!m)
+            return false;
+        return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
+            selector = trim(selector);
+            if (!(this.scopecssDisableNextLine ||
+                (this.scopecssDisable && (!this.scopecssDisableSelectors.length ||
+                    this.scopecssDisableSelectors.includes(selector))) ||
+                rootSelectorREG.test(selector))) {
+                if (bodySelectorREG.test(selector)) {
+                    selector = selector.replace(bodySelectorREG, this.prefix + ' micro-app-body');
+                }
+                else {
+                    selector = this.prefix + ' ' + selector;
+                }
+            }
+            return separator + selector;
+        });
+    }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
     styleDeclarations() {
         if (!this.matchOpenBrace())
-            return parseError("Declaration missing '{'", this.linkpath);
-        this.matchComments();
-        while (this.styleDeclaration()) {
-            this.matchComments();
-        }
+            return parseError("Declaration missing '{'", this.linkPath);
+        this.matchAllDeclarations();
         if (!this.matchCloseBrace())
-            return parseError("Declaration missing '}'", this.linkpath);
+            return parseError("Declaration missing '}'", this.linkPath);
         return true;
     }
-    // match one styleDeclaration at a time
-    styleDeclaration() {
-        // css property
-        if (!this.commonMatch(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/))
-            return false;
-        // match :
-        if (!this.commonMatch(/^:\s*/))
-            return parseError("property missing ':'", this.linkpath);
-        // match css value
-        const r = this.commonMatch(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/, true);
-        let cssValue = r ? r[0] : '';
-        if (!this.scopecssDisableNextLine &&
-            (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
-            cssValue = cssValue.replace(cssUrlREG, (all, $1) => {
-                if (/^((data|blob):|#)/.test($1) || /^(https?:)?\/\//.test($1)) {
-                    return all;
-                }
-                // ./a/b.png  ../a/b.png  a/b.png
-                if (/^((\.\.?\/)|[^/])/.test($1) && this.linkpath) {
-                    this.baseURI = getLinkFileDir(this.linkpath);
-                }
-                return `url("${CompletionPath($1, this.baseURI)}")`;
-            });
+    matchAllDeclarations() {
+        let cssValue = this.commonMatch(/^(?:url\(["']?(?:[^)"'}]+)["']?\)|[^}/])*/, true)[0];
+        if (cssValue) {
+            if (!this.scopecssDisableNextLine &&
+                (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
+                cssValue = cssValue.replace(/url\(["']?([^)"']+)["']?\)/gm, (all, $1) => {
+                    if (/^((data|blob):|#)/.test($1) || /^(https?:)?\/\//.test($1)) {
+                        return all;
+                    }
+                    // ./a/b.png  ../a/b.png  a/b.png
+                    if (/^((\.\.?\/)|[^/])/.test($1) && this.linkPath) {
+                        this.baseURI = getLinkFileDir(this.linkPath);
+                    }
+                    return `url("${CompletionPath($1, this.baseURI)}")`;
+                });
+            }
+            this.recordResult(cssValue);
         }
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        this.result += cssValue;
-        this.matchLeadingSpaces();
-        this.commonMatch(/^[;\s]*/);
-        return true;
-    }
-    formatSelector() {
-        const m = this.commonMatch(/^([^{]+)/, true);
-        if (!m)
-            return false;
-        return trim(m[0])
-            .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
-            .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (r) => {
-            return r.replace(/,/g, '\u200C');
-        })
-            .split(/\s*(?![^(]*\)),\s*/)
-            .map((s) => {
-            const selectorText = s.replace(/\u200C/g, ',');
-            if (this.scopecssDisableNextLine) {
-                return selectorText;
-            }
-            else if (this.scopecssDisable) {
-                if (!this.scopecssDisableSelectors.length ||
-                    this.scopecssDisableSelectors.includes(selectorText)) {
-                    return selectorText;
-                }
-            }
-            if (selectorText === '*') {
-                return this.prefix + ' *';
-            }
-            else if (bodySelectorREG.test(selectorText)) {
-                return selectorText.replace(bodySelectorREG, this.prefix + ' micro-app-body');
-            }
-            else if (rootSelectorREG.test(selectorText)) { // ignore root selector
-                return selectorText;
-            }
-            return this.prefix + ' ' + selectorText;
-        });
+        if (!this.cssText || this.cssText.charAt(0) === '}')
+            return;
+        // extract comments in declarations
+        if (this.cssText.charAt(0) === '/' && this.cssText.charAt(1) === '*') {
+            this.matchComments();
+        }
+        else {
+            this.commonMatch(/\/+/);
+        }
+        return this.matchAllDeclarations();
     }
     matchAtRule() {
         if (this.cssText[0] !== '@')
@@ -520,7 +503,7 @@ class CSSParser {
         this.scopecssDisableNextLine = false;
         return this.keyframesRule() ||
             this.mediaRule() ||
-            this.custommediaRule() ||
+            this.customMediaRule() ||
             this.supportsRule() ||
             this.importRule() ||
             this.charsetRule() ||
@@ -528,23 +511,23 @@ class CSSParser {
             this.documentRule() ||
             this.pageRule() ||
             this.hostRule() ||
-            this.fontfaceRule();
+            this.fontFaceRule();
     }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
     keyframesRule() {
         if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/))
             return false;
         if (!this.commonMatch(/^([-\w]+)\s*/))
-            return parseError('@keyframes missing name', this.linkpath);
+            return parseError('@keyframes missing name', this.linkPath);
         this.matchComments();
         if (!this.matchOpenBrace())
-            return parseError("@keyframes missing '{'", this.linkpath);
+            return parseError("@keyframes missing '{'", this.linkPath);
         this.matchComments();
         while (this.keyframeRule()) {
             this.matchComments();
         }
         if (!this.matchCloseBrace())
-            return parseError("@keyframes missing '}'", this.linkpath);
+            return parseError("@keyframes missing '}'", this.linkPath);
         this.matchLeadingSpaces();
         return true;
     }
@@ -562,7 +545,7 @@ class CSSParser {
         return true;
     }
     // https://github.com/postcss/postcss-custom-media
-    custommediaRule() {
+    customMediaRule() {
         if (!this.commonMatch(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/))
             return false;
         this.matchLeadingSpaces();
@@ -572,13 +555,13 @@ class CSSParser {
     pageRule() {
         if (!this.commonMatch(/^@page */))
             return false;
-        this.formatSelector();
+        this.formatSelector(false);
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
         return this.commonHandlerForAtRuleWithSelfRule('page');
     }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSFontFaceRule
-    fontfaceRule() {
+    fontFaceRule() {
         if (!this.commonMatch(/^@font-face\s*/))
             return false;
         return this.commonHandlerForAtRuleWithSelfRule('font-face');
@@ -589,11 +572,11 @@ class CSSParser {
             if (!this.commonMatch(reg))
                 return false;
             if (!this.matchOpenBrace())
-                return parseError(`@${name} missing '{'`, this.linkpath);
+                return parseError(`@${name} missing '{'`, this.linkPath);
             this.matchComments();
             this.matchRules();
             if (!this.matchCloseBrace())
-                return parseError(`@${name} missing '}'`, this.linkpath);
+                return parseError(`@${name} missing '}'`, this.linkPath);
             this.matchLeadingSpaces();
             return true;
         };
@@ -605,19 +588,16 @@ class CSSParser {
             if (!this.commonMatch(reg))
                 return false;
             this.matchLeadingSpaces();
-            return false;
+            return true;
         };
     }
     // common handler for @font-face, @page
     commonHandlerForAtRuleWithSelfRule(name) {
         if (!this.matchOpenBrace())
-            return parseError(`@${name} missing '{'`, this.linkpath);
-        this.matchComments();
-        while (this.styleDeclaration()) {
-            this.matchComments();
-        }
+            return parseError(`@${name} missing '{'`, this.linkPath);
+        this.matchAllDeclarations();
         if (!this.matchCloseBrace())
-            return parseError(`@${name} missing '}'`, this.linkpath);
+            return parseError(`@${name} missing '}'`, this.linkPath);
         this.matchLeadingSpaces();
         return true;
     }
@@ -637,11 +617,11 @@ class CSSParser {
             ++i;
         i += 2;
         if (this.cssText.charAt(i - 1) === '') {
-            return parseError('End of comment missing', this.linkpath);
+            return parseError('End of comment missing', this.linkPath);
         }
         // get comment content
         let commentText = this.cssText.slice(2, i - 2);
-        this.result += `/*${commentText}*/`;
+        this.recordResult(`/*${commentText}*/`);
         commentText = trim(commentText.replace(/^\s*!/, ''));
         // set ignore config
         if (commentText === 'scopecss-disable-next-line') {
@@ -674,7 +654,7 @@ class CSSParser {
         const matchStr = matchArray[0];
         this.cssText = this.cssText.slice(matchStr.length);
         if (!skip)
-            this.result += matchStr;
+            this.recordResult(matchStr);
         return matchArray;
     }
     matchOpenBrace() {
@@ -687,21 +667,31 @@ class CSSParser {
     matchLeadingSpaces() {
         this.commonMatch(/^\s*/);
     }
+    // splice string
+    recordResult(strFragment) {
+        // Firefox is slow when string contain special characters, see https://github.com/micro-zoe/micro-app/issues/256
+        if (isFireFox()) {
+            this.result += encodeURIComponent(strFragment);
+        }
+        else {
+            this.result += strFragment;
+        }
+    }
 }
 /**
  * common method of bind CSS
  */
-function commonAction(styleElement, appName, prefix, baseURI, linkpath) {
+function commonAction(styleElement, appName, prefix, baseURI, linkPath) {
     if (!styleElement.__MICRO_APP_HAS_SCOPED__) {
         styleElement.__MICRO_APP_HAS_SCOPED__ = true;
         let result = null;
         try {
-            result = parser.exec(styleElement.textContent, prefix, baseURI, linkpath);
+            result = parser.exec(styleElement.textContent, prefix, baseURI, linkPath);
             parser.reset();
         }
         catch (e) {
             parser.reset();
-            logError('CSSParser: An error occurred while parsing CSS', appName, e);
+            logError('An error occurred while parsing CSS:\n', appName, e);
         }
         if (result)
             styleElement.textContent = result;
@@ -837,11 +827,9 @@ function extractLinkFromHtml(link, parent, app, isDynamic = false) {
  */
 function fetchLinksFromHtml(wrapElement, app, microAppHead) {
     const linkEntries = Array.from(app.source.links.entries());
-    const fetchLinkPromise = [];
-    for (const [url] of linkEntries) {
-        const globalLinkCode = globalLinks.get(url);
-        globalLinkCode ? fetchLinkPromise.push(globalLinkCode) : fetchLinkPromise.push(fetchSource(url, app.name));
-    }
+    const fetchLinkPromise = linkEntries.map(([url]) => {
+        return globalLinks.has(url) ? globalLinks.get(url) : fetchSource(url, app.name);
+    });
     promiseStream(fetchLinkPromise, (res) => {
         fetchLinkSuccess(linkEntries[res.index][0], linkEntries[res.index][1], res.data, microAppHead, app);
     }, (err) => {
@@ -883,7 +871,7 @@ function fetchLinkSuccess(url, info, data, microAppHead, app) {
  * @param originLink origin link element
  * @param replaceStyle style element which replaced origin link
  */
-function foramtDynamicLink(url, info, app, originLink, replaceStyle) {
+function formatDynamicLink(url, info, app, originLink, replaceStyle) {
     if (app.source.links.has(url)) {
         replaceStyle.textContent = app.source.links.get(url).code;
         scopedCSS(replaceStyle, app);
@@ -912,2162 +900,2183 @@ function foramtDynamicLink(url, info, app, originLink, replaceStyle) {
     });
 }
 
-const globalEnv = {};
-/**
- * Note loop nesting
- * Only prototype or unique values can be put here
- */
-function initGlobalEnv() {
-    if (isBrowser) {
-        /**
-         * save patch raw methods
-         * pay attention to this binding
-         */
-        const rawSetAttribute = Element.prototype.setAttribute;
-        const rawAppendChild = Element.prototype.appendChild;
-        const rawInsertBefore = Element.prototype.insertBefore;
-        const rawReplaceChild = Element.prototype.replaceChild;
-        const rawRemoveChild = Element.prototype.removeChild;
-        const rawAppend = Element.prototype.append;
-        const rawPrepend = Element.prototype.prepend;
-        const rawCloneNode = Element.prototype.cloneNode;
-        const rawCreateElement = Document.prototype.createElement;
-        const rawCreateElementNS = Document.prototype.createElementNS;
-        const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
-        const rawQuerySelector = Document.prototype.querySelector;
-        const rawQuerySelectorAll = Document.prototype.querySelectorAll;
-        const rawGetElementById = Document.prototype.getElementById;
-        const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
-        const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
-        const rawGetElementsByName = Document.prototype.getElementsByName;
-        const ImageProxy = new Proxy(Image, {
-            construct(Target, args) {
-                const elementImage = new Target(...args);
-                elementImage.__MICRO_APP_NAME__ = getCurrentAppName();
-                return elementImage;
-            },
-        });
-        const rawWindow = Function('return window')();
-        const rawDocument = Function('return document')();
-        const supportModuleScript = isSupportModuleScript();
-        /**
-         * 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 rawDocumentAddEventListener = rawDocument.addEventListener;
-        const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
-        // mark current application as base application
-        window.__MICRO_APP_BASE_APPLICATION__ = true;
-        Object.assign(globalEnv, {
-            // source/patch
-            rawSetAttribute,
-            rawAppendChild,
-            rawInsertBefore,
-            rawReplaceChild,
-            rawRemoveChild,
-            rawAppend,
-            rawPrepend,
-            rawCloneNode,
-            rawCreateElement,
-            rawCreateElementNS,
-            rawCreateDocumentFragment,
-            rawQuerySelector,
-            rawQuerySelectorAll,
-            rawGetElementById,
-            rawGetElementsByClassName,
-            rawGetElementsByTagName,
-            rawGetElementsByName,
-            ImageProxy,
-            // common global vars
-            rawWindow,
-            rawDocument,
-            supportModuleScript,
-            // sandbox/effect
-            rawWindowAddEventListener,
-            rawWindowRemoveEventListener,
-            rawSetInterval,
-            rawSetTimeout,
-            rawClearInterval,
-            rawClearTimeout,
-            rawDocumentAddEventListener,
-            rawDocumentRemoveEventListener,
-        });
-    }
-}
-
-// Global scripts, reuse across apps
-const globalScripts = new Map();
+// Record element and map element
+const dynamicElementInMicroAppMap = new WeakMap();
 /**
- * Extract script elements
- * @param script script element
- * @param parent parent element of script
+ * Process the new node and format the style, link and script element
+ * @param parent parent node
+ * @param child new node
  * @param app app
- * @param isDynamic dynamic insert
  */
-function extractScriptElement(script, parent, app, isDynamic = false) {
-    let replaceComment = null;
-    let src = script.getAttribute('src');
-    if (script.hasAttribute('exclude')) {
-        replaceComment = document.createComment('script element with exclude attribute removed by micro-app');
-    }
-    else if ((script.type && !['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module'].includes(script.type)) ||
-        script.hasAttribute('ignore')) {
-        return null;
-    }
-    else if ((globalEnv.supportModuleScript && script.noModule) ||
-        (!globalEnv.supportModuleScript && script.type === 'module')) {
-        replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
-    }
-    else if (src) { // remote script
-        src = CompletionPath(src, app.url);
-        const info = {
-            code: '',
-            isExternal: true,
-            isDynamic: isDynamic,
-            async: script.hasAttribute('async'),
-            defer: script.defer || script.type === 'module',
-            module: script.type === 'module',
-            isGlobal: script.hasAttribute('global'),
-        };
-        if (!isDynamic) {
-            app.source.scripts.set(src, info);
-            replaceComment = document.createComment(`script with src='${src}' extract by micro-app`);
+function handleNewNode(parent, child, app) {
+    if (child instanceof HTMLStyleElement) {
+        if (child.hasAttribute('exclude')) {
+            const replaceComment = document.createComment('style element with exclude attribute ignored by micro-app');
+            dynamicElementInMicroAppMap.set(child, replaceComment);
+            return replaceComment;
         }
-        else {
-            return { url: src, info };
+        else if (app.scopecss && !child.hasAttribute('ignore')) {
+            return scopedCSS(child, app);
         }
+        return child;
     }
-    else if (script.textContent) { // inline script
-        const nonceStr = createNonceSrc();
-        const info = {
-            code: script.textContent,
-            isExternal: false,
-            isDynamic: isDynamic,
-            async: false,
-            defer: script.type === 'module',
-            module: script.type === 'module',
-        };
-        if (!isDynamic) {
-            app.source.scripts.set(nonceStr, info);
-            replaceComment = document.createComment('inline script extract by micro-app');
+    else if (child instanceof HTMLLinkElement) {
+        if (child.hasAttribute('exclude')) {
+            const linkReplaceComment = document.createComment('link element with exclude attribute ignored by micro-app');
+            dynamicElementInMicroAppMap.set(child, linkReplaceComment);
+            return linkReplaceComment;
         }
-        else {
-            return { url: nonceStr, info };
+        else if (child.hasAttribute('ignore')) {
+            return child;
         }
+        const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, true);
+        if (url && info) {
+            const replaceStyle = pureCreateElement('style');
+            replaceStyle.__MICRO_APP_LINK_PATH__ = url;
+            formatDynamicLink(url, info, app, child, replaceStyle);
+            dynamicElementInMicroAppMap.set(child, replaceStyle);
+            return replaceStyle;
+        }
+        else if (replaceComment) {
+            dynamicElementInMicroAppMap.set(child, replaceComment);
+            return replaceComment;
+        }
+        return child;
     }
-    else if (!isDynamic) {
-        /**
-         * script with empty src or empty script.textContent remove in static html
-         * & not removed if it created by dynamic
-         */
-        replaceComment = document.createComment('script element removed by micro-app');
-    }
-    if (isDynamic) {
-        return { replaceComment };
-    }
-    else {
-        return parent.replaceChild(replaceComment, script);
+    else if (child instanceof HTMLScriptElement) {
+        const { replaceComment, url, info } = extractScriptElement(child, parent, app, true) || {};
+        if (url && info) {
+            if (!info.isExternal) { // inline script
+                const replaceElement = runScript(url, app, info, true);
+                dynamicElementInMicroAppMap.set(child, replaceElement);
+                return replaceElement;
+            }
+            else { // remote script
+                const replaceElement = runDynamicRemoteScript(url, info, app, child);
+                dynamicElementInMicroAppMap.set(child, replaceElement);
+                return replaceElement;
+            }
+        }
+        else if (replaceComment) {
+            dynamicElementInMicroAppMap.set(child, replaceComment);
+            return replaceComment;
+        }
+        return child;
     }
+    return child;
 }
 /**
- *  Get remote resources of script
- * @param wrapElement htmlDom
+ * Handle the elements inserted into head and body, and execute normally in other cases
  * @param app app
+ * @param method raw method
+ * @param parent parent node
+ * @param targetChild target node
+ * @param passiveChild second param of insertBefore and replaceChild
  */
-function fetchScriptsFromHtml(wrapElement, app) {
-    const scriptEntries = Array.from(app.source.scripts.entries());
-    const fetchScriptPromise = [];
-    const fetchScriptPromiseInfo = [];
-    for (const [url, info] of scriptEntries) {
-        if (info.isExternal) {
-            const globalScriptText = globalScripts.get(url);
-            if (globalScriptText) {
-                info.code = globalScriptText;
-            }
-            else if (!info.defer && !info.async) {
-                fetchScriptPromise.push(fetchSource(url, app.name));
-                fetchScriptPromiseInfo.push([url, info]);
+function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
+    /**
+     * 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 (parent === document.head) {
+        const microAppHead = app.container.querySelector('micro-app-head');
+        /**
+         * 1. If passiveChild exists, it must be insertBefore or replaceChild
+         * 2. When removeChild, targetChild may not be in microAppHead or head
+         */
+        if (passiveChild && !microAppHead.contains(passiveChild)) {
+            return globalEnv.rawAppendChild.call(microAppHead, targetChild);
+        }
+        else if (rawMethod === globalEnv.rawRemoveChild && !microAppHead.contains(targetChild)) {
+            if (parent.contains(targetChild)) {
+                return rawMethod.call(parent, targetChild);
             }
+            return targetChild;
+        }
+        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
+            return rawMethod.call(microAppHead, targetChild);
         }
+        return rawMethod.call(microAppHead, targetChild, passiveChild);
     }
-    if (fetchScriptPromise.length) {
-        promiseStream(fetchScriptPromise, (res) => {
-            fetchScriptSuccess(fetchScriptPromiseInfo[res.index][0], fetchScriptPromiseInfo[res.index][1], res.data);
-        }, (err) => {
-            logError(err, app.name);
-        }, () => {
-            app.onLoad(wrapElement);
-        });
+    else if (parent === document.body) {
+        const microAppBody = app.container.querySelector('micro-app-body');
+        if (passiveChild && !microAppBody.contains(passiveChild)) {
+            return globalEnv.rawAppendChild.call(microAppBody, targetChild);
+        }
+        else if (rawMethod === globalEnv.rawRemoveChild && !microAppBody.contains(targetChild)) {
+            if (parent.contains(targetChild)) {
+                return rawMethod.call(parent, targetChild);
+            }
+            return targetChild;
+        }
+        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
+            return rawMethod.call(microAppBody, targetChild);
+        }
+        return rawMethod.call(microAppBody, targetChild, passiveChild);
     }
-    else {
-        app.onLoad(wrapElement);
+    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
+        return rawMethod.call(parent, targetChild);
     }
+    return rawMethod.call(parent, targetChild, passiveChild);
 }
-/**
- * fetch js succeeded, record the code value
- * @param url script address
- * @param info resource script info
- * @param data code
- */
-function fetchScriptSuccess(url, info, data) {
-    if (info.isGlobal && !globalScripts.has(url)) {
-        globalScripts.set(url, data);
-    }
-    info.code = data;
+// Get the map element
+function getMappingNode(node) {
+    var _a;
+    return (_a = dynamicElementInMicroAppMap.get(node)) !== null && _a !== void 0 ? _a : node;
 }
 /**
- * Execute js in the mount lifecycle
- * @param scriptList script list
- * @param app app
- * @param initedHook callback for umd mode
+ * method of handle new node
+ * @param parent parent node
+ * @param newChild new node
+ * @param passiveChild passive node
+ * @param rawMethod method
  */
-function execScripts(scriptList, app, initedHook) {
-    const scriptListEntries = Array.from(scriptList.entries());
-    const deferScriptPromise = [];
-    const deferScriptInfo = [];
-    for (const [url, info] of scriptListEntries) {
-        if (!info.isDynamic) {
-            // Notice the second render
-            if (info.defer || info.async) {
-                if (info.isExternal && !info.code) {
-                    deferScriptPromise.push(fetchSource(url, app.name));
+function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
+    if (newChild === null || newChild === void 0 ? void 0 : newChild.__MICRO_APP_NAME__) {
+        const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
+        if (app === null || app === void 0 ? void 0 : app.container) {
+            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(parent, newChild, app), passiveChild && getMappingNode(passiveChild));
+        }
+        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
+            return rawMethod.call(parent, newChild);
+        }
+        return rawMethod.call(parent, newChild, passiveChild);
+    }
+    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
+        const appName = getCurrentAppName();
+        if (!(newChild instanceof Node) && appName) {
+            const app = appInstanceMap.get(appName);
+            if (app === null || app === void 0 ? void 0 : app.container) {
+                if (parent === document.head) {
+                    return rawMethod.call(app.container.querySelector('micro-app-head'), newChild);
                 }
-                else {
-                    deferScriptPromise.push(info.code);
+                else if (parent === document.body) {
+                    return rawMethod.call(app.container.querySelector('micro-app-body'), newChild);
                 }
-                deferScriptInfo.push([url, info]);
-                info.module && (initedHook.moduleCount = initedHook.moduleCount ? ++initedHook.moduleCount : 1);
-            }
-            else {
-                runScript(url, app, info, false);
-                initedHook(false);
             }
         }
+        return rawMethod.call(parent, newChild);
     }
-    if (deferScriptPromise.length) {
-        promiseStream(deferScriptPromise, (res) => {
-            const info = deferScriptInfo[res.index][1];
-            info.code = info.code || res.data;
-        }, (err) => {
-            initedHook.errorCount = initedHook.errorCount ? ++initedHook.errorCount : 1;
-            logError(err, app.name);
-        }, () => {
-            deferScriptInfo.forEach(([url, info]) => {
-                if (info.code) {
-                    runScript(url, app, info, false, initedHook);
-                    !info.module && initedHook(false);
-                }
-            });
-            initedHook(isUndefined(initedHook.moduleCount) ||
-                initedHook.errorCount === deferScriptPromise.length);
-        });
-    }
-    else {
-        initedHook(true);
-    }
+    return rawMethod.call(parent, newChild, passiveChild);
 }
 /**
- * run code
- * @param url script address
- * @param app app
- * @param info script info
- * @param isDynamic dynamically created script
- * @param callback callback of module script
+ * Rewrite element prototype method
  */
-function runScript(url, app, info, isDynamic, callback) {
-    var _a;
-    try {
-        const code = bindScope(url, app, info.code, info.module);
-        if (app.inline || info.module) {
-            const scriptElement = pureCreateElement('script');
-            runCode2InlineScript(url, code, info.module, scriptElement, callback);
-            if (isDynamic)
-                return scriptElement;
-            // TEST IGNORE
-            (_a = app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-body').appendChild(scriptElement);
+function patchElementPrototypeMethods() {
+    patchDocument();
+    // prototype methods of add element👇
+    Element.prototype.appendChild = function appendChild(newChild) {
+        return commonElementHandler(this, newChild, null, globalEnv.rawAppendChild);
+    };
+    Element.prototype.insertBefore = function insertBefore(newChild, refChild) {
+        return commonElementHandler(this, newChild, refChild, globalEnv.rawInsertBefore);
+    };
+    Element.prototype.replaceChild = function replaceChild(newChild, oldChild) {
+        return commonElementHandler(this, newChild, oldChild, globalEnv.rawReplaceChild);
+    };
+    Element.prototype.append = function append(...nodes) {
+        let i = 0;
+        const length = nodes.length;
+        while (i < length) {
+            commonElementHandler(this, nodes[i], null, globalEnv.rawAppend);
+            i++;
         }
-        else {
-            runCode2Function(code, info);
-            if (isDynamic)
-                return document.createComment('dynamic script extract by micro-app');
+    };
+    Element.prototype.prepend = function prepend(...nodes) {
+        let i = nodes.length;
+        while (i > 0) {
+            commonElementHandler(this, nodes[i - 1], null, globalEnv.rawPrepend);
+            i--;
         }
-    }
-    catch (e) {
-        console.error(`[micro-app from runScript] app ${app.name}: `, e);
-    }
-}
-/**
- * Get dynamically created remote script
- * @param url script address
- * @param info info
- * @param app app
- * @param originScript origin script element
- */
-function runDynamicRemoteScript(url, info, app, originScript) {
-    const dispatchScriptOnLoadEvent = () => dispatchOnLoadEvent(originScript);
-    // url is unique
-    if (app.source.scripts.has(url)) {
-        const existInfo = app.source.scripts.get(url);
-        !existInfo.module && defer(dispatchScriptOnLoadEvent);
-        return runScript(url, app, existInfo, true, dispatchScriptOnLoadEvent);
-    }
-    if (globalScripts.has(url)) {
-        const code = globalScripts.get(url);
-        info.code = code;
-        app.source.scripts.set(url, info);
-        !info.module && defer(dispatchScriptOnLoadEvent);
-        return runScript(url, app, info, true, dispatchScriptOnLoadEvent);
-    }
-    let replaceElement;
-    if (app.inline || info.module) {
-        replaceElement = pureCreateElement('script');
-    }
-    else {
-        replaceElement = document.createComment(`dynamic script with src='${url}' extract by micro-app`);
-    }
-    fetchSource(url, app.name).then((code) => {
-        info.code = code;
-        app.source.scripts.set(url, info);
-        info.isGlobal && globalScripts.set(url, code);
-        try {
-            code = bindScope(url, app, code, info.module);
-            if (app.inline || info.module) {
-                runCode2InlineScript(url, code, info.module, replaceElement, dispatchScriptOnLoadEvent);
-            }
-            else {
-                runCode2Function(code, info);
+    };
+    // prototype methods of delete element👇
+    Element.prototype.removeChild = function removeChild(oldChild) {
+        if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
+            const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
+            if (app === null || app === void 0 ? void 0 : app.container) {
+                return invokePrototypeMethod(app, globalEnv.rawRemoveChild, this, getMappingNode(oldChild));
             }
+            return globalEnv.rawRemoveChild.call(this, oldChild);
         }
-        catch (e) {
-            console.error(`[micro-app from runDynamicScript] app ${app.name}: `, e, url);
-        }
-        !info.module && dispatchOnLoadEvent(originScript);
-    }).catch((err) => {
-        logError(err, app.name);
-        dispatchOnErrorEvent(originScript);
-    });
-    return replaceElement;
+        return globalEnv.rawRemoveChild.call(this, oldChild);
+    };
+    // patch cloneNode
+    Element.prototype.cloneNode = function cloneNode(deep) {
+        const clonedNode = globalEnv.rawCloneNode.call(this, deep);
+        this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
+        return clonedNode;
+    };
+    // patch getBoundingClientRect
+    // TODO: scenes test
+    // Element.prototype.getBoundingClientRect = function getBoundingClientRect () {
+    //   const rawRect: DOMRect = globalEnv.rawGetBoundingClientRect.call(this)
+    //   if (this.__MICRO_APP_NAME__) {
+    //     const app = appInstanceMap.get(this.__MICRO_APP_NAME__)
+    //     if (!app?.container) {
+    //       return rawRect
+    //     }
+    //     const appBody = app.container.querySelector('micro-app-body')
+    //     const appBodyRect: DOMRect = globalEnv.rawGetBoundingClientRect.call(appBody)
+    //     const computedRect: DOMRect = new DOMRect(
+    //       rawRect.x - appBodyRect.x,
+    //       rawRect.y - appBodyRect.y,
+    //       rawRect.width,
+    //       rawRect.height,
+    //     )
+    //     return computedRect
+    //   }
+    //   return rawRect
+    // }
 }
 /**
- * common handle for inline script
- * @param url script address
- * @param code bound code
- * @param module type='module' of script
- * @param scriptElement target script element
- * @param callback callback of module script
- */
-function runCode2InlineScript(url, code, module, scriptElement, callback) {
-    if (module) {
-        // module script is async, transform it to a blob for subsequent operations
-        const blob = new Blob([code], { type: 'text/javascript' });
-        scriptElement.src = URL.createObjectURL(blob);
-        scriptElement.setAttribute('type', 'module');
-        if (callback) {
-            callback.moduleCount && callback.moduleCount--;
-            scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
-        }
-    }
-    else {
-        scriptElement.textContent = code;
-    }
-    if (!url.startsWith('inline-')) {
-        scriptElement.setAttribute('data-origin-src', url);
-    }
-}
-// init & run code2Function
-function runCode2Function(code, info) {
-    if (!info.code2Function) {
-        info.code2Function = new Function(code);
-    }
-    info.code2Function.call(window);
-}
-/**
- * bind js scope
- * @param url script address
- * @param app app
- * @param code code
- * @param module type='module' of script
+ * Mark the newly created element in the micro application
+ * @param element new element
  */
-function bindScope(url, app, code, module) {
-    if (isPlainObject(microApp.plugins)) {
-        code = usePlugins(url, code, app.name, microApp.plugins);
-    }
-    if (app.sandBox && !module) {
-        globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
-        return `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
-    }
-    return code;
+function markElement(element) {
+    const appName = getCurrentAppName();
+    appName && (element.__MICRO_APP_NAME__ = appName);
+    return element;
 }
-/**
- * Call the plugin to process the file
- * @param url script address
- * @param code code
- * @param appName app name
- * @param plugins plugin list
- */
-function usePlugins(url, code, appName, plugins) {
-    var _a;
-    if (isArray(plugins.global)) {
-        for (const plugin of plugins.global) {
-            if (isPlainObject(plugin) && isFunction(plugin.loader)) {
-                code = plugin.loader(code, url, plugin.options);
-            }
+// methods of document
+function patchDocument() {
+    const rawDocument = globalEnv.rawDocument;
+    // create element 👇
+    Document.prototype.createElement = function createElement(tagName, options) {
+        const element = globalEnv.rawCreateElement.call(this, tagName, options);
+        return markElement(element);
+    };
+    Document.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
+        const element = globalEnv.rawCreateElementNS.call(this, namespaceURI, name, options);
+        return markElement(element);
+    };
+    Document.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = globalEnv.rawCreateDocumentFragment.call(this);
+        return markElement(element);
+    };
+    // query element👇
+    function querySelector(selectors) {
+        var _a, _b, _c;
+        const appName = getCurrentAppName();
+        if (!appName ||
+            !selectors ||
+            isUniqueElement(selectors) ||
+            // see https://github.com/micro-zoe/micro-app/issues/56
+            rawDocument !== this) {
+            return globalEnv.rawQuerySelector.call(this, selectors);
         }
+        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.querySelector(selectors)) !== null && _c !== void 0 ? _c : null;
     }
-    if (isArray((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName])) {
-        for (const plugin of plugins.modules[appName]) {
-            if (isPlainObject(plugin) && isFunction(plugin.loader)) {
-                code = plugin.loader(code, url, plugin.options);
-            }
+    function querySelectorAll(selectors) {
+        var _a, _b, _c;
+        const appName = getCurrentAppName();
+        if (!appName ||
+            !selectors ||
+            isUniqueElement(selectors) ||
+            rawDocument !== this) {
+            return globalEnv.rawQuerySelectorAll.call(this, selectors);
         }
+        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors)) !== null && _c !== void 0 ? _c : [];
     }
-    return code;
-}
-
-/**
- * transform html string to dom
- * @param str string dom
- */
-function getWrapElement(str) {
-    const wrapDiv = pureCreateElement('div');
-    wrapDiv.innerHTML = str;
-    return wrapDiv;
+    Document.prototype.querySelector = querySelector;
+    Document.prototype.querySelectorAll = querySelectorAll;
+    Document.prototype.getElementById = function getElementById(key) {
+        if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
+            return globalEnv.rawGetElementById.call(this, key);
+        }
+        try {
+            return querySelector.call(this, `#${key}`);
+        }
+        catch (_a) {
+            return globalEnv.rawGetElementById.call(this, key);
+        }
+    };
+    Document.prototype.getElementsByClassName = function getElementsByClassName(key) {
+        if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
+            return globalEnv.rawGetElementsByClassName.call(this, key);
+        }
+        try {
+            return querySelectorAll.call(this, `.${key}`);
+        }
+        catch (_a) {
+            return globalEnv.rawGetElementsByClassName.call(this, key);
+        }
+    };
+    Document.prototype.getElementsByTagName = function getElementsByTagName(key) {
+        var _a;
+        const appName = getCurrentAppName();
+        if (!appName ||
+            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);
+        }
+    };
+    Document.prototype.getElementsByName = function getElementsByName(key) {
+        if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
+            return globalEnv.rawGetElementsByName.call(this, key);
+        }
+        try {
+            return querySelectorAll.call(this, `[name=${key}]`);
+        }
+        catch (_a) {
+            return globalEnv.rawGetElementsByName.call(this, key);
+        }
+    };
 }
 /**
- * Recursively process each child element
- * @param parent parent element
- * @param app app
- * @param microAppHead micro-app-head element
+ * patchSetAttribute is different from other patch
+ * it not dependent on sandbox
+ * it should exec when micro-app first created & release when all app unmounted
  */
-function flatChildren(parent, app, microAppHead) {
-    const children = Array.from(parent.children);
-    children.length && children.forEach((child) => {
-        flatChildren(child, app);
-    });
-    for (const dom of children) {
-        if (dom instanceof HTMLLinkElement) {
-            if (dom.hasAttribute('exclude')) {
-                parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
-            }
-            else if (!dom.hasAttribute('ignore')) {
-                extractLinkFromHtml(dom, parent, app);
-            }
-            else if (dom.hasAttribute('href')) {
-                dom.setAttribute('href', CompletionPath(dom.getAttribute('href'), app.url));
-            }
-        }
-        else if (dom instanceof HTMLStyleElement) {
-            if (dom.hasAttribute('exclude')) {
-                parent.replaceChild(document.createComment('style element with exclude attribute ignored by micro-app'), dom);
+let hasRewriteSetAttribute = false;
+function patchSetAttribute() {
+    if (hasRewriteSetAttribute)
+        return;
+    hasRewriteSetAttribute = true;
+    Element.prototype.setAttribute = function setAttribute(key, value) {
+        if (/^micro-app(-\S+)?/i.test(this.tagName) && key === 'data') {
+            if (isPlainObject(value)) {
+                const cloneValue = {};
+                Object.getOwnPropertyNames(value).forEach((propertyKey) => {
+                    if (!(isString(propertyKey) && propertyKey.indexOf('__') === 0)) {
+                        // @ts-ignore
+                        cloneValue[propertyKey] = value[propertyKey];
+                    }
+                });
+                this.data = cloneValue;
             }
-            else if (app.scopecss && !dom.hasAttribute('ignore')) {
-                scopedCSS(dom, app);
+            else if (value !== '[object Object]') {
+                logWarn('property data must be an object', this.getAttribute('name'));
             }
         }
-        else if (dom instanceof HTMLScriptElement) {
-            extractScriptElement(dom, parent, app);
-        }
-        else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
-            parent.removeChild(dom);
+        else if ((((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
+            (key === 'href' && /^link$/i.test(this.tagName))) &&
+            this.__MICRO_APP_NAME__ &&
+            appInstanceMap.has(this.__MICRO_APP_NAME__)) {
+            const app = appInstanceMap.get(this.__MICRO_APP_NAME__);
+            globalEnv.rawSetAttribute.call(this, key, CompletionPath(value, app.url));
         }
-        else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
-            dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
+        else {
+            globalEnv.rawSetAttribute.call(this, key, value);
         }
-    }
+    };
 }
-/**
- * Extract link and script, bind style scope
- * @param htmlStr html string
- * @param app app
- */
-function extractSourceDom(htmlStr, app) {
-    const wrapElement = getWrapElement(htmlStr);
-    const microAppHead = wrapElement.querySelector('micro-app-head');
-    const microAppBody = wrapElement.querySelector('micro-app-body');
-    if (!microAppHead || !microAppBody) {
-        const msg = `element ${microAppHead ? 'body' : 'head'} is missing`;
-        app.onerror(new Error(msg));
-        return logError(msg, app.name);
-    }
-    flatChildren(wrapElement, app);
-    if (app.source.links.size) {
-        fetchLinksFromHtml(wrapElement, app, microAppHead);
-    }
-    else {
-        app.onLoad(wrapElement);
-    }
-    if (app.source.scripts.size) {
-        fetchScriptsFromHtml(wrapElement, app);
-    }
-    else {
-        app.onLoad(wrapElement);
-    }
+function releasePatchSetAttribute() {
+    hasRewriteSetAttribute = false;
+    Element.prototype.setAttribute = globalEnv.rawSetAttribute;
 }
-/**
- * Get and format html
- * @param app app
- */
-function extractHtml(app) {
-    fetchSource(app.ssrUrl || app.url, app.name, { cache: 'no-cache' }).then((htmlStr) => {
-        if (!htmlStr) {
-            const msg = 'html is empty, please check in detail';
-            app.onerror(new Error(msg));
-            return logError(msg, app.name);
-        }
-        htmlStr = htmlStr
-            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
-            return match
-                .replace(/<head/i, '<micro-app-head')
-                .replace(/<\/head>/i, '</micro-app-head>');
-        })
-            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
-            return match
-                .replace(/<body/i, '<micro-app-body')
-                .replace(/<\/body>/i, '</micro-app-body>');
-        });
-        extractSourceDom(htmlStr, app);
-    }).catch((e) => {
-        logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, app.name, e);
-        app.onLoadError(e);
-    });
+function releasePatchDocument() {
+    Document.prototype.createElement = globalEnv.rawCreateElement;
+    Document.prototype.createElementNS = globalEnv.rawCreateElementNS;
+    Document.prototype.createDocumentFragment = globalEnv.rawCreateDocumentFragment;
+    Document.prototype.querySelector = globalEnv.rawQuerySelector;
+    Document.prototype.querySelectorAll = globalEnv.rawQuerySelectorAll;
+    Document.prototype.getElementById = globalEnv.rawGetElementById;
+    Document.prototype.getElementsByClassName = globalEnv.rawGetElementsByClassName;
+    Document.prototype.getElementsByTagName = globalEnv.rawGetElementsByTagName;
+    Document.prototype.getElementsByName = globalEnv.rawGetElementsByName;
 }
-
-class EventCenter {
-    constructor() {
-        this.eventList = new Map();
-    }
-    // whether the name is legal
-    isLegalName(name) {
-        if (!name) {
-            logError('event-center: Invalid name');
-            return false;
-        }
-        return true;
-    }
-    /**
-     * add listener
-     * @param name event name
-     * @param f listener
-     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
-     */
-    on(name, f, autoTrigger = false) {
-        if (this.isLegalName(name)) {
-            if (!isFunction(f)) {
-                return logError('event-center: Invalid callback function');
-            }
-            let eventInfo = this.eventList.get(name);
-            if (!eventInfo) {
-                eventInfo = {
-                    data: {},
-                    callbacks: new Set(),
-                };
-                this.eventList.set(name, eventInfo);
-            }
-            else if (autoTrigger && Object.getOwnPropertyNames(eventInfo.data).length) {
-                // auto trigger when data not null
-                f(eventInfo.data);
-            }
-            eventInfo.callbacks.add(f);
-        }
-    }
-    // remove listener, but the data is not cleared
-    off(name, f) {
-        if (this.isLegalName(name)) {
-            const eventInfo = this.eventList.get(name);
-            if (eventInfo) {
-                if (isFunction(f)) {
-                    eventInfo.callbacks.delete(f);
-                }
-                else {
-                    eventInfo.callbacks.clear();
-                }
-            }
-        }
-    }
-    // dispatch data
-    dispatch(name, data) {
-        if (this.isLegalName(name)) {
-            if (!isPlainObject(data)) {
-                return logError('event-center: data must be object');
-            }
-            let eventInfo = this.eventList.get(name);
-            if (eventInfo) {
-                // Update when the data is not equal
-                if (eventInfo.data !== data) {
-                    eventInfo.data = data;
-                    for (const f of eventInfo.callbacks) {
-                        f(data);
-                    }
-                }
-            }
-            else {
-                eventInfo = {
-                    data: data,
-                    callbacks: new Set(),
-                };
-                this.eventList.set(name, eventInfo);
-            }
-        }
-    }
-    // get data
-    getData(name) {
-        var _a;
-        const eventInfo = this.eventList.get(name);
-        return (_a = eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.data) !== null && _a !== void 0 ? _a : null;
+// release patch
+function releasePatches() {
+    setCurrentAppName(null);
+    releasePatchDocument();
+    Element.prototype.appendChild = globalEnv.rawAppendChild;
+    Element.prototype.insertBefore = globalEnv.rawInsertBefore;
+    Element.prototype.replaceChild = globalEnv.rawReplaceChild;
+    Element.prototype.removeChild = globalEnv.rawRemoveChild;
+    Element.prototype.append = globalEnv.rawAppend;
+    Element.prototype.prepend = globalEnv.rawPrepend;
+    Element.prototype.cloneNode = globalEnv.rawCloneNode;
+    // Element.prototype.getBoundingClientRect = globalEnv.rawGetBoundingClientRect
+}
+// Set the style of micro-app-head and micro-app-body
+let hasRejectMicroAppStyle = false;
+function rejectMicroAppStyle() {
+    if (!hasRejectMicroAppStyle) {
+        hasRejectMicroAppStyle = true;
+        const style = pureCreateElement('style');
+        globalEnv.rawSetAttribute.call(style, 'type', 'text/css');
+        style.textContent = `\n${microApp.tagName}, micro-app-body { display: block; } \nmicro-app-head { display: none; }`;
+        globalEnv.rawDocument.head.appendChild(style);
     }
 }
 
-const eventCenter = new EventCenter();
-/**
- * Format event name
- * @param appName app.name
- * @param fromBaseApp is from base app
- */
-function formatEventName(appName, fromBaseApp) {
-    if (!isString(appName) || !appName)
-        return '';
-    return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
+function unmountNestedApp() {
+    releaseUnmountOfNestedApp();
+    appInstanceMap.forEach(app => {
+        // @ts-ignore
+        app.container && getRootContainer(app.container).disconnectedCallback();
+    });
+    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.clear();
 }
-// Global data
-class EventCenterForGlobal {
-    /**
-     * add listener of global data
-     * @param cb listener
-     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
-     */
-    addGlobalDataListener(cb, autoTrigger) {
-        const appName = this.appName;
-        // if appName exists, this is in sub app
-        if (appName) {
-            cb.__APP_NAME__ = appName;
-            cb.__AUTO_TRIGGER__ = autoTrigger;
-        }
-        eventCenter.on('global', cb, autoTrigger);
-    }
-    /**
-     * remove listener of global data
-     * @param cb listener
-     */
-    removeGlobalDataListener(cb) {
-        isFunction(cb) && eventCenter.off('global', cb);
-    }
-    /**
-     * dispatch global data
-     * @param data data
-     */
-    setGlobalData(data) {
-        // clear dom scope before dispatch global data, apply to micro app
-        removeDomScope();
-        eventCenter.dispatch('global', data);
-    }
-    /**
-     * get global data
-     */
-    getGlobalData() {
-        return eventCenter.getData('global');
-    }
-    /**
-     * clear all listener of global data
-     * if appName exists, only the specified functions is cleared
-     * if appName not exists, only clear the base app functions
-     */
-    clearGlobalDataListener() {
-        const appName = this.appName;
-        const eventInfo = eventCenter.eventList.get('global');
-        if (eventInfo) {
-            for (const cb of eventInfo.callbacks) {
-                if ((appName && appName === cb.__APP_NAME__) ||
-                    !(appName || cb.__APP_NAME__)) {
-                    eventInfo.callbacks.delete(cb);
-                }
-            }
-        }
+// if micro-app run in micro application, delete all next generation application when unmount event received
+function listenUmountOfNestedApp() {
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+        window.addEventListener('unmount', unmountNestedApp, false);
     }
 }
-// Event center for base app
-class EventCenterForBaseApp extends EventCenterForGlobal {
-    /**
-     * add listener
-     * @param appName app.name
-     * @param cb listener
-     * @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);
-    }
-    /**
-     * remove listener
-     * @param appName app.name
-     * @param cb listener
-     */
-    removeDataListener(appName, cb) {
-        isFunction(cb) && eventCenter.off(formatEventName(formatAppName(appName), false), cb);
-    }
-    /**
-     * get data from micro app or base app
-     * @param appName app.name
-     * @param fromBaseApp whether get data from base app, default is false
-     */
-    getData(appName, fromBaseApp = false) {
-        return eventCenter.getData(formatEventName(formatAppName(appName), fromBaseApp));
-    }
-    /**
-     * Dispatch data to the specified micro app
-     * @param appName app.name
-     * @param data data
-     */
-    setData(appName, data) {
-        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data);
+// release listener
+function releaseUnmountOfNestedApp() {
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+        window.removeEventListener('unmount', unmountNestedApp, false);
     }
-    /**
-     * clear all listener for specified micro app
-     * @param appName app.name
-     */
-    clearDataListener(appName) {
-        eventCenter.off(formatEventName(formatAppName(appName), false));
+}
+
+const globalEnv = {};
+/**
+ * Note loop nesting
+ * Only prototype or unique values can be put here
+ */
+function initGlobalEnv() {
+    if (isBrowser) {
+        /**
+         * save patch raw methods
+         * pay attention to this binding
+         */
+        const rawSetAttribute = Element.prototype.setAttribute;
+        const rawAppendChild = Element.prototype.appendChild;
+        const rawInsertBefore = Element.prototype.insertBefore;
+        const rawReplaceChild = Element.prototype.replaceChild;
+        const rawRemoveChild = Element.prototype.removeChild;
+        const rawAppend = Element.prototype.append;
+        const rawPrepend = Element.prototype.prepend;
+        const rawCloneNode = Element.prototype.cloneNode;
+        // const rawGetBoundingClientRect = Element.prototype.getBoundingClientRect
+        const rawCreateElement = Document.prototype.createElement;
+        const rawCreateElementNS = Document.prototype.createElementNS;
+        const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
+        const rawQuerySelector = Document.prototype.querySelector;
+        const rawQuerySelectorAll = Document.prototype.querySelectorAll;
+        const rawGetElementById = Document.prototype.getElementById;
+        const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
+        const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
+        const rawGetElementsByName = Document.prototype.getElementsByName;
+        const ImageProxy = new Proxy(Image, {
+            construct(Target, args) {
+                const elementImage = new Target(...args);
+                elementImage.__MICRO_APP_NAME__ = getCurrentAppName();
+                return elementImage;
+            },
+        });
+        const rawWindow = Function('return window')();
+        const rawDocument = Function('return document')();
+        const supportModuleScript = isSupportModuleScript();
+        /**
+         * 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 rawDocumentAddEventListener = rawDocument.addEventListener;
+        const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
+        // mark current application as base application
+        window.__MICRO_APP_BASE_APPLICATION__ = true;
+        Object.assign(globalEnv, {
+            // source/patch
+            rawSetAttribute,
+            rawAppendChild,
+            rawInsertBefore,
+            rawReplaceChild,
+            rawRemoveChild,
+            rawAppend,
+            rawPrepend,
+            rawCloneNode,
+            // rawGetBoundingClientRect,
+            rawCreateElement,
+            rawCreateElementNS,
+            rawCreateDocumentFragment,
+            rawQuerySelector,
+            rawQuerySelectorAll,
+            rawGetElementById,
+            rawGetElementsByClassName,
+            rawGetElementsByTagName,
+            rawGetElementsByName,
+            ImageProxy,
+            // common global vars
+            rawWindow,
+            rawDocument,
+            supportModuleScript,
+            // sandbox/effect
+            rawWindowAddEventListener,
+            rawWindowRemoveEventListener,
+            rawSetInterval,
+            rawSetTimeout,
+            rawClearInterval,
+            rawClearTimeout,
+            rawDocumentAddEventListener,
+            rawDocumentRemoveEventListener,
+        });
+        // global effect
+        rejectMicroAppStyle();
+        releaseUnmountOfNestedApp();
+        listenUmountOfNestedApp();
     }
 }
-// Event center for sub app
-class EventCenterForMicroApp extends EventCenterForGlobal {
-    constructor(appName) {
-        super();
-        this.appName = formatAppName(appName);
-        !this.appName && logError(`Invalid appName ${appName}`);
+
+// Global scripts, reuse across apps
+const globalScripts = new Map();
+/**
+ * Extract script elements
+ * @param script script element
+ * @param parent parent element of script
+ * @param app app
+ * @param isDynamic dynamic insert
+ */
+function extractScriptElement(script, parent, app, isDynamic = false) {
+    let replaceComment = null;
+    let src = script.getAttribute('src');
+    if (script.hasAttribute('exclude')) {
+        replaceComment = document.createComment('script element with exclude attribute removed by micro-app');
     }
-    /**
-     * add listener, monitor the data sent by the base app
-     * @param cb listener
-     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
-     */
-    addDataListener(cb, autoTrigger) {
-        cb.__AUTO_TRIGGER__ = autoTrigger;
-        eventCenter.on(formatEventName(this.appName, true), cb, autoTrigger);
+    else if ((script.type && !['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module'].includes(script.type)) ||
+        script.hasAttribute('ignore')) {
+        return null;
     }
-    /**
-     * remove listener
-     * @param cb listener
-     */
-    removeDataListener(cb) {
-        isFunction(cb) && eventCenter.off(formatEventName(this.appName, true), cb);
+    else if ((globalEnv.supportModuleScript && script.noModule) ||
+        (!globalEnv.supportModuleScript && script.type === 'module')) {
+        replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
     }
-    /**
-     * get data from base app
-     */
-    getData() {
-        return eventCenter.getData(formatEventName(this.appName, true));
+    else if (src) { // remote script
+        src = CompletionPath(src, app.url);
+        const info = {
+            code: '',
+            isExternal: true,
+            isDynamic: isDynamic,
+            async: script.hasAttribute('async'),
+            defer: script.defer || script.type === 'module',
+            module: script.type === 'module',
+            isGlobal: script.hasAttribute('global'),
+        };
+        if (!isDynamic) {
+            app.source.scripts.set(src, info);
+            replaceComment = document.createComment(`script with src='${src}' extract by micro-app`);
+        }
+        else {
+            return { url: src, info };
+        }
     }
-    /**
-     * dispatch data to base app
-     * @param data data
-     */
-    dispatch(data) {
-        removeDomScope();
-        eventCenter.dispatch(formatEventName(this.appName, false), data);
-        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,
-                }
-            });
-            getRootContainer(app.container).dispatchEvent(event);
+    else if (script.textContent) { // inline script
+        const nonceStr = createNonceSrc();
+        const info = {
+            code: script.textContent,
+            isExternal: false,
+            isDynamic: isDynamic,
+            async: false,
+            defer: script.type === 'module',
+            module: script.type === 'module',
+        };
+        if (!isDynamic) {
+            app.source.scripts.set(nonceStr, info);
+            replaceComment = document.createComment('inline script extract by micro-app');
+        }
+        else {
+            return { url: nonceStr, info };
         }
     }
-    /**
-     * clear all listeners
-     */
-    clearDataListener() {
-        eventCenter.off(formatEventName(this.appName, true));
+    else if (!isDynamic) {
+        /**
+         * script with empty src or empty script.textContent remove in static html
+         * & not removed if it created by dynamic
+         */
+        replaceComment = document.createComment('script element removed by micro-app');
+    }
+    if (isDynamic) {
+        return { replaceComment };
+    }
+    else {
+        return parent.replaceChild(replaceComment, script);
     }
 }
 /**
- * Record UMD function before exec umdHookMount
- * @param microAppEventCneter
+ *  Get remote resources of script
+ * @param wrapElement htmlDom
+ * @param app app
  */
-function recordDataCenterSnapshot(microAppEventCneter) {
-    const appName = microAppEventCneter.appName;
-    microAppEventCneter.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__) {
-                microAppEventCneter.umdDataListeners.global.add(cb);
+function fetchScriptsFromHtml(wrapElement, app) {
+    const scriptEntries = Array.from(app.source.scripts.entries());
+    const fetchScriptPromise = [];
+    const fetchScriptPromiseInfo = [];
+    for (const [url, info] of scriptEntries) {
+        if (info.isExternal) {
+            const globalScriptText = globalScripts.get(url);
+            if (globalScriptText) {
+                info.code = globalScriptText;
+            }
+            else if ((!info.defer && !info.async) || app.isPrefetch) {
+                fetchScriptPromise.push(fetchSource(url, app.name));
+                fetchScriptPromiseInfo.push([url, info]);
             }
         }
     }
-    const subAppEventInfo = eventCenter.eventList.get(formatEventName(appName, true));
-    if (subAppEventInfo) {
-        microAppEventCneter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
+    if (fetchScriptPromise.length) {
+        promiseStream(fetchScriptPromise, (res) => {
+            fetchScriptSuccess(fetchScriptPromiseInfo[res.index][0], fetchScriptPromiseInfo[res.index][1], res.data);
+        }, (err) => {
+            logError(err, app.name);
+        }, () => {
+            app.onLoad(wrapElement);
+        });
+    }
+    else {
+        app.onLoad(wrapElement);
     }
 }
 /**
- * Rebind the UMD function of the record before remount
- * @param microAppEventCneter instance of EventCenterForMicroApp
+ * fetch js succeeded, record the code value
+ * @param url script address
+ * @param info resource script info
+ * @param data code
  */
-function rebuildDataCenterSnapshot(microAppEventCneter) {
-    for (const cb of microAppEventCneter.umdDataListeners.global) {
-        microAppEventCneter.addGlobalDataListener(cb, cb.__AUTO_TRIGGER__);
-    }
-    for (const cb of microAppEventCneter.umdDataListeners.normal) {
-        microAppEventCneter.addDataListener(cb, cb.__AUTO_TRIGGER__);
+function fetchScriptSuccess(url, info, data) {
+    if (info.isGlobal && !globalScripts.has(url)) {
+        globalScripts.set(url, data);
     }
+    info.code = data;
 }
-
-/* eslint-disable no-return-assign */
-function isBoundedFunction(value) {
-    if (isBoolean(value.__MICRO_APP_ISBOUND_FUNCTION))
-        return value.__MICRO_APP_ISBOUND_FUNCTION;
-    return value.__MICRO_APP_ISBOUND_FUNCTION = isBoundFunction(value);
+/**
+ * Execute js in the mount lifecycle
+ * @param scriptList script list
+ * @param app app
+ * @param initHook callback for umd mode
+ */
+function execScripts(scriptList, app, initHook) {
+    const scriptListEntries = Array.from(scriptList.entries());
+    const deferScriptPromise = [];
+    const deferScriptInfo = [];
+    for (const [url, info] of scriptListEntries) {
+        if (!info.isDynamic) {
+            // Notice the second render
+            if (info.defer || info.async) {
+                if (info.isExternal && !info.code) {
+                    deferScriptPromise.push(fetchSource(url, app.name));
+                }
+                else {
+                    deferScriptPromise.push(info.code);
+                }
+                deferScriptInfo.push([url, info]);
+                info.module && (initHook.moduleCount = initHook.moduleCount ? ++initHook.moduleCount : 1);
+            }
+            else {
+                runScript(url, app, info, false);
+                initHook(false);
+            }
+        }
+    }
+    if (deferScriptPromise.length) {
+        promiseStream(deferScriptPromise, (res) => {
+            const info = deferScriptInfo[res.index][1];
+            info.code = info.code || res.data;
+        }, (err) => {
+            initHook.errorCount = initHook.errorCount ? ++initHook.errorCount : 1;
+            logError(err, app.name);
+        }, () => {
+            deferScriptInfo.forEach(([url, info]) => {
+                if (info.code) {
+                    runScript(url, app, info, false, initHook);
+                    !info.module && initHook(false);
+                }
+            });
+            initHook(isUndefined(initHook.moduleCount) ||
+                initHook.errorCount === deferScriptPromise.length);
+        });
+    }
+    else {
+        initHook(true);
+    }
 }
-function isConstructor(value) {
+/**
+ * run code
+ * @param url script address
+ * @param app app
+ * @param info script info
+ * @param isDynamic dynamically created script
+ * @param callback callback of module script
+ */
+function runScript(url, app, info, isDynamic, callback) {
     var _a;
-    if (isBoolean(value.__MICRO_APP_ISCONSTRUCTOR))
-        return value.__MICRO_APP_ISCONSTRUCTOR;
-    const valueStr = value.toString();
-    const result = (((_a = value.prototype) === null || _a === void 0 ? void 0 : _a.constructor) === value &&
-        Object.getOwnPropertyNames(value.prototype).length > 1) ||
-        /^function\s+[A-Z]/.test(valueStr) ||
-        /^class\s+/.test(valueStr);
-    return value.__MICRO_APP_ISCONSTRUCTOR = result;
-}
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawWindow(rawWindow, value) {
-    if (value.__MICRO_APP_BOUND_WINDOW_FUNCTION)
-        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION;
-    if (!isConstructor(value) && !isBoundedFunction(value)) {
-        const bindRawWindowValue = value.bind(rawWindow);
-        for (const key in value) {
-            bindRawWindowValue[key] = value[key];
+    try {
+        const code = bindScope(url, app, info.code, info.module);
+        if (app.inline || info.module) {
+            const scriptElement = pureCreateElement('script');
+            runCode2InlineScript(url, code, info.module, scriptElement, callback);
+            if (isDynamic)
+                return scriptElement;
+            // TEST IGNORE
+            (_a = app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-body').appendChild(scriptElement);
         }
-        if (value.hasOwnProperty('prototype')) {
-            rawDefineProperty(bindRawWindowValue, 'prototype', {
-                value: value.prototype,
-                configurable: true,
-                enumerable: false,
-                writable: true,
-            });
+        else {
+            runCode2Function(code, info);
+            if (isDynamic)
+                return document.createComment('dynamic script extract by micro-app');
         }
-        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION = bindRawWindowValue;
     }
-    return value;
+    catch (e) {
+        console.error(`[micro-app from runScript] app ${app.name}: `, e);
+    }
 }
-
-// document.onclick binding list, the binding function of each application is unique
-const documentClickListMap = new Map();
-let hasRewriteDocumentOnClick = false;
 /**
- * Rewrite document.onclick and execute it only once
+ * Get dynamically created remote script
+ * @param url script address
+ * @param info info
+ * @param app app
+ * @param originScript origin script element
  */
-function overwriteDocumentOnClick() {
-    hasRewriteDocumentOnClick = true;
-    if (Object.getOwnPropertyDescriptor(document, 'onclick')) {
-        return logWarn('Cannot redefine document property onclick');
+function runDynamicRemoteScript(url, info, app, originScript) {
+    const dispatchScriptOnLoadEvent = () => dispatchOnLoadEvent(originScript);
+    // url is unique
+    if (app.source.scripts.has(url)) {
+        const existInfo = app.source.scripts.get(url);
+        !existInfo.module && defer(dispatchScriptOnLoadEvent);
+        return runScript(url, app, existInfo, true, dispatchScriptOnLoadEvent);
     }
-    const rawOnClick = document.onclick;
-    document.onclick = null;
-    let hasDocumentClickInited = false;
-    function onClickHandler(e) {
-        documentClickListMap.forEach((f) => {
-            isFunction(f) && f.call(document, e);
-        });
+    if (globalScripts.has(url)) {
+        const code = globalScripts.get(url);
+        info.code = code;
+        app.source.scripts.set(url, info);
+        !info.module && defer(dispatchScriptOnLoadEvent);
+        return runScript(url, app, info, true, dispatchScriptOnLoadEvent);
     }
-    rawDefineProperty(document, 'onclick', {
-        configurable: true,
-        enumerable: true,
-        get() {
-            const appName = getCurrentAppName();
-            return appName ? documentClickListMap.get(appName) : documentClickListMap.get('base');
-        },
-        set(f) {
-            const appName = getCurrentAppName();
-            if (appName) {
-                documentClickListMap.set(appName, f);
+    let replaceElement;
+    if (app.inline || info.module) {
+        replaceElement = pureCreateElement('script');
+    }
+    else {
+        replaceElement = document.createComment(`dynamic script with src='${url}' extract by micro-app`);
+    }
+    fetchSource(url, app.name).then((code) => {
+        info.code = code;
+        app.source.scripts.set(url, info);
+        info.isGlobal && globalScripts.set(url, code);
+        try {
+            code = bindScope(url, app, code, info.module);
+            if (app.inline || info.module) {
+                runCode2InlineScript(url, code, info.module, replaceElement, dispatchScriptOnLoadEvent);
             }
             else {
-                documentClickListMap.set('base', f);
-            }
-            if (!hasDocumentClickInited && isFunction(f)) {
-                hasDocumentClickInited = true;
-                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
+                runCode2Function(code, info);
             }
         }
+        catch (e) {
+            console.error(`[micro-app from runDynamicScript] app ${app.name}: `, e, url);
+        }
+        !info.module && dispatchOnLoadEvent(originScript);
+    }).catch((err) => {
+        logError(err, app.name);
+        dispatchOnErrorEvent(originScript);
     });
-    rawOnClick && (document.onclick = rawOnClick);
+    return replaceElement;
 }
 /**
- * The document event is globally, we need to clear these event bindings when micro application unmounted
+ * common handle for inline script
+ * @param url script address
+ * @param code bound code
+ * @param module type='module' of script
+ * @param scriptElement target script element
+ * @param callback callback of module script
  */
-const documentEventListenerMap = new Map();
-function effectDocumentEvent() {
-    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
-    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
-    document.addEventListener = function (type, listener, options) {
-        var _a;
-        const appName = getCurrentAppName();
-        /**
-         * ignore bound function of document event in umd mode, used to solve problem of react global events
-         */
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(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);
-        }
-        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
-    };
-    document.removeEventListener = function (type, listener, options) {
-        var _a;
-        const appName = getCurrentAppName();
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
-            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);
-                }
-            }
+function runCode2InlineScript(url, code, module, scriptElement, callback) {
+    if (module) {
+        // module script is async, transform it to a blob for subsequent operations
+        const blob = new Blob([code], { type: 'text/javascript' });
+        scriptElement.src = URL.createObjectURL(blob);
+        scriptElement.setAttribute('type', 'module');
+        if (callback) {
+            callback.moduleCount && callback.moduleCount--;
+            scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
         }
-        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
-    };
+    }
+    else {
+        scriptElement.textContent = code;
+    }
+    if (!url.startsWith('inline-')) {
+        scriptElement.setAttribute('data-origin-src', url);
+    }
 }
-// Clear the document event agent
-function releaseEffectDocumentEvent() {
-    document.addEventListener = globalEnv.rawDocumentAddEventListener;
-    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
+// init & run code2Function
+function runCode2Function(code, info) {
+    if (!info.code2Function) {
+        info.code2Function = new Function(code);
+    }
+    info.code2Function.call(window);
 }
-// this events should be sent to the specified app
-const formatEventList = ['unmount', 'appstate-change'];
 /**
- * Format event name
- * @param type event name
- * @param microAppWindow micro window
+ * bind js scope
+ * @param url script address
+ * @param app app
+ * @param code code
+ * @param module type='module' of script
  */
-function formatEventType(type, microAppWindow) {
-    if (formatEventList.includes(type)) {
-        return `${type}-${microAppWindow.__MICRO_APP_NAME__}`;
+function bindScope(url, app, code, module) {
+    if (isPlainObject(microApp.plugins)) {
+        code = usePlugins(url, code, app.name, microApp.plugins);
     }
-    return type;
+    if (app.sandBox && !module) {
+        globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
+        return `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
+    }
+    return code;
 }
 /**
- * Rewrite side-effect events
- * @param microAppWindow micro window
+ * Call the plugin to process the file
+ * @param url script address
+ * @param code code
+ * @param appName app name
+ * @param plugins plugin list
  */
-function effect(microAppWindow) {
-    const appName = microAppWindow.__MICRO_APP_NAME__;
-    const eventListenerMap = new Map();
-    const intervalIdMap = new Map();
-    const timeoutIdMap = new Map();
-    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 = formatEventType(type, microAppWindow);
-        const listenerList = eventListenerMap.get(type);
-        if (listenerList) {
-            listenerList.add(listener);
-        }
-        else {
-            eventListenerMap.set(type, new Set([listener]));
-        }
-        listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
-        rawWindowAddEventListener.call(rawWindow, type, listener, options);
-    };
-    microAppWindow.removeEventListener = function (type, listener, options) {
-        type = formatEventType(type, microAppWindow);
-        const listenerList = eventListenerMap.get(type);
-        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
-            listenerList.delete(listener);
+function usePlugins(url, code, appName, plugins) {
+    var _a;
+    const newCode = processCode(plugins.global, code, url);
+    return processCode((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName], newCode, url);
+}
+function processCode(configs, code, url) {
+    if (!isArray(configs)) {
+        return code;
+    }
+    return configs.reduce((preCode, config) => {
+        if (isPlainObject(config) && isFunction(config.loader)) {
+            return config.loader(preCode, url, config.options);
         }
-        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
-    };
-    microAppWindow.setInterval = function (handler, timeout, ...args) {
-        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
-        intervalIdMap.set(intervalId, { handler, timeout, args });
-        return intervalId;
-    };
-    microAppWindow.setTimeout = function (handler, timeout, ...args) {
-        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
-        timeoutIdMap.set(timeoutId, { handler, timeout, args });
-        return timeoutId;
-    };
-    microAppWindow.clearInterval = function (intervalId) {
-        intervalIdMap.delete(intervalId);
-        rawClearInterval.call(rawWindow, intervalId);
-    };
-    microAppWindow.clearTimeout = function (timeoutId) {
-        timeoutIdMap.delete(timeoutId);
-        rawClearTimeout.call(rawWindow, timeoutId);
-    };
-    const umdWindowListenerMap = new Map();
-    const umdDocumentListenerMap = new Map();
-    let umdIntervalIdMap = new Map();
-    let umdTimeoutIdMap = new Map();
-    let umdOnClickHandler;
-    // record event and timer before exec umdMountHook
-    const recordUmdEffect = () => {
-        // record window event
-        eventListenerMap.forEach((listenerList, type) => {
-            if (listenerList.size) {
-                umdWindowListenerMap.set(type, new Set(listenerList));
+        return preCode;
+    }, code);
+}
+
+/**
+ * transform html string to dom
+ * @param str string dom
+ */
+function getWrapElement(str) {
+    const wrapDiv = pureCreateElement('div');
+    wrapDiv.innerHTML = str;
+    return wrapDiv;
+}
+/**
+ * Recursively process each child element
+ * @param parent parent element
+ * @param app app
+ * @param microAppHead micro-app-head element
+ */
+function flatChildren(parent, app, microAppHead) {
+    const children = Array.from(parent.children);
+    children.length && children.forEach((child) => {
+        flatChildren(child, app);
+    });
+    for (const dom of children) {
+        if (dom instanceof HTMLLinkElement) {
+            if (dom.hasAttribute('exclude')) {
+                parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
             }
-        });
-        // record timers
-        if (intervalIdMap.size) {
-            umdIntervalIdMap = new Map(intervalIdMap);
-        }
-        if (timeoutIdMap.size) {
-            umdTimeoutIdMap = new Map(timeoutIdMap);
-        }
-        // record onclick handler
-        umdOnClickHandler = documentClickListMap.get(appName);
-        // record document event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                if (listenerList.size) {
-                    umdDocumentListenerMap.set(type, new Set(listenerList));
-                }
-            });
-        }
-    };
-    // rebuild event and timer before remount umd app
-    const rebuildUmdEffect = () => {
-        // rebuild window event
-        umdWindowListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
+            else if (!dom.hasAttribute('ignore')) {
+                extractLinkFromHtml(dom, parent, app);
             }
-        });
-        // rebuild timer
-        umdIntervalIdMap.forEach((info) => {
-            microAppWindow.setInterval(info.handler, info.timeout, ...info.args);
-        });
-        umdTimeoutIdMap.forEach((info) => {
-            microAppWindow.setTimeout(info.handler, info.timeout, ...info.args);
-        });
-        // rebuild onclick event
-        umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
-        // rebuild document event
-        setCurrentAppName(appName);
-        umdDocumentListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
+            else if (dom.hasAttribute('href')) {
+                dom.setAttribute('href', CompletionPath(dom.getAttribute('href'), app.url));
+            }
+        }
+        else if (dom instanceof HTMLStyleElement) {
+            if (dom.hasAttribute('exclude')) {
+                parent.replaceChild(document.createComment('style element with exclude attribute ignored by micro-app'), dom);
+            }
+            else if (app.scopecss && !dom.hasAttribute('ignore')) {
+                scopedCSS(dom, app);
             }
-        });
-        setCurrentAppName(null);
-    };
-    // release all event listener & interval & timeout when unmount app
-    const releaseEffect = () => {
-        // Clear window binding events
-        if (eventListenerMap.size) {
-            eventListenerMap.forEach((listenerList, type) => {
-                for (const listener of listenerList) {
-                    rawWindowRemoveEventListener.call(rawWindow, type, listener);
-                }
-            });
-            eventListenerMap.clear();
         }
-        // Clear timers
-        if (intervalIdMap.size) {
-            intervalIdMap.forEach((_, intervalId) => {
-                rawClearInterval.call(rawWindow, intervalId);
-            });
-            intervalIdMap.clear();
+        else if (dom instanceof HTMLScriptElement) {
+            extractScriptElement(dom, parent, app);
         }
-        if (timeoutIdMap.size) {
-            timeoutIdMap.forEach((_, timeoutId) => {
-                rawClearTimeout.call(rawWindow, timeoutId);
-            });
-            timeoutIdMap.clear();
+        else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
+            parent.removeChild(dom);
         }
-        // Clear the function bound by micro application through document.onclick
-        documentClickListMap.delete(appName);
-        // Clear document binding event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                for (const listener of listenerList) {
-                    rawDocumentRemoveEventListener.call(rawDocument, type, listener);
-                }
-            });
-            documentAppListenersMap.clear();
+        else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
+            dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
         }
-    };
-    return {
-        recordUmdEffect,
-        rebuildUmdEffect,
-        releaseEffect,
-    };
+    }
+}
+/**
+ * Extract link and script, bind style scope
+ * @param htmlStr html string
+ * @param app app
+ */
+function extractSourceDom(htmlStr, app) {
+    const wrapElement = getWrapElement(htmlStr);
+    const microAppHead = wrapElement.querySelector('micro-app-head');
+    const microAppBody = wrapElement.querySelector('micro-app-body');
+    if (!microAppHead || !microAppBody) {
+        const msg = `element ${microAppHead ? 'body' : 'head'} is missing`;
+        app.onerror(new Error(msg));
+        return logError(msg, app.name);
+    }
+    flatChildren(wrapElement, app);
+    if (app.source.links.size) {
+        fetchLinksFromHtml(wrapElement, app, microAppHead);
+    }
+    else {
+        app.onLoad(wrapElement);
+    }
+    if (app.source.scripts.size) {
+        fetchScriptsFromHtml(wrapElement, app);
+    }
+    else {
+        app.onLoad(wrapElement);
+    }
+}
+/**
+ * Get and format html
+ * @param app app
+ */
+function extractHtml(app) {
+    fetchSource(app.ssrUrl || app.url, app.name, { cache: 'no-cache' }).then((htmlStr) => {
+        if (!htmlStr) {
+            const msg = 'html is empty, please check in detail';
+            app.onerror(new Error(msg));
+            return logError(msg, app.name);
+        }
+        htmlStr = htmlStr
+            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
+            return match
+                .replace(/<head/i, '<micro-app-head')
+                .replace(/<\/head>/i, '</micro-app-head>');
+        })
+            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
+            return match
+                .replace(/<body/i, '<micro-app-body')
+                .replace(/<\/body>/i, '</micro-app-body>');
+        });
+        extractSourceDom(htmlStr, app);
+    }).catch((e) => {
+        logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, app.name, e);
+        app.onLoadError(e);
+    });
 }
-// window.addEventListener('mousedown', (e: Event) => {
-//   const targetNode = e.target
-//   const activeApps = getActiveApps(true)
-//   let isScopeOfMicroApp = false
-//   for (const appName of activeApps) {
-//     const app = appInstanceMap.get(appName)!
-//     if (targetNode instanceof Node && app.container!.contains(targetNode)) {
-//       isScopeOfMicroApp = true
-//       // console.log(111111, appName)
-//       setCurrentAppName(appName)
-//       break
-//     }
-//   }
-//   if (!isScopeOfMicroApp) {
-//     setCurrentAppName(null)
-//   }
-// }, false)
-// let isWaitingForMacroReset = false
-// window.addEventListener('mouseup', () => {
-//   if (!isWaitingForMacroReset && getCurrentAppName()) {
-//     isWaitingForMacroReset = true
-//     setTimeout(() => {
-//       setCurrentAppName(null)
-//       isWaitingForMacroReset = false
-//     })
-//   }
-// }, false)
 
-// Variables that can escape to rawWindow
-const staticEscapeProperties = [
-    'System',
-    '__cjsWrapper',
-];
-// Variables that can only assigned to rawWindow
-const escapeSetterKeyList = [
-    'location',
-];
-const globalPropertyList = ['window', 'self', 'globalThis'];
-class SandBox {
-    constructor(appName, url) {
-        // Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
-        this.scopeProperties = ['webpackJsonp'];
-        // Properties that can be escape to rawWindow
-        this.escapeProperties = [];
-        // Properties newly added to microAppWindow
-        this.injectedKeys = new Set();
-        // Properties escape to rawWindow, cleared when unmount
-        this.escapeKeys = new Set();
-        // sandbox state
-        this.active = false;
-        this.microAppWindow = {}; // Proxy target
-        // get scopeProperties and escapeProperties from plugins
-        this.getScopeProperties(appName);
-        // create proxyWindow with Proxy(microAppWindow)
-        this.proxyWindow = this.createProxyWindow();
-        // inject global properties
-        this.initMicroAppWindow(this.microAppWindow, appName, url);
-        // Rewrite global event listener & timeout
-        Object.assign(this, effect(this.microAppWindow));
+class EventCenter {
+    constructor() {
+        this.eventList = new Map();
     }
-    start(baseroute) {
-        if (!this.active) {
-            this.active = true;
-            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
-            // BUG FIX: bable-polyfill@6.x
-            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
-            if (++SandBox.activeCount === 1) {
-                effectDocumentEvent();
+    // whether the name is legal
+    isLegalName(name) {
+        if (!name) {
+            logError('event-center: Invalid name');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * add listener
+     * @param name event name
+     * @param f listener
+     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
+     */
+    on(name, f, autoTrigger = false) {
+        if (this.isLegalName(name)) {
+            if (!isFunction(f)) {
+                return logError('event-center: Invalid callback function');
+            }
+            let eventInfo = this.eventList.get(name);
+            if (!eventInfo) {
+                eventInfo = {
+                    data: {},
+                    callbacks: new Set(),
+                };
+                this.eventList.set(name, eventInfo);
+            }
+            else if (autoTrigger && Object.getOwnPropertyNames(eventInfo.data).length) {
+                // auto trigger when data not null
+                f(eventInfo.data);
             }
+            eventInfo.callbacks.add(f);
         }
     }
-    stop() {
-        if (this.active) {
-            this.active = false;
-            this.releaseEffect();
-            this.microAppWindow.microApp.clearDataListener();
-            this.microAppWindow.microApp.clearGlobalDataListener();
-            this.injectedKeys.forEach((key) => {
-                Reflect.deleteProperty(this.microAppWindow, key);
-            });
-            this.injectedKeys.clear();
-            this.escapeKeys.forEach((key) => {
-                Reflect.deleteProperty(globalEnv.rawWindow, key);
-            });
-            this.escapeKeys.clear();
-            if (--SandBox.activeCount === 0) {
-                releaseEffectDocumentEvent();
+    // remove listener, but the data is not cleared
+    off(name, f) {
+        if (this.isLegalName(name)) {
+            const eventInfo = this.eventList.get(name);
+            if (eventInfo) {
+                if (isFunction(f)) {
+                    eventInfo.callbacks.delete(f);
+                }
+                else {
+                    eventInfo.callbacks.clear();
+                }
+            }
+        }
+    }
+    // dispatch data
+    dispatch(name, data) {
+        if (this.isLegalName(name)) {
+            if (!isPlainObject(data)) {
+                return logError('event-center: data must be object');
+            }
+            let eventInfo = this.eventList.get(name);
+            if (eventInfo) {
+                // Update when the data is not equal
+                if (eventInfo.data !== data) {
+                    eventInfo.data = data;
+                    for (const f of eventInfo.callbacks) {
+                        f(data);
+                    }
+                }
             }
+            else {
+                eventInfo = {
+                    data: data,
+                    callbacks: new Set(),
+                };
+                this.eventList.set(name, eventInfo);
+            }
+        }
+    }
+    // get data
+    getData(name) {
+        var _a;
+        const eventInfo = this.eventList.get(name);
+        return (_a = eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.data) !== null && _a !== void 0 ? _a : null;
+    }
+}
+
+const eventCenter = new EventCenter();
+/**
+ * Format event name
+ * @param appName app.name
+ * @param fromBaseApp is from base app
+ */
+function formatEventName(appName, fromBaseApp) {
+    if (!isString(appName) || !appName)
+        return '';
+    return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
+}
+// Global data
+class EventCenterForGlobal {
+    /**
+     * add listener of global data
+     * @param cb listener
+     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
+     */
+    addGlobalDataListener(cb, autoTrigger) {
+        const appName = this.appName;
+        // if appName exists, this is in sub app
+        if (appName) {
+            cb.__APP_NAME__ = appName;
+            cb.__AUTO_TRIGGER__ = autoTrigger;
         }
+        eventCenter.on('global', cb, autoTrigger);
+    }
+    /**
+     * remove listener of global data
+     * @param cb listener
+     */
+    removeGlobalDataListener(cb) {
+        isFunction(cb) && eventCenter.off('global', cb);
     }
-    // record umd snapshot before the first execution of umdHookMount
-    recordUmdSnapshot() {
-        this.microAppWindow.__MICRO_APP_UMD_MODE__ = true;
-        this.recordUmdEffect();
-        recordDataCenterSnapshot(this.microAppWindow.microApp);
-        this.recordUmdinjectedValues = new Map();
-        this.injectedKeys.forEach((key) => {
-            this.recordUmdinjectedValues.set(key, Reflect.get(this.microAppWindow, key));
-        });
+    /**
+     * dispatch global data
+     * @param data data
+     */
+    setGlobalData(data) {
+        // clear dom scope before dispatch global data, apply to micro app
+        removeDomScope();
+        eventCenter.dispatch('global', data);
     }
-    // rebuild umd snapshot before remount umd app
-    rebuildUmdSnapshot() {
-        this.recordUmdinjectedValues.forEach((value, key) => {
-            Reflect.set(this.proxyWindow, key, value);
-        });
-        this.rebuildUmdEffect();
-        rebuildDataCenterSnapshot(this.microAppWindow.microApp);
+    /**
+     * get global data
+     */
+    getGlobalData() {
+        return eventCenter.getData('global');
     }
     /**
-     * get scopeProperties and escapeProperties from plugins
-     * @param appName app name
+     * clear all listener of global data
+     * if appName exists, only the specified functions is cleared
+     * if appName not exists, only clear the base app functions
      */
-    getScopeProperties(appName) {
-        var _a;
-        if (!isPlainObject(microApp.plugins))
-            return;
-        if (isArray(microApp.plugins.global)) {
-            for (const plugin of microApp.plugins.global) {
-                if (isPlainObject(plugin)) {
-                    if (isArray(plugin.scopeProperties)) {
-                        this.scopeProperties = this.scopeProperties.concat(plugin.scopeProperties);
-                    }
-                    if (isArray(plugin.escapeProperties)) {
-                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
-                    }
-                }
-            }
-        }
-        if (isArray((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName])) {
-            for (const plugin of microApp.plugins.modules[appName]) {
-                if (isPlainObject(plugin)) {
-                    if (isArray(plugin.scopeProperties)) {
-                        this.scopeProperties = this.scopeProperties.concat(plugin.scopeProperties);
-                    }
-                    if (isArray(plugin.escapeProperties)) {
-                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
-                    }
+    clearGlobalDataListener() {
+        const appName = this.appName;
+        const eventInfo = eventCenter.eventList.get('global');
+        if (eventInfo) {
+            for (const cb of eventInfo.callbacks) {
+                if ((appName && appName === cb.__APP_NAME__) ||
+                    !(appName || cb.__APP_NAME__)) {
+                    eventInfo.callbacks.delete(cb);
                 }
             }
         }
     }
-    // create proxyWindow with Proxy(microAppWindow)
-    createProxyWindow() {
-        const rawWindow = globalEnv.rawWindow;
-        const descriptorTargetMap = new Map();
-        // window.xxx will trigger proxy
-        return new Proxy(this.microAppWindow, {
-            get: (target, key) => {
-                if (Reflect.has(target, key) ||
-                    (isString(key) && /^__MICRO_APP_/.test(key)) ||
-                    this.scopeProperties.includes(key))
-                    return Reflect.get(target, key);
-                const rawValue = Reflect.get(rawWindow, key);
-                return isFunction(rawValue) ? bindFunctionToRawWindow(rawWindow, rawValue) : rawValue;
-            },
-            set: (target, key, value) => {
-                if (this.active) {
-                    if (escapeSetterKeyList.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                    }
-                    else if (
-                    // target.hasOwnProperty has been rewritten
-                    !rawHasOwnProperty.call(target, key) &&
-                        rawHasOwnProperty.call(rawWindow, key) &&
-                        !this.scopeProperties.includes(key)) {
-                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                        const { configurable, enumerable, writable, set } = descriptor;
-                        // set value because it can be set
-                        rawDefineProperty(target, key, {
-                            value,
-                            configurable,
-                            enumerable,
-                            writable: writable !== null && writable !== void 0 ? writable : !!set,
-                        });
-                        this.injectedKeys.add(key);
-                    }
-                    else {
-                        Reflect.set(target, key, value);
-                        this.injectedKeys.add(key);
-                    }
-                    if ((this.escapeProperties.includes(key) ||
-                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
-                        !this.scopeProperties.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                        this.escapeKeys.add(key);
-                    }
-                }
-                return true;
-            },
-            has: (target, key) => {
-                if (this.scopeProperties.includes(key))
-                    return key in target;
-                return key in target || key in rawWindow;
-            },
-            // Object.getOwnPropertyDescriptor(window, key)
-            getOwnPropertyDescriptor: (target, key) => {
-                if (rawHasOwnProperty.call(target, key)) {
-                    descriptorTargetMap.set(key, 'target');
-                    return Object.getOwnPropertyDescriptor(target, key);
-                }
-                if (rawHasOwnProperty.call(rawWindow, key)) {
-                    descriptorTargetMap.set(key, 'rawWindow');
-                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                    if (descriptor && !descriptor.configurable) {
-                        descriptor.configurable = true;
-                    }
-                    return descriptor;
-                }
-                return undefined;
-            },
-            // Object.defineProperty(window, key, Descriptor)
-            defineProperty: (target, key, value) => {
-                const from = descriptorTargetMap.get(key);
-                if (from === 'rawWindow') {
-                    return Reflect.defineProperty(rawWindow, key, value);
-                }
-                return Reflect.defineProperty(target, key, value);
-            },
-            // Object.getOwnPropertyNames(window)
-            ownKeys: (target) => {
-                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
-            },
-            deleteProperty: (target, key) => {
-                if (rawHasOwnProperty.call(target, key)) {
-                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
-                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
-                    return Reflect.deleteProperty(target, key);
-                }
-                return true;
-            },
-        });
+}
+// Event center for base app
+class EventCenterForBaseApp extends EventCenterForGlobal {
+    /**
+     * add listener
+     * @param appName app.name
+     * @param cb listener
+     * @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);
     }
     /**
-     * inject global properties to microAppWindow
-     * @param microAppWindow micro window
-     * @param appName app name
-     * @param url app url
+     * remove listener
+     * @param appName app.name
+     * @param cb listener
      */
-    initMicroAppWindow(microAppWindow, appName, url) {
-        microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
-        microAppWindow.__MICRO_APP_NAME__ = appName;
-        microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
-        microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
-        microAppWindow.microApp = new EventCenterForMicroApp(appName);
-        microAppWindow.rawWindow = globalEnv.rawWindow;
-        microAppWindow.rawDocument = globalEnv.rawDocument;
-        microAppWindow.removeDomScope = removeDomScope;
-        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
-        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
-        this.setHijackProperties(microAppWindow, appName);
+    removeDataListener(appName, cb) {
+        isFunction(cb) && eventCenter.off(formatEventName(formatAppName(appName), false), cb);
     }
-    // properties associated with the native window
-    setMappingPropertiesWithRawDescriptor(microAppWindow) {
-        let topValue, parentValue;
-        const rawWindow = globalEnv.rawWindow;
-        if (rawWindow === rawWindow.parent) { // not in iframe
-            topValue = parentValue = this.proxyWindow;
-        }
-        else { // in iframe
-            topValue = rawWindow.top;
-            parentValue = rawWindow.parent;
+    /**
+     * get data from micro app or base app
+     * @param appName app.name
+     * @param fromBaseApp whether get data from base app, default is false
+     */
+    getData(appName, fromBaseApp = false) {
+        return eventCenter.getData(formatEventName(formatAppName(appName), fromBaseApp));
+    }
+    /**
+     * Dispatch data to the specified micro app
+     * @param appName app.name
+     * @param data data
+     */
+    setData(appName, data) {
+        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data);
+    }
+    /**
+     * clear all listener for specified micro app
+     * @param appName app.name
+     */
+    clearDataListener(appName) {
+        eventCenter.off(formatEventName(formatAppName(appName), false));
+    }
+}
+// Event center for sub app
+class EventCenterForMicroApp extends EventCenterForGlobal {
+    constructor(appName) {
+        super();
+        this.appName = formatAppName(appName);
+        !this.appName && logError(`Invalid appName ${appName}`);
+    }
+    /**
+     * add listener, monitor the data sent by the base app
+     * @param cb listener
+     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
+     */
+    addDataListener(cb, autoTrigger) {
+        cb.__AUTO_TRIGGER__ = autoTrigger;
+        eventCenter.on(formatEventName(this.appName, true), cb, autoTrigger);
+    }
+    /**
+     * remove listener
+     * @param cb listener
+     */
+    removeDataListener(cb) {
+        isFunction(cb) && eventCenter.off(formatEventName(this.appName, true), cb);
+    }
+    /**
+     * get data from base app
+     */
+    getData() {
+        return eventCenter.getData(formatEventName(this.appName, true));
+    }
+    /**
+     * dispatch data to base app
+     * @param data data
+     */
+    dispatch(data) {
+        removeDomScope();
+        eventCenter.dispatch(formatEventName(this.appName, false), data);
+        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,
+                }
+            });
+            getRootContainer(app.container).dispatchEvent(event);
         }
-        rawDefineProperty(microAppWindow, 'top', this.createDescriptorFormicroAppWindow('top', topValue));
-        rawDefineProperty(microAppWindow, 'parent', this.createDescriptorFormicroAppWindow('parent', parentValue));
-        globalPropertyList.forEach((key) => {
-            rawDefineProperty(microAppWindow, key, this.createDescriptorFormicroAppWindow(key, this.proxyWindow));
-        });
-    }
-    createDescriptorFormicroAppWindow(key, value) {
-        const { configurable = true, enumerable = true, writable, set } = Object.getOwnPropertyDescriptor(globalEnv.rawWindow, key) || { writable: true };
-        const descriptor = {
-            value,
-            configurable,
-            enumerable,
-            writable: writable !== null && writable !== void 0 ? writable : !!set
-        };
-        return descriptor;
     }
-    // set hijack Properties to microAppWindow
-    setHijackProperties(microAppWindow, appName) {
-        let modifiedEval, modifiedImage;
-        rawDefineProperties(microAppWindow, {
-            document: {
-                get() {
-                    throttleDeferForSetAppName(appName);
-                    return globalEnv.rawDocument;
-                },
-                configurable: false,
-                enumerable: true,
-            },
-            eval: {
-                get() {
-                    throttleDeferForSetAppName(appName);
-                    return modifiedEval || eval;
-                },
-                set: (value) => {
-                    modifiedEval = value;
-                },
-                configurable: true,
-                enumerable: false,
-            },
-            Image: {
-                get() {
-                    throttleDeferForSetAppName(appName);
-                    return modifiedImage || globalEnv.ImageProxy;
-                },
-                set: (value) => {
-                    modifiedImage = value;
-                },
-                configurable: true,
-                enumerable: false,
-            },
-        });
+    /**
+     * clear all listeners
+     */
+    clearDataListener() {
+        eventCenter.off(formatEventName(this.appName, true));
     }
 }
-SandBox.activeCount = 0; // number of active sandbox
-
-function formatEventInfo(event, element) {
-    Object.defineProperties(event, {
-        currentTarget: {
-            get() {
-                return element;
-            }
-        },
-        target: {
-            get() {
-                return element;
-            }
-        },
-    });
-}
 /**
- * dispatch lifeCycles event to base app
- * created, beforemount, mounted, unmount, error
- * @param element container
- * @param appName app.name
- * @param lifecycleName lifeCycle name
- * @param error param from error hook
+ * Record UMD function before exec umdHookMount
+ * @param microAppEventCenter
  */
-function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
-    var _a;
-    if (!element) {
-        return logError(`element does not exist in lifecycle ${lifecycleName}`, appName);
+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);
+            }
+        }
     }
-    element = getRootContainer(element);
-    // clear dom scope before dispatch lifeCycles event to base app, especially mounted & unmount
-    removeDomScope();
-    const detail = Object.assign({
-        name: appName,
-        container: element,
-    }, error && {
-        error
-    });
-    const event = new CustomEvent(lifecycleName, {
-        detail,
-    });
-    formatEventInfo(event, element);
-    // global hooks
-    // @ts-ignore
-    if (isFunction((_a = microApp.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName])) {
-        // @ts-ignore
-        microApp.lifeCycles[lifecycleName](event);
+    const subAppEventInfo = eventCenter.eventList.get(formatEventName(appName, true));
+    if (subAppEventInfo) {
+        microAppEventCenter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
     }
-    element.dispatchEvent(event);
 }
 /**
- * Dispatch custom event to micro app
- * @param eventName event name
- * @param appName app name
- * @param detail event detail
+ * Rebind the UMD function of the record before remount
+ * @param microAppEventCenter instance of EventCenterForMicroApp
  */
-function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
-    const event = new CustomEvent(`${eventName}-${appName}`, {
-        detail,
-    });
-    window.dispatchEvent(event);
+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__);
+    }
 }
 
-// micro app instances
-const appInstanceMap = new Map();
-class CreateApp {
-    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, baseroute, }) {
-        this.state = appStates.NOT_LOADED;
-        this.keepAliveState = null;
-        this.keepAliveContainer = null;
-        this.loadSourceLevel = 0;
-        this.umdHookMount = null;
-        this.umdHookUnmount = null;
-        this.libraryName = null;
-        this.umdMode = false;
-        this.isPrefetch = false;
-        this.container = null;
-        this.baseroute = '';
-        this.sandBox = null;
-        this.container = container !== null && container !== void 0 ? container : null;
-        this.inline = inline !== null && inline !== void 0 ? inline : false;
-        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : '';
-        this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
-        // optional during init👆
-        this.name = name;
-        this.url = url;
-        this.useSandbox = useSandbox;
-        this.scopecss = this.useSandbox && scopecss;
-        this.source = {
-            links: new Map(),
-            scripts: new Map(),
-        };
-        this.loadSourceCode();
-        this.useSandbox && (this.sandBox = new SandBox(name, url));
+/* eslint-disable no-return-assign */
+function isBoundedFunction(value) {
+    if (isBoolean(value.__MICRO_APP_IS_BOUND_FUNCTION__))
+        return value.__MICRO_APP_IS_BOUND_FUNCTION__;
+    return value.__MICRO_APP_IS_BOUND_FUNCTION__ = isBoundFunction(value);
+}
+function isConstructor(value) {
+    var _a;
+    if (isBoolean(value.__MICRO_APP_IS_CONSTRUCTOR__))
+        return value.__MICRO_APP_IS_CONSTRUCTOR__;
+    const valueStr = value.toString();
+    const result = (((_a = value.prototype) === null || _a === void 0 ? void 0 : _a.constructor) === value &&
+        Object.getOwnPropertyNames(value.prototype).length > 1) ||
+        /^function\s+[A-Z]/.test(valueStr) ||
+        /^class\s+/.test(valueStr);
+    return value.__MICRO_APP_IS_CONSTRUCTOR__ = result;
+}
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function bindFunctionToRawWindow(rawWindow, value) {
+    if (value.__MICRO_APP_BOUND_WINDOW_FUNCTION__)
+        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION__;
+    if (!isConstructor(value) && !isBoundedFunction(value)) {
+        const bindRawWindowValue = value.bind(rawWindow);
+        for (const key in value) {
+            bindRawWindowValue[key] = value[key];
+        }
+        if (value.hasOwnProperty('prototype')) {
+            rawDefineProperty(bindRawWindowValue, 'prototype', {
+                value: value.prototype,
+                configurable: true,
+                enumerable: false,
+                writable: true,
+            });
+        }
+        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION__ = bindRawWindowValue;
     }
-    // Load resources
-    loadSourceCode() {
-        this.state = appStates.LOADING_SOURCE_CODE;
-        extractHtml(this);
+    return value;
+}
+
+// document.onclick binding list, the binding function of each application is unique
+const documentClickListMap = new Map();
+let hasRewriteDocumentOnClick = false;
+/**
+ * Rewrite document.onclick and execute it only once
+ */
+function overwriteDocumentOnClick() {
+    hasRewriteDocumentOnClick = true;
+    if (Object.getOwnPropertyDescriptor(document, 'onclick')) {
+        return logWarn('Cannot redefine document property onclick');
     }
-    /**
-     * When resource is loaded, mount app if it is not prefetch or unmount
-     */
-    onLoad(html) {
-        if (++this.loadSourceLevel === 2) {
-            this.source.html = html;
-            if (this.isPrefetch || appStates.UNMOUNT === this.state)
-                return;
-            this.state = appStates.LOAD_SOURCE_FINISHED;
-            this.mount();
+    const rawOnClick = document.onclick;
+    document.onclick = null;
+    let hasDocumentClickInited = false;
+    function onClickHandler(e) {
+        documentClickListMap.forEach((f) => {
+            isFunction(f) && f.call(document, e);
+        });
+    }
+    rawDefineProperty(document, 'onclick', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            const appName = getCurrentAppName();
+            return appName ? documentClickListMap.get(appName) : documentClickListMap.get('base');
+        },
+        set(f) {
+            const appName = getCurrentAppName();
+            if (appName) {
+                documentClickListMap.set(appName, f);
+            }
+            else {
+                documentClickListMap.set('base', f);
+            }
+            if (!hasDocumentClickInited && isFunction(f)) {
+                hasDocumentClickInited = true;
+                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
+            }
+        }
+    });
+    rawOnClick && (document.onclick = rawOnClick);
+}
+/**
+ * The document event is globally, we need to clear these event bindings when micro application unmounted
+ */
+const documentEventListenerMap = new Map();
+function effectDocumentEvent() {
+    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
+    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
+    document.addEventListener = function (type, listener, options) {
+        var _a;
+        const appName = getCurrentAppName();
+        /**
+         * ignore bound function of document event in umd mode, used to solve problem of react global events
+         */
+        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(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);
         }
-    }
-    /**
-     * Error loading HTML
-     * @param e Error
-     */
-    onLoadError(e) {
-        this.loadSourceLevel = -1;
-        if (appStates.UNMOUNT !== this.state) {
-            this.onerror(e);
-            this.state = appStates.LOAD_SOURCE_ERROR;
+        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
+    };
+    document.removeEventListener = function (type, listener, options) {
+        var _a;
+        const appName = getCurrentAppName();
+        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
+            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);
+                }
+            }
         }
+        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
+    };
+}
+// Clear the document event agent
+function releaseEffectDocumentEvent() {
+    document.addEventListener = globalEnv.rawDocumentAddEventListener;
+    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
+}
+// this events should be sent to the specified app
+const formatEventList = ['unmount', 'appstate-change'];
+/**
+ * Format event name
+ * @param type event name
+ * @param microAppWindow micro window
+ */
+function formatEventType(type, microAppWindow) {
+    if (formatEventList.includes(type)) {
+        return `${type}-${microAppWindow.__MICRO_APP_NAME__}`;
     }
-    /**
-     * mount app
-     * @param container app container
-     * @param inline js runs in inline mode
-     * @param baseroute route prefix, default is ''
-     */
-    mount(container, inline, baseroute) {
-        var _a, _b, _c;
-        if (isBoolean(inline) && inline !== this.inline) {
-            this.inline = inline;
+    return type;
+}
+/**
+ * Rewrite side-effect events
+ * @param microAppWindow micro window
+ */
+function effect(microAppWindow) {
+    const appName = microAppWindow.__MICRO_APP_NAME__;
+    const eventListenerMap = new Map();
+    const intervalIdMap = new Map();
+    const timeoutIdMap = new Map();
+    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 = formatEventType(type, microAppWindow);
+        const listenerList = eventListenerMap.get(type);
+        if (listenerList) {
+            listenerList.add(listener);
         }
-        this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
-        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
-        if (this.loadSourceLevel !== 2) {
-            this.state = appStates.LOADING_SOURCE_CODE;
-            return;
+        else {
+            eventListenerMap.set(type, new Set([listener]));
         }
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
-        this.state = appStates.MOUNTING;
-        cloneContainer(this.source.html, this.container, !this.umdMode);
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute);
-        let umdHookMountResult; // result of mount function
-        if (!this.umdMode) {
-            let hasDispatchMountedEvent = false;
-            // if all js are executed, param isFinished will be true
-            execScripts(this.source.scripts, this, (isFinished) => {
-                var _a;
-                if (!this.umdMode) {
-                    const { mount, unmount } = this.getUmdLibraryHooks();
-                    // if mount & unmount is function, the sub app is umd mode
-                    if (isFunction(mount) && isFunction(unmount)) {
-                        this.umdHookMount = mount;
-                        this.umdHookUnmount = unmount;
-                        this.umdMode = true;
-                        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
-                        try {
-                            umdHookMountResult = this.umdHookMount();
-                        }
-                        catch (e) {
-                            logError('an error occurred in the mount function \n', this.name, e);
-                        }
-                    }
-                }
-                if (!hasDispatchMountedEvent && (isFinished === true || this.umdMode)) {
-                    hasDispatchMountedEvent = true;
-                    this.handleMounted(umdHookMountResult);
+        listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
+        rawWindowAddEventListener.call(rawWindow, type, listener, options);
+    };
+    microAppWindow.removeEventListener = function (type, listener, options) {
+        type = formatEventType(type, microAppWindow);
+        const listenerList = eventListenerMap.get(type);
+        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
+            listenerList.delete(listener);
+        }
+        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
+    };
+    microAppWindow.setInterval = function (handler, timeout, ...args) {
+        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
+        intervalIdMap.set(intervalId, { handler, timeout, args });
+        return intervalId;
+    };
+    microAppWindow.setTimeout = function (handler, timeout, ...args) {
+        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
+        timeoutIdMap.set(timeoutId, { handler, timeout, args });
+        return timeoutId;
+    };
+    microAppWindow.clearInterval = function (intervalId) {
+        intervalIdMap.delete(intervalId);
+        rawClearInterval.call(rawWindow, intervalId);
+    };
+    microAppWindow.clearTimeout = function (timeoutId) {
+        timeoutIdMap.delete(timeoutId);
+        rawClearTimeout.call(rawWindow, timeoutId);
+    };
+    const umdWindowListenerMap = new Map();
+    const umdDocumentListenerMap = new Map();
+    let umdIntervalIdMap = new Map();
+    let umdTimeoutIdMap = new Map();
+    let umdOnClickHandler;
+    // record event and timer before exec umdMountHook
+    const recordUmdEffect = () => {
+        // record window event
+        eventListenerMap.forEach((listenerList, type) => {
+            if (listenerList.size) {
+                umdWindowListenerMap.set(type, new Set(listenerList));
+            }
+        });
+        // record timers
+        if (intervalIdMap.size) {
+            umdIntervalIdMap = new Map(intervalIdMap);
+        }
+        if (timeoutIdMap.size) {
+            umdTimeoutIdMap = new Map(timeoutIdMap);
+        }
+        // record onclick handler
+        umdOnClickHandler = documentClickListMap.get(appName);
+        // record document event
+        const documentAppListenersMap = documentEventListenerMap.get(appName);
+        if (documentAppListenersMap) {
+            documentAppListenersMap.forEach((listenerList, type) => {
+                if (listenerList.size) {
+                    umdDocumentListenerMap.set(type, new Set(listenerList));
                 }
             });
         }
-        else {
-            (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.rebuildUmdSnapshot();
-            try {
-                umdHookMountResult = this.umdHookMount();
+    };
+    // rebuild event and timer before remount umd app
+    const rebuildUmdEffect = () => {
+        // rebuild window event
+        umdWindowListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
-            catch (e) {
-                logError('an error occurred in the mount function \n', this.name, e);
+        });
+        // rebuild timer
+        umdIntervalIdMap.forEach((info) => {
+            microAppWindow.setInterval(info.handler, info.timeout, ...info.args);
+        });
+        umdTimeoutIdMap.forEach((info) => {
+            microAppWindow.setTimeout(info.handler, info.timeout, ...info.args);
+        });
+        // rebuild onclick event
+        umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
+        // rebuild document event
+        setCurrentAppName(appName);
+        umdDocumentListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
-            this.handleMounted(umdHookMountResult);
-        }
-    }
-    /**
-     * handle for promise umdHookMount
-     * @param umdHookMountResult result of umdHookMount
-     */
-    handleMounted(umdHookMountResult) {
-        if (isPromise(umdHookMountResult)) {
-            umdHookMountResult
-                .then(() => this.dispatchMountedEvent())
-                .catch((e) => this.onerror(e));
+        });
+        setCurrentAppName(null);
+    };
+    // release all event listener & interval & timeout when unmount app
+    const releaseEffect = () => {
+        // Clear window binding events
+        if (eventListenerMap.size) {
+            eventListenerMap.forEach((listenerList, type) => {
+                for (const listener of listenerList) {
+                    rawWindowRemoveEventListener.call(rawWindow, type, listener);
+                }
+            });
+            eventListenerMap.clear();
         }
-        else {
-            this.dispatchMountedEvent();
+        // Clear timers
+        if (intervalIdMap.size) {
+            intervalIdMap.forEach((_, intervalId) => {
+                rawClearInterval.call(rawWindow, intervalId);
+            });
+            intervalIdMap.clear();
         }
-    }
-    /**
-     * dispatch mounted event when app run finished
-     */
-    dispatchMountedEvent() {
-        if (appStates.UNMOUNT !== this.state) {
-            this.state = appStates.MOUNTED;
-            dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
+        if (timeoutIdMap.size) {
+            timeoutIdMap.forEach((_, timeoutId) => {
+                rawClearTimeout.call(rawWindow, timeoutId);
+            });
+            timeoutIdMap.clear();
         }
-    }
-    /**
-     * unmount app
-     * @param destroy completely destroy, delete cache resources
-     * @param unmountcb callback of unmount
-     */
-    unmount(destroy, unmountcb) {
-        if (this.state === appStates.LOAD_SOURCE_ERROR) {
-            destroy = true;
+        // Clear the function bound by micro application through document.onclick
+        documentClickListMap.delete(appName);
+        // Clear document binding event
+        const documentAppListenersMap = documentEventListenerMap.get(appName);
+        if (documentAppListenersMap) {
+            documentAppListenersMap.forEach((listenerList, type) => {
+                for (const listener of listenerList) {
+                    rawDocumentRemoveEventListener.call(rawDocument, type, listener);
+                }
+            });
+            documentAppListenersMap.clear();
         }
-        this.state = appStates.UNMOUNT;
-        this.keepAliveState = null;
-        this.keepAliveContainer = null;
-        // result of unmount function
-        let umdHookUnmountResult;
+    };
+    return {
+        recordUmdEffect,
+        rebuildUmdEffect,
+        releaseEffect,
+    };
+}
+
+// Variables that can escape to rawWindow
+const staticEscapeProperties = [
+    'System',
+    '__cjsWrapper',
+];
+// Variables that can only assigned to rawWindow
+const escapeSetterKeyList = [
+    'location',
+];
+const globalPropertyList = ['window', 'self', 'globalThis'];
+class SandBox {
+    constructor(appName, url) {
         /**
-         * send an unmount event to the micro app or call umd unmount hook
-         * before the sandbox is cleared
+         * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
+         * https://github.com/micro-zoe/micro-app/issues/234
          */
-        if (this.umdHookUnmount) {
-            try {
-                umdHookUnmountResult = this.umdHookUnmount();
-            }
-            catch (e) {
-                logError('an error occurred in the unmount function \n', this.name, e);
+        this.scopeProperties = ['webpackJsonp', 'Vue'];
+        // Properties that can be escape to rawWindow
+        this.escapeProperties = [];
+        // Properties newly added to microAppWindow
+        this.injectedKeys = new Set();
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
+        // sandbox state
+        this.active = false;
+        this.microAppWindow = {}; // Proxy target
+        // get scopeProperties and escapeProperties from plugins
+        this.getSpecialProperties(appName);
+        // create proxyWindow with Proxy(microAppWindow)
+        this.proxyWindow = this.createProxyWindow(appName);
+        // inject global properties
+        this.initMicroAppWindow(this.microAppWindow, appName, url);
+        // Rewrite global event listener & timeout
+        Object.assign(this, effect(this.microAppWindow));
+    }
+    start(baseRoute) {
+        if (!this.active) {
+            this.active = true;
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseRoute;
+            // BUG FIX: bable-polyfill@6.x
+            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
+            if (++SandBox.activeCount === 1) {
+                effectDocumentEvent();
+                patchElementPrototypeMethods();
             }
         }
-        // dispatch unmount event to micro app
-        dispatchCustomEventToMicroApp('unmount', this.name);
-        this.handleUnmounted(destroy, umdHookUnmountResult, unmountcb);
     }
-    /**
-     * handle for promise umdHookUnmount
-     * @param destroy completely destroy, delete cache resources
-     * @param umdHookUnmountResult result of umdHookUnmount
-     * @param unmountcb callback of unmount
-     */
-    handleUnmounted(destroy, umdHookUnmountResult, unmountcb) {
-        if (isPromise(umdHookUnmountResult)) {
-            umdHookUnmountResult
-                .then(() => this.actionsForUnmount(destroy, unmountcb))
-                .catch(() => this.actionsForUnmount(destroy, unmountcb));
-        }
-        else {
-            this.actionsForUnmount(destroy, unmountcb);
+    stop() {
+        if (this.active) {
+            this.active = false;
+            this.releaseEffect();
+            this.microAppWindow.microApp.clearDataListener();
+            this.microAppWindow.microApp.clearGlobalDataListener();
+            this.injectedKeys.forEach((key) => {
+                Reflect.deleteProperty(this.microAppWindow, key);
+            });
+            this.injectedKeys.clear();
+            this.escapeKeys.forEach((key) => {
+                Reflect.deleteProperty(globalEnv.rawWindow, key);
+            });
+            this.escapeKeys.clear();
+            if (--SandBox.activeCount === 0) {
+                releaseEffectDocumentEvent();
+                releasePatches();
+            }
         }
     }
+    // record umd snapshot before the first execution of umdHookMount
+    recordUmdSnapshot() {
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = true;
+        this.recordUmdEffect();
+        recordDataCenterSnapshot(this.microAppWindow.microApp);
+        this.recordUmdInjectedValues = new Map();
+        this.injectedKeys.forEach((key) => {
+            this.recordUmdInjectedValues.set(key, Reflect.get(this.microAppWindow, key));
+        });
+    }
+    // rebuild umd snapshot before remount umd app
+    rebuildUmdSnapshot() {
+        this.recordUmdInjectedValues.forEach((value, key) => {
+            Reflect.set(this.proxyWindow, key, value);
+        });
+        this.rebuildUmdEffect();
+        rebuildDataCenterSnapshot(this.microAppWindow.microApp);
+    }
     /**
-     * actions for unmount app
-     * @param destroy completely destroy, delete cache resources
-     * @param unmountcb callback of unmount
+     * get scopeProperties and escapeProperties from plugins
+     * @param appName app name
      */
-    actionsForUnmount(destroy, unmountcb) {
+    getSpecialProperties(appName) {
         var _a;
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
-        if (destroy) {
-            this.actionsForCompletelyDestroy();
-        }
-        else if (this.umdMode && this.container.childElementCount) {
-            cloneContainer(this.container, this.source.html, false);
-        }
-        // dispatch unmount event to base app
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
-        this.container.innerHTML = '';
-        this.container = null;
-        unmountcb && unmountcb();
+        if (!isPlainObject(microApp.plugins))
+            return;
+        this.commonActionForSpecialProperties(microApp.plugins.global);
+        this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
     }
-    // actions for completely destroy
-    actionsForCompletelyDestroy() {
-        if (!this.useSandbox && this.umdMode) {
-            delete window[this.libraryName];
+    // common action for global plugins and module plugins
+    commonActionForSpecialProperties(plugins) {
+        if (isArray(plugins)) {
+            for (const plugin of plugins) {
+                if (isPlainObject(plugin)) {
+                    if (isArray(plugin.scopeProperties)) {
+                        this.scopeProperties = this.scopeProperties.concat(plugin.scopeProperties);
+                    }
+                    if (isArray(plugin.escapeProperties)) {
+                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
+                    }
+                }
+            }
         }
-        appInstanceMap.delete(this.name);
-    }
-    // hidden app when disconnectedCallback called with keep-alive
-    hiddenKeepAliveApp() {
-        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, {
-            appState: 'afterhidden',
-        });
-        // dispatch afterhidden event to base app
-        dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
     }
-    // show app when connectedCallback called with keep-alive
-    showKeepAliveApp(container) {
-        // dispatch beforeshow event to micro-app
-        dispatchCustomEventToMicroApp('appstate-change', this.name, {
-            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;
-        // dispatch aftershow event to micro-app
-        dispatchCustomEventToMicroApp('appstate-change', this.name, {
-            appState: 'aftershow',
+    // create proxyWindow with Proxy(microAppWindow)
+    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);
+                if (Reflect.has(target, key) ||
+                    (isString(key) && /^__MICRO_APP_/.test(key)) ||
+                    this.scopeProperties.includes(key))
+                    return Reflect.get(target, key);
+                const rawValue = Reflect.get(rawWindow, key);
+                return isFunction(rawValue) ? bindFunctionToRawWindow(rawWindow, rawValue) : rawValue;
+            },
+            set: (target, key, value) => {
+                if (this.active) {
+                    if (escapeSetterKeyList.includes(key)) {
+                        Reflect.set(rawWindow, key, value);
+                    }
+                    else if (
+                    // target.hasOwnProperty has been rewritten
+                    !rawHasOwnProperty.call(target, key) &&
+                        rawHasOwnProperty.call(rawWindow, key) &&
+                        !this.scopeProperties.includes(key)) {
+                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                        const { configurable, enumerable, writable, set } = descriptor;
+                        // set value because it can be set
+                        rawDefineProperty(target, key, {
+                            value,
+                            configurable,
+                            enumerable,
+                            writable: writable !== null && writable !== void 0 ? writable : !!set,
+                        });
+                        this.injectedKeys.add(key);
+                    }
+                    else {
+                        Reflect.set(target, key, value);
+                        this.injectedKeys.add(key);
+                    }
+                    if ((this.escapeProperties.includes(key) ||
+                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
+                        !this.scopeProperties.includes(key)) {
+                        Reflect.set(rawWindow, key, value);
+                        this.escapeKeys.add(key);
+                    }
+                }
+                return true;
+            },
+            has: (target, key) => {
+                if (this.scopeProperties.includes(key))
+                    return key in target;
+                return key in target || key in rawWindow;
+            },
+            // Object.getOwnPropertyDescriptor(window, key)
+            getOwnPropertyDescriptor: (target, key) => {
+                if (rawHasOwnProperty.call(target, key)) {
+                    descriptorTargetMap.set(key, 'target');
+                    return Object.getOwnPropertyDescriptor(target, key);
+                }
+                if (rawHasOwnProperty.call(rawWindow, key)) {
+                    descriptorTargetMap.set(key, 'rawWindow');
+                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                    if (descriptor && !descriptor.configurable) {
+                        descriptor.configurable = true;
+                    }
+                    return descriptor;
+                }
+                return undefined;
+            },
+            // Object.defineProperty(window, key, Descriptor)
+            defineProperty: (target, key, value) => {
+                const from = descriptorTargetMap.get(key);
+                if (from === 'rawWindow') {
+                    return Reflect.defineProperty(rawWindow, key, value);
+                }
+                return Reflect.defineProperty(target, key, value);
+            },
+            // Object.getOwnPropertyNames(window)
+            ownKeys: (target) => {
+                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
+            },
+            deleteProperty: (target, key) => {
+                if (rawHasOwnProperty.call(target, key)) {
+                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
+                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
+                    return Reflect.deleteProperty(target, key);
+                }
+                return true;
+            },
         });
-        // dispatch aftershow event to base app
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERSHOW);
     }
     /**
-     * app rendering error
-     * @param e Error
+     * inject global properties to microAppWindow
+     * @param microAppWindow micro window
+     * @param appName app name
+     * @param url app url
      */
-    onerror(e) {
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
+    initMicroAppWindow(microAppWindow, appName, url) {
+        microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        microAppWindow.__MICRO_APP_NAME__ = appName;
+        microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
+        microAppWindow.microApp = Object.assign(new EventCenterForMicroApp(appName), {
+            removeDomScope,
+            pureCreateElement,
+        });
+        microAppWindow.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
+        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
+        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
+        this.setHijackProperties(microAppWindow, appName);
     }
-    // get app state
-    getAppState() {
-        return this.state;
+    // properties associated with the native window
+    setMappingPropertiesWithRawDescriptor(microAppWindow) {
+        let topValue, parentValue;
+        const rawWindow = globalEnv.rawWindow;
+        if (rawWindow === rawWindow.parent) { // not in iframe
+            topValue = parentValue = this.proxyWindow;
+        }
+        else { // in iframe
+            topValue = rawWindow.top;
+            parentValue = rawWindow.parent;
+        }
+        rawDefineProperty(microAppWindow, 'top', this.createDescriptorForMicroAppWindow('top', topValue));
+        rawDefineProperty(microAppWindow, 'parent', this.createDescriptorForMicroAppWindow('parent', parentValue));
+        globalPropertyList.forEach((key) => {
+            rawDefineProperty(microAppWindow, key, this.createDescriptorForMicroAppWindow(key, this.proxyWindow));
+        });
     }
-    // get keep-alive state
-    getKeepAliveState() {
-        return this.keepAliveState;
+    createDescriptorForMicroAppWindow(key, value) {
+        const { configurable = true, enumerable = true, writable, set } = Object.getOwnPropertyDescriptor(globalEnv.rawWindow, key) || { writable: true };
+        const descriptor = {
+            value,
+            configurable,
+            enumerable,
+            writable: writable !== null && writable !== void 0 ? writable : !!set
+        };
+        return descriptor;
     }
-    // get umd library, if it not exist, return empty object
-    getUmdLibraryHooks() {
-        var _a, _b;
-        // 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}`;
-            // do not use isObject
-            return typeof global[this.libraryName] === 'object' ? global[this.libraryName] : {};
-        }
-        return {};
+    // set hijack Properties to microAppWindow
+    setHijackProperties(microAppWindow, appName) {
+        let modifiedEval, modifiedImage;
+        rawDefineProperties(microAppWindow, {
+            document: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return globalEnv.rawDocument;
+                },
+                configurable: false,
+                enumerable: true,
+            },
+            eval: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return modifiedEval || eval;
+                },
+                set: (value) => {
+                    modifiedEval = value;
+                },
+                configurable: true,
+                enumerable: false,
+            },
+            Image: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return modifiedImage || globalEnv.ImageProxy;
+                },
+                set: (value) => {
+                    modifiedImage = value;
+                },
+                configurable: true,
+                enumerable: false,
+            },
+        });
     }
 }
+SandBox.activeCount = 0; // number of active sandbox
 
-// Record element and map element
-const dynamicElementInMicroAppMap = new WeakMap();
+function formatEventInfo(event, element) {
+    Object.defineProperties(event, {
+        currentTarget: {
+            get() {
+                return element;
+            }
+        },
+        target: {
+            get() {
+                return element;
+            }
+        },
+    });
+}
 /**
- * Process the new node and format the style, link and script element
- * @param parent parent node
- * @param child new node
- * @param app app
+ * dispatch lifeCycles event to base app
+ * created, beforemount, mounted, unmount, error
+ * @param element container
+ * @param appName app.name
+ * @param lifecycleName lifeCycle name
+ * @param error param from error hook
  */
-function handleNewNode(parent, child, app) {
-    if (child instanceof HTMLStyleElement) {
-        if (child.hasAttribute('exclude')) {
-            const replaceComment = document.createComment('style element with exclude attribute ignored by micro-app');
-            dynamicElementInMicroAppMap.set(child, replaceComment);
-            return replaceComment;
-        }
-        else if (app.scopecss && !child.hasAttribute('ignore')) {
-            return scopedCSS(child, app);
-        }
-        return child;
-    }
-    else if (child instanceof HTMLLinkElement) {
-        if (child.hasAttribute('exclude')) {
-            const linkReplaceComment = document.createComment('link element with exclude attribute ignored by micro-app');
-            dynamicElementInMicroAppMap.set(child, linkReplaceComment);
-            return linkReplaceComment;
-        }
-        else if (child.hasAttribute('ignore')) {
-            return child;
-        }
-        const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, true);
-        if (url && info) {
-            const replaceStyle = pureCreateElement('style');
-            replaceStyle.__MICRO_APP_LINK_PATH__ = url;
-            foramtDynamicLink(url, info, app, child, replaceStyle);
-            dynamicElementInMicroAppMap.set(child, replaceStyle);
-            return replaceStyle;
-        }
-        else if (replaceComment) {
-            dynamicElementInMicroAppMap.set(child, replaceComment);
-            return replaceComment;
-        }
-        return child;
+function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
+    var _a;
+    if (!element) {
+        return logError(`element does not exist in lifecycle ${lifecycleName}`, appName);
     }
-    else if (child instanceof HTMLScriptElement) {
-        const { replaceComment, url, info } = extractScriptElement(child, parent, app, true) || {};
-        if (url && info) {
-            if (!info.isExternal) { // inline script
-                const replaceElement = runScript(url, app, info, true);
-                dynamicElementInMicroAppMap.set(child, replaceElement);
-                return replaceElement;
-            }
-            else { // remote script
-                const replaceElement = runDynamicRemoteScript(url, info, app, child);
-                dynamicElementInMicroAppMap.set(child, replaceElement);
-                return replaceElement;
-            }
-        }
-        else if (replaceComment) {
-            dynamicElementInMicroAppMap.set(child, replaceComment);
-            return replaceComment;
-        }
-        return child;
+    element = getRootContainer(element);
+    // clear dom scope before dispatch lifeCycles event to base app, especially mounted & unmount
+    removeDomScope();
+    const detail = Object.assign({
+        name: appName,
+        container: element,
+    }, error && {
+        error
+    });
+    const event = new CustomEvent(lifecycleName, {
+        detail,
+    });
+    formatEventInfo(event, element);
+    // global hooks
+    // @ts-ignore
+    if (isFunction((_a = microApp.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName])) {
+        // @ts-ignore
+        microApp.lifeCycles[lifecycleName](event);
     }
-    return child;
+    element.dispatchEvent(event);
 }
 /**
- * Handle the elements inserted into head and body, and execute normally in other cases
- * @param app app
- * @param method raw method
- * @param parent parent node
- * @param targetChild target node
- * @param passiveChild second param of insertBefore and replaceChild
+ * Dispatch custom event to micro app
+ * @param eventName event name
+ * @param appName app name
+ * @param detail event detail
  */
-function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
-    /**
-     * 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])
+function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
+    const event = new CustomEvent(`${eventName}-${appName}`, {
+        detail,
+    });
+    window.dispatchEvent(event);
+}
+
+// micro app instances
+const appInstanceMap = new Map();
+class CreateApp {
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, baseroute, }) {
+        this.state = appStates.NOT_LOADED;
+        this.keepAliveState = null;
+        this.keepAliveContainer = null;
+        this.loadSourceLevel = 0;
+        this.umdHookMount = null;
+        this.umdHookUnmount = null;
+        this.libraryName = null;
+        this.umdMode = false;
+        this.isPrefetch = false;
+        this.prefetchResolve = null;
+        this.container = null;
+        this.baseroute = '';
+        this.sandBox = null;
+        this.container = container !== null && container !== void 0 ? container : null;
+        this.inline = inline !== null && inline !== void 0 ? inline : false;
+        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : '';
+        this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
+        // optional during init👆
+        this.name = name;
+        this.url = url;
+        this.useSandbox = useSandbox;
+        this.scopecss = this.useSandbox && scopecss;
+        this.source = {
+            links: new Map(),
+            scripts: new Map(),
+        };
+        this.loadSourceCode();
+        this.useSandbox && (this.sandBox = new SandBox(name, url));
+    }
+    // Load resources
+    loadSourceCode() {
+        this.state = appStates.LOADING_SOURCE_CODE;
+        extractHtml(this);
+    }
+    /**
+     * When resource is loaded, mount app if it is not prefetch or unmount
      */
-    if (parent === document.head) {
-        const microAppHead = app.container.querySelector('micro-app-head');
-        /**
-         * 1. If passivechild exists, it must be insertBefore or replacechild
-         * 2. When removeChild, targetChild may not be in microAppHead or head
-         */
-        if (passiveChild && !microAppHead.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(microAppHead, targetChild);
-        }
-        else if (rawMethod === globalEnv.rawRemoveChild && !microAppHead.contains(targetChild)) {
-            if (parent.contains(targetChild)) {
-                return rawMethod.call(parent, targetChild);
+    onLoad(html) {
+        var _a;
+        if (++this.loadSourceLevel === 2) {
+            this.source.html = html;
+            if (this.isPrefetch) {
+                (_a = this.prefetchResolve) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.prefetchResolve = null;
+            }
+            else if (appStates.UNMOUNT !== this.state) {
+                this.state = appStates.LOAD_SOURCE_FINISHED;
+                this.mount();
             }
-            return targetChild;
-        }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppHead, targetChild);
         }
-        return rawMethod.call(microAppHead, targetChild, passiveChild);
     }
-    else if (parent === document.body) {
-        const microAppBody = app.container.querySelector('micro-app-body');
-        if (passiveChild && !microAppBody.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(microAppBody, targetChild);
-        }
-        else if (rawMethod === globalEnv.rawRemoveChild && !microAppBody.contains(targetChild)) {
-            if (parent.contains(targetChild)) {
-                return rawMethod.call(parent, targetChild);
-            }
-            return targetChild;
+    /**
+     * Error loading HTML
+     * @param e Error
+     */
+    onLoadError(e) {
+        this.loadSourceLevel = -1;
+        if (this.prefetchResolve) {
+            this.prefetchResolve();
+            this.prefetchResolve = null;
         }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppBody, targetChild);
+        if (appStates.UNMOUNT !== this.state) {
+            this.onerror(e);
+            this.state = appStates.LOAD_SOURCE_ERROR;
         }
-        return rawMethod.call(microAppBody, targetChild, passiveChild);
-    }
-    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        return rawMethod.call(parent, targetChild);
     }
-    return rawMethod.call(parent, targetChild, passiveChild);
-}
-// Get the map element
-function getMappingNode(node) {
-    var _a;
-    return (_a = dynamicElementInMicroAppMap.get(node)) !== null && _a !== void 0 ? _a : node;
-}
-/**
- * method of handle new node
- * @param parent parent node
- * @param newChild new node
- * @param passiveChild passive node
- * @param rawMethodraw method
- */
-function commonElementHander(parent, newChild, passiveChild, rawMethod) {
-    if (newChild === null || newChild === void 0 ? void 0 : newChild.__MICRO_APP_NAME__) {
-        const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
-        if (app === null || app === void 0 ? void 0 : app.container) {
-            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(parent, newChild, app), passiveChild && getMappingNode(passiveChild));
+    /**
+     * mount app
+     * @param container app container
+     * @param inline js runs in inline mode
+     * @param baseroute route prefix, default is ''
+     */
+    mount(container, inline, baseroute) {
+        var _a, _b, _c;
+        if (isBoolean(inline) && inline !== this.inline) {
+            this.inline = inline;
         }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(parent, newChild);
+        this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
+        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
+        if (this.loadSourceLevel !== 2) {
+            this.state = appStates.LOADING_SOURCE_CODE;
+            return;
         }
-        return rawMethod.call(parent, newChild, passiveChild);
-    }
-    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        const appName = getCurrentAppName();
-        if (!(newChild instanceof Node) && appName) {
-            const app = appInstanceMap.get(appName);
-            if (app === null || app === void 0 ? void 0 : app.container) {
-                if (parent === document.head) {
-                    return rawMethod.call(app.container.querySelector('micro-app-head'), newChild);
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+        this.state = appStates.MOUNTING;
+        cloneContainer(this.source.html, this.container, !this.umdMode);
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute);
+        let umdHookMountResult; // result of mount function
+        if (!this.umdMode) {
+            let hasDispatchMountedEvent = false;
+            // if all js are executed, param isFinished will be true
+            execScripts(this.source.scripts, this, (isFinished) => {
+                var _a;
+                if (!this.umdMode) {
+                    const { mount, unmount } = this.getUmdLibraryHooks();
+                    // if mount & unmount is function, the sub app is umd mode
+                    if (isFunction(mount) && isFunction(unmount)) {
+                        this.umdHookMount = mount;
+                        this.umdHookUnmount = unmount;
+                        this.umdMode = true;
+                        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
+                        try {
+                            umdHookMountResult = this.umdHookMount();
+                        }
+                        catch (e) {
+                            logError('an error occurred in the mount function \n', this.name, e);
+                        }
+                    }
                 }
-                else if (parent === document.body) {
-                    return rawMethod.call(app.container.querySelector('micro-app-body'), newChild);
+                if (!hasDispatchMountedEvent && (isFinished === true || this.umdMode)) {
+                    hasDispatchMountedEvent = true;
+                    this.handleMounted(umdHookMountResult);
                 }
-            }
+            });
         }
-        return rawMethod.call(parent, newChild);
-    }
-    return rawMethod.call(parent, newChild, passiveChild);
-}
-/**
- * Rewrite element prototype method
- */
-function patchElementPrototypeMethods() {
-    patchDocument();
-    // Rewrite setAttribute
-    Element.prototype.setAttribute = function setAttribute(key, value) {
-        if (/^micro-app(-\S+)?/i.test(this.tagName) && key === 'data') {
-            if (isPlainObject(value)) {
-                const cloneValue = {};
-                Object.getOwnPropertyNames(value).forEach((propertyKey) => {
-                    if (!(isString(propertyKey) && propertyKey.indexOf('__') === 0)) {
-                        // @ts-ignore
-                        cloneValue[propertyKey] = value[propertyKey];
-                    }
-                });
-                this.data = cloneValue;
+        else {
+            (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.rebuildUmdSnapshot();
+            try {
+                umdHookMountResult = this.umdHookMount();
             }
-            else if (value !== '[object Object]') {
-                logWarn('property data must be an object', this.getAttribute('name'));
+            catch (e) {
+                logError('an error occurred in the mount function \n', this.name, e);
             }
+            this.handleMounted(umdHookMountResult);
         }
-        else if ((((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
-            (key === 'href' && /^link$/i.test(this.tagName))) &&
-            this.__MICRO_APP_NAME__ &&
-            appInstanceMap.has(this.__MICRO_APP_NAME__)) {
-            const app = appInstanceMap.get(this.__MICRO_APP_NAME__);
-            globalEnv.rawSetAttribute.call(this, key, CompletionPath(value, app.url));
+    }
+    /**
+     * handle for promise umdHookMount
+     * @param umdHookMountResult result of umdHookMount
+     */
+    handleMounted(umdHookMountResult) {
+        if (isPromise(umdHookMountResult)) {
+            umdHookMountResult
+                .then(() => this.dispatchMountedEvent())
+                .catch((e) => this.onerror(e));
         }
         else {
-            globalEnv.rawSetAttribute.call(this, key, value);
-        }
-    };
-    // prototype methods of add element👇
-    Element.prototype.appendChild = function appendChild(newChild) {
-        return commonElementHander(this, newChild, null, globalEnv.rawAppendChild);
-    };
-    Element.prototype.insertBefore = function insertBefore(newChild, refChild) {
-        return commonElementHander(this, newChild, refChild, globalEnv.rawInsertBefore);
-    };
-    Element.prototype.replaceChild = function replaceChild(newChild, oldChild) {
-        return commonElementHander(this, newChild, oldChild, globalEnv.rawReplaceChild);
-    };
-    Element.prototype.append = function append(...nodes) {
-        let i = 0;
-        const length = nodes.length;
-        while (i < length) {
-            commonElementHander(this, nodes[i], null, globalEnv.rawAppend);
-            i++;
-        }
-    };
-    Element.prototype.prepend = function prepend(...nodes) {
-        let i = nodes.length;
-        while (i > 0) {
-            commonElementHander(this, nodes[i - 1], null, globalEnv.rawPrepend);
-            i--;
-        }
-    };
-    // prototype methods of delete element👇
-    Element.prototype.removeChild = function removeChild(oldChild) {
-        if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
-            const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
-            if (app === null || app === void 0 ? void 0 : app.container) {
-                return invokePrototypeMethod(app, globalEnv.rawRemoveChild, this, getMappingNode(oldChild));
-            }
-            return globalEnv.rawRemoveChild.call(this, oldChild);
-        }
-        return globalEnv.rawRemoveChild.call(this, oldChild);
-    };
-    // patch cloneNode
-    Element.prototype.cloneNode = function cloneNode(deep) {
-        const clonedNode = globalEnv.rawCloneNode.call(this, deep);
-        this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
-        return clonedNode;
-    };
-}
-/**
- * Mark the newly created element in the micro application
- * @param element new element
- */
-function markElement(element) {
-    const appName = getCurrentAppName();
-    appName && (element.__MICRO_APP_NAME__ = appName);
-    return element;
-}
-// methods of document
-function patchDocument() {
-    const rawDocument = globalEnv.rawDocument;
-    // create element 👇
-    Document.prototype.createElement = function createElement(tagName, options) {
-        const element = globalEnv.rawCreateElement.call(this, tagName, options);
-        return markElement(element);
-    };
-    Document.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
-        const element = globalEnv.rawCreateElementNS.call(this, namespaceURI, name, options);
-        return markElement(element);
-    };
-    Document.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = globalEnv.rawCreateDocumentFragment.call(this);
-        return markElement(element);
-    };
-    // query element👇
-    function querySelector(selectors) {
-        var _a, _b, _c;
-        const appName = getCurrentAppName();
-        if (!appName ||
-            !selectors ||
-            isUniqueElement(selectors) ||
-            // see https://github.com/micro-zoe/micro-app/issues/56
-            rawDocument !== this) {
-            return globalEnv.rawQuerySelector.call(this, selectors);
-        }
-        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.querySelector(selectors)) !== null && _c !== void 0 ? _c : null;
-    }
-    function querySelectorAll(selectors) {
-        var _a, _b, _c;
-        const appName = getCurrentAppName();
-        if (!appName ||
-            !selectors ||
-            isUniqueElement(selectors) ||
-            rawDocument !== this) {
-            return globalEnv.rawQuerySelectorAll.call(this, selectors);
+            this.dispatchMountedEvent();
         }
-        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors)) !== null && _c !== void 0 ? _c : [];
     }
-    Document.prototype.querySelector = querySelector;
-    Document.prototype.querySelectorAll = querySelectorAll;
-    Document.prototype.getElementById = function getElementById(key) {
-        if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementById.call(this, key);
-        }
-        try {
-            return querySelector.call(this, `#${key}`);
+    /**
+     * dispatch mounted event when app run finished
+     */
+    dispatchMountedEvent() {
+        if (appStates.UNMOUNT !== this.state) {
+            this.state = appStates.MOUNTED;
+            dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
         }
-        catch (_a) {
-            return globalEnv.rawGetElementById.call(this, key);
+    }
+    /**
+     * unmount app
+     * @param destroy completely destroy, delete cache resources
+     * @param unmountcb callback of unmount
+     */
+    unmount(destroy, unmountcb) {
+        if (this.state === appStates.LOAD_SOURCE_ERROR) {
+            destroy = true;
         }
-    };
-    Document.prototype.getElementsByClassName = function getElementsByClassName(key) {
-        if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByClassName.call(this, key);
+        this.state = appStates.UNMOUNT;
+        this.keepAliveState = null;
+        this.keepAliveContainer = null;
+        // result of unmount function
+        let umdHookUnmountResult;
+        /**
+         * send an unmount event to the micro app or call umd unmount hook
+         * before the sandbox is cleared
+         */
+        if (this.umdHookUnmount) {
+            try {
+                umdHookUnmountResult = this.umdHookUnmount();
+            }
+            catch (e) {
+                logError('an error occurred in the unmount function \n', this.name, e);
+            }
         }
-        try {
-            return querySelectorAll.call(this, `.${key}`);
+        // dispatch unmount event to micro app
+        dispatchCustomEventToMicroApp('unmount', this.name);
+        this.handleUnmounted(destroy, umdHookUnmountResult, unmountcb);
+    }
+    /**
+     * handle for promise umdHookUnmount
+     * @param destroy completely destroy, delete cache resources
+     * @param umdHookUnmountResult result of umdHookUnmount
+     * @param unmountcb callback of unmount
+     */
+    handleUnmounted(destroy, umdHookUnmountResult, unmountcb) {
+        if (isPromise(umdHookUnmountResult)) {
+            umdHookUnmountResult
+                .then(() => this.actionsForUnmount(destroy, unmountcb))
+                .catch(() => this.actionsForUnmount(destroy, unmountcb));
         }
-        catch (_a) {
-            return globalEnv.rawGetElementsByClassName.call(this, key);
+        else {
+            this.actionsForUnmount(destroy, unmountcb);
         }
-    };
-    Document.prototype.getElementsByTagName = function getElementsByTagName(key) {
+    }
+    /**
+     * actions for unmount app
+     * @param destroy completely destroy, delete cache resources
+     * @param unmountcb callback of unmount
+     */
+    actionsForUnmount(destroy, unmountcb) {
         var _a;
-        const appName = getCurrentAppName();
-        if (!appName ||
-            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);
+        if (destroy) {
+            this.actionsForCompletelyDestroy();
         }
-    };
-    Document.prototype.getElementsByName = function getElementsByName(key) {
-        if (!getCurrentAppName() || isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByName.call(this, key);
+        else if (this.umdMode && this.container.childElementCount) {
+            cloneContainer(this.container, this.source.html, false);
         }
-        try {
-            return querySelectorAll.call(this, `[name=${key}]`);
+        // this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
+        if (!getActiveApps().length) {
+            releasePatchSetAttribute();
         }
-        catch (_a) {
-            return globalEnv.rawGetElementsByName.call(this, key);
+        // dispatch unmount event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
+        this.container.innerHTML = '';
+        this.container = null;
+        unmountcb && unmountcb();
+    }
+    // actions for completely destroy
+    actionsForCompletelyDestroy() {
+        if (!this.useSandbox && this.umdMode) {
+            delete window[this.libraryName];
         }
-    };
-}
-function releasePatchDocument() {
-    Document.prototype.createElement = globalEnv.rawCreateElement;
-    Document.prototype.createElementNS = globalEnv.rawCreateElementNS;
-    Document.prototype.createDocumentFragment = globalEnv.rawCreateDocumentFragment;
-    Document.prototype.querySelector = globalEnv.rawQuerySelector;
-    Document.prototype.querySelectorAll = globalEnv.rawQuerySelectorAll;
-    Document.prototype.getElementById = globalEnv.rawGetElementById;
-    Document.prototype.getElementsByClassName = globalEnv.rawGetElementsByClassName;
-    Document.prototype.getElementsByTagName = globalEnv.rawGetElementsByTagName;
-    Document.prototype.getElementsByName = globalEnv.rawGetElementsByName;
-}
-// release patch
-function releasePatches() {
-    setCurrentAppName(null);
-    releasePatchDocument();
-    Element.prototype.setAttribute = globalEnv.rawSetAttribute;
-    Element.prototype.appendChild = globalEnv.rawAppendChild;
-    Element.prototype.insertBefore = globalEnv.rawInsertBefore;
-    Element.prototype.replaceChild = globalEnv.rawReplaceChild;
-    Element.prototype.removeChild = globalEnv.rawRemoveChild;
-    Element.prototype.append = globalEnv.rawAppend;
-    Element.prototype.prepend = globalEnv.rawPrepend;
-    Element.prototype.cloneNode = globalEnv.rawCloneNode;
-}
-// Set the style of micro-app-head and micro-app-body
-let hasRejectMicroAppStyle = false;
-function rejectMicroAppStyle() {
-    if (!hasRejectMicroAppStyle) {
-        hasRejectMicroAppStyle = true;
-        const style = pureCreateElement('style');
-        style.setAttribute('type', 'text/css');
-        style.textContent = `\n${microApp.tagName}, micro-app-body { display: block; } \nmicro-app-head { display: none; }`;
-        globalEnv.rawDocument.head.appendChild(style);
+        appInstanceMap.delete(this.name);
     }
-}
-
-function unmountNestedApp() {
-    releaseUnmountOfNestedApp();
-    appInstanceMap.forEach(app => {
-        // @ts-ignore
-        app.container && getRootContainer(app.container).disconnectedCallback();
-    });
-    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.clear();
-    if (elementInstanceMap.size) {
-        elementInstanceMap.clear();
-        releasePatches();
+    // hidden app when disconnectedCallback called with keep-alive
+    hiddenKeepAliveApp() {
+        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, {
+            appState: 'afterhidden',
+        });
+        // dispatch afterhidden event to base app
+        dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
     }
-}
-// if micro-app run in micro application, delete all next generation application when unmount event received
-function listenUmountOfNestedApp() {
-    if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.addEventListener('unmount', unmountNestedApp, false);
+    // show app when connectedCallback called with keep-alive
+    showKeepAliveApp(container) {
+        // dispatch beforeshow event to micro-app
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            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;
+        // dispatch aftershow event to micro-app
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            appState: 'aftershow',
+        });
+        // dispatch aftershow event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERSHOW);
     }
-}
-// release listener
-function releaseUnmountOfNestedApp() {
-    if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.removeEventListener('unmount', unmountNestedApp, false);
+    /**
+     * app rendering error
+     * @param e Error
+     */
+    onerror(e) {
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
+    }
+    // get app state
+    getAppState() {
+        return this.state;
+    }
+    // get keep-alive state
+    getKeepAliveState() {
+        return this.keepAliveState;
+    }
+    // get umd library, if it not exist, return empty object
+    getUmdLibraryHooks() {
+        var _a, _b;
+        // 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}`;
+            // do not use isObject
+            return typeof global[this.libraryName] === 'object' ? global[this.libraryName] : {};
+        }
+        return {};
     }
 }
 
-// record all micro-app elements
-const elementInstanceMap = new Map();
 /**
  * define element
  * @param tagName element name
@@ -3076,7 +3085,7 @@ function defineElement(tagName) {
     class MicroAppElement extends HTMLElement {
         constructor() {
             super();
-            this.isWating = false;
+            this.isWaiting = false;
             this.cacheData = null;
             this.hasConnected = false;
             this.appName = ''; // app name
@@ -3084,10 +3093,10 @@ function defineElement(tagName) {
             this.ssrUrl = ''; // html path in ssr mode
             this.version = version;
             /**
-             * handle for change of name an url after element inited
+             * handle for change of name an url after element init
              */
             this.handleAttributeUpdate = () => {
-                this.isWating = false;
+                this.isWaiting = false;
                 const formatAttrName = formatAppName(this.getAttribute('name'));
                 const formatAttrUrl = formatAppURL(this.getAttribute('url'), this.appName);
                 if (this.legalAttribute('name', formatAttrName) && this.legalAttribute('url', formatAttrUrl)) {
@@ -3122,10 +3131,7 @@ function defineElement(tagName) {
                     this.setAttribute('name', this.appName);
                 }
             };
-            // cloned node of umd container also trigger constructor, we should skip
-            if (!this.querySelector('micro-app-head')) {
-                this.performWhenFirstCreated();
-            }
+            patchSetAttribute();
         }
         static get observedAttributes() {
             return ['name', 'url'];
@@ -3142,9 +3148,6 @@ function defineElement(tagName) {
         // keep-alive: open keep-alive mode
         connectedCallback() {
             this.hasConnected = true;
-            if (!elementInstanceMap.has(this)) {
-                this.performWhenFirstCreated();
-            }
             defer(() => dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED));
             this.initialMount();
         }
@@ -3155,12 +3158,7 @@ function defineElement(tagName) {
                 this.handleHiddenKeepAliveApp();
             }
             else {
-                elementInstanceMap.delete(this);
-                this.handleUnmount(this.getDestroyCompatibleResult(), () => {
-                    if (elementInstanceMap.size === 0) {
-                        releasePatches();
-                    }
-                });
+                this.handleUnmount(this.getDestroyCompatibleResult());
             }
         }
         attributeChangedCallback(attr, _oldVal, newVal) {
@@ -3189,8 +3187,8 @@ function defineElement(tagName) {
                     }
                     this.handleInitialNameAndUrl();
                 }
-                else if (!this.isWating) {
-                    this.isWating = true;
+                else if (!this.isWaiting) {
+                    this.isWaiting = true;
                     defer(this.handleAttributeUpdate);
                 }
             }
@@ -3199,15 +3197,6 @@ function defineElement(tagName) {
         handleInitialNameAndUrl() {
             this.hasConnected && this.initialMount();
         }
-        // Perform global initialization when the element count is 1
-        performWhenFirstCreated() {
-            if (elementInstanceMap.set(this, true).size === 1) {
-                patchElementPrototypeMethods();
-                rejectMicroAppStyle();
-                releaseUnmountOfNestedApp();
-                listenUmountOfNestedApp();
-            }
-        }
         /**
          * first mount of this app
          */
@@ -3369,7 +3358,7 @@ function defineElement(tagName) {
         }
         // show app when connectedCallback called with keep-alive
         handleShowKeepAliveApp(app) {
-            // must be asnyc
+            // must be async
             defer(() => { var _a; return app.showKeepAliveApp((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this); });
         }
         /**
@@ -3379,7 +3368,7 @@ function defineElement(tagName) {
          */
         getDisposeResult(name) {
             // @ts-ignore
-            return (this.compatibleSpecialProperties(name) || microApp[name]) && this.compatibleDisablSpecialProperties(name);
+            return (this.compatibleSpecialProperties(name) || microApp[name]) && this.compatibleDisableSpecialProperties(name);
         }
         // compatible of disableScopecss & disableSandbox
         compatibleSpecialProperties(name) {
@@ -3392,7 +3381,7 @@ function defineElement(tagName) {
             return this.hasAttribute(name);
         }
         // compatible of disableScopecss & disableSandbox
-        compatibleDisablSpecialProperties(name) {
+        compatibleDisableSpecialProperties(name) {
             if (name === 'disableScopecss') {
                 return this.getAttribute('disableScopecss') !== 'false' && this.getAttribute('disable-scopecss') !== 'false';
             }
@@ -3447,21 +3436,6 @@ function defineElement(tagName) {
     window.customElements.define(tagName, MicroAppElement);
 }
 
-function filterPreFetchTarget(apps) {
-    const validApps = [];
-    if (isArray(apps)) {
-        apps.forEach((item) => {
-            if (isPlainObject(item)) {
-                item.name = formatAppName(item.name);
-                item.url = formatAppURL(item.url, item.name);
-                if (item.name && item.url && !appInstanceMap.has(item.name)) {
-                    validApps.push(item);
-                }
-            }
-        });
-    }
-    return validApps;
-}
 /**
  * preFetch([
  *  {
@@ -3483,16 +3457,37 @@ function preFetch(apps) {
     }
     requestIdleCallback(() => {
         isFunction(apps) && (apps = apps());
-        filterPreFetchTarget(apps).forEach((item) => {
+        if (isArray(apps)) {
+            apps.reduce((pre, next) => pre.then(() => preFetchInSerial(next)), Promise.resolve());
+        }
+    });
+}
+// sequential preload app
+function preFetchInSerial(prefetchApp) {
+    return new Promise((resolve) => {
+        requestIdleCallback(() => {
             var _a, _b;
-            const app = new CreateApp({
-                name: item.name,
-                url: item.url,
-                scopecss: !((_a = item.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
-                useSandbox: !((_b = item.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
-            });
-            app.isPrefetch = true;
-            appInstanceMap.set(item.name, app);
+            if (isPlainObject(prefetchApp) && navigator.onLine) {
+                prefetchApp.name = formatAppName(prefetchApp.name);
+                prefetchApp.url = formatAppURL(prefetchApp.url, prefetchApp.name);
+                if (prefetchApp.name && prefetchApp.url && !appInstanceMap.has(prefetchApp.name)) {
+                    const app = new CreateApp({
+                        name: prefetchApp.name,
+                        url: prefetchApp.url,
+                        scopecss: !((_a = prefetchApp.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
+                        useSandbox: !((_b = prefetchApp.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
+                    });
+                    app.isPrefetch = true;
+                    app.prefetchResolve = resolve;
+                    appInstanceMap.set(prefetchApp.name, app);
+                }
+                else {
+                    resolve();
+                }
+            }
+            else {
+                resolve();
+            }
         });
     });
 }
@@ -3503,45 +3498,31 @@ function preFetch(apps) {
 function getGlobalAssets(assets) {
     if (isPlainObject(assets)) {
         requestIdleCallback(() => {
-            if (isArray(assets.js)) {
-                const effectiveJs = assets.js.filter((path) => isString(path) && path.includes('.js') && !globalScripts.has(path));
-                const fetchJSPromise = [];
-                effectiveJs.forEach((path) => {
-                    fetchJSPromise.push(fetchSource(path));
-                });
-                // fetch js with stream
-                promiseStream(fetchJSPromise, (res) => {
-                    const path = effectiveJs[res.index];
-                    if (!globalScripts.has(path)) {
-                        globalScripts.set(path, res.data);
-                    }
-                }, (err) => {
-                    logError(err);
-                });
-            }
-            if (isArray(assets.css)) {
-                const effectiveCss = assets.css.filter((path) => isString(path) && path.includes('.css') && !globalLinks.has(path));
-                const fetchCssPromise = [];
-                effectiveCss.forEach((path) => {
-                    fetchCssPromise.push(fetchSource(path));
-                });
-                // fetch css with stream
-                promiseStream(fetchCssPromise, (res) => {
-                    const path = effectiveCss[res.index];
-                    if (!globalLinks.has(path)) {
-                        globalLinks.set(path, res.data);
-                    }
-                }, (err) => {
-                    logError(err);
-                });
+            fetchGlobalResources(assets.js, 'js', globalScripts);
+            fetchGlobalResources(assets.css, 'css', globalLinks);
+        });
+    }
+}
+// TODO: requestIdleCallback for every file
+function fetchGlobalResources(resources, suffix, cache) {
+    if (isArray(resources)) {
+        const effectiveResource = resources.filter((path) => isString(path) && path.includes(`.${suffix}`) && !cache.has(path));
+        const fetchResourcePromise = effectiveResource.map((path) => fetchSource(path));
+        // fetch resource with stream
+        promiseStream(fetchResourcePromise, (res) => {
+            const path = effectiveResource[res.index];
+            if (!cache.has(path)) {
+                cache.set(path, res.data);
             }
+        }, (err) => {
+            logError(err);
         });
     }
 }
 
 /**
  * if app not prefetch & not unmount, then app is active
- * @param excludeHiddenApp exclude hidden keep-alive app
+ * @param excludeHiddenApp exclude hidden keep-alive app, default is false
  * @returns active apps
  */
 function getActiveApps(excludeHiddenApp) {
@@ -3561,30 +3542,30 @@ function getAllApps() {
     return Array.from(appInstanceMap.keys());
 }
 /**
- * unmount app by appname
+ * unmount app by appName
  * @param appName
  * @param options unmountAppParams
  * @returns Promise<void>
  */
 function unmountApp(appName, options) {
     const app = appInstanceMap.get(formatAppName(appName));
-    return new Promise((reslove) => {
+    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();
                 }
-                reslove();
+                resolve();
             }
             else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
-                    app.unmount(true, reslove);
+                    app.unmount(true, resolve);
                 }
                 else if (options === null || options === void 0 ? void 0 : options.clearAliveState) {
-                    app.unmount(false, reslove);
+                    app.unmount(false, resolve);
                 }
                 else {
-                    reslove();
+                    resolve();
                 }
             }
             else {
@@ -3592,12 +3573,12 @@ function unmountApp(appName, options) {
                 const unmountHandler = () => {
                     container.removeEventListener('unmount', unmountHandler);
                     container.removeEventListener('afterhidden', afterhiddenHandler);
-                    reslove();
+                    resolve();
                 };
                 const afterhiddenHandler = () => {
                     container.removeEventListener('unmount', unmountHandler);
                     container.removeEventListener('afterhidden', afterhiddenHandler);
-                    reslove();
+                    resolve();
                 };
                 container.addEventListener('unmount', unmountHandler);
                 container.addEventListener('afterhidden', afterhiddenHandler);
@@ -3624,7 +3605,7 @@ function unmountApp(appName, options) {
         }
         else {
             logWarn(`app ${appName} does not exist`);
-            reslove();
+            resolve();
         }
     });
 }