@micro-zoe/micro-app 0.3.0 → 0.4.0

package/lib/index.esm.js

@@ -1,6 +1,23 @@
-const rawWindow = new Function('return window')();
-const rawDocument = new Function('return document')();
-const version = '0.3.0';
+const version = '0.4.0';
+const isBrowser = typeof window !== 'undefined';
+const globalThis = (function () {
+    let gt;
+    if (typeof global !== 'undefined') {
+        gt = global;
+    }
+    else if (typeof self !== 'undefined') {
+        gt = self;
+    }
+    else {
+        try {
+            gt = Function('return this')();
+        }
+        catch (e) {
+            throw new Error('global object is unavailable in this environment');
+        }
+    }
+    return gt;
+})();
 /**
  * format error log
  * @param msg message
@@ -81,7 +98,7 @@ function getEffectivePath(url) {
  * @param baseURI base url(app.url)
  */
 function CompletionPath(path, baseURI) {
-    if (/^((((ht|f)tps?)|file):)?\/\//.test(path))
+    if (/^((((ht|f)tps?)|file):)?\/\//.test(path) || /^(data|blob):/.test(path))
         return path;
     return new URL(path, getEffectivePath(addProtocol(baseURI))).toString();
 }
@@ -149,7 +166,7 @@ function unique(array) {
     }, Object.create(null));
 }
 // requestIdleCallback polyfill
-const requestIdleCallback = window.requestIdleCallback ||
+const requestIdleCallback = globalThis.requestIdleCallback ||
     function (fn) {
         const lastTime = Date.now();
         return setTimeout(function () {
@@ -188,7 +205,7 @@ function isFunction(target) {
  * Create pure elements
  */
 function pureCreateElement(tagName, options) {
-    const element = rawDocument.createElement(tagName, options);
+    const element = document.createElement(tagName, options);
     if (element.__MICRO_APP_NAME__)
         delete element.__MICRO_APP_NAME__;
     return element;
@@ -199,9 +216,10 @@ function pureCreateElement(tagName, options) {
  * @param target Accept cloned elements
  */
 function cloneNode(origin, target) {
-    const clonedOrigin = origin.cloneNode(true);
+    target.innerHTML = '';
+    const clonedNode = origin.cloneNode(true);
     const fragment = document.createDocumentFragment();
-    Array.from(clonedOrigin.childNodes).forEach((node) => {
+    Array.from(clonedNode.childNodes).forEach((node) => {
         fragment.appendChild(node);
     });
     target.appendChild(fragment);
@@ -233,6 +251,83 @@ var lifeCycles;
     lifeCycles["ERROR"] = "error";
 })(lifeCycles || (lifeCycles = {}));
 
+const globalEnv = {};
+function initGloalEnv() {
+    if (isBrowser) {
+        /**
+         * save patch raw methods
+         * pay attention to this binding
+         */
+        const rawSetAttribute = Element.prototype.setAttribute;
+        const rawAppendChild = Node.prototype.appendChild;
+        const rawInsertBefore = Node.prototype.insertBefore;
+        const rawReplaceChild = Node.prototype.replaceChild;
+        const rawRemoveChild = Node.prototype.removeChild;
+        const rawAppend = Element.prototype.append;
+        const rawPrepend = Element.prototype.prepend;
+        const rawCreateElement = Document.prototype.createElement;
+        const rawCreateElementNS = Document.prototype.createElementNS;
+        const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
+        const rawQuerySelector = Document.prototype.querySelector;
+        const rawQuerySelectorAll = Document.prototype.querySelectorAll;
+        const rawGetElementById = Document.prototype.getElementById;
+        const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
+        const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
+        const rawGetElementsByName = Document.prototype.getElementsByName;
+        const rawWindow = Function('return window')();
+        const rawDocument = Function('return document')();
+        const supportModuleScript = isSupportModuleScript();
+        const templateStyle = rawDocument.body.querySelector('#micro-app-template-style');
+        /**
+         * save effect raw methods
+         * pay attention to this binding, especially setInterval, setTimeout, clearInterval, clearTimeout
+         */
+        const rawWindowAddEventListener = rawWindow.addEventListener;
+        const rawWindowRemoveEventListener = rawWindow.removeEventListener;
+        const rawSetInterval = rawWindow.setInterval;
+        const rawSetTimeout = rawWindow.setTimeout;
+        const rawClearInterval = rawWindow.clearInterval;
+        const rawClearTimeout = rawWindow.clearTimeout;
+        const rawDocumentAddEventListener = rawDocument.addEventListener;
+        const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
+        // mark current application as base application
+        window.__MICRO_APP_BASE_APPLICATION__ = true;
+        Object.assign(globalEnv, {
+            // source/patch
+            rawSetAttribute,
+            rawAppendChild,
+            rawInsertBefore,
+            rawReplaceChild,
+            rawRemoveChild,
+            rawAppend,
+            rawPrepend,
+            rawCreateElement,
+            rawCreateElementNS,
+            rawCreateDocumentFragment,
+            rawQuerySelector,
+            rawQuerySelectorAll,
+            rawGetElementById,
+            rawGetElementsByClassName,
+            rawGetElementsByTagName,
+            rawGetElementsByName,
+            // common global vars
+            rawWindow,
+            rawDocument,
+            supportModuleScript,
+            templateStyle,
+            // sandbox/effect
+            rawWindowAddEventListener,
+            rawWindowRemoveEventListener,
+            rawSetInterval,
+            rawSetTimeout,
+            rawClearInterval,
+            rawClearTimeout,
+            rawDocumentAddEventListener,
+            rawDocumentRemoveEventListener,
+        });
+    }
+}
+
 // https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule
 var CSSRuleType;
 (function (CSSRuleType) {
@@ -283,7 +378,7 @@ function scopedStyleRule(rule, prefix) {
  */
 function scopedHost(cssText, baseURI, textContent, linkpath) {
     return cssText.replace(/url\(["']?([^)"']+)["']?\)/gm, (all, $1) => {
-        if (/^data:/.test($1)) {
+        if (/^(data|blob):/.test($1)) {
             return all;
         }
         else if (/^(https?:)?\/\//.test($1)) {
@@ -360,7 +455,6 @@ function commonAction(templateStyle, styleElement, originContent, prefix, baseUR
     }
     styleElement.textContent = result;
 }
-let templateStyle = rawDocument.body.querySelector('#micro-app-template-style');
 /**
  * scopedCSS
  * @param styleElement target style element
@@ -370,10 +464,11 @@ 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}]`;
+        let templateStyle = globalEnv.templateStyle;
         if (!templateStyle) {
-            templateStyle = pureCreateElement('style');
+            globalEnv.templateStyle = templateStyle = pureCreateElement('style');
             templateStyle.setAttribute('id', 'micro-app-template-style');
-            rawDocument.body.appendChild(templateStyle);
+            globalEnv.rawDocument.body.appendChild(templateStyle);
             templateStyle.sheet.disabled = true;
         }
         if (styleElement.textContent) {
@@ -581,7 +676,6 @@ function formatHTMLStyleAfterUmdInit(tempHTML, appName) {
 
 // Global scripts, reuse across apps
 const globalScripts = new Map();
-const supportModuleScript = isSupportModuleScript();
 /**
  * Extract script elements
  * @param script script element
@@ -595,8 +689,12 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
     if (script.hasAttribute('exclude')) {
         replaceComment = document.createComment('script element with exclude attribute ignored by micro-app');
     }
-    else if ((supportModuleScript && script.noModule) ||
-        (!supportModuleScript && script.type === 'module')) {
+    else if ((script.type && !['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module'].includes(script.type)) ||
+        script.hasAttribute('ignore')) {
+        return null;
+    }
+    else if ((globalEnv.supportModuleScript && script.noModule) ||
+        (!globalEnv.supportModuleScript && script.type === 'module')) {
         replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
     }
     else if (src) { // remote script
@@ -642,7 +740,7 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
     if (isDynamic) {
         return { replaceComment };
     }
-    else {
+    else if (replaceComment) {
         return parent.replaceChild(replaceComment, script);
     }
 }
@@ -696,8 +794,9 @@ function fetchScriptSuccess(url, info, data) {
  * Execute js in the mount lifecycle
  * @param scriptList script list
  * @param app app
+ * @param callback callback for umd mode
  */
-function execScripts(scriptList, app) {
+function execScripts(scriptList, app, callback) {
     const scriptListEntries = Array.from(scriptList.entries());
     const deferScriptPromise = [];
     const deferScriptInfo = [];
@@ -721,12 +820,47 @@ function execScripts(scriptList, app) {
         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);
+                runScript(url, info.code = info.code || code, app, info.module, false, callback);
             });
+            callback();
         }).catch((err) => {
             logError(err);
+            callback();
         });
     }
+    else {
+        callback();
+    }
+}
+/**
+ * run code
+ * @param url script address
+ * @param code js code
+ * @param app app
+ * @param module type='module' of script
+ * @param isDynamic dynamically created script
+ * @param callback callback from execScripts for first exec
+ */
+function runScript(url, code, app, module, isDynamic, callback) {
+    var _a;
+    try {
+        code = bindScope(url, code, app);
+        if (app.inline) {
+            const scriptElement = pureCreateElement('script');
+            setInlinScriptContent(url, code, module, scriptElement, callback);
+            if (isDynamic)
+                return scriptElement;
+            (_a = app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-body').appendChild(scriptElement);
+        }
+        else {
+            Function(code)();
+            if (isDynamic)
+                return document.createComment('dynamic script extract by micro-app');
+        }
+    }
+    catch (e) {
+        console.error('[micro-app from runScript]', e);
+    }
 }
 /**
  * Get dynamically created remote script
@@ -755,20 +889,18 @@ function runDynamicScript(url, info, app, originScript) {
     else {
         replaceElement = document.createComment(`dynamic script with src='${url}' extract by micro-app`);
     }
-    fetchSource(url, app.name).then((data) => {
-        info.code = data;
+    fetchSource(url, app.name).then((code) => {
+        info.code = code;
         app.source.scripts.set(url, info);
         if (info.isGlobal)
-            globalScripts.set(url, data);
+            globalScripts.set(url, code);
         try {
-            data = bindScope(url, data, app);
+            code = bindScope(url, code, app);
             if (app.inline) {
-                if (info.module)
-                    replaceElement.setAttribute('type', 'module');
-                replaceElement.textContent = data;
+                setInlinScriptContent(url, code, info.module, replaceElement);
             }
             else {
-                Function(data)();
+                Function(code)();
             }
         }
         catch (e) {
@@ -782,34 +914,24 @@ function runDynamicScript(url, info, app, originScript) {
     return replaceElement;
 }
 /**
- * run code
+ * common handle for inline script
  * @param url script address
  * @param code js code
- * @param app app
  * @param module type='module' of script
- * @param isDynamic dynamically created script
+ * @param scriptElement target script element
+ * @param callback callback from execScripts for first exec
  */
-function runScript(url, code, app, module, isDynamic) {
-    var _a;
-    try {
-        code = bindScope(url, code, app);
-        if (app.inline) {
-            const script = pureCreateElement('script');
-            if (module)
-                script.setAttribute('type', 'module');
-            script.textContent = code;
-            if (isDynamic)
-                return script;
-            (_a = app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-body').appendChild(script);
-        }
-        else {
-            Function(code)();
-            if (isDynamic)
-                return document.createComment('dynamic script extract by micro-app');
-        }
+function setInlinScriptContent(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' });
+        scriptElement.src = URL.createObjectURL(blob);
+        scriptElement.setAttribute('type', 'module');
+        scriptElement.setAttribute('originSrc', url);
+        callback && (scriptElement.onload = callback);
     }
-    catch (e) {
-        console.error('[micro-app from runScript]', e);
+    else {
+        scriptElement.textContent = code;
     }
 }
 /**
@@ -823,8 +945,8 @@ function bindScope(url, code, app) {
         code = usePlugins(url, code, app.name, microApp.plugins);
     }
     if (app.sandBox) {
-        rawWindow.__PROXY_WINDOW__ = app.sandBox.proxyWindow;
-        return `;(function(window, self){with(window){;${code}\n}}).call(window.__PROXY_WINDOW__, window.__PROXY_WINDOW__, window.__PROXY_WINDOW__);`;
+        globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
+        return `;(function(window, self){with(window){;${code}\n}}).call(window.__MICRO_APP_PROXY_WINDOW__, window.__MICRO_APP_PROXY_WINDOW__, window.__MICRO_APP_PROXY_WINDOW__);`;
     }
     return code;
 }
@@ -854,23 +976,6 @@ function usePlugins(url, code, appName, plugins) {
     return code;
 }
 
-// save raw methods
-const rawSetAttribute = Element.prototype.setAttribute;
-const rawAppendChild = Node.prototype.appendChild;
-const rawInsertBefore = Node.prototype.insertBefore;
-const rawReplaceChild = Node.prototype.replaceChild;
-const rawRemoveChild = Node.prototype.removeChild;
-const rawAppend = Element.prototype.append;
-const rawPrepend = Element.prototype.prepend;
-const rawCreateElement = Document.prototype.createElement;
-const rawCreateElementNS = Document.prototype.createElementNS;
-const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
-const rawQuerySelector = Document.prototype.querySelector;
-const rawQuerySelectorAll = Document.prototype.querySelectorAll;
-const rawGetElementById = Document.prototype.getElementById;
-const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
-const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
-const rawGetElementsByName = Document.prototype.getElementsByName;
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
 /**
@@ -886,7 +991,7 @@ function handleNewNode(parent, child, app) {
             dynamicElementInMicroAppMap.set(child, replaceComment);
             return replaceComment;
         }
-        else if (app.scopecss) {
+        else if (app.scopecss && !child.hasAttribute('ignore')) {
             return scopedCSS(child, app.name);
         }
         return child;
@@ -897,7 +1002,7 @@ function handleNewNode(parent, child, app) {
             dynamicElementInMicroAppMap.set(child, linkReplaceComment);
             return linkReplaceComment;
         }
-        else if (!app.scopecss) {
+        else if (!app.scopecss || child.hasAttribute('ignore')) {
             return child;
         }
         const { url, info } = extractLinkFromHtml(child, parent, app, null, true);
@@ -915,7 +1020,7 @@ function handleNewNode(parent, child, app) {
         return child;
     }
     else if (child instanceof HTMLScriptElement) {
-        const { replaceComment, url, info } = extractScriptElement(child, parent, app, true);
+        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);
@@ -928,10 +1033,11 @@ function handleNewNode(parent, child, app) {
                 return replaceElement;
             }
         }
-        else {
+        else if (replaceComment) {
             dynamicElementInMicroAppMap.set(child, replaceComment);
             return replaceComment;
         }
+        return child;
     }
     return child;
 }
@@ -955,15 +1061,15 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
          * 2. When removeChild, targetChild may not be in microAppHead or head
          */
         if (passiveChild && !microAppHead.contains(passiveChild)) {
-            return rawAppendChild.call(microAppHead, targetChild);
+            return globalEnv.rawAppendChild.call(microAppHead, targetChild);
         }
-        else if (rawMethod === rawRemoveChild && !microAppHead.contains(targetChild)) {
+        else if (rawMethod === globalEnv.rawRemoveChild && !microAppHead.contains(targetChild)) {
             if (parent.contains(targetChild)) {
                 return rawMethod.call(parent, targetChild);
             }
             return targetChild;
         }
-        else if (rawMethod === rawAppend || rawMethod === rawPrepend) {
+        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
             return rawMethod.call(microAppHead, targetChild);
         }
         return rawMethod.call(microAppHead, targetChild, passiveChild);
@@ -971,20 +1077,20 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
     else if (parent === document.body) {
         const microAppBody = app.container.querySelector('micro-app-body');
         if (passiveChild && !microAppBody.contains(passiveChild)) {
-            return rawAppendChild.call(microAppBody, targetChild);
+            return globalEnv.rawAppendChild.call(microAppBody, targetChild);
         }
-        else if (rawMethod === rawRemoveChild && !microAppBody.contains(targetChild)) {
+        else if (rawMethod === globalEnv.rawRemoveChild && !microAppBody.contains(targetChild)) {
             if (parent.contains(targetChild)) {
                 return rawMethod.call(parent, targetChild);
             }
             return targetChild;
         }
-        else if (rawMethod === rawAppend || rawMethod === rawPrepend) {
+        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
             return rawMethod.call(microAppBody, targetChild);
         }
         return rawMethod.call(microAppBody, targetChild, passiveChild);
     }
-    else if (rawMethod === rawAppend || rawMethod === rawPrepend) {
+    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
         return rawMethod.call(parent, targetChild);
     }
     return rawMethod.call(parent, targetChild, passiveChild);
@@ -999,7 +1105,7 @@ function getMappingNode(node) {
  * @param parent parent node
  * @param newChild new node
  * @param passiveChild passive node
- * @param rawMethod raw method
+ * @param rawMethodraw method
  */
 function commonElementHander(parent, newChild, passiveChild, rawMethod) {
     if (newChild === null || newChild === void 0 ? void 0 : newChild.__MICRO_APP_NAME__) {
@@ -1007,12 +1113,12 @@ function commonElementHander(parent, newChild, passiveChild, rawMethod) {
         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 === rawAppend || rawMethod === rawPrepend) {
+        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
             return rawMethod.call(parent, newChild);
         }
         return rawMethod.call(parent, newChild, passiveChild);
     }
-    else if (rawMethod === rawAppend || rawMethod === rawPrepend) {
+    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
         const appName = getCurrentAppName();
         if (!(newChild instanceof Node) && appName) {
             const app = appInstanceMap.get(appName);
@@ -1056,34 +1162,34 @@ function patchElementPrototypeMethods() {
             this.__MICRO_APP_NAME__ &&
             appInstanceMap.has(this.__MICRO_APP_NAME__)) {
             const app = appInstanceMap.get(this.__MICRO_APP_NAME__);
-            rawSetAttribute.call(this, key, CompletionPath(value, app.url));
+            globalEnv.rawSetAttribute.call(this, key, CompletionPath(value, app.url));
         }
         else {
-            rawSetAttribute.call(this, key, value);
+            globalEnv.rawSetAttribute.call(this, key, value);
         }
     };
     // prototype methods of add element👇
     Node.prototype.appendChild = function appendChild(newChild) {
-        return commonElementHander(this, newChild, null, rawAppendChild);
+        return commonElementHander(this, newChild, null, globalEnv.rawAppendChild);
     };
     Node.prototype.insertBefore = function insertBefore(newChild, refChild) {
-        return commonElementHander(this, newChild, refChild, rawInsertBefore);
+        return commonElementHander(this, newChild, refChild, globalEnv.rawInsertBefore);
     };
     Node.prototype.replaceChild = function replaceChild(newChild, oldChild) {
-        return commonElementHander(this, newChild, oldChild, rawReplaceChild);
+        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, rawAppend);
+            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, rawPrepend);
+            commonElementHander(this, nodes[i - 1], null, globalEnv.rawPrepend);
             i--;
         }
     };
@@ -1092,11 +1198,11 @@ function patchElementPrototypeMethods() {
         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, rawRemoveChild, this, getMappingNode(oldChild));
+                return invokePrototypeMethod(app, globalEnv.rawRemoveChild, this, getMappingNode(oldChild));
             }
-            return rawRemoveChild.call(this, oldChild);
+            return globalEnv.rawRemoveChild.call(this, oldChild);
         }
-        return rawRemoveChild.call(this, oldChild);
+        return globalEnv.rawRemoveChild.call(this, oldChild);
     };
 }
 /**
@@ -1112,17 +1218,18 @@ function markElement(element) {
 }
 // methods of document
 function patchDocument() {
+    const rawDocument = globalEnv.rawDocument;
     // create element 👇
     Document.prototype.createElement = function createElement(tagName, options) {
-        const element = rawCreateElement.call(rawDocument, tagName, options);
+        const element = globalEnv.rawCreateElement.call(rawDocument, tagName, options);
         return markElement(element);
     };
     Document.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
-        const element = rawCreateElementNS.call(rawDocument, namespaceURI, name, options);
+        const element = globalEnv.rawCreateElementNS.call(rawDocument, namespaceURI, name, options);
         return markElement(element);
     };
     Document.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = rawCreateDocumentFragment.call(rawDocument);
+        const element = globalEnv.rawCreateDocumentFragment.call(rawDocument);
         return markElement(element);
     };
     // query element👇
@@ -1130,7 +1237,7 @@ function patchDocument() {
         var _a, _b, _c;
         const appName = getCurrentAppName();
         if (!appName || selectors === 'head' || selectors === 'body' || selectors === 'html') {
-            return rawQuerySelector.call(rawDocument, selectors);
+            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;
     }
@@ -1138,7 +1245,7 @@ function patchDocument() {
         var _a, _b, _c;
         const appName = getCurrentAppName();
         if (!appName || selectors === 'head' || selectors === 'body' || selectors === 'html') {
-            return rawQuerySelectorAll.call(rawDocument, selectors);
+            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 : [];
     }
@@ -1148,14 +1255,14 @@ function patchDocument() {
     Document.prototype.getElementById = function getElementById(key) {
         const appName = getCurrentAppName();
         if (!appName || /^\d/.test(key)) {
-            return rawGetElementById.call(rawDocument, 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 rawGetElementsByClassName.call(rawDocument, key);
+            return globalEnv.rawGetElementsByClassName.call(rawDocument, key);
         }
         return querySelectorAll(`.${key}`);
     };
@@ -1167,40 +1274,40 @@ function patchDocument() {
             /^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 rawGetElementsByTagName.call(rawDocument, key);
+            return globalEnv.rawGetElementsByTagName.call(rawDocument, key);
         }
         return querySelectorAll(key);
     };
     Document.prototype.getElementsByName = function getElementsByName(key) {
         const appName = getCurrentAppName();
         if (!appName || /^\d/.test(key)) {
-            return rawGetElementsByName.call(rawDocument, key);
+            return globalEnv.rawGetElementsByName.call(rawDocument, key);
         }
         return querySelectorAll(`[name=${key}]`);
     };
 }
 function releasePatchDocument() {
-    Document.prototype.createElement = rawCreateElement;
-    Document.prototype.createElementNS = rawCreateElementNS;
-    Document.prototype.createDocumentFragment = rawCreateDocumentFragment;
-    Document.prototype.querySelector = rawQuerySelector;
-    Document.prototype.querySelectorAll = rawQuerySelectorAll;
-    Document.prototype.getElementById = rawGetElementById;
-    Document.prototype.getElementsByClassName = rawGetElementsByClassName;
-    Document.prototype.getElementsByTagName = rawGetElementsByTagName;
-    Document.prototype.getElementsByName = rawGetElementsByName;
+    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 = rawSetAttribute;
-    Node.prototype.appendChild = rawAppendChild;
-    Node.prototype.insertBefore = rawInsertBefore;
-    Node.prototype.replaceChild = rawReplaceChild;
-    Node.prototype.removeChild = rawRemoveChild;
-    Element.prototype.append = rawAppend;
-    Element.prototype.prepend = rawPrepend;
+    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;
@@ -1210,7 +1317,7 @@ function rejectMicroAppStyle() {
         const style = pureCreateElement('style');
         style.setAttribute('type', 'text/css');
         style.textContent = `\n${microApp.tagName}, micro-app-body { display: block; } \nmicro-app-head { display: none; }`;
-        rawDocument.head.appendChild(style);
+        globalEnv.rawDocument.head.appendChild(style);
     }
 }
 
@@ -1270,7 +1377,8 @@ function dispatchUnmountToMicroApp(appName) {
     window.dispatchEvent(event);
 }
 
-function unmountAppInline() {
+function unmountNestedApp() {
+    replaseUnmountOfNestedApp();
     appInstanceMap.forEach(app => {
         let element = app.container;
         if (element) {
@@ -1281,237 +1389,273 @@ function unmountAppInline() {
             element.disconnectedCallback();
         }
     });
-    appInstanceMap.clear();
+    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 listenUmountAppInline() {
+function listenUmountOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.addEventListener('unmount', unmountAppInline, false);
+        window.addEventListener('unmount', unmountNestedApp, false);
     }
 }
 // release listener
-function replaseUnmountAppInline() {
+function replaseUnmountOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.removeEventListener('unmount', unmountAppInline, false);
+        window.removeEventListener('unmount', unmountNestedApp, false);
     }
 }
 
-class MicroAppElement extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.appName = '';
-        this.appUrl = '';
-        this.version = version;
-        this.isWating = false;
-        this.cacheData = null;
-        /**
-         * handle for change of name an url after element inited
-         */
-        this.handleAttributeUpdate = () => {
-            var _a;
+// 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.appName = '';
+            this.appUrl = '';
+            this.version = version;
             this.isWating = false;
-            const attrName = this.getAttribute('name');
-            const attrUrl = formatURL(this.getAttribute('url'));
-            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.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'));
+                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`);
+                        }
+                    }
+                    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();
+                        }
                     }
                 }
-                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 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();
+            }
+        }
+        static get observedAttributes() {
+            return ['name', 'url'];
+        }
+        // 👇 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();
+        }
+        disconnectedCallback() {
+            this.hasConnected = false;
+            elementInstanceMap.delete(this);
+            this.handleUnmount(this.getDisposeResult('destory'));
+            if (elementInstanceMap.size === 0) {
+                releasePatches();
+            }
+        }
+        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);
+                    if (!newVal) {
+                        return logError('Invalid attribute url');
                     }
-                    else {
-                        this.handleCreate();
+                    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);
                 }
             }
-            else if (attrName !== this.appName) {
-                this.setAttribute('name', this.appName);
-            }
-        };
-    }
-    static get observedAttributes() {
-        return ['name', 'url'];
-    }
-    // 👇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
-    // baseUrl: route prefix, default is ''
-    connectedCallback() {
-        if (++MicroAppElement.microAppCount === 1) {
-            patchElementPrototypeMethods();
-            rejectMicroAppStyle();
-            listenUmountAppInline();
-        }
-        defer(() => dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED));
-        if (!this.appName || !this.appUrl)
-            return;
-        if (this.getDisposeResult('shadowDOM') && !this.shadowRoot) {
-            this.attachShadow({ mode: 'open' });
         }
-        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}`);
+        // handle for connectedCallback run before attributeChangedCallback
+        handleInitialNameAndUrl() {
+            if (this.hasConnected) {
+                this.initialMount();
             }
-            else {
-                logError(`an app named ${this.appName} already exists`);
-            }
-        }
-        else {
-            this.handleCreate();
         }
-    }
-    disconnectedCallback() {
-        if (MicroAppElement.microAppCount > 0) {
-            this.handleUnmount(this.getDisposeResult('destory'));
-            if (--MicroAppElement.microAppCount === 0) {
-                releasePatches();
-                replaseUnmountAppInline();
+        // Perform global initialization when the element count is 1
+        performWhenFirstCreated() {
+            if (elementInstanceMap.set(this, true).size === 1) {
+                patchElementPrototypeMethods();
+                rejectMicroAppStyle();
+                replaseUnmountOfNestedApp();
+                listenUmountOfNestedApp();
             }
         }
-    }
-    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);
-                if (!newVal) {
-                    return logError('Invalid attribute url');
+        /**
+         * first mount of this app
+         */
+        initialMount() {
+            if (!this.appName || !this.appUrl)
+                return;
+            if (this.getDisposeResult('shadowDOM') && !this.shadowRoot) {
+                this.attachShadow({ mode: 'open' });
+            }
+            const app = appInstanceMap.get(this.appName);
+            if (app) {
+                if (app.url === this.appUrl && (app.isPrefetch ||
+                    app.getAppStatus() === appStatus.UNMOUNT)) {
+                    this.handleAppMount(app);
                 }
-                this.appUrl = newVal;
-            }
-            else if (attr === ObservedAttrName.NAME && !this.appName) {
-                if (this.cacheData) {
-                    microApp.setData(newVal, this.cacheData);
-                    this.cacheData = null;
+                else if (app.isPrefetch) {
+                    logError(`the url: ${this.appUrl} is different from prefetch url: ${app.url}`);
+                }
+                else {
+                    logError(`an app named ${this.appName} already exists`);
                 }
-                this.appName = newVal;
             }
-            else if (!this.isWating) {
-                this.isWating = true;
-                defer(this.handleAttributeUpdate);
+            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`);
-            return false;
+        /**
+         * 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`);
+                return false;
+            }
+            return true;
         }
-        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, _b;
-            return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), (_b = this.getAttribute('baseurl')) !== null && _b !== void 0 ? _b : '');
-        });
-    }
-    // create app instance
-    handleCreate() {
-        var _a, _b;
-        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'),
-            baseurl: (_b = this.getAttribute('baseurl')) !== null && _b !== void 0 ? _b : '',
-        });
-        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';
-    }
-    /**
-     * Data from the base application
-     */
-    set data(value) {
-        if (this.appName) {
-            microApp.setData(this.appName, value);
+        /**
+         * 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 {
-            this.cacheData = value;
+        // 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(),
+            });
+            appInstanceMap.set(this.appName, instance);
         }
-    }
-    /**
-     * get data only used in jsx-custom-event once
-     */
-    get data() {
-        if (this.appName) {
-            return microApp.getData(this.appName, true);
+        /**
+         * 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);
         }
-        else if (this.cacheData) {
-            return this.cacheData;
+        /**
+         * 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 null;
-    }
-}
-MicroAppElement.microAppCount = 0;
-/**
- * define element
- * @param tagName element name
- */
-function defineElement(tagName) {
-    if (window.customElements.get(tagName)) {
-        logWarn(`element ${tagName} is already defined`);
-        return false;
     }
     window.customElements.define(tagName, MicroAppElement);
-    return true;
 }
 
 class EventCenter {
@@ -1803,8 +1947,8 @@ class MicroApp extends EventCenterForBaseApp {
         this.preFetch = preFetch;
     }
     start(options) {
-        if (!(window === null || window === void 0 ? void 0 : window.customElements)) {
-            return logError('customElements is not supported in this environment');
+        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)) {
@@ -1814,7 +1958,11 @@ class MicroApp extends EventCenterForBaseApp {
                 return logError(`${options.tagName} is invalid tagName`);
             }
         }
-        if (defineElement(this.tagName) && options && toString.call(options) === '[object Object]') {
+        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;
@@ -1838,6 +1986,7 @@ class MicroApp extends EventCenterForBaseApp {
                 getGlobalAssets(options.globalAssets);
             }
         }
+        defineElement(this.tagName);
     }
 }
 var microApp = new MicroApp();
@@ -1882,7 +2031,7 @@ function flatChildren(parent, app, microAppHead) {
             if (dom.hasAttribute('exclude')) {
                 parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
             }
-            else if (app.scopecss) {
+            else if (app.scopecss && !dom.hasAttribute('ignore')) {
                 extractLinkFromHtml(dom, parent, app, microAppHead);
             }
             else if (dom.hasAttribute('href')) {
@@ -1893,7 +2042,7 @@ function flatChildren(parent, app, microAppHead) {
             if (dom.hasAttribute('exclude')) {
                 parent.replaceChild(document.createComment('style element with exclude attribute ignored by micro-app'), dom);
             }
-            else if (app.scopecss) {
+            else if (app.scopecss && !dom.hasAttribute('ignore')) {
                 microAppHead.appendChild(scopedCSS(dom, app.name));
             }
         }
@@ -2011,15 +2160,6 @@ function bindFunctionToRawWidow(rawWindow, value) {
     return value;
 }
 
-// save raw methods
-const rawWindowAddEventListener = window.addEventListener;
-const rawWindowRemoveEventListener = window.removeEventListener;
-const rawSetInterval = window.setInterval;
-const rawSetTimeout = window.setTimeout;
-const rawClearInterval = window.clearInterval;
-const rawClearTimeout = window.clearTimeout;
-const rawDocumentAddEventListener = document.addEventListener;
-const rawDocumentRemoveEventListener = document.removeEventListener;
 // document.onclick binding list, the binding function of each application is unique
 const documentClickListMap = new Map();
 let hasRewriteDocumentOnClick = false;
@@ -2057,7 +2197,7 @@ function overwriteDocumentOnClick() {
             }
             if (!hasDocumentClickInited && typeof f === 'function') {
                 hasDocumentClickInited = true;
-                rawDocumentAddEventListener.call(document, 'click', onClickHandler, false);
+                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
             }
         }
     });
@@ -2070,6 +2210,7 @@ function overwriteDocumentOnClick() {
  */
 const documentEventListenerMap = new Map();
 function effectDocumentEvent() {
+    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
     if (!hasRewriteDocumentOnClick) {
         overwriteDocumentOnClick();
     }
@@ -2091,7 +2232,7 @@ function effectDocumentEvent() {
             }
             listener && (listener.__MICRO_MARK_OPTIONS__ = options);
         }
-        rawDocumentAddEventListener.call(document, type, listener, options);
+        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
     };
     document.removeEventListener = function (type, listener, options) {
         const appName = getCurrentAppName();
@@ -2104,13 +2245,13 @@ function effectDocumentEvent() {
                 }
             }
         }
-        rawDocumentRemoveEventListener.call(document, type, listener, options);
+        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
     };
 }
 // Clear the document event agent
 function releaseEffectDocumentEvent() {
-    document.addEventListener = rawDocumentAddEventListener;
-    document.removeEventListener = rawDocumentRemoveEventListener;
+    document.addEventListener = globalEnv.rawDocumentAddEventListener;
+    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
 }
 /**
  * Format event name
@@ -2132,6 +2273,7 @@ function effect(microWindow) {
     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);
@@ -2143,7 +2285,7 @@ function effect(microWindow) {
             eventListenerMap.set(type, new Set([listener]));
         }
         listener && (listener.__MICRO_MARK_OPTIONS__ = options);
-        rawWindowAddEventListener.call(window, type, listener, options);
+        rawWindowAddEventListener.call(rawWindow, type, listener, options);
     };
     microWindow.removeEventListener = function (type, listener, options) {
         type = formatEventType(type, microWindow);
@@ -2151,25 +2293,25 @@ function effect(microWindow) {
         if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
             listenerList.delete(listener);
         }
-        rawWindowRemoveEventListener.call(window, type, listener, options);
+        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
     };
     microWindow.setInterval = function (handler, timeout, ...args) {
-        const intervalId = rawSetInterval(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(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(intervalId);
+        rawClearInterval.call(rawWindow, intervalId);
     };
     microWindow.clearTimeout = function (timeoutId) {
         timeoutIdMap.delete(timeoutId);
-        rawClearTimeout(timeoutId);
+        rawClearTimeout.call(rawWindow, timeoutId);
     };
     const umdWindowListenerMap = new Map();
     const umdDocumentListenerMap = new Map();
@@ -2235,7 +2377,7 @@ function effect(microWindow) {
         if (eventListenerMap.size) {
             eventListenerMap.forEach((listenerList, type) => {
                 for (const listener of listenerList) {
-                    rawWindowRemoveEventListener.call(window, type, listener);
+                    rawWindowRemoveEventListener.call(rawWindow, type, listener);
                 }
             });
             eventListenerMap.clear();
@@ -2243,13 +2385,13 @@ function effect(microWindow) {
         // Clear timers
         if (intervalIdMap.size) {
             intervalIdMap.forEach((_, intervalId) => {
-                rawClearInterval(intervalId);
+                rawClearInterval.call(rawWindow, intervalId);
             });
             intervalIdMap.clear();
         }
         if (timeoutIdMap.size) {
             timeoutIdMap.forEach((_, timeoutId) => {
-                rawClearTimeout(timeoutId);
+                rawClearTimeout.call(rawWindow, timeoutId);
             });
             timeoutIdMap.clear();
         }
@@ -2260,7 +2402,7 @@ function effect(microWindow) {
         if (documentAppListenersMap) {
             documentAppListenersMap.forEach((listenerList, type) => {
                 for (const listener of listenerList) {
-                    rawDocumentRemoveEventListener.call(document, type, listener);
+                    rawDocumentRemoveEventListener.call(rawDocument, type, listener);
                 }
             });
             documentAppListenersMap.clear();
@@ -2314,6 +2456,8 @@ class SandBox {
         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
@@ -2349,10 +2493,11 @@ class SandBox {
                             return eval;
                     }
                 }
-                if (this.scopeProperties.includes(key)) {
+                if (Reflect.has(target, key)) {
                     return Reflect.get(target, key);
                 }
-                if (Reflect.has(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);
@@ -2432,12 +2577,12 @@ class SandBox {
             },
         });
     }
-    start(baseurl) {
+    start(baseroute) {
         if (!this.active) {
             this.active = true;
-            this.microWindow.__MICRO_APP_BASE_URL__ = baseurl;
-            if (rawWindow._babelPolyfill)
-                rawWindow._babelPolyfill = false;
+            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();
             }
@@ -2454,7 +2599,7 @@ class SandBox {
             });
             this.injectedKeys.clear();
             this.escapeKeys.forEach((key) => {
-                Reflect.deleteProperty(rawWindow, key);
+                Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
             if (--SandBox.activeCount === 0) {
@@ -2464,6 +2609,7 @@ class SandBox {
     }
     // 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();
@@ -2523,8 +2669,8 @@ class SandBox {
         microWindow.__MICRO_APP_NAME__ = appName;
         microWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
         microWindow.microApp = new EventCenterForMicroApp(appName);
-        microWindow.rawWindow = rawWindow;
-        microWindow.rawDocument = rawDocument;
+        microWindow.rawWindow = globalEnv.rawWindow;
+        microWindow.rawDocument = globalEnv.rawDocument;
         microWindow.removeDomScope = removeDomScope;
     }
 }
@@ -2533,7 +2679,7 @@ SandBox.activeCount = 0; // number of active sandbox
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, container, inline, scopecss, useSandbox, macro, baseurl }) {
+    constructor({ name, url, container, inline, scopecss, useSandbox, macro, baseroute }) {
         this.status = appStatus.NOT_LOADED;
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
@@ -2541,11 +2687,11 @@ class CreateApp {
         this.isPrefetch = false;
         this.container = null;
         this.macro = false;
-        this.baseurl = '';
+        this.baseroute = '';
         this.sandBox = null;
         this.container = container !== null && container !== void 0 ? container : null;
         this.inline = inline !== null && inline !== void 0 ? inline : false;
-        this.baseurl = baseurl !== null && baseurl !== void 0 ? baseurl : '';
+        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : '';
         // optional during init👆
         this.name = name;
         this.url = url;
@@ -2593,15 +2739,15 @@ class CreateApp {
      * mount app
      * @param container app container
      * @param inline js runs in inline mode
-     * @param baseurl route prefix, default is ''
+     * @param baseroute route prefix, default is ''
      */
-    mount(container, inline, baseurl) {
-        var _a, _b, _c, _d;
+    mount(container, inline, baseroute) {
+        var _a, _b, _c;
         if (typeof inline === 'boolean' && inline !== this.inline) {
             this.inline = inline;
         }
         this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
-        this.baseurl = baseurl !== null && baseurl !== void 0 ? baseurl : this.baseurl;
+        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
         if (this.loadSourceLevel !== 2) {
             this.status = appStatus.LOADING_SOURCE_CODE;
             return;
@@ -2609,26 +2755,29 @@ class CreateApp {
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
         this.status = appStatus.MOUNTING;
         cloneNode(this.source.html, this.container);
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseurl);
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute);
         if (!this.umdHookMount) {
-            execScripts(this.source.scripts, this);
-            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;
-                (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.recordUmdSnapshot();
-                this.source.html.innerHTML = '';
-                /**
-                 * TODO: Some UI frameworks insert and record container elements to micro-app-body, such as modal and notification. The DOM remounted is a cloned element, so the cached elements of UI frameworks are invalid, this may cause bug when remount app
-                 */
-                cloneNode(this.container, this.source.html);
-                formatHTMLStyleAfterUmdInit(this.source.html, this.name);
-                this.umdHookMount();
-            }
+            execScripts(this.source.scripts, this, () => {
+                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;
+                        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
+                        /**
+                         * TODO: Some UI frameworks insert and record container elements to micro-app-body, such as modal and notification. The DOM remounted is a cloned element, so the cached elements of UI frameworks are invalid, this may cause bug when remount app
+                         */
+                        cloneNode(this.container, this.source.html);
+                        formatHTMLStyleAfterUmdInit(this.source.html, this.name);
+                        this.umdHookMount();
+                    }
+                }
+            });
         }
         else {
-            (_d = this.sandBox) === null || _d === void 0 ? void 0 : _d.rebuildUmdSnapshot();
+            (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.rebuildUmdSnapshot();
             this.umdHookMount();
         }
         if (appStatus.UNMOUNT !== this.status) {
@@ -2677,7 +2826,7 @@ class CreateApp {
         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 : rawWindow);
+            const global = ((_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) !== null && _b !== void 0 ? _b : globalEnv.rawWindow);
             const libraryName = (this.container instanceof ShadowRoot ? this.container.host : this.container).getAttribute('library') || `micro-app-${this.name}`;
             return typeof global[libraryName] === 'object' ? global[libraryName] : {};
         }
@@ -2717,6 +2866,9 @@ function filterPreFetchTarget(apps) {
  * @param apps micro apps
  */
 function preFetch(apps) {
+    if (!isBrowser) {
+        return logError('preFetch is only supported in browser environment');
+    }
     requestIdleCallback(() => {
         if (typeof apps === 'function')
             apps = apps();
@@ -2778,5 +2930,5 @@ function getGlobalAssets(assets) {
 }
 
 export default microApp;
-export { preFetch, pureCreateElement, removeDomScope, version };
+export { preFetch, pureCreateElement, removeDomScope, setCurrentAppName, version };
 //# sourceMappingURL=index.esm.js.map