@micro-zoe/micro-app 0.4.1 → 0.5.1

package/lib/index.esm.js

@@ -1,18 +1,54 @@
-const version = '0.4.1';
+const version = '0.5.1';
+// do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
+// do not use isUndefined
 const globalThis = (typeof global !== 'undefined')
     ? global
     : ((typeof window !== 'undefined')
         ? window
         : ((typeof self !== 'undefined') ? self : Function('return this')()));
+// is Undefined
+function isUndefined(target) {
+    return target === undefined;
+}
+// is String
+function isString(target) {
+    return typeof target === 'string';
+}
+// is Boolean
+function isBoolean(target) {
+    return typeof target === 'boolean';
+}
+// is function
+function isFunction(target) {
+    return typeof target === 'function';
+}
+// is Array
+const isArray = Array.isArray;
+// is PlainObject
+function isPlainObject(target) {
+    return toString.call(target) === '[object Object]';
+}
+// is Promise
+function isPromise(target) {
+    return toString.call(target) === '[object Promise]';
+}
+// is bind function
+function isBoundFunction(target) {
+    return isFunction(target) && target.name.indexOf('bound ') === 0 && !target.hasOwnProperty('prototype');
+}
+// is ShadowRoot
+function isShadowRoot(target) {
+    return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot;
+}
 /**
  * format error log
  * @param msg message
  * @param appName app name, default is null
  */
 function logError(msg, appName = null, ...rest) {
-    const appNameTip = appName && typeof appName === 'string' ? ` app ${appName}:` : '';
-    if (typeof msg === 'string') {
+    const appNameTip = appName && isString(appName) ? ` app ${appName}:` : '';
+    if (isString(msg)) {
         console.error(`[micro-app]${appNameTip} ${msg}`, ...rest);
     }
     else {
@@ -25,8 +61,8 @@ function logError(msg, appName = null, ...rest) {
  * @param appName app name, default is null
  */
 function logWarn(msg, appName = null, ...rest) {
-    const appNameTip = appName && typeof appName === 'string' ? ` app ${appName}:` : '';
-    if (typeof msg === 'string') {
+    const appNameTip = appName && isString(appName) ? ` app ${appName}:` : '';
+    if (isString(msg)) {
         console.warn(`[micro-app]${appNameTip} ${msg}`, ...rest);
     }
     else {
@@ -49,11 +85,13 @@ function addProtocol(url) {
     return url.startsWith('//') ? `${location.protocol}${url}` : url;
 }
 /**
- * Format URL address
- * @param url address
+ * format URL address
+ * note the scenes:
+ * 1. micro-app -> attributeChangedCallback
+ * 2. preFetch
  */
-function formatURL(url, appName = null) {
-    if (typeof url !== 'string' || !url)
+function formatAppURL(url, appName = null) {
+    if (!isString(url) || !url)
         return '';
     try {
         const { origin, pathname, search } = new URL(addProtocol(url));
@@ -69,6 +107,20 @@ function formatURL(url, appName = null) {
         return '';
     }
 }
+/**
+ * format name
+ * note the scenes:
+ * 1. micro-app -> attributeChangedCallback
+ * 2. event_center -> EventCenterForMicroApp -> constructor
+ * 3. event_center -> EventCenterForBaseApp -> all methods
+ * 4. preFetch
+ * 5. plugins
+ */
+function formatAppName(name) {
+    if (!isString(name) || !name)
+        return '';
+    return name.replace(/(^\d+)|([^\w\d-_])/gi, '');
+}
 /**
  * Get valid address, such as https://xxx/xx/xx.html to https://xxx/xx/
  * @param url app.url
@@ -108,20 +160,20 @@ function getLinkFileDir(linkpath) {
 /**
  * promise stream
  * @param promiseList promise list
- * @param successsCb success callback
+ * @param successCb success callback
  * @param errorCb failed callback
  * @param finallyCb finally callback
  */
-function promiseStream(promiseList, successsCb, errorCb, finallyCb) {
+function promiseStream(promiseList, successCb, errorCb, finallyCb) {
     let finishedNum = 0;
     function isFinished() {
         if (++finishedNum === promiseList.length && finallyCb)
             finallyCb();
     }
     promiseList.forEach((p, i) => {
-        if (toString.call(p) === '[object Promise]') {
+        if (isPromise(p)) {
             p.then((res) => {
-                successsCb({
+                successCb({
                     data: res,
                     index: i,
                 });
@@ -135,7 +187,7 @@ function promiseStream(promiseList, successsCb, errorCb, finallyCb) {
             });
         }
         else {
-            successsCb({
+            successCb({
                 data: p,
                 index: i,
             });
@@ -190,10 +242,6 @@ function removeDomScope() {
 function isSafari() {
     return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
 }
-// is function
-function isFunction(target) {
-    return typeof target === 'function';
-}
 /**
  * Create pure elements
  */
@@ -209,7 +257,7 @@ function pureCreateElement(tagName, options) {
  * @param target Accept cloned elements
  * @param deep deep clone or transfer dom
  */
-function cloneNode(origin, target, deep) {
+function cloneContainer(origin, target, deep) {
     target.innerHTML = '';
     if (deep) {
         const clonedNode = origin.cloneNode(true);
@@ -225,6 +273,23 @@ function cloneNode(origin, target, deep) {
         });
     }
 }
+// is invalid key of querySelector
+function isInvalidQuerySelectorKey(key) {
+    return !key || /(^\d)|([^\w\d-_\u4e00-\u9fa5])/gi.test(key);
+}
+// unique element
+function isUniqueElement(key) {
+    return (/^body$/i.test(key) ||
+        /^head$/i.test(key) ||
+        /^html$/i.test(key));
+}
+/**
+ * get micro-app element
+ * @param target app container
+ */
+function getRootContainer(target) {
+    return (isShadowRoot(target) ? target.host : target);
+}
 
 var ObservedAttrName;
 (function (ObservedAttrName) {
@@ -252,8 +317,23 @@ var lifeCycles;
     lifeCycles["ERROR"] = "error";
 })(lifeCycles || (lifeCycles = {}));
 
+/**
+ * fetch source of html, js, css
+ * @param url source path
+ * @param appName app name
+ * @param config config of fetch
+ */
+function fetchSource(url, appName = null, options = {}) {
+    if (isFunction(microApp.fetch)) {
+        return microApp.fetch(url, options, appName);
+    }
+    return fetch(url, options).then((res) => {
+        return res.text();
+    });
+}
+
 const globalEnv = {};
-function initGloalEnv() {
+function initGlobalEnv() {
     if (isBrowser) {
         /**
          * save patch raw methods
@@ -438,33 +518,35 @@ function scopedRule(rules, prefix) {
  */
 function commonAction(templateStyle, styleElement, originContent, prefix, baseURI, linkpath) {
     var _a, _b;
-    const rules = Array.from((_b = (_a = templateStyle.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) !== null && _b !== void 0 ? _b : []);
-    let result = scopedHost(scopedRule(rules, prefix), baseURI, originContent, linkpath);
-    /**
-     * Solve the problem of missing content quotes in some Safari browsers
-     * docs: https://developer.mozilla.org/zh-CN/docs/Web/CSS/content
-     * If there are still problems, it is recommended to use the attr()
-     */
-    if (isSafari()) {
-        result = result.replace(/([;{]\s*content:\s*)([^\s"][^";}]*)/gm, (all, $1, $2) => {
-            if ($2 === 'none' ||
-                /^(url\()|(counter\()|(attr\()|(open-quote)|(close-quote)/.test($2)) {
-                return all;
-            }
-            return `${$1}"${$2}"`;
-        });
+    if (!styleElement.__MICRO_APP_HAS_SCOPED__) {
+        const rules = Array.from((_b = (_a = templateStyle.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) !== null && _b !== void 0 ? _b : []);
+        let result = scopedHost(scopedRule(rules, prefix), baseURI, originContent, linkpath);
+        /**
+         * Solve the problem of missing content quotes in some Safari browsers
+         * docs: https://developer.mozilla.org/zh-CN/docs/Web/CSS/content
+         * If there are still problems, it is recommended to use the attr()
+         */
+        if (isSafari()) {
+            result = result.replace(/([;{]\s*content:\s*)([^\s"][^";}]*)/gm, (all, $1, $2) => {
+                if ($2 === 'none' ||
+                    /^(url\()|(counter\()|(attr\()|(open-quote)|(close-quote)/.test($2)) {
+                    return all;
+                }
+                return `${$1}"${$2}"`;
+            });
+        }
+        styleElement.textContent = result;
+        styleElement.__MICRO_APP_HAS_SCOPED__ = true;
     }
-    styleElement.textContent = result;
 }
 /**
  * scopedCSS
  * @param styleElement target style element
  * @param appName app name
  */
-function scopedCSS(styleElement, appName) {
-    const app = appInstanceMap.get(appName);
-    if (app === null || app === void 0 ? void 0 : app.scopecss) {
-        const prefix = `${microApp.tagName}[name=${appName}]`;
+function scopedCSS(styleElement, app) {
+    if (app.scopecss) {
+        const prefix = `${microApp.tagName}[name=${app.name}]`;
         let templateStyle = globalEnv.templateStyle;
         if (!templateStyle) {
             globalEnv.templateStyle = templateStyle = pureCreateElement('style');
@@ -474,7 +556,7 @@ function scopedCSS(styleElement, appName) {
         }
         if (styleElement.textContent) {
             templateStyle.textContent = styleElement.textContent;
-            commonAction(templateStyle, styleElement, styleElement.textContent, prefix, app.url, styleElement.linkpath);
+            commonAction(templateStyle, styleElement, styleElement.textContent, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
             templateStyle.textContent = '';
         }
         else {
@@ -485,7 +567,7 @@ function scopedCSS(styleElement, appName) {
                 if ((!styleElement.textContent && ((_b = (_a = styleElement.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) === null || _b === void 0 ? void 0 : _b.length)) ||
                     styleElement.hasAttribute('data-styled'))
                     return;
-                commonAction(styleElement, styleElement, styleElement.textContent, prefix, app.url, styleElement.linkpath);
+                commonAction(styleElement, styleElement, styleElement.textContent, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
             });
             observer.observe(styleElement, { childList: true });
         }
@@ -515,7 +597,7 @@ function eventHandler(event, element) {
 function dispatchOnLoadEvent(element) {
     const event = new CustomEvent('load');
     eventHandler(event, element);
-    if (typeof element.onload === 'function') {
+    if (isFunction(element.onload)) {
         element.onload(event);
     }
     else {
@@ -525,7 +607,7 @@ function dispatchOnLoadEvent(element) {
 function dispatchOnErrorEvent(element) {
     const event = new CustomEvent('error');
     eventHandler(event, element);
-    if (typeof element.onerror === 'function') {
+    if (isFunction(element.onerror)) {
         element.onerror(event);
     }
     else {
@@ -543,7 +625,7 @@ const globalLinks = new Map();
  * @param microAppHead micro-app-head element
  * @param isDynamic dynamic insert
  */
-function extractLinkFromHtml(link, parent, app, microAppHead, isDynamic = false) {
+function extractLinkFromHtml(link, parent, app, isDynamic = false) {
     const rel = link.getAttribute('rel');
     let href = link.getAttribute('href');
     let replaceComment = null;
@@ -551,12 +633,9 @@ function extractLinkFromHtml(link, parent, app, microAppHead, isDynamic = false)
         href = CompletionPath(href, app.url);
         if (!isDynamic) {
             replaceComment = document.createComment(`link element with href=${href} move to micro-app-head as style element`);
-            const placeholderComment = document.createComment(`placeholder for link with href=${href}`);
-            // all style elements insert into microAppHead
-            microAppHead.appendChild(placeholderComment);
             app.source.links.set(href, {
                 code: '',
-                placeholder: placeholderComment,
+                placeholder: replaceComment,
                 isGlobal: link.hasAttribute('global'),
             });
         }
@@ -571,7 +650,7 @@ function extractLinkFromHtml(link, parent, app, microAppHead, isDynamic = false)
         }
     }
     else if (rel && ['prefetch', 'preload', 'prerender', 'icon', 'apple-touch-icon'].includes(rel)) {
-        // preload prefetch  icon ....
+        // preload prefetch icon ....
         if (isDynamic) {
             replaceComment = document.createComment(`link element with rel=${rel}${href ? ' & href=' + href : ''} removed by micro-app`);
         }
@@ -625,8 +704,9 @@ function fetchLinkSuccess(url, info, data, microAppHead, app) {
     }
     const styleLink = pureCreateElement('style');
     styleLink.textContent = data;
-    styleLink.linkpath = url;
-    microAppHead.replaceChild(scopedCSS(styleLink, app.name), info.placeholder);
+    styleLink.__MICRO_APP_LINK_PATH__ = url;
+    styleLink.setAttribute('data-origin-href', url);
+    microAppHead.replaceChild(scopedCSS(styleLink, app), info.placeholder);
     info.placeholder = null;
     info.code = data;
 }
@@ -641,7 +721,7 @@ function fetchLinkSuccess(url, info, data, microAppHead, app) {
 function foramtDynamicLink(url, info, app, originLink, replaceStyle) {
     if (app.source.links.has(url)) {
         replaceStyle.textContent = app.source.links.get(url).code;
-        scopedCSS(replaceStyle, app.name);
+        scopedCSS(replaceStyle, app);
         defer(() => dispatchOnLoadEvent(originLink));
         return;
     }
@@ -650,17 +730,16 @@ function foramtDynamicLink(url, info, app, originLink, replaceStyle) {
         info.code = code;
         app.source.links.set(url, info);
         replaceStyle.textContent = code;
-        scopedCSS(replaceStyle, app.name);
+        scopedCSS(replaceStyle, app);
         defer(() => dispatchOnLoadEvent(originLink));
         return;
     }
     fetchSource(url, app.name).then((data) => {
         info.code = data;
         app.source.links.set(url, info);
-        if (info.isGlobal)
-            globalLinks.set(url, data);
+        info.isGlobal && globalLinks.set(url, data);
         replaceStyle.textContent = data;
-        scopedCSS(replaceStyle, app.name);
+        scopedCSS(replaceStyle, app);
         dispatchOnLoadEvent(originLink);
     }).catch((err) => {
         logError(err, app.name);
@@ -728,7 +807,11 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
             return { url: nonceStr, info };
         }
     }
-    else {
+    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) {
@@ -796,6 +879,7 @@ function execScripts(scriptList, app, initedHook) {
     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));
@@ -804,11 +888,11 @@ function execScripts(scriptList, app, initedHook) {
                     deferScriptPromise.push(info.code);
                 }
                 deferScriptInfo.push([url, info]);
-                if (info.module)
-                    initedHook.moduleCount = initedHook.moduleCount ? ++initedHook.moduleCount : 1;
+                info.module && (initedHook.moduleCount = initedHook.moduleCount ? ++initedHook.moduleCount : 1);
             }
             else {
-                runScript(url, info.code, app, info.module, false);
+                runScript(url, app, info, false);
+                initedHook(false);
             }
         }
     }
@@ -816,9 +900,11 @@ function execScripts(scriptList, app, initedHook) {
         Promise.all(deferScriptPromise).then((res) => {
             res.forEach((code, index) => {
                 const [url, info] = deferScriptInfo[index];
-                runScript(url, info.code = info.code || code, app, info.module, false, initedHook);
+                info.code = info.code || code;
+                runScript(url, app, info, false, initedHook);
+                !info.module && initedHook(false);
             });
-            initedHook(typeof initedHook.moduleCount === 'undefined');
+            initedHook(isUndefined(initedHook.moduleCount));
         }).catch((err) => {
             logError(err, app.name);
             initedHook(true);
@@ -831,25 +917,25 @@ function execScripts(scriptList, app, initedHook) {
 /**
  * run code
  * @param url script address
- * @param code js code
  * @param app app
- * @param module type='module' of script
+ * @param info script info
  * @param isDynamic dynamically created script
  * @param callback callback of module script
  */
-function runScript(url, code, app, module, isDynamic, callback) {
+function runScript(url, app, info, isDynamic, callback) {
     var _a;
     try {
-        code = bindScope(url, code, app, module);
-        if (app.inline || module) {
+        const code = bindScope(url, app, info.code, info.module);
+        if (app.inline || info.module) {
             const scriptElement = pureCreateElement('script');
-            setInlinScriptContent(url, code, module, scriptElement, callback);
+            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);
         }
         else {
-            Function(code)();
+            runCode2Function(code, info);
             if (isDynamic)
                 return document.createComment('dynamic script extract by micro-app');
         }
@@ -867,19 +953,18 @@ function runScript(url, code, app, module, isDynamic, callback) {
  */
 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);
-        if (!info.module)
-            defer(dispatchScriptOnLoadEvent);
-        return runScript(url, existInfo.code, app, info.module, true, dispatchScriptOnLoadEvent);
+        !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);
-        if (!info.module)
-            defer(dispatchScriptOnLoadEvent);
-        return runScript(url, code, app, info.module, true, dispatchScriptOnLoadEvent);
+        !info.module && defer(dispatchScriptOnLoadEvent);
+        return runScript(url, app, info, true, dispatchScriptOnLoadEvent);
     }
     let replaceElement;
     if (app.inline || info.module) {
@@ -891,22 +976,20 @@ function runDynamicRemoteScript(url, info, app, originScript) {
     fetchSource(url, app.name).then((code) => {
         info.code = code;
         app.source.scripts.set(url, info);
-        if (info.isGlobal)
-            globalScripts.set(url, code);
+        info.isGlobal && globalScripts.set(url, code);
         try {
-            code = bindScope(url, code, app, info.module);
+            code = bindScope(url, app, code, info.module);
             if (app.inline || info.module) {
-                setInlinScriptContent(url, code, info.module, replaceElement, dispatchScriptOnLoadEvent);
+                runCode2InlineScript(url, code, info.module, replaceElement, dispatchScriptOnLoadEvent);
             }
             else {
-                Function(code)();
+                runCode2Function(code, info);
             }
         }
         catch (e) {
             console.error(`[micro-app from runDynamicScript] app ${app.name}: `, e, url);
         }
-        if (!info.module)
-            dispatchOnLoadEvent(originScript);
+        !info.module && dispatchOnLoadEvent(originScript);
     }).catch((err) => {
         logError(err, app.name);
         dispatchOnErrorEvent(originScript);
@@ -916,20 +999,17 @@ function runDynamicRemoteScript(url, info, app, originScript) {
 /**
  * common handle for inline script
  * @param url script address
- * @param code js code
+ * @param code bound code
  * @param module type='module' of script
  * @param scriptElement target script element
  * @param callback callback of module script
  */
-function setInlinScriptContent(url, code, module, scriptElement, callback) {
+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;charset=utf-8' });
+        const blob = new Blob([code], { type: 'text/javascript' });
         scriptElement.src = URL.createObjectURL(blob);
         scriptElement.setAttribute('type', 'module');
-        if (!url.startsWith('inline-')) {
-            scriptElement.setAttribute('originSrc', url);
-        }
         if (callback) {
             callback.moduleCount && callback.moduleCount--;
             scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
@@ -938,16 +1018,26 @@ function setInlinScriptContent(url, code, module, scriptElement, callback) {
     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 code code
  * @param app app
+ * @param code code
  * @param module type='module' of script
  */
-function bindScope(url, code, app, module) {
-    if (typeof microApp.plugins === 'object') {
+function bindScope(url, app, code, module) {
+    if (isPlainObject(microApp.plugins)) {
         code = usePlugins(url, code, app.name, microApp.plugins);
     }
     if (app.sandBox && !module) {
@@ -965,16 +1055,16 @@ function bindScope(url, code, app, module) {
  */
 function usePlugins(url, code, appName, plugins) {
     var _a;
-    if (toString.call(plugins.global) === '[object Array]') {
+    if (isArray(plugins.global)) {
         for (const plugin of plugins.global) {
-            if (typeof plugin === 'object' && typeof plugin.loader === 'function') {
+            if (isPlainObject(plugin) && isFunction(plugin.loader)) {
                 code = plugin.loader(code, url, plugin.options);
             }
         }
     }
-    if (toString.call((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]) === '[object Array]') {
+    if (isArray((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName])) {
         for (const plugin of plugins.modules[appName]) {
-            if (typeof plugin === 'object' && typeof plugin.loader === 'function') {
+            if (isPlainObject(plugin) && isFunction(plugin.loader)) {
                 code = plugin.loader(code, url, plugin.options);
             }
         }
@@ -982,686 +1072,411 @@ function usePlugins(url, code, appName, plugins) {
     return code;
 }
 
-// Record element and map element
-const dynamicElementInMicroAppMap = new WeakMap();
 /**
- * Process the new node and format the style, link and script element
- * @param parent parent node
- * @param child new node
- * @param app app
+ * transform html string to dom
+ * @param str string dom
  */
-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.name);
-        }
-        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 (!app.scopecss || child.hasAttribute('ignore')) {
-            return child;
-        }
-        const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, null, true);
-        if (url && info) {
-            const replaceStyle = pureCreateElement('style');
-            replaceStyle.linkpath = url;
-            foramtDynamicLink(url, info, app, child, replaceStyle);
-            dynamicElementInMicroAppMap.set(child, replaceStyle);
-            return replaceStyle;
-        }
-        else if (replaceComment) {
-            dynamicElementInMicroAppMap.set(child, replaceComment);
-            return replaceComment;
-        }
-        return child;
-    }
-    else if (child instanceof HTMLScriptElement) {
-        const { replaceComment, url, info } = extractScriptElement(child, parent, app, true) || {};
-        if (url && info) {
-            if (info.code) { // inline script
-                const replaceElement = runScript(url, info.code, app, info.module, 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;
+function getWrapElement(str) {
+    const wrapDiv = pureCreateElement('div');
+    wrapDiv.innerHTML = str;
+    return wrapDiv;
 }
 /**
- * Handle the elements inserted into head and body, and execute normally in other cases
+ * Recursively process each child element
+ * @param parent parent element
  * @param app app
- * @param method raw method
- * @param parent parent node
- * @param targetChild target node
- * @param passiveChild second param of insertBefore and replaceChild
+ * @param microAppHead micro-app-head element
  */
-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);
+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));
             }
-            return targetChild;
         }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppHead, targetChild);
+        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);
+            }
         }
-        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 (dom instanceof HTMLScriptElement) {
+            extractScriptElement(dom, parent, app);
         }
-        else if (rawMethod === globalEnv.rawRemoveChild && !microAppBody.contains(targetChild)) {
-            if (parent.contains(targetChild)) {
-                return rawMethod.call(parent, targetChild);
-            }
-            return targetChild;
+        else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
+            parent.removeChild(dom);
         }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppBody, targetChild);
+        else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
+            dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
         }
-        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
+ * Extract link and script, bind style scope
+ * @param htmlStr html string
+ * @param app app
  */
-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));
-        }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(parent, newChild);
-        }
-        return rawMethod.call(parent, newChild, passiveChild);
+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);
     }
-    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 if (parent === document.body) {
-                    return rawMethod.call(app.container.querySelector('micro-app-body'), newChild);
-                }
-            }
-        }
-        return rawMethod.call(parent, newChild);
+    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);
     }
-    return rawMethod.call(parent, newChild, passiveChild);
 }
 /**
- * Rewrite element prototype method
+ * Get and format html
+ * @param app app
  */
-function patchElementPrototypeMethods() {
-    patchDocument();
-    // Rewrite setAttribute
-    Element.prototype.setAttribute = function setAttribute(key, value) {
-        if (/^micro-app(-\S+)?/i.test(this.tagName) && key === 'data') {
-            if (toString.call(value) === '[object Object]') {
-                const cloneValue = {};
-                Object.getOwnPropertyNames(value).forEach((propertyKey) => {
-                    if (!(typeof propertyKey === 'string' && propertyKey.indexOf('__') === 0)) {
-                        // @ts-ignore
-                        cloneValue[propertyKey] = value[propertyKey];
-                    }
-                });
-                this.data = cloneValue;
-            }
-            else if (value !== '[object Object]') {
-                logWarn('property data must be an object', this.getAttribute('name'));
-            }
-        }
-        else if (((key === 'src' && /^(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 {
-            globalEnv.rawSetAttribute.call(this, key, value);
-        }
-    };
-    // prototype methods of add element👇
-    Node.prototype.appendChild = function appendChild(newChild) {
-        return commonElementHander(this, newChild, null, globalEnv.rawAppendChild);
-    };
-    Node.prototype.insertBefore = function insertBefore(newChild, refChild) {
-        return commonElementHander(this, newChild, refChild, globalEnv.rawInsertBefore);
-    };
-    Node.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++;
+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);
         }
-    };
-    Element.prototype.prepend = function prepend(...nodes) {
-        let i = nodes.length;
-        while (i > 0) {
-            commonElementHander(this, nodes[i - 1], null, globalEnv.rawPrepend);
-            i--;
+        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);
+    });
+}
+
+const boundedMap = new WeakMap();
+function isBoundedFunction(value) {
+    if (boundedMap.has(value)) {
+        return boundedMap.get(value);
+    }
+    // bind function
+    const boundFunction = isBoundFunction(value);
+    boundedMap.set(value, boundFunction);
+    return boundFunction;
+}
+const constructorMap = new WeakMap();
+function isConstructor(value) {
+    if (constructorMap.has(value)) {
+        return constructorMap.get(value);
+    }
+    const valueStr = value.toString();
+    const result = (value.prototype &&
+        value.prototype.constructor === value &&
+        Object.getOwnPropertyNames(value.prototype).length > 1) ||
+        /^function\s+[A-Z]/.test(valueStr) ||
+        /^class\s+/.test(valueStr);
+    constructorMap.set(value, result);
+    return result;
+}
+const rawWindowMethodMap = new WeakMap();
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function bindFunctionToRawWidow(rawWindow, value) {
+    if (rawWindowMethodMap.has(value)) {
+        return rawWindowMethodMap.get(value);
+    }
+    if (isFunction(value) && !isConstructor(value) && !isBoundedFunction(value)) {
+        const bindRawWindowValue = value.bind(rawWindow);
+        for (const key in value) {
+            bindRawWindowValue[key] = value[key];
         }
-    };
-    // prototype methods of delete element👇
-    Node.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);
+        if (value.hasOwnProperty('prototype') && !bindRawWindowValue.hasOwnProperty('prototype')) {
+            bindRawWindowValue.prototype = value.prototype;
         }
-        return globalEnv.rawRemoveChild.call(this, oldChild);
-    };
+        rawWindowMethodMap.set(value, bindRawWindowValue);
+        return bindRawWindowValue;
+    }
+    return value;
 }
+
+// document.onclick binding list, the binding function of each application is unique
+const documentClickListMap = new Map();
+let hasRewriteDocumentOnClick = false;
 /**
- * Mark the newly created element in the micro application
- * @param element new element
+ * Rewrite document.onclick and execute it only once
  */
-function markElement(element) {
-    const appName = getCurrentAppName();
-    if (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(rawDocument, tagName, options);
-        return markElement(element);
-    };
-    Document.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
-        const element = globalEnv.rawCreateElementNS.call(rawDocument, namespaceURI, name, options);
-        return markElement(element);
-    };
-    Document.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = globalEnv.rawCreateDocumentFragment.call(rawDocument);
-        return markElement(element);
-    };
-    // query element👇
-    function querySelector(selectors) {
-        var _a, _b, _c;
-        const appName = getCurrentAppName();
-        if (!appName || selectors === 'head' || selectors === 'body' || selectors === 'html') {
-            return globalEnv.rawQuerySelector.call(rawDocument, 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 overwriteDocumentOnClick() {
+    hasRewriteDocumentOnClick = true;
+    if (Object.getOwnPropertyDescriptor(document, 'onclick')) {
+        return logWarn('Cannot redefine document property onclick');
     }
-    function querySelectorAll(selectors) {
-        var _a, _b, _c;
-        const appName = getCurrentAppName();
-        if (!appName || selectors === 'head' || selectors === 'body' || selectors === 'html') {
-            return globalEnv.rawQuerySelectorAll.call(rawDocument, 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 : [];
+    const rawOnClick = document.onclick;
+    document.onclick = null;
+    let hasDocumentClickInited = false;
+    function onClickHandler(e) {
+        documentClickListMap.forEach((f) => {
+            isFunction(f) && f.call(document, e);
+        });
     }
-    Document.prototype.querySelector = querySelector;
-    Document.prototype.querySelectorAll = querySelectorAll;
-    // querySelector does not support the beginning of a number
-    Document.prototype.getElementById = function getElementById(key) {
-        const appName = getCurrentAppName();
-        if (!appName || /^\d/.test(key)) {
-            return globalEnv.rawGetElementById.call(rawDocument, key);
-        }
-        return querySelector(`#${key}`);
-    };
-    Document.prototype.getElementsByClassName = function getElementsByClassName(key) {
-        const appName = getCurrentAppName();
-        if (!appName || /^\d/.test(key)) {
-            return globalEnv.rawGetElementsByClassName.call(rawDocument, key);
+    Object.defineProperty(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);
+            }
         }
-        return querySelectorAll(`.${key}`);
-    };
-    Document.prototype.getElementsByTagName = function getElementsByTagName(key) {
+    });
+    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();
-        if (!appName ||
-            /^body$/i.test(key) ||
-            /^head$/i.test(key) ||
-            /^html$/i.test(key) ||
-            (!((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
-            return globalEnv.rawGetElementsByTagName.call(rawDocument, key);
+        /**
+         * 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_MARK_OPTIONS__ = options);
         }
-        return querySelectorAll(key);
+        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
     };
-    Document.prototype.getElementsByName = function getElementsByName(key) {
+    document.removeEventListener = function (type, listener, options) {
+        var _a;
         const appName = getCurrentAppName();
-        if (!appName || /^\d/.test(key)) {
-            return globalEnv.rawGetElementsByName.call(rawDocument, key);
+        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);
+                }
+            }
         }
-        return querySelectorAll(`[name=${key}]`);
+        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
     };
 }
-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;
-    Node.prototype.appendChild = globalEnv.rawAppendChild;
-    Node.prototype.insertBefore = globalEnv.rawInsertBefore;
-    Node.prototype.replaceChild = globalEnv.rawReplaceChild;
-    Node.prototype.removeChild = globalEnv.rawRemoveChild;
-    Element.prototype.append = globalEnv.rawAppend;
-    Element.prototype.prepend = globalEnv.rawPrepend;
-}
-// 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);
-    }
-}
-
-function unmountNestedApp() {
-    replaseUnmountOfNestedApp();
-    appInstanceMap.forEach(app => {
-        let element = app.container;
-        if (element) {
-            if (element instanceof ShadowRoot) {
-                element = element.host;
-            }
-            // @ts-ignore
-            element.disconnectedCallback();
-        }
-    });
-    if (!window.__MICRO_APP_UMD_MODE__)
-        appInstanceMap.clear();
-    if (elementInstanceMap.size) {
-        elementInstanceMap.clear();
-        releasePatches();
-    }
-}
-// 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);
-    }
-}
-// release listener
-function replaseUnmountOfNestedApp() {
-    if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.removeEventListener('unmount', unmountNestedApp, false);
-    }
-}
-
-function eventHandler$1(event, element) {
-    Object.defineProperties(event, {
-        currentTarget: {
-            get() {
-                return element;
-            }
-        },
-        target: {
-            get() {
-                return element;
-            }
-        },
-    });
+// Clear the document event agent
+function releaseEffectDocumentEvent() {
+    document.addEventListener = globalEnv.rawDocumentAddEventListener;
+    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
 }
 /**
- * dispatch lifeCycles event
- * @param element container
- * @param appName app.name
- * @param lifecycleName lifeCycle name
- * @param error param from error hook
+ * Format event name
+ * @param type event name
+ * @param microWindow micro window
  */
-function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
-    var _a;
-    if (!element) {
-        return logError(`element does not exist in lifecycle ${lifecycleName}，it seems the app has unmounted`, appName);
-    }
-    else if (element instanceof ShadowRoot) {
-        element = element.host;
-    }
-    const detail = Object.assign({
-        name: appName,
-        container: element,
-    }, error && {
-        error
-    });
-    const event = new CustomEvent(lifecycleName, {
-        detail,
-    });
-    eventHandler$1(event, element);
-    // global hooks
-    // @ts-ignore
-    if (typeof ((_a = microApp.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName]) === 'function') {
-        // @ts-ignore
-        microApp.lifeCycles[lifecycleName](event);
+function formatEventType(type, microWindow) {
+    if (type === 'unmount') {
+        return `unmount-${microWindow.__MICRO_APP_NAME__}`;
     }
-    element.dispatchEvent(event);
-}
-/**
- * Dispatch unmount event to micro app
- * @param appName app.name
- */
-function dispatchUnmountToMicroApp(appName) {
-    const event = new CustomEvent(`unmount-${appName}`);
-    window.dispatchEvent(event);
+    return type;
 }
-
-// record all micro-app elements
-const elementInstanceMap = new Map();
 /**
- * define element
- * @param tagName element name
+ * Rewrite side-effect events
+ * @param microWindow micro window
  */
-function defineElement(tagName) {
-    class MicroAppElement extends HTMLElement {
-        constructor() {
-            super();
-            this.appName = '';
-            this.appUrl = '';
-            this.version = version;
-            this.isWating = false;
-            this.cacheData = null;
-            this.hasConnected = false;
-            /**
-             * handle for change of name an url after element inited
-             */
-            this.handleAttributeUpdate = () => {
-                var _a;
-                this.isWating = false;
-                const attrName = this.getAttribute('name');
-                const attrUrl = formatURL(this.getAttribute('url'), this.appName);
-                if (this.legalAttribute('name', attrName) && this.legalAttribute('url', attrUrl)) {
-                    const existApp = appInstanceMap.get(attrName);
-                    if (attrName !== this.appName && existApp) {
-                        // handling of cached and non-prefetch apps
-                        if (appStatus.UNMOUNT !== existApp.getAppStatus() && !existApp.isPrefetch) {
-                            this.setAttribute('name', this.appName);
-                            return logError(`an app named ${attrName} already exists`, this.appName);
-                        }
-                    }
-                    if (attrName !== this.appName || attrUrl !== this.appUrl) {
-                        this.handleUnmount(attrName === this.appName);
-                        this.appName = attrName;
-                        this.appUrl = attrUrl;
-                        ((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this).innerHTML = '';
-                        /**
-                         * when existApp not undefined
-                         * if attrName and this.appName are equal, existApp has been unmounted
-                         * if attrName and this.appName are not equal, existApp is prefetch or unmounted
-                         */
-                        if (existApp && existApp.url === attrUrl) {
-                            // mount app
-                            this.handleAppMount(existApp);
-                        }
-                        else {
-                            this.handleCreate();
-                        }
-                    }
-                }
-                else if (attrName !== this.appName) {
-                    this.setAttribute('name', this.appName);
-                }
-            };
-            // cloned node of umd container also trigger constructor, we should skip
-            if (!this.querySelector('micro-app-head')) {
-                this.performWhenFirstCreated();
-            }
+function effect(microWindow) {
+    const appName = microWindow.__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
+    microWindow.addEventListener = function (type, listener, options) {
+        type = formatEventType(type, microWindow);
+        const listenerList = eventListenerMap.get(type);
+        if (listenerList) {
+            listenerList.add(listener);
         }
-        static get observedAttributes() {
-            return ['name', 'url'];
+        else {
+            eventListenerMap.set(type, new Set([listener]));
         }
-        // 👇 Configuration
-        // shadowDom: use shadowDOM, default is false
-        // destory: whether delete cache resources when unmount, default is false
-        // inline: whether js runs in inline script mode, default is false
-        // disableScopecss: whether disable css scoped, default is false
-        // disableSandbox: whether disable sandbox, default is false
-        // macro: used to solve the async render problem of vue3, default is false
-        // baseRoute: route prefix, default is ''
-        connectedCallback() {
-            this.hasConnected = true;
-            if (!elementInstanceMap.has(this)) {
-                this.performWhenFirstCreated();
-            }
-            defer(() => dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED));
-            this.initialMount();
+        listener && (listener.__MICRO_MARK_OPTIONS__ = options);
+        rawWindowAddEventListener.call(rawWindow, type, listener, options);
+    };
+    microWindow.removeEventListener = function (type, listener, options) {
+        type = formatEventType(type, microWindow);
+        const listenerList = eventListenerMap.get(type);
+        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
+            listenerList.delete(listener);
         }
-        disconnectedCallback() {
-            this.hasConnected = false;
-            elementInstanceMap.delete(this);
-            this.handleUnmount(this.getDisposeResult('destory'));
-            if (elementInstanceMap.size === 0) {
-                releasePatches();
+        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
+    };
+    microWindow.setInterval = function (handler, timeout, ...args) {
+        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
+        intervalIdMap.set(intervalId, { handler, timeout, args });
+        return intervalId;
+    };
+    microWindow.setTimeout = function (handler, timeout, ...args) {
+        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
+        timeoutIdMap.set(timeoutId, { handler, timeout, args });
+        return timeoutId;
+    };
+    microWindow.clearInterval = function (intervalId) {
+        intervalIdMap.delete(intervalId);
+        rawClearInterval.call(rawWindow, intervalId);
+    };
+    microWindow.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);
         }
-        attributeChangedCallback(attr, _oldVal, newVal) {
-            if (this.legalAttribute(attr, newVal) &&
-                this[attr === ObservedAttrName.NAME ? 'appName' : 'appUrl'] !== newVal) {
-                if (attr === ObservedAttrName.URL && !this.appUrl) {
-                    newVal = formatURL(newVal, this.appName);
-                    if (!newVal) {
-                        return logError('Invalid attribute url', this.appName);
-                    }
-                    this.appUrl = newVal;
-                    this.handleInitialNameAndUrl();
-                }
-                else if (attr === ObservedAttrName.NAME && !this.appName) {
-                    if (this.cacheData) {
-                        microApp.setData(newVal, this.cacheData);
-                        this.cacheData = null;
-                    }
-                    this.appName = newVal;
-                    this.handleInitialNameAndUrl();
-                }
-                else if (!this.isWating) {
-                    this.isWating = true;
-                    defer(this.handleAttributeUpdate);
+        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));
                 }
-            }
+            });
         }
-        // handle for connectedCallback run before attributeChangedCallback
-        handleInitialNameAndUrl() {
-            if (this.hasConnected) {
-                this.initialMount();
+    };
+    // rebuild event and timer before remount umd app
+    const rebuildUmdEffect = () => {
+        // rebuild window event
+        umdWindowListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                microWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
             }
-        }
-        // Perform global initialization when the element count is 1
-        performWhenFirstCreated() {
-            if (elementInstanceMap.set(this, true).size === 1) {
-                patchElementPrototypeMethods();
-                rejectMicroAppStyle();
-                replaseUnmountOfNestedApp();
-                listenUmountOfNestedApp();
-            }
-        }
-        /**
-         * first mount of this app
-         */
-        initialMount() {
-            if (!this.appName || !this.appUrl)
-                return;
-            if (this.getDisposeResult('shadowDOM') && !this.shadowRoot) {
-                this.attachShadow({ mode: 'open' });
+        });
+        // rebuild timer
+        umdIntervalIdMap.forEach((info) => {
+            microWindow.setInterval(info.handler, info.timeout, ...info.args);
+        });
+        umdTimeoutIdMap.forEach((info) => {
+            microWindow.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_MARK_OPTIONS__);
             }
-            const app = appInstanceMap.get(this.appName);
-            if (app) {
-                if (app.url === this.appUrl && (app.isPrefetch ||
-                    app.getAppStatus() === appStatus.UNMOUNT)) {
-                    this.handleAppMount(app);
-                }
-                else if (app.isPrefetch) {
-                    logError(`the url ${this.appUrl} is different from prefetch url ${app.url}`, this.appName);
-                }
-                else {
-                    logError(`an app named ${this.appName} already exists`, this.appName);
+        });
+        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);
                 }
-            }
-            else {
-                this.handleCreate();
-            }
-        }
-        /**
-         * judge the attribute is legal
-         * @param name attribute name
-         * @param val attribute value
-         */
-        legalAttribute(name, val) {
-            if (typeof val !== 'string' || !val) {
-                logError(`unexpected attribute ${name}, please check again`, this.appName);
-                return false;
-            }
-            return true;
-        }
-        /**
-         * mount app
-         * some serious note before mount:
-         * 1. is prefetch ?
-         * 2. is remount in another container ?
-         * 3. is remount with change properties of the container ?
-         */
-        handleAppMount(app) {
-            app.isPrefetch = false;
-            defer(() => {
-                var _a;
-                return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), this.getBaseRouteCompatible());
             });
+            eventListenerMap.clear();
         }
-        // create app instance
-        handleCreate() {
-            var _a;
-            const instance = new CreateApp({
-                name: this.appName,
-                url: this.appUrl,
-                container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
-                inline: this.getDisposeResult('inline'),
-                scopecss: !(this.getDisposeResult('disableScopecss') || this.getDisposeResult('shadowDOM')),
-                useSandbox: !this.getDisposeResult('disableSandbox'),
-                macro: this.getDisposeResult('macro'),
-                baseroute: this.getBaseRouteCompatible(),
+        // Clear timers
+        if (intervalIdMap.size) {
+            intervalIdMap.forEach((_, intervalId) => {
+                rawClearInterval.call(rawWindow, intervalId);
             });
-            appInstanceMap.set(this.appName, instance);
-        }
-        /**
-         * unmount app
-         * @param destory delete cache resources when unmount
-         */
-        handleUnmount(destory) {
-            const app = appInstanceMap.get(this.appName);
-            if (app && appStatus.UNMOUNT !== app.getAppStatus())
-                app.unmount(destory);
-        }
-        /**
-         * Get configuration
-         * Global setting is lowest priority
-         * @param name Configuration item name
-         */
-        getDisposeResult(name) {
-            // @ts-ignore
-            return (this.hasAttribute(name) || microApp[name]) && this.getAttribute(name) !== 'false';
-        }
-        /**
-         * 2021-09-08
-         * get baseRoute
-         * getAttribute('baseurl') is compatible writing of versions below 0.3.1
-         */
-        getBaseRouteCompatible() {
-            var _a, _b;
-            return (_b = (_a = this.getAttribute('baseroute')) !== null && _a !== void 0 ? _a : this.getAttribute('baseurl')) !== null && _b !== void 0 ? _b : '';
+            intervalIdMap.clear();
         }
-        /**
-         * Data from the base application
-         */
-        set data(value) {
-            if (this.appName) {
-                microApp.setData(this.appName, value);
-            }
-            else {
-                this.cacheData = value;
-            }
+        if (timeoutIdMap.size) {
+            timeoutIdMap.forEach((_, timeoutId) => {
+                rawClearTimeout.call(rawWindow, timeoutId);
+            });
+            timeoutIdMap.clear();
         }
-        /**
-         * get data only used in jsx-custom-event once
-         */
-        get data() {
-            if (this.appName) {
-                return microApp.getData(this.appName, true);
-            }
-            else if (this.cacheData) {
-                return this.cacheData;
-            }
-            return null;
+        // 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();
         }
-    }
-    window.customElements.define(tagName, MicroAppElement);
+    };
+    return {
+        recordUmdEffect,
+        rebuildUmdEffect,
+        releaseEffect,
+    };
 }
 
 class EventCenter {
@@ -1684,7 +1499,7 @@ class EventCenter {
      */
     on(name, f, autoTrigger = false) {
         if (this.isLegalName(name)) {
-            if (typeof f !== 'function') {
+            if (!isFunction(f)) {
                 return logError('event-center: Invalid callback function');
             }
             let eventInfo = this.eventList.get(name);
@@ -1707,7 +1522,7 @@ class EventCenter {
         if (this.isLegalName(name)) {
             const eventInfo = this.eventList.get(name);
             if (eventInfo) {
-                if (typeof f === 'function') {
+                if (isFunction(f)) {
                     eventInfo.callbacks.delete(f);
                 }
                 else {
@@ -1719,7 +1534,7 @@ class EventCenter {
     // dispatch data
     dispatch(name, data) {
         if (this.isLegalName(name)) {
-            if (toString.call(data) !== '[object Object]') {
+            if (!isPlainObject(data)) {
                 return logError('event-center: data must be object');
             }
             let eventInfo = this.eventList.get(name);
@@ -1756,7 +1571,7 @@ const eventCenter = new EventCenter();
  * @param fromBaseApp is from base app
  */
 function formatEventName(appName, fromBaseApp) {
-    if (typeof appName !== 'string' || !appName)
+    if (!isString(appName) || !appName)
         return '';
     return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
 }
@@ -1781,17 +1596,23 @@ class EventCenterForGlobal {
      * @param cb listener
      */
     removeGlobalDataListener(cb) {
-        if (typeof cb === 'function') {
-            eventCenter.off('global', 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
@@ -1819,7 +1640,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
      */
     addDataListener(appName, cb, autoTrigger) {
-        eventCenter.on(formatEventName(appName, false), cb, autoTrigger);
+        eventCenter.on(formatEventName(formatAppName(appName), false), cb, autoTrigger);
     }
     /**
      * remove listener
@@ -1827,9 +1648,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param cb listener
      */
     removeDataListener(appName, cb) {
-        if (typeof cb === 'function') {
-            eventCenter.off(formatEventName(appName, false), cb);
-        }
+        isFunction(cb) && eventCenter.off(formatEventName(formatAppName(appName), false), cb);
     }
     /**
      * get data from micro app or base app
@@ -1837,7 +1656,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param fromBaseApp whether get data from base app, default is false
      */
     getData(appName, fromBaseApp = false) {
-        return eventCenter.getData(formatEventName(appName, fromBaseApp));
+        return eventCenter.getData(formatEventName(formatAppName(appName), fromBaseApp));
     }
     /**
      * Dispatch data to the specified micro app
@@ -1845,21 +1664,22 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param data data
      */
     setData(appName, data) {
-        eventCenter.dispatch(formatEventName(appName, true), data);
+        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data);
     }
     /**
      * clear all listener for specified micro app
      * @param appName app.name
      */
     clearDataListener(appName) {
-        eventCenter.off(formatEventName(appName, false));
+        eventCenter.off(formatEventName(formatAppName(appName), false));
     }
 }
 // Event center for sub app
 class EventCenterForMicroApp extends EventCenterForGlobal {
     constructor(appName) {
         super();
-        this.appName = appName;
+        this.appName = formatAppName(appName);
+        !this.appName && logError(`Invalid appName ${appName}`);
     }
     /**
      * add listener, monitor the data sent by the base app
@@ -1875,9 +1695,7 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
      * @param cb listener
      */
     removeDataListener(cb) {
-        if (typeof cb === 'function') {
-            eventCenter.off(formatEventName(this.appName, true), cb);
-        }
+        isFunction(cb) && eventCenter.off(formatEventName(this.appName, true), cb);
     }
     /**
      * get data from base app
@@ -1893,17 +1711,13 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
         removeDomScope();
         eventCenter.dispatch(formatEventName(this.appName, false), data);
         const app = appInstanceMap.get(this.appName);
-        if ((app === null || app === void 0 ? void 0 : app.container) && toString.call(data) === '[object Object]') {
+        if ((app === null || app === void 0 ? void 0 : app.container) && isPlainObject(data)) {
             const event = new CustomEvent('datachange', {
                 detail: {
                     data,
                 }
             });
-            let element = app.container;
-            if (element instanceof ShadowRoot) {
-                element = element.host;
-            }
-            element.dispatchEvent(event);
+            getRootContainer(app.container).dispatchEvent(event);
         }
     }
     /**
@@ -1946,925 +1760,1268 @@ function rebuildDataCenterSnapshot(microAppEventCneter) {
     }
 }
 
-class MicroApp extends EventCenterForBaseApp {
-    constructor() {
-        super(...arguments);
-        this.tagName = 'micro-app';
-        this.preFetch = preFetch;
-    }
-    start(options) {
-        if (!isBrowser || !window.customElements) {
-            return logError('micro-app is not supported in this environment');
-        }
-        if (options === null || options === void 0 ? void 0 : options.tagName) {
-            if (/^micro-app(-\S+)?/.test(options.tagName)) {
-                this.tagName = options.tagName;
-            }
-            else {
-                return logError(`${options.tagName} is invalid tagName`);
-            }
-        }
-        if (window.customElements.get(this.tagName)) {
-            return logWarn(`element ${this.tagName} is already defined`);
-        }
-        initGloalEnv();
-        if (options && toString.call(options) === '[object Object]') {
-            this.shadowDOM = options.shadowDOM;
-            this.destory = options.destory;
-            this.inline = options.inline;
-            this.disableScopecss = options.disableScopecss;
-            this.disableSandbox = options.disableSandbox;
-            this.macro = options.macro;
-            if (isFunction(options.fetch))
-                this.fetch = options.fetch;
-            if (toString.call(options.lifeCycles) === '[object Object]') {
-                this.lifeCycles = options.lifeCycles;
-            }
-            if (toString.call(options.plugins) === '[object Object]') {
-                this.plugins = options.plugins;
-            }
-            // load app assets when browser is idle
-            if (options.preFetchApps) {
-                preFetch(options.preFetchApps);
-            }
-            // load global assets when browser is idle
-            if (options.globalAssets) {
-                getGlobalAssets(options.globalAssets);
-            }
-        }
-        defineElement(this.tagName);
-    }
-}
-var microApp = new MicroApp();
-
-/**
- * fetch source of html, js, css
- * @param url source path
- * @param appName app name
- * @param config config of fetch
- */
-function fetchSource(url, appName = null, options = {}) {
-    if (isFunction(microApp.fetch)) {
-        return microApp.fetch(url, options, appName);
-    }
-    return fetch(url, options).then((res) => {
-        return res.text();
-    });
-}
-
+// Variables that can escape to rawWindow
+const staticEscapeProperties = [
+    'System',
+    '__cjsWrapper',
+    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
+];
+// Variables that can only assigned to rawWindow
+const escapeSetterKeyList = [
+    'location',
+];
+const unscopables = {
+    undefined: true,
+    Array: true,
+    Object: true,
+    String: true,
+    Boolean: true,
+    Math: true,
+    Number: true,
+    Symbol: true,
+    parseFloat: true,
+    Float32Array: true,
+};
 /**
- * transform html string to dom
- * @param str string dom
+ * macro task to solve the rendering problem of vue3
  */
-function getWrapElement(str) {
-    const wrapDiv = pureCreateElement('div');
-    wrapDiv.innerHTML = str;
-    return wrapDiv;
+let macroTimer;
+function macroTask(fn) {
+    macroTimer && clearTimeout(macroTimer);
+    macroTimer = setTimeout(fn, 0);
 }
-/**
- * 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, microAppHead);
-    });
-    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 (app.scopecss && !dom.hasAttribute('ignore')) {
-                extractLinkFromHtml(dom, parent, app, microAppHead);
-            }
-            else if (dom.hasAttribute('href')) {
-                dom.setAttribute('href', CompletionPath(dom.getAttribute('href'), app.url));
+class SandBox {
+    constructor(appName, url, macro) {
+        // Scoped global Properties(Properties that can only get and set in microWindow, will not escape to rawWindow)
+        this.scopeProperties = ['webpackJsonp'];
+        // Properties that can be escape to rawWindow
+        this.escapeProperties = [];
+        // Properties newly added to microWindow
+        this.injectedKeys = new Set();
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
+        // sandbox state
+        this.active = false;
+        this.microWindow = {}; // Proxy target
+        const rawWindow = globalEnv.rawWindow;
+        const rawDocument = globalEnv.rawDocument;
+        const descriptorTargetMap = new Map();
+        const hasOwnProperty = (key) => this.microWindow.hasOwnProperty(key) || rawWindow.hasOwnProperty(key);
+        // get scopeProperties and escapeProperties from plugins
+        this.getScopeProperties(appName);
+        // inject global properties
+        this.inject(this.microWindow, appName, url);
+        // Rewrite global event listener & timeout
+        Object.assign(this, effect(this.microWindow));
+        this.proxyWindow = new Proxy(this.microWindow, {
+            get: (target, key) => {
+                if (key === Symbol.unscopables)
+                    return unscopables;
+                if (['window', 'self', 'globalThis'].includes(key)) {
+                    return this.proxyWindow;
+                }
+                if (key === 'top' || key === 'parent') {
+                    if (rawWindow === rawWindow.parent) { // not in iframe
+                        return this.proxyWindow;
+                    }
+                    return Reflect.get(rawWindow, key); // iframe
+                }
+                if (key === 'hasOwnProperty')
+                    return hasOwnProperty;
+                if (key === 'document' || key === 'eval') {
+                    if (this.active) {
+                        setCurrentAppName(appName);
+                        (macro ? macroTask : defer)(() => setCurrentAppName(null));
+                    }
+                    switch (key) {
+                        case 'document':
+                            return rawDocument;
+                        case 'eval':
+                            return eval;
+                    }
+                }
+                if (Reflect.has(target, key)) {
+                    return Reflect.get(target, key);
+                }
+                if (this.scopeProperties.includes(key) ||
+                    (isString(key) && /^__MICRO_APP_/.test(key))) {
+                    return Reflect.get(target, key);
+                }
+                const rawValue = Reflect.get(rawWindow, key);
+                return bindFunctionToRawWidow(rawWindow, rawValue);
+            },
+            set: (target, key, value) => {
+                if (this.active) {
+                    if (escapeSetterKeyList.includes(key)) {
+                        Reflect.set(rawWindow, key, value);
+                    }
+                    else if (!target.hasOwnProperty(key) &&
+                        rawWindow.hasOwnProperty(key) &&
+                        !this.scopeProperties.includes(key)) {
+                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                        const { writable, configurable, enumerable } = descriptor;
+                        if (writable) {
+                            Object.defineProperty(target, key, {
+                                configurable,
+                                enumerable,
+                                writable,
+                                value,
+                            });
+                            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 unscopables || key in target || key in rawWindow;
+            },
+            getOwnPropertyDescriptor: (target, key) => {
+                if (target.hasOwnProperty(key)) {
+                    descriptorTargetMap.set(key, 'target');
+                    return Object.getOwnPropertyDescriptor(target, key);
+                }
+                if (rawWindow.hasOwnProperty(key)) {
+                    descriptorTargetMap.set(key, 'rawWindow');
+                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                    if (descriptor && !descriptor.configurable) {
+                        descriptor.configurable = true;
+                    }
+                    return descriptor;
+                }
+                return undefined;
+            },
+            defineProperty: (target, key, value) => {
+                const from = descriptorTargetMap.get(key);
+                if (from === 'rawWindow') {
+                    return Reflect.defineProperty(rawWindow, key, value);
+                }
+                return Reflect.defineProperty(target, key, value);
+            },
+            ownKeys: (target) => {
+                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
+            },
+            deleteProperty: (target, key) => {
+                if (target.hasOwnProperty(key)) {
+                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
+                    return Reflect.deleteProperty(target, key);
+                }
+                return true;
+            },
+        });
+    }
+    start(baseroute) {
+        if (!this.active) {
+            this.active = true;
+            this.microWindow.__MICRO_APP_BASE_ROUTE__ = this.microWindow.__MICRO_APP_BASE_URL__ = baseroute;
+            // BUG FIX: bable-polyfill@6.x
+            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
+            if (++SandBox.activeCount === 1) {
+                effectDocumentEvent();
             }
         }
-        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')) {
-                microAppHead.appendChild(scopedCSS(dom, app.name));
+    }
+    stop() {
+        if (this.active) {
+            this.active = false;
+            this.releaseEffect();
+            this.microWindow.microApp.clearDataListener();
+            this.microWindow.microApp.clearGlobalDataListener();
+            this.injectedKeys.forEach((key) => {
+                Reflect.deleteProperty(this.microWindow, key);
+            });
+            this.injectedKeys.clear();
+            this.escapeKeys.forEach((key) => {
+                Reflect.deleteProperty(globalEnv.rawWindow, key);
+            });
+            this.escapeKeys.clear();
+            if (--SandBox.activeCount === 0) {
+                releaseEffectDocumentEvent();
             }
         }
-        else if (dom instanceof HTMLScriptElement) {
-            extractScriptElement(dom, parent, app);
-        }
-        else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
-            parent.removeChild(dom);
-        }
-        else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
-            dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
-        }
-    }
-}
-/**
- * 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, microAppHead);
-    if (app.source.links.size) {
-        fetchLinksFromHtml(wrapElement, app, microAppHead);
+    // record umd snapshot before the first execution of umdHookMount
+    recordUmdSnapshot() {
+        this.microWindow.__MICRO_APP_UMD_MODE__ = true;
+        this.recordUmdEffect();
+        recordDataCenterSnapshot(this.microWindow.microApp);
+        this.recordUmdinjectedValues = new Map();
+        this.injectedKeys.forEach((key) => {
+            this.recordUmdinjectedValues.set(key, Reflect.get(this.microWindow, key));
+        });
     }
-    else {
-        app.onLoad(wrapElement);
+    // rebuild umd snapshot before remount umd app
+    rebuildUmdSnapshot() {
+        this.recordUmdinjectedValues.forEach((value, key) => {
+            Reflect.set(this.proxyWindow, key, value);
+        });
+        this.rebuildUmdEffect();
+        rebuildDataCenterSnapshot(this.microWindow.microApp);
     }
-    if (app.source.scripts.size) {
-        fetchScriptsFromHtml(wrapElement, app);
+    /**
+     * get scopeProperties and escapeProperties from plugins
+     * @param appName app name
+     */
+    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);
+                    }
+                }
+            }
+        }
     }
-    else {
-        app.onLoad(wrapElement);
+    /**
+     * inject global properties to microWindow
+     * @param microWindow micro window
+     * @param appName app name
+     * @param url app url
+     */
+    inject(microWindow, appName, url) {
+        microWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        microWindow.__MICRO_APP_NAME__ = appName;
+        microWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        microWindow.microApp = new EventCenterForMicroApp(appName);
+        microWindow.rawWindow = globalEnv.rawWindow;
+        microWindow.rawDocument = globalEnv.rawDocument;
+        microWindow.removeDomScope = removeDomScope;
     }
 }
-/**
- * Get and format html
- * @param app app
- */
-function extractHtml(app) {
-    fetchSource(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);
-    });
-}
+SandBox.activeCount = 0; // number of active sandbox
 
-const boundedMap = new WeakMap();
-function isBoundedFunction(value) {
-    if (boundedMap.has(value)) {
-        return boundedMap.get(value);
-    }
-    // bind function
-    const boundFunction = value.name.indexOf('bound ') === 0 && !value.hasOwnProperty('prototype');
-    boundedMap.set(value, boundFunction);
-    return boundFunction;
-}
-const constructorMap = new WeakMap();
-function isConstructor(value) {
-    if (constructorMap.has(value)) {
-        return constructorMap.get(value);
-    }
-    const valueStr = value.toString();
-    const result = (value.prototype &&
-        value.prototype.constructor === value &&
-        Object.getOwnPropertyNames(value.prototype).length > 1) ||
-        /^function\s+[A-Z]/.test(valueStr) ||
-        /^class\s+/.test(valueStr);
-    constructorMap.set(value, result);
-    return result;
+function eventHandler$1(event, element) {
+    Object.defineProperties(event, {
+        currentTarget: {
+            get() {
+                return element;
+            }
+        },
+        target: {
+            get() {
+                return element;
+            }
+        },
+    });
 }
-const rawWindowMethodMap = new WeakMap();
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawWidow(rawWindow, value) {
-    if (rawWindowMethodMap.has(value)) {
-        return rawWindowMethodMap.get(value);
+/**
+ * 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 dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
+    var _a;
+    if (!element) {
+        return logError(`element does not exist in lifecycle ${lifecycleName}`, appName);
     }
-    if (isFunction(value) && !isConstructor(value) && !isBoundedFunction(value)) {
-        const bindRawWindowValue = value.bind(rawWindow);
-        for (const key in value) {
-            bindRawWindowValue[key] = value[key];
-        }
-        if (value.hasOwnProperty('prototype') && !bindRawWindowValue.hasOwnProperty('prototype')) {
-            bindRawWindowValue.prototype = value.prototype;
-        }
-        rawWindowMethodMap.set(value, bindRawWindowValue);
-        return bindRawWindowValue;
+    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,
+    });
+    eventHandler$1(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 value;
+    element.dispatchEvent(event);
 }
-
-// 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
+ * Dispatch unmount event to micro app
+ * @param appName app.name
  */
-function overwriteDocumentOnClick() {
-    hasRewriteDocumentOnClick = true;
-    const descriptor = Object.getOwnPropertyDescriptor(document, 'onclick');
-    if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.configurable) === false) {
-        return logWarn('Cannot redefine document property onclick');
+function dispatchUnmountToMicroApp(appName) {
+    const event = new CustomEvent(`unmount-${appName}`);
+    window.dispatchEvent(event);
+}
+
+// micro app instances
+const appInstanceMap = new Map();
+class CreateApp {
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }) {
+        this.status = appStatus.NOT_LOADED;
+        this.loadSourceLevel = 0;
+        this.umdHookMount = null;
+        this.umdHookUnmount = null;
+        this.libraryName = null;
+        this.umdMode = false;
+        this.isPrefetch = false;
+        this.container = null;
+        this.macro = false;
+        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.macro = macro !== null && macro !== void 0 ? macro : false;
+        this.source = {
+            links: new Map(),
+            scripts: new Map(),
+        };
+        this.loadSourceCode();
+        this.useSandbox && (this.sandBox = new SandBox(name, url, this.macro));
     }
-    const rawOnClick = document.onclick;
-    document.onclick = null;
-    let hasDocumentClickInited = false;
-    function onClickHandler(e) {
-        documentClickListMap.forEach((f) => {
-            typeof f === 'function' && f.call(document, e);
-        });
+    // Load resources
+    loadSourceCode() {
+        this.status = appStatus.LOADING_SOURCE_CODE;
+        extractHtml(this);
     }
-    Object.defineProperty(document, 'onclick', {
-        configurable: false,
-        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 && typeof f === 'function') {
-                hasDocumentClickInited = true;
-                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
-            }
+    /**
+     * 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 || appStatus.UNMOUNT === this.status)
+                return;
+            this.status = appStatus.LOAD_SOURCE_FINISHED;
+            this.mount();
         }
-    });
-    if (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;
-    if (!hasRewriteDocumentOnClick) {
-        overwriteDocumentOnClick();
+    /**
+     * Error loading HTML
+     * @param e Error
+     */
+    onLoadError(e) {
+        this.loadSourceLevel = -1;
+        if (appStatus.UNMOUNT !== this.status) {
+            this.onerror(e);
+            this.status = appStatus.LOAD_SOURCE_ERROR;
+        }
     }
-    document.addEventListener = function (type, listener, options) {
-        const appName = getCurrentAppName();
-        if (appName) {
-            const appListenersMap = documentEventListenerMap.get(appName);
-            if (appListenersMap) {
-                const appListenerList = appListenersMap.get(type);
-                if (appListenerList) {
-                    appListenerList.add(listener);
+    /**
+     * 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;
+        }
+        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.status = appStatus.LOADING_SOURCE_CODE;
+            return;
+        }
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+        this.status = appStatus.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 {
-                    appListenersMap.set(type, new Set([listener]));
+                if (!hasDispatchMountedEvent && (isFinished === true || this.umdMode)) {
+                    hasDispatchMountedEvent = true;
+                    this.handleMounted(umdHookMountResult);
                 }
+            });
+        }
+        else {
+            (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.rebuildUmdSnapshot();
+            try {
+                umdHookMountResult = this.umdHookMount();
             }
-            else {
-                documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
+            catch (e) {
+                logError('an error occurred in the mount function \n', this.name, e);
             }
-            listener && (listener.__MICRO_MARK_OPTIONS__ = options);
+            this.handleMounted(umdHookMountResult);
         }
-        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
-    };
-    document.removeEventListener = function (type, listener, options) {
-        const appName = getCurrentAppName();
-        if (appName) {
-            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;
-}
-/**
- * Format event name
- * @param type event name
- * @param microWindow micro window
- */
-function formatEventType(type, microWindow) {
-    if (type === 'unmount') {
-        return `unmount-${microWindow.__MICRO_APP_NAME__}`;
     }
-    return type;
-}
-/**
- * Rewrite side-effect events
- * @param microWindow micro window
- */
-function effect(microWindow) {
-    const appName = microWindow.__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
-    microWindow.addEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
-        const listenerList = eventListenerMap.get(type);
-        if (listenerList) {
-            listenerList.add(listener);
+    /**
+     * handle for promise umdHookMount
+     * @param umdHookMountResult result of umdHookMount
+     */
+    handleMounted(umdHookMountResult) {
+        if (isPromise(umdHookMountResult)) {
+            umdHookMountResult
+                .then(() => this.dispatchMountedEvent())
+                .catch((e) => this.onerror(e));
         }
         else {
-            eventListenerMap.set(type, new Set([listener]));
+            this.dispatchMountedEvent();
         }
-        listener && (listener.__MICRO_MARK_OPTIONS__ = options);
-        rawWindowAddEventListener.call(rawWindow, type, listener, options);
-    };
-    microWindow.removeEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
-        const listenerList = eventListenerMap.get(type);
-        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
-            listenerList.delete(listener);
+    }
+    /**
+     * dispatch mounted event when app run finished
+     */
+    dispatchMountedEvent() {
+        if (appStatus.UNMOUNT !== this.status) {
+            this.status = appStatus.MOUNTED;
+            dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
         }
-        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
-    };
-    microWindow.setInterval = function (handler, timeout, ...args) {
-        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
-        intervalIdMap.set(intervalId, { handler, timeout, args });
-        return intervalId;
-    };
-    microWindow.setTimeout = function (handler, timeout, ...args) {
-        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
-        timeoutIdMap.set(timeoutId, { handler, timeout, args });
-        return timeoutId;
-    };
-    microWindow.clearInterval = function (intervalId) {
-        intervalIdMap.delete(intervalId);
-        rawClearInterval.call(rawWindow, intervalId);
-    };
-    microWindow.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));
+    }
+    /**
+     * unmount app
+     * @param destroy completely destroy, delete cache resources
+     */
+    unmount(destroy) {
+        if (this.status === appStatus.LOAD_SOURCE_ERROR) {
+            destroy = true;
+        }
+        this.status = appStatus.UNMOUNT;
+        // 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);
             }
-        });
-        // record timers
-        if (intervalIdMap.size) {
-            umdIntervalIdMap = new Map(intervalIdMap);
         }
-        if (timeoutIdMap.size) {
-            umdTimeoutIdMap = new Map(timeoutIdMap);
+        // dispatch unmount event to micro app
+        dispatchUnmountToMicroApp(this.name);
+        this.handleUnmounted(destroy, umdHookUnmountResult);
+    }
+    /**
+     * handle for promise umdHookUnmount
+     * @param umdHookUnmountResult result of umdHookUnmount
+     */
+    handleUnmounted(destroy, umdHookUnmountResult) {
+        if (isPromise(umdHookUnmountResult)) {
+            umdHookUnmountResult
+                .then(() => this.actionsForUnmount(destroy))
+                .catch(() => this.actionsForUnmount(destroy));
         }
-        // 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 {
+            this.actionsForUnmount(destroy);
         }
-    };
-    // rebuild event and timer before remount umd app
-    const rebuildUmdEffect = () => {
-        // rebuild window event
-        umdWindowListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                microWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
-            }
-        });
-        // rebuild timer
-        umdIntervalIdMap.forEach((info) => {
-            microWindow.setInterval(info.handler, info.timeout, ...info.args);
-        });
-        umdTimeoutIdMap.forEach((info) => {
-            microWindow.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_MARK_OPTIONS__);
-            }
-        });
-        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();
+    }
+    /**
+     * actions for unmount app
+     * @param destroy completely destroy, delete cache resources
+     */
+    actionsForUnmount(destroy) {
+        var _a;
+        // dispatch unmount event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
+        if (destroy) {
+            this.actionsForCompletelyDestory();
         }
-        // Clear timers
-        if (intervalIdMap.size) {
-            intervalIdMap.forEach((_, intervalId) => {
-                rawClearInterval.call(rawWindow, intervalId);
-            });
-            intervalIdMap.clear();
+        else if (this.umdMode && this.container.childElementCount) {
+            /**
+            * In umd mode, ui frameworks will no longer create style elements to head in lazy load page when render again, so we should save container to keep these elements
+            */
+            cloneContainer(this.container, this.source.html, false);
         }
-        if (timeoutIdMap.size) {
-            timeoutIdMap.forEach((_, timeoutId) => {
-                rawClearTimeout.call(rawWindow, timeoutId);
-            });
-            timeoutIdMap.clear();
+        this.container = null;
+    }
+    // actions for completely destroy
+    actionsForCompletelyDestory() {
+        if (!this.useSandbox && this.umdMode) {
+            delete window[this.libraryName];
         }
-        // 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();
+        appInstanceMap.delete(this.name);
+    }
+    /**
+     * app rendering error
+     * @param e Error
+     */
+    onerror(e) {
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
+    }
+    // get app status
+    getAppStatus() {
+        return this.status;
+    }
+    // get umd library, if it not exist, return empty object
+    getUmdLibraryHooks() {
+        var _a, _b;
+        // after execScripts, the app maybe unmounted
+        if (appStatus.UNMOUNT !== this.status) {
+            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 {
-        recordUmdEffect,
-        rebuildUmdEffect,
-        releaseEffect,
-    };
+        return {};
+    }
+}
+// if app not prefetch & not unmount, then app is active
+function getActiveApps() {
+    const activeApps = [];
+    appInstanceMap.forEach((app, appName) => {
+        if (appStatus.UNMOUNT !== app.getAppStatus() && !app.isPrefetch) {
+            activeApps.push(appName);
+        }
+    });
+    return activeApps;
+}
+// get all registered apps
+function getAllApps() {
+    return Array.from(appInstanceMap.keys());
 }
 
-// Variables that can escape to rawWindow
-const staticEscapeProperties = [
-    'System',
-    '__cjsWrapper',
-    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
-];
-// Variables that can only assigned to rawWindow
-const escapeSetterKeyList = [
-    'location',
-];
-const unscopables = {
-    undefined: true,
-    Array: true,
-    Object: true,
-    String: true,
-    Boolean: true,
-    Math: true,
-    Number: true,
-    Symbol: true,
-    parseFloat: true,
-    Float32Array: true,
-};
+// Record element and map element
+const dynamicElementInMicroAppMap = new WeakMap();
 /**
- * macro task to solve the rendering problem of vue3
+ * Process the new node and format the style, link and script element
+ * @param parent parent node
+ * @param child new node
+ * @param app app
  */
-let macroTimer;
-function macroTask(fn) {
-    if (macroTimer)
-        clearTimeout(macroTimer);
-    macroTimer = setTimeout(fn, 0);
-}
-class SandBox {
-    constructor(appName, url, macro) {
-        this.active = false; // sandbox state
-        // Scoped global Properties(Properties that can only get and set in microWindow, will not escape to rawWindow)
-        this.scopeProperties = ['webpackJsonp'];
-        // Properties that can be escape to rawWindow
-        this.escapeProperties = [];
-        this.microWindow = {}; // Proxy target
-        this.injectedKeys = new Set(); // Properties newly added to microWindow
-        this.escapeKeys = new Set(); // Properties escape to rawWindow, cleared when unmount
-        const rawWindow = globalEnv.rawWindow;
-        const rawDocument = globalEnv.rawDocument;
-        const descriptorTargetMap = new Map();
-        const hasOwnProperty = (key) => this.microWindow.hasOwnProperty(key) || rawWindow.hasOwnProperty(key);
-        // get scopeProperties and escapeProperties from plugins
-        this.getScopeProperties(appName);
-        // inject global properties
-        this.inject(this.microWindow, appName, url);
-        // Rewrite global event listener & timeout
-        Object.assign(this, effect(this.microWindow));
-        this.proxyWindow = new Proxy(this.microWindow, {
-            get: (target, key) => {
-                if (key === Symbol.unscopables)
-                    return unscopables;
-                if (['window', 'self', 'globalThis'].includes(key)) {
-                    return this.proxyWindow;
-                }
-                if (key === 'top' || key === 'parent') {
-                    if (rawWindow === rawWindow.parent) { // not in iframe
-                        return this.proxyWindow;
-                    }
-                    return Reflect.get(rawWindow, key); // iframe
-                }
-                if (key === 'hasOwnProperty')
-                    return hasOwnProperty;
-                if (key === 'document' || key === 'eval') {
-                    if (this.active) {
-                        setCurrentAppName(appName);
-                        (macro ? macroTask : defer)(() => setCurrentAppName(null));
-                    }
-                    switch (key) {
-                        case 'document':
-                            return rawDocument;
-                        case 'eval':
-                            return eval;
-                    }
-                }
-                if (Reflect.has(target, key)) {
-                    return Reflect.get(target, key);
-                }
-                if (this.scopeProperties.includes(key) ||
-                    (typeof key === 'string' && /^__MICRO_APP_/.test(key))) {
-                    return Reflect.get(target, key);
-                }
-                const rawValue = Reflect.get(rawWindow, key);
-                return bindFunctionToRawWidow(rawWindow, rawValue);
-            },
-            set: (target, key, value) => {
-                if (this.active) {
-                    if (escapeSetterKeyList.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                    }
-                    else if (!target.hasOwnProperty(key) &&
-                        rawWindow.hasOwnProperty(key) &&
-                        !this.scopeProperties.includes(key)) {
-                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                        const { writable, configurable, enumerable } = descriptor;
-                        if (writable) {
-                            Object.defineProperty(target, key, {
-                                configurable,
-                                enumerable,
-                                writable,
-                                value,
-                            });
-                            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 unscopables || key in target || key in rawWindow;
-            },
-            getOwnPropertyDescriptor: (target, key) => {
-                if (target.hasOwnProperty(key)) {
-                    descriptorTargetMap.set(key, 'target');
-                    return Object.getOwnPropertyDescriptor(target, key);
-                }
-                if (rawWindow.hasOwnProperty(key)) {
-                    descriptorTargetMap.set(key, 'rawWindow');
-                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                    if (descriptor && !descriptor.configurable) {
-                        descriptor.configurable = true;
-                    }
-                    return descriptor;
-                }
-                return undefined;
-            },
-            defineProperty: (target, key, value) => {
-                const from = descriptorTargetMap.get(key);
-                if (from === 'rawWindow') {
-                    return Reflect.defineProperty(rawWindow, key, value);
-                }
-                return Reflect.defineProperty(target, key, value);
-            },
-            ownKeys: (target) => {
-                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
-            },
-            deleteProperty: (target, key) => {
-                if (target.hasOwnProperty(key)) {
-                    if (this.escapeKeys.has(key)) {
-                        Reflect.deleteProperty(rawWindow, key);
-                    }
-                    return Reflect.deleteProperty(target, key);
-                }
-                return true;
-            },
-        });
+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;
     }
-    start(baseroute) {
-        if (!this.active) {
-            this.active = true;
-            this.microWindow.__MICRO_APP_BASE_ROUTE__ = this.microWindow.__MICRO_APP_BASE_URL__ = baseroute;
-            if (globalEnv.rawWindow._babelPolyfill)
-                globalEnv.rawWindow._babelPolyfill = false;
-            if (++SandBox.activeCount === 1) {
-                effectDocumentEvent();
+    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;
+    }
+    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;
     }
-    stop() {
-        if (this.active) {
-            this.active = false;
-            this.releaseEffect();
-            this.microWindow.microApp.clearDataListener();
-            this.microWindow.microApp.clearGlobalDataListener();
-            this.injectedKeys.forEach((key) => {
-                Reflect.deleteProperty(this.microWindow, key);
-            });
-            this.injectedKeys.clear();
-            this.escapeKeys.forEach((key) => {
-                Reflect.deleteProperty(globalEnv.rawWindow, key);
-            });
-            this.escapeKeys.clear();
-            if (--SandBox.activeCount === 0) {
-                releaseEffectDocumentEvent();
+    return child;
+}
+/**
+ * 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 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);
     }
-    // record umd snapshot before the first execution of umdHookMount
-    recordUmdSnapshot() {
-        this.microWindow.__MICRO_APP_UMD_MODE__ = true;
-        this.recordUmdEffect();
-        recordDataCenterSnapshot(this.microWindow.microApp);
-        this.recordUmdinjectedValues = new Map();
-        this.injectedKeys.forEach((key) => {
-            this.recordUmdinjectedValues.set(key, Reflect.get(this.microWindow, key));
-        });
+    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 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));
+        }
+        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 if (parent === document.body) {
+                    return rawMethod.call(app.container.querySelector('micro-app-body'), newChild);
+                }
+            }
+        }
+        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 if (value !== '[object Object]') {
+                logWarn('property data must be an object', this.getAttribute('name'));
+            }
+        }
+        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 {
+            globalEnv.rawSetAttribute.call(this, key, value);
+        }
+    };
+    // prototype methods of add element👇
+    Node.prototype.appendChild = function appendChild(newChild) {
+        return commonElementHander(this, newChild, null, globalEnv.rawAppendChild);
+    };
+    Node.prototype.insertBefore = function insertBefore(newChild, refChild) {
+        return commonElementHander(this, newChild, refChild, globalEnv.rawInsertBefore);
+    };
+    Node.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👇
+    Node.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);
+    };
+}
+/**
+ * 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;
     }
-    // rebuild umd snapshot before remount umd app
-    rebuildUmdSnapshot() {
-        this.recordUmdinjectedValues.forEach((value, key) => {
-            Reflect.set(this.proxyWindow, key, value);
-        });
-        this.rebuildUmdEffect();
-        rebuildDataCenterSnapshot(this.microWindow.microApp);
+    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 : [];
     }
-    /**
-     * get scopeProperties and escapeProperties from plugins
-     * @param appName app name
-     */
-    getScopeProperties(appName) {
+    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;
-        if (typeof microApp.plugins !== 'object')
-            return;
-        if (toString.call(microApp.plugins.global) === '[object Array]') {
-            for (const plugin of microApp.plugins.global) {
-                if (typeof plugin === 'object') {
-                    if (toString.call(plugin.scopeProperties) === '[object Array]') {
-                        this.scopeProperties = this.scopeProperties.concat(plugin.scopeProperties);
-                    }
-                    if (toString.call(plugin.escapeProperties) === '[object Array]') {
-                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
-                    }
-                }
-            }
+        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);
         }
-        if (toString.call((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]) === '[object Array]') {
-            for (const plugin of microApp.plugins.modules[appName]) {
-                if (typeof plugin === 'object') {
-                    if (toString.call(plugin.scopeProperties) === '[object Array]') {
-                        this.scopeProperties = this.scopeProperties.concat(plugin.scopeProperties);
-                    }
-                    if (toString.call(plugin.escapeProperties) === '[object Array]') {
-                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
-                    }
-                }
-            }
+        try {
+            return querySelectorAll.call(this, key);
         }
-    }
-    /**
-     * inject global properties to microWindow
-     * @param microWindow micro window
-     * @param appName app name
-     * @param url app url
-     */
-    inject(microWindow, appName, url) {
-        microWindow.__MICRO_APP_ENVIRONMENT__ = true;
-        microWindow.__MICRO_APP_NAME__ = appName;
-        microWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
-        microWindow.microApp = new EventCenterForMicroApp(appName);
-        microWindow.rawWindow = globalEnv.rawWindow;
-        microWindow.rawDocument = globalEnv.rawDocument;
-        microWindow.removeDomScope = removeDomScope;
+        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);
+        }
+    };
+}
+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;
+    Node.prototype.appendChild = globalEnv.rawAppendChild;
+    Node.prototype.insertBefore = globalEnv.rawInsertBefore;
+    Node.prototype.replaceChild = globalEnv.rawReplaceChild;
+    Node.prototype.removeChild = globalEnv.rawRemoveChild;
+    Element.prototype.append = globalEnv.rawAppend;
+    Element.prototype.prepend = globalEnv.rawPrepend;
+}
+// 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);
     }
 }
-SandBox.activeCount = 0; // number of active sandbox
 
-// micro app instances
-const appInstanceMap = new Map();
-class CreateApp {
-    constructor({ name, url, container, inline, scopecss, useSandbox, macro, baseroute }) {
-        this.status = appStatus.NOT_LOADED;
-        this.loadSourceLevel = 0;
-        this.umdHookMount = null;
-        this.umdHookunMount = null;
-        this.libraryName = null;
-        this.umdMode = false;
-        this.isPrefetch = false;
-        this.container = null;
-        this.macro = false;
-        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 : '';
-        // optional during init👆
-        this.name = name;
-        this.url = url;
-        this.useSandbox = useSandbox;
-        this.scopecss = this.useSandbox && scopecss;
-        this.macro = macro !== null && macro !== void 0 ? macro : false;
-        this.source = {
-            links: new Map(),
-            scripts: new Map(),
-        };
-        this.loadSourceCode();
-        if (this.useSandbox) {
-            this.sandBox = new SandBox(name, url, this.macro);
-        }
+function unmountNestedApp() {
+    replaseUnmountOfNestedApp();
+    appInstanceMap.forEach(app => {
+        // @ts-ignore
+        app.container && getRootContainer(app.container).disconnectedCallback();
+    });
+    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.clear();
+    if (elementInstanceMap.size) {
+        elementInstanceMap.clear();
+        releasePatches();
     }
-    // Load resources
-    loadSourceCode() {
-        this.status = appStatus.LOADING_SOURCE_CODE;
-        extractHtml(this);
+}
+// 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);
     }
-    /**
-     * 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 || appStatus.UNMOUNT === this.status)
-                return;
-            this.status = appStatus.LOAD_SOURCE_FINISHED;
-            this.mount();
-        }
+}
+// release listener
+function replaseUnmountOfNestedApp() {
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+        window.removeEventListener('unmount', unmountNestedApp, false);
     }
-    /**
-     * Error loading HTML
-     * @param e Error
-     */
-    onLoadError(e) {
-        this.loadSourceLevel = -1;
-        if (appStatus.UNMOUNT !== this.status) {
-            this.onerror(e);
-            this.status = appStatus.LOAD_SOURCE_ERROR;
+}
+
+// record all micro-app elements
+const elementInstanceMap = new Map();
+/**
+ * define element
+ * @param tagName element name
+ */
+function defineElement(tagName) {
+    class MicroAppElement extends HTMLElement {
+        constructor() {
+            super();
+            this.isWating = false;
+            this.cacheData = null;
+            this.hasConnected = false;
+            this.appName = ''; // app name
+            this.appUrl = ''; // app url
+            this.ssrUrl = ''; // html path in ssr mode
+            this.version = version;
+            /**
+             * handle for change of name an url after element inited
+             */
+            this.handleAttributeUpdate = () => {
+                var _a;
+                this.isWating = false;
+                const formatAttrName = formatAppName(this.getAttribute('name'));
+                const formatAttrUrl = formatAppURL(this.getAttribute('url'), this.appName);
+                if (this.legalAttribute('name', formatAttrName) && this.legalAttribute('url', formatAttrUrl)) {
+                    const existApp = appInstanceMap.get(formatAttrName);
+                    if (formatAttrName !== this.appName && existApp) {
+                        // handling of cached and non-prefetch apps
+                        if (appStatus.UNMOUNT !== existApp.getAppStatus() && !existApp.isPrefetch) {
+                            this.setAttribute('name', this.appName);
+                            return logError(`an app named ${formatAttrName} already exists`, this.appName);
+                        }
+                    }
+                    if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
+                        this.handleUnmount(formatAttrName === this.appName);
+                        /**
+                         * change ssrUrl in ssr mode
+                         * do not add judgment of formatAttrUrl === this.appUrl
+                         */
+                        if (this.getDisposeResult('ssr')) {
+                            this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, formatAttrUrl);
+                        }
+                        else if (this.ssrUrl) {
+                            this.ssrUrl = '';
+                        }
+                        this.appName = formatAttrName;
+                        this.appUrl = formatAttrUrl;
+                        ((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this).innerHTML = '';
+                        if (formatAttrName !== this.getAttribute('name')) {
+                            this.setAttribute('name', this.appName);
+                        }
+                        /**
+                         * when existApp not null:
+                         * scene1: if formatAttrName and this.appName are equal: exitApp is the current app, the url must be different, existApp has been unmounted
+                         * scene2: if formatAttrName and this.appName are different: existApp must be prefetch or unmounted, if url is equal, then just mount, if url is different, then create new app to replace existApp
+                         * scene3: url is different but ssrUrl is equal
+                         * scene4: url is equal but ssrUrl is different, if url is equal, name must different
+                         */
+                        if (existApp &&
+                            existApp.url === this.appUrl &&
+                            existApp.ssrUrl === this.ssrUrl) {
+                            // mount app
+                            this.handleAppMount(existApp);
+                        }
+                        else {
+                            this.handleCreateApp();
+                        }
+                    }
+                }
+                else if (formatAttrName !== this.appName) {
+                    this.setAttribute('name', this.appName);
+                }
+            };
+            // cloned node of umd container also trigger constructor, we should skip
+            if (!this.querySelector('micro-app-head')) {
+                this.performWhenFirstCreated();
+            }
         }
-    }
-    /**
-     * 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 (typeof inline === 'boolean' && inline !== this.inline) {
-            this.inline = inline;
+        static get observedAttributes() {
+            return ['name', 'url'];
+        }
+        // 👇 Configuration
+        // name: app name
+        // url: html address
+        // shadowDom: use shadowDOM, default is false
+        // destroy: whether delete cache resources when unmount, default is false
+        // inline: whether js runs in inline script mode, default is false
+        // disableScopecss: whether disable css scoped, default is false
+        // disableSandbox: whether disable sandbox, default is false
+        // macro: used to solve the async render problem of vue3, default is false
+        // baseRoute: route prefix, default is ''
+        connectedCallback() {
+            this.hasConnected = true;
+            if (!elementInstanceMap.has(this)) {
+                this.performWhenFirstCreated();
+            }
+            defer(() => dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED));
+            this.initialMount();
         }
-        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.status = appStatus.LOADING_SOURCE_CODE;
-            return;
+        disconnectedCallback() {
+            this.hasConnected = false;
+            elementInstanceMap.delete(this);
+            this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'));
+            if (elementInstanceMap.size === 0) {
+                releasePatches();
+            }
         }
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
-        this.status = appStatus.MOUNTING;
-        cloneNode(this.source.html, this.container, !this.umdMode);
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute);
-        if (!this.umdMode) {
-            execScripts(this.source.scripts, this, (isFinished) => {
-                var _a;
-                if (this.umdHookMount === null) {
-                    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();
-                        this.umdHookMount();
+        attributeChangedCallback(attr, _oldVal, newVal) {
+            if (this.legalAttribute(attr, newVal) &&
+                this[attr === ObservedAttrName.NAME ? 'appName' : 'appUrl'] !== newVal) {
+                if (attr === ObservedAttrName.URL && !this.appUrl) {
+                    newVal = formatAppURL(newVal, this.appName);
+                    if (!newVal) {
+                        return logError(`Invalid attribute url ${newVal}`, this.appName);
+                    }
+                    this.appUrl = newVal;
+                    this.handleInitialNameAndUrl();
+                }
+                else if (attr === ObservedAttrName.NAME && !this.appName) {
+                    const formatNewName = formatAppName(newVal);
+                    if (!formatNewName) {
+                        return logError(`Invalid attribute name ${newVal}`, this.appName);
+                    }
+                    if (this.cacheData) {
+                        microApp.setData(formatNewName, this.cacheData);
+                        this.cacheData = null;
                     }
+                    this.appName = formatNewName;
+                    if (formatNewName !== newVal) {
+                        this.setAttribute('name', this.appName);
+                    }
+                    this.handleInitialNameAndUrl();
                 }
-                if (isFinished === true) {
-                    this.dispatchMountedEvent();
+                else if (!this.isWating) {
+                    this.isWating = true;
+                    defer(this.handleAttributeUpdate);
                 }
-            });
+            }
         }
-        else {
-            (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.rebuildUmdSnapshot();
-            this.umdHookMount();
-            this.dispatchMountedEvent();
+        // handle for connectedCallback run before attributeChangedCallback
+        handleInitialNameAndUrl() {
+            this.hasConnected && this.initialMount();
         }
-    }
-    /**
-     * dispatch mounted event when app run finished
-     */
-    dispatchMountedEvent() {
-        if (appStatus.UNMOUNT !== this.status) {
-            this.status = appStatus.MOUNTED;
-            defer(() => {
-                if (appStatus.UNMOUNT !== this.status) {
-                    dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
-                }
-            });
+        // Perform global initialization when the element count is 1
+        performWhenFirstCreated() {
+            if (elementInstanceMap.set(this, true).size === 1) {
+                patchElementPrototypeMethods();
+                rejectMicroAppStyle();
+                replaseUnmountOfNestedApp();
+                listenUmountOfNestedApp();
+            }
         }
-    }
-    /**
-     * unmount app
-     * @param destory completely destroy, delete cache resources
-     */
-    unmount(destory) {
-        var _a;
-        if (this.status === appStatus.LOAD_SOURCE_ERROR) {
-            destory = true;
+        /**
+         * first mount of this app
+         */
+        initialMount() {
+            if (!this.appName || !this.appUrl)
+                return;
+            if (this.getDisposeResult('shadowDOM') && !this.shadowRoot && isFunction(this.attachShadow)) {
+                this.attachShadow({ mode: 'open' });
+            }
+            if (this.getDisposeResult('ssr')) {
+                this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, this.appUrl);
+            }
+            else if (this.ssrUrl) {
+                this.ssrUrl = '';
+            }
+            const app = appInstanceMap.get(this.appName);
+            if (app) {
+                const existAppUrl = app.ssrUrl || app.url;
+                const activeAppUrl = this.ssrUrl || this.appUrl;
+                if (existAppUrl === activeAppUrl && (app.isPrefetch ||
+                    app.getAppStatus() === appStatus.UNMOUNT)) {
+                    this.handleAppMount(app);
+                }
+                else if (app.isPrefetch || app.getAppStatus() === appStatus.UNMOUNT) {
+                    /**
+                     * url is different & old app is unmounted or prefetch, create new app to replace old one
+                     */
+                    logWarn(`the ${app.isPrefetch ? 'prefetch' : 'unmounted'} app with url: ${existAppUrl} is replaced by a new app`, this.appName);
+                    this.handleCreateApp();
+                }
+                else {
+                    logError(`an app named ${this.appName} already exists`, this.appName);
+                }
+            }
+            else {
+                this.handleCreateApp();
+            }
         }
-        this.status = appStatus.UNMOUNT;
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
-        // Send an unmount event to the micro app or call umd unmount hook
-        // before the sandbox is cleared & after the unmount lifecycle is executed
-        this.umdHookunMount && this.umdHookunMount();
-        dispatchUnmountToMicroApp(this.name);
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
-        // actions for completely destroy
-        if (destory) {
-            if (!this.useSandbox && this.umdMode) {
-                delete window[this.libraryName];
+        /**
+         * judge the attribute is legal
+         * @param name attribute name
+         * @param val attribute value
+         */
+        legalAttribute(name, val) {
+            if (!isString(val) || !val) {
+                logError(`unexpected attribute ${name}, please check again`, this.appName);
+                return false;
             }
-            appInstanceMap.delete(this.name);
+            return true;
+        }
+        /**
+         * mount app
+         * some serious note before mount:
+         * 1. is prefetch ?
+         * 2. is remount in another container ?
+         * 3. is remount with change properties of the container ?
+         */
+        handleAppMount(app) {
+            app.isPrefetch = false;
+            defer(() => {
+                var _a;
+                return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), this.getBaseRouteCompatible());
+            });
         }
-        else if (this.umdMode) {
+        // create app instance
+        handleCreateApp() {
+            var _a;
             /**
-            * In umd mode, ui frameworks will no longer create style elements to head in lazy load page when render again, so we should save container to keep these elements
-            */
-            cloneNode(this.container, this.source.html, false);
+             * actions for destory old app
+             * fix of unmounted umd app with disableSandbox
+             */
+            if (appInstanceMap.has(this.appName)) {
+                appInstanceMap.get(this.appName).actionsForCompletelyDestory();
+            }
+            const instance = new CreateApp({
+                name: this.appName,
+                url: this.appUrl,
+                ssrUrl: this.ssrUrl,
+                container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
+                inline: this.getDisposeResult('inline'),
+                scopecss: !(this.getDisposeResult('disableScopecss') || this.getDisposeResult('shadowDOM')),
+                useSandbox: !this.getDisposeResult('disableSandbox'),
+                macro: this.getDisposeResult('macro'),
+                baseroute: this.getBaseRouteCompatible(),
+            });
+            appInstanceMap.set(this.appName, instance);
         }
-        this.container = null;
-    }
-    /**
-     * app rendering error
-     * @param e Error
-     */
-    onerror(e) {
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
-    }
-    // get app status
-    getAppStatus() {
-        return this.status;
-    }
-    // get umd library, if it not exist, return empty object
-    getUmdLibraryHooks() {
-        var _a, _b;
-        // after execScripts, the app maybe unmounted
-        if (appStatus.UNMOUNT !== this.status) {
-            const global = ((_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) !== null && _b !== void 0 ? _b : globalEnv.rawWindow);
-            this.libraryName = (this.container instanceof ShadowRoot ? this.container.host : this.container).getAttribute('library') || `micro-app-${this.name}`;
-            return typeof global[this.libraryName] === 'object' ? global[this.libraryName] : {};
+        /**
+         * unmount app
+         * @param destroy delete cache resources when unmount
+         */
+        handleUnmount(destroy) {
+            const app = appInstanceMap.get(this.appName);
+            if (app && appStatus.UNMOUNT !== app.getAppStatus())
+                app.unmount(destroy);
+        }
+        /**
+         * Get configuration
+         * Global setting is lowest priority
+         * @param name Configuration item name
+         */
+        getDisposeResult(name) {
+            // @ts-ignore
+            return (this.hasAttribute(name) || microApp[name]) && this.getAttribute(name) !== 'false';
+        }
+        /**
+         * 2021-09-08
+         * get baseRoute
+         * getAttribute('baseurl') is compatible writing of versions below 0.3.1
+         */
+        getBaseRouteCompatible() {
+            var _a, _b;
+            return (_b = (_a = this.getAttribute('baseroute')) !== null && _a !== void 0 ? _a : this.getAttribute('baseurl')) !== null && _b !== void 0 ? _b : '';
+        }
+        /**
+         * Data from the base application
+         */
+        set data(value) {
+            if (this.appName) {
+                microApp.setData(this.appName, value);
+            }
+            else {
+                this.cacheData = value;
+            }
+        }
+        /**
+         * get data only used in jsx-custom-event once
+         */
+        get data() {
+            if (this.appName) {
+                return microApp.getData(this.appName, true);
+            }
+            else if (this.cacheData) {
+                return this.cacheData;
+            }
+            return null;
         }
-        return {};
     }
+    window.customElements.define(tagName, MicroAppElement);
 }
 
 function filterPreFetchTarget(apps) {
     const validApps = [];
-    if (toString.call(apps) === '[object Array]') {
+    if (isArray(apps)) {
         apps.forEach((item) => {
-            item.url = formatURL(item.url, item.name);
-            if (toString.call(item) === '[object Object]' &&
-                (item.name && typeof item.name === 'string') &&
-                item.url &&
-                !appInstanceMap.has(item.name)) {
-                validApps.push(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);
+                }
             }
         });
     }
@@ -2891,8 +3048,7 @@ function preFetch(apps) {
         return logError('preFetch is only supported in browser environment');
     }
     requestIdleCallback(() => {
-        if (typeof apps === 'function')
-            apps = apps();
+        isFunction(apps) && (apps = apps());
         filterPreFetchTarget(apps).forEach((item) => {
             var _a, _b, _c;
             const app = new CreateApp({
@@ -2912,10 +3068,10 @@ function preFetch(apps) {
  * @param assets global assets of js, css
  */
 function getGlobalAssets(assets) {
-    if (toString.call(assets) === '[object Object]') {
+    if (isPlainObject(assets)) {
         requestIdleCallback(() => {
-            if (toString.call(assets.js) === '[object Array]') {
-                const effectiveJs = assets.js.filter((path) => typeof path === 'string' && path.includes('.js') && !globalScripts.has(path));
+            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));
@@ -2930,8 +3086,8 @@ function getGlobalAssets(assets) {
                     logError(err);
                 });
             }
-            if (toString.call(assets.css) === '[object Array]') {
-                const effectiveCss = assets.css.filter((path) => typeof path === 'string' && path.includes('.css') && !globalLinks.has(path));
+            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));
@@ -2950,6 +3106,67 @@ function getGlobalAssets(assets) {
     }
 }
 
+class MicroApp extends EventCenterForBaseApp {
+    constructor() {
+        super(...arguments);
+        this.tagName = 'micro-app';
+        this.preFetch = preFetch;
+    }
+    start(options) {
+        if (!isBrowser || !window.customElements) {
+            return logError('micro-app is not supported in this environment');
+        }
+        if (options === null || options === void 0 ? void 0 : options.tagName) {
+            if (/^micro-app(-\S+)?/.test(options.tagName)) {
+                this.tagName = options.tagName;
+            }
+            else {
+                return logError(`${options.tagName} is invalid tagName`);
+            }
+        }
+        if (window.customElements.get(this.tagName)) {
+            return logWarn(`element ${this.tagName} is already defined`);
+        }
+        initGlobalEnv();
+        if (options && isPlainObject(options)) {
+            this.shadowDOM = options.shadowDOM;
+            this.destroy = options.destroy;
+            /**
+             * compatible with versions below 0.4.2 of destroy
+             * do not merge with the previous line
+             */
+            // @ts-ignore
+            this.destory = options.destory;
+            this.inline = options.inline;
+            this.disableScopecss = options.disableScopecss;
+            this.disableSandbox = options.disableSandbox;
+            this.macro = options.macro;
+            isFunction(options.fetch) && (this.fetch = options.fetch);
+            isPlainObject(options.lifeCycles) && (this.lifeCycles = options.lifeCycles);
+            // load app assets when browser is idle
+            options.preFetchApps && preFetch(options.preFetchApps);
+            // load global assets when browser is idle
+            options.globalAssets && getGlobalAssets(options.globalAssets);
+            if (isPlainObject(options.plugins)) {
+                const modules = options.plugins.modules;
+                if (isPlainObject(modules)) {
+                    for (const appName in modules) {
+                        const formattedAppName = formatAppName(appName);
+                        if (formattedAppName && appName !== formattedAppName) {
+                            modules[formattedAppName] = modules[appName];
+                            delete modules[appName];
+                        }
+                    }
+                }
+                this.plugins = options.plugins;
+            }
+        }
+        // define customElement after init
+        defineElement(this.tagName);
+    }
+}
+var microApp = new MicroApp();
+
 export default microApp;
-export { preFetch, pureCreateElement, removeDomScope, setCurrentAppName, version };
+export { EventCenterForMicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, version };
 //# sourceMappingURL=index.esm.js.map