@micro-zoe/micro-app 0.4.3 → 0.5.3

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.4.3';
+const version = '0.5.3';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -85,10 +85,12 @@ 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) {
+function formatAppURL(url, appName = null) {
     if (!isString(url) || !url)
         return '';
     try {
@@ -105,10 +107,20 @@ function formatURL(url, appName = null) {
         return '';
     }
 }
-// export function formatName (name: string): string {
-//   if (!isString(name) || !name) return ''
-//   return name.replace(/(^\d+)|([^\w\d-_])/gi, '')
-// }
+/**
+ * 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
@@ -245,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);
@@ -271,6 +283,13 @@ function isUniqueElement(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) {
@@ -499,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');
@@ -535,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 {
@@ -546,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 });
         }
@@ -604,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;
@@ -612,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'),
             });
         }
@@ -632,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`);
         }
@@ -686,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;
 }
@@ -702,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;
     }
@@ -711,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);
@@ -861,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));
@@ -869,11 +888,10 @@ 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);
             }
         }
@@ -882,9 +900,9 @@ 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);
-                if (!info.module)
-                    initedHook(false);
+                info.code = info.code || code;
+                runScript(url, app, info, false, initedHook);
+                !info.module && initedHook(false);
             });
             initedHook(isUndefined(initedHook.moduleCount));
         }).catch((err) => {
@@ -899,26 +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');
         }
@@ -936,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) {
@@ -960,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);
@@ -985,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' });
         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);
@@ -1007,15 +1018,25 @@ 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) {
+function bindScope(url, app, code, module) {
     if (isPlainObject(microApp.plugins)) {
         code = usePlugins(url, code, app.name, microApp.plugins);
     }
@@ -1069,15 +1090,15 @@ function getWrapElement(str) {
 function flatChildren(parent, app, microAppHead) {
     const children = Array.from(parent.children);
     children.length && children.forEach((child) => {
-        flatChildren(child, app, microAppHead);
+        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 (app.scopecss && !dom.hasAttribute('ignore')) {
-                extractLinkFromHtml(dom, parent, app, microAppHead);
+            else if (!dom.hasAttribute('ignore')) {
+                extractLinkFromHtml(dom, parent, app);
             }
             else if (dom.hasAttribute('href')) {
                 dom.setAttribute('href', CompletionPath(dom.getAttribute('href'), app.url));
@@ -1088,7 +1109,7 @@ function flatChildren(parent, app, microAppHead) {
                 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));
+                scopedCSS(dom, app);
             }
         }
         else if (dom instanceof HTMLScriptElement) {
@@ -1116,7 +1137,7 @@ function extractSourceDom(htmlStr, app) {
         app.onerror(new Error(msg));
         return logError(msg, app.name);
     }
-    flatChildren(wrapElement, app, microAppHead);
+    flatChildren(wrapElement, app);
     if (app.source.links.size) {
         fetchLinksFromHtml(wrapElement, app, microAppHead);
     }
@@ -1135,7 +1156,7 @@ function extractSourceDom(htmlStr, app) {
  * @param app app
  */
 function extractHtml(app) {
-    fetchSource(app.url, app.name, { cache: 'no-cache' }).then((htmlStr) => {
+    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));
@@ -1243,9 +1264,7 @@ function overwriteDocumentOnClick() {
             }
         }
     });
-    if (rawOnClick) {
-        document.onclick = rawOnClick;
-    }
+    rawOnClick && (document.onclick = rawOnClick);
 }
 /**
  * The document event is globally, we need to clear these event bindings when micro application unmounted
@@ -1253,9 +1272,7 @@ function overwriteDocumentOnClick() {
 const documentEventListenerMap = new Map();
 function effectDocumentEvent() {
     const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
-    if (!hasRewriteDocumentOnClick) {
-        overwriteDocumentOnClick();
-    }
+    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
     document.addEventListener = function (type, listener, options) {
         var _a;
         const appName = getCurrentAppName();
@@ -1281,8 +1298,9 @@ function effectDocumentEvent() {
         rawDocumentAddEventListener.call(rawDocument, type, listener, options);
     };
     document.removeEventListener = function (type, listener, options) {
+        var _a;
         const appName = getCurrentAppName();
-        if (appName) {
+        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);
@@ -1578,9 +1596,7 @@ class EventCenterForGlobal {
      * @param cb listener
      */
     removeGlobalDataListener(cb) {
-        if (isFunction(cb)) {
-            eventCenter.off('global', cb);
-        }
+        isFunction(cb) && eventCenter.off('global', cb);
     }
     /**
      * dispatch global data
@@ -1624,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
@@ -1632,9 +1648,7 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param cb listener
      */
     removeDataListener(appName, cb) {
-        if (isFunction(cb)) {
-            eventCenter.off(formatEventName(appName, false), cb);
-        }
+        isFunction(cb) && eventCenter.off(formatEventName(formatAppName(appName), false), cb);
     }
     /**
      * get data from micro app or base app
@@ -1642,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
@@ -1650,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
@@ -1680,9 +1695,7 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
      * @param cb listener
      */
     removeDataListener(cb) {
-        if (isFunction(cb)) {
-            eventCenter.off(formatEventName(this.appName, true), cb);
-        }
+        isFunction(cb) && eventCenter.off(formatEventName(this.appName, true), cb);
     }
     /**
      * get data from base app
@@ -1704,11 +1717,7 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
                     data,
                 }
             });
-            let element = app.container;
-            if (isShadowRoot(element)) {
-                element = element.host;
-            }
-            element.dispatchEvent(event);
+            getRootContainer(app.container).dispatchEvent(event);
         }
     }
     /**
@@ -1778,8 +1787,7 @@ const unscopables = {
  */
 let macroTimer;
 function macroTask(fn) {
-    if (macroTimer)
-        clearTimeout(macroTimer);
+    macroTimer && clearTimeout(macroTimer);
     macroTimer = setTimeout(fn, 0);
 }
 class SandBox {
@@ -1880,12 +1888,15 @@ class SandBox {
                     return key in target;
                 return key in unscopables || key in target || key in rawWindow;
             },
+            // Object.getOwnPropertyDescriptor(window, key)
+            // TODO: use set
             getOwnPropertyDescriptor: (target, key) => {
                 if (target.hasOwnProperty(key)) {
                     descriptorTargetMap.set(key, 'target');
                     return Object.getOwnPropertyDescriptor(target, key);
                 }
                 if (rawWindow.hasOwnProperty(key)) {
+                    // like console, alert ...
                     descriptorTargetMap.set(key, 'rawWindow');
                     const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
                     if (descriptor && !descriptor.configurable) {
@@ -1895,6 +1906,7 @@ class SandBox {
                 }
                 return undefined;
             },
+            // Object.defineProperty(window, key, Descriptor)
             defineProperty: (target, key, value) => {
                 const from = descriptorTargetMap.get(key);
                 if (from === 'rawWindow') {
@@ -1902,14 +1914,14 @@ class SandBox {
                 }
                 return Reflect.defineProperty(target, key, value);
             },
+            // Object.getOwnPropertyNames(window)
             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);
-                    }
+                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
+                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
                     return Reflect.deleteProperty(target, key);
                 }
                 return true;
@@ -1920,8 +1932,8 @@ class SandBox {
         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;
+            // BUG FIX: bable-polyfill@6.x
+            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
             if (++SandBox.activeCount === 1) {
                 effectDocumentEvent();
             }
@@ -2042,9 +2054,7 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     if (!element) {
         return logError(`element does not exist in lifecycle ${lifecycleName}`, appName);
     }
-    else if (isShadowRoot(element)) {
-        element = element.host;
-    }
+    element = getRootContainer(element);
     // clear dom scope before dispatch lifeCycles event to base app, especially mounted & unmount
     removeDomScope();
     const detail = Object.assign({
@@ -2077,7 +2087,7 @@ function dispatchUnmountToMicroApp(appName) {
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, container, inline, scopecss, useSandbox, macro, baseroute }) {
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }) {
         this.status = appStatus.NOT_LOADED;
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
@@ -2092,6 +2102,7 @@ class CreateApp {
         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;
@@ -2103,9 +2114,7 @@ class CreateApp {
             scripts: new Map(),
         };
         this.loadSourceCode();
-        if (this.useSandbox) {
-            this.sandBox = new SandBox(name, url, this.macro);
-        }
+        this.useSandbox && (this.sandBox = new SandBox(name, url, this.macro));
     }
     // Load resources
     loadSourceCode() {
@@ -2154,7 +2163,7 @@ class CreateApp {
         }
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
         this.status = appStatus.MOUNTING;
-        cloneNode(this.source.html, this.container, !this.umdMode);
+        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) {
@@ -2215,12 +2224,7 @@ class CreateApp {
     dispatchMountedEvent() {
         if (appStatus.UNMOUNT !== this.status) {
             this.status = appStatus.MOUNTED;
-            // remove defer in v0.4.2
-            // defer(() => {
-            //   if (appStatus.UNMOUNT !== this.status) {
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
-            //   }
-            // })
         }
     }
     /**
@@ -2273,21 +2277,24 @@ class CreateApp {
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
-        // actions for completely destroy
         if (destroy) {
-            if (!this.useSandbox && this.umdMode) {
-                delete window[this.libraryName];
-            }
-            appInstanceMap.delete(this.name);
+            this.actionsForCompletelyDestory();
         }
         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
             */
-            cloneNode(this.container, this.source.html, false);
+            cloneContainer(this.container, this.source.html, false);
         }
         this.container = null;
     }
+    // actions for completely destroy
+    actionsForCompletelyDestory() {
+        if (!this.useSandbox && this.umdMode) {
+            delete window[this.libraryName];
+        }
+        appInstanceMap.delete(this.name);
+    }
     /**
      * app rendering error
      * @param e Error
@@ -2305,13 +2312,27 @@ class CreateApp {
         // 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 = (isShadowRoot(this.container) ? this.container.host : this.container).getAttribute('library') || `micro-app-${this.name}`;
+            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 {};
     }
 }
+// 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());
+}
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
@@ -2329,7 +2350,7 @@ function handleNewNode(parent, child, app) {
             return replaceComment;
         }
         else if (app.scopecss && !child.hasAttribute('ignore')) {
-            return scopedCSS(child, app.name);
+            return scopedCSS(child, app);
         }
         return child;
     }
@@ -2339,13 +2360,13 @@ function handleNewNode(parent, child, app) {
             dynamicElementInMicroAppMap.set(child, linkReplaceComment);
             return linkReplaceComment;
         }
-        else if (!app.scopecss || child.hasAttribute('ignore')) {
+        else if (child.hasAttribute('ignore')) {
             return child;
         }
-        const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, null, true);
+        const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, true);
         if (url && info) {
             const replaceStyle = pureCreateElement('style');
-            replaceStyle.linkpath = url;
+            replaceStyle.__MICRO_APP_LINK_PATH__ = url;
             foramtDynamicLink(url, info, app, child, replaceStyle);
             dynamicElementInMicroAppMap.set(child, replaceStyle);
             return replaceStyle;
@@ -2359,8 +2380,8 @@ function handleNewNode(parent, child, app) {
     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);
+            if (!info.isExternal) { // inline script
+                const replaceElement = runScript(url, app, info, true);
                 dynamicElementInMicroAppMap.set(child, replaceElement);
                 return replaceElement;
             }
@@ -2494,7 +2515,7 @@ function patchElementPrototypeMethods() {
                 logWarn('property data must be an object', this.getAttribute('name'));
             }
         }
-        else if (((key === 'src' && /^(img|script)$/i.test(this.tagName)) ||
+        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__)) {
@@ -2681,17 +2702,10 @@ function rejectMicroAppStyle() {
 function unmountNestedApp() {
     replaseUnmountOfNestedApp();
     appInstanceMap.forEach(app => {
-        let element = app.container;
-        if (element) {
-            if (isShadowRoot(element)) {
-                element = element.host;
-            }
-            // @ts-ignore
-            element.disconnectedCallback();
-        }
+        // @ts-ignore
+        app.container && getRootContainer(app.container).disconnectedCallback();
     });
-    if (!window.__MICRO_APP_UMD_MODE__)
-        appInstanceMap.clear();
+    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.clear();
     if (elementInstanceMap.size) {
         elementInstanceMap.clear();
         releasePatches();
@@ -2723,8 +2737,9 @@ function defineElement(tagName) {
             this.isWating = false;
             this.cacheData = null;
             this.hasConnected = false;
-            this.appName = '';
-            this.appUrl = '';
+            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
@@ -2732,28 +2747,45 @@ function defineElement(tagName) {
             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) {
+                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 ${attrName} already exists`, this.appName);
+                            return logError(`an app named ${formatAttrName} already exists`, this.appName);
                         }
                     }
-                    if (attrName !== this.appName || attrUrl !== this.appUrl) {
-                        this.handleUnmount(attrName === this.appName);
-                        this.appName = attrName;
-                        this.appUrl = attrUrl;
+                    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 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
+                         * 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 === attrUrl) {
+                        if (existApp &&
+                            existApp.url === this.appUrl &&
+                            existApp.ssrUrl === this.ssrUrl) {
                             // mount app
                             this.handleAppMount(existApp);
                         }
@@ -2762,7 +2794,7 @@ function defineElement(tagName) {
                         }
                     }
                 }
-                else if (attrName !== this.appName) {
+                else if (formatAttrName !== this.appName) {
                     this.setAttribute('name', this.appName);
                 }
             };
@@ -2804,19 +2836,26 @@ function defineElement(tagName) {
             if (this.legalAttribute(attr, newVal) &&
                 this[attr === ObservedAttrName.NAME ? 'appName' : 'appUrl'] !== newVal) {
                 if (attr === ObservedAttrName.URL && !this.appUrl) {
-                    newVal = formatURL(newVal, this.appName);
+                    newVal = formatAppURL(newVal, this.appName);
                     if (!newVal) {
-                        return logError('Invalid attribute url', this.appName);
+                        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(newVal, this.cacheData);
+                        microApp.setData(formatNewName, this.cacheData);
                         this.cacheData = null;
                     }
-                    this.appName = newVal;
+                    this.appName = formatNewName;
+                    if (formatNewName !== newVal) {
+                        this.setAttribute('name', this.appName);
+                    }
                     this.handleInitialNameAndUrl();
                 }
                 else if (!this.isWating) {
@@ -2827,9 +2866,7 @@ function defineElement(tagName) {
         }
         // handle for connectedCallback run before attributeChangedCallback
         handleInitialNameAndUrl() {
-            if (this.hasConnected) {
-                this.initialMount();
-            }
+            this.hasConnected && this.initialMount();
         }
         // Perform global initialization when the element count is 1
         performWhenFirstCreated() {
@@ -2849,20 +2886,25 @@ function defineElement(tagName) {
             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) {
-                if (app.url === this.appUrl && (app.isPrefetch ||
+                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) {
-                    logError(`the url ${this.appUrl} is different from prefetch url ${app.url}`, this.appName);
-                }
-                else if (app.getAppStatus() === appStatus.UNMOUNT) {
+                else if (app.isPrefetch || app.getAppStatus() === appStatus.UNMOUNT) {
                     /**
-                     * add this logic for SSR
-                     * if old app has unmounted and url is different, create new app to replace old one
+                     * 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 {
@@ -2902,9 +2944,17 @@ function defineElement(tagName) {
         // create app instance
         handleCreateApp() {
             var _a;
+            /**
+             * 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')),
@@ -2972,12 +3022,12 @@ function filterPreFetchTarget(apps) {
     const validApps = [];
     if (isArray(apps)) {
         apps.forEach((item) => {
-            item.url = formatURL(item.url, item.name);
-            if (isPlainObject(item) &&
-                isString(item.name) &&
-                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);
+                }
             }
         });
     }
@@ -3004,8 +3054,7 @@ function preFetch(apps) {
         return logError('preFetch is only supported in browser environment');
     }
     requestIdleCallback(() => {
-        if (isFunction(apps))
-            apps = apps();
+        isFunction(apps) && (apps = apps());
         filterPreFetchTarget(apps).forEach((item) => {
             var _a, _b, _c;
             const app = new CreateApp({
@@ -3090,7 +3139,7 @@ class MicroApp extends EventCenterForBaseApp {
             this.destroy = options.destroy;
             /**
              * compatible with versions below 0.4.2 of destroy
-             * Do not merge with the previous line of code
+             * do not merge with the previous line
              */
             // @ts-ignore
             this.destory = options.destory;
@@ -3098,28 +3147,33 @@ class MicroApp extends EventCenterForBaseApp {
             this.disableScopecss = options.disableScopecss;
             this.disableSandbox = options.disableSandbox;
             this.macro = options.macro;
-            if (isFunction(options.fetch))
-                this.fetch = options.fetch;
-            if (isPlainObject(options.lifeCycles)) {
-                this.lifeCycles = options.lifeCycles;
-            }
-            if (isPlainObject(options.plugins)) {
-                this.plugins = options.plugins;
-            }
+            this.ssr = options.ssr;
+            isFunction(options.fetch) && (this.fetch = options.fetch);
+            isPlainObject(options.lifeCycles) && (this.lifeCycles = options.lifeCycles);
             // load app assets when browser is idle
-            if (options.preFetchApps) {
-                preFetch(options.preFetchApps);
-            }
+            options.preFetchApps && preFetch(options.preFetchApps);
             // load global assets when browser is idle
-            if (options.globalAssets) {
-                getGlobalAssets(options.globalAssets);
+            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 { EventCenterForMicroApp, preFetch, pureCreateElement, removeDomScope, setCurrentAppName, version };
+export { EventCenterForMicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, version };
 //# sourceMappingURL=index.esm.js.map