@micro-zoe/micro-app 0.5.0 → 0.6.0

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.5.0';
+const version = '0.6.0';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -297,16 +297,16 @@ var ObservedAttrName;
     ObservedAttrName["URL"] = "url";
 })(ObservedAttrName || (ObservedAttrName = {}));
 // app status
-var appStatus;
-(function (appStatus) {
-    appStatus["NOT_LOADED"] = "NOT_LOADED";
-    appStatus["LOADING_SOURCE_CODE"] = "LOADING_SOURCE_CODE";
-    appStatus["LOAD_SOURCE_FINISHED"] = "LOAD_SOURCE_FINISHED";
-    appStatus["LOAD_SOURCE_ERROR"] = "LOAD_SOURCE_ERROR";
-    appStatus["MOUNTING"] = "MOUNTING";
-    appStatus["MOUNTED"] = "MOUNTED";
-    appStatus["UNMOUNT"] = "UNMOUNT";
-})(appStatus || (appStatus = {}));
+var appStates;
+(function (appStates) {
+    appStates["NOT_LOADED"] = "NOT_LOADED";
+    appStates["LOADING_SOURCE_CODE"] = "LOADING_SOURCE_CODE";
+    appStates["LOAD_SOURCE_FINISHED"] = "LOAD_SOURCE_FINISHED";
+    appStates["LOAD_SOURCE_ERROR"] = "LOAD_SOURCE_ERROR";
+    appStates["MOUNTING"] = "MOUNTING";
+    appStates["MOUNTED"] = "MOUNTED";
+    appStates["UNMOUNT"] = "UNMOUNT";
+})(appStates || (appStates = {}));
 // lifecycles
 var lifeCycles;
 (function (lifeCycles) {
@@ -315,7 +315,17 @@ var lifeCycles;
     lifeCycles["MOUNTED"] = "mounted";
     lifeCycles["UNMOUNT"] = "unmount";
     lifeCycles["ERROR"] = "error";
+    // 👇 keep-alive only
+    lifeCycles["BEFORESHOW"] = "beforeshow";
+    lifeCycles["AFTERSHOW"] = "aftershow";
+    lifeCycles["AFTERHIDDEN"] = "afterhidden";
 })(lifeCycles || (lifeCycles = {}));
+// keep-alive status
+var keepAliveStates;
+(function (keepAliveStates) {
+    keepAliveStates["KEEP_ALIVE_SHOW"] = "KEEP_ALIVE_SHOW";
+    keepAliveStates["KEEP_ALIVE_HIDDEN"] = "KEEP_ALIVE_HIDDEN";
+})(keepAliveStates || (keepAliveStates = {}));
 
 /**
  * fetch source of html, js, css
@@ -625,7 +635,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;
@@ -633,12 +643,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'),
             });
         }
@@ -653,7 +660,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`);
         }
@@ -708,6 +715,7 @@ function fetchLinkSuccess(url, info, data, microAppHead, app) {
     const styleLink = pureCreateElement('style');
     styleLink.textContent = data;
     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;
@@ -1012,9 +1020,6 @@ function runCode2InlineScript(url, code, module, scriptElement, callback) {
         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);
@@ -1023,6 +1028,9 @@ function runCode2InlineScript(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) {
@@ -1092,7 +1100,7 @@ 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) {
@@ -1100,7 +1108,7 @@ function flatChildren(parent, app, microAppHead) {
                 parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
             }
             else if (!dom.hasAttribute('ignore')) {
-                extractLinkFromHtml(dom, parent, app, microAppHead);
+                extractLinkFromHtml(dom, parent, app);
             }
             else if (dom.hasAttribute('href')) {
                 dom.setAttribute('href', CompletionPath(dom.getAttribute('href'), app.url));
@@ -1111,7 +1119,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));
+                scopedCSS(dom, app);
             }
         }
         else if (dom instanceof HTMLScriptElement) {
@@ -1139,7 +1147,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);
     }
@@ -1319,14 +1327,16 @@ function releaseEffectDocumentEvent() {
     document.addEventListener = globalEnv.rawDocumentAddEventListener;
     document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
 }
+// this events should be sent to the specified app
+const formatEventList = ['unmount', 'appstate-change'];
 /**
  * Format event name
  * @param type event name
  * @param microWindow micro window
  */
 function formatEventType(type, microWindow) {
-    if (type === 'unmount') {
-        return `unmount-${microWindow.__MICRO_APP_NAME__}`;
+    if (formatEventList.includes(type)) {
+        return `${type}-${microWindow.__MICRO_APP_NAME__}`;
     }
     return type;
 }
@@ -1890,12 +1900,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) {
@@ -1905,6 +1918,7 @@ class SandBox {
                 }
                 return undefined;
             },
+            // Object.defineProperty(window, key, Descriptor)
             defineProperty: (target, key, value) => {
                 const from = descriptorTargetMap.get(key);
                 if (from === 'rawWindow') {
@@ -1912,11 +1926,13 @@ 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)) {
+                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
                     this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
                     return Reflect.deleteProperty(target, key);
                 }
@@ -2072,11 +2088,15 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     element.dispatchEvent(event);
 }
 /**
- * Dispatch unmount event to micro app
- * @param appName app.name
+ * Dispatch custom event to micro app
+ * @param eventName event name
+ * @param appName app name
+ * @param detail event detail
  */
-function dispatchUnmountToMicroApp(appName) {
-    const event = new CustomEvent(`unmount-${appName}`);
+function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
+    const event = new CustomEvent(`${eventName}-${appName}`, {
+        detail,
+    });
     window.dispatchEvent(event);
 }
 
@@ -2084,7 +2104,9 @@ function dispatchUnmountToMicroApp(appName) {
 const appInstanceMap = new Map();
 class CreateApp {
     constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }) {
-        this.status = appStatus.NOT_LOADED;
+        this.state = appStates.NOT_LOADED;
+        this.keepAliveState = null;
+        this.keepAliveContainer = null;
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
         this.umdHookUnmount = null;
@@ -2114,7 +2136,7 @@ class CreateApp {
     }
     // Load resources
     loadSourceCode() {
-        this.status = appStatus.LOADING_SOURCE_CODE;
+        this.state = appStates.LOADING_SOURCE_CODE;
         extractHtml(this);
     }
     /**
@@ -2123,9 +2145,9 @@ class CreateApp {
     onLoad(html) {
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
-            if (this.isPrefetch || appStatus.UNMOUNT === this.status)
+            if (this.isPrefetch || appStates.UNMOUNT === this.state)
                 return;
-            this.status = appStatus.LOAD_SOURCE_FINISHED;
+            this.state = appStates.LOAD_SOURCE_FINISHED;
             this.mount();
         }
     }
@@ -2135,9 +2157,9 @@ class CreateApp {
      */
     onLoadError(e) {
         this.loadSourceLevel = -1;
-        if (appStatus.UNMOUNT !== this.status) {
+        if (appStates.UNMOUNT !== this.state) {
             this.onerror(e);
-            this.status = appStatus.LOAD_SOURCE_ERROR;
+            this.state = appStates.LOAD_SOURCE_ERROR;
         }
     }
     /**
@@ -2154,11 +2176,11 @@ class CreateApp {
         this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
         this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
         if (this.loadSourceLevel !== 2) {
-            this.status = appStatus.LOADING_SOURCE_CODE;
+            this.state = appStates.LOADING_SOURCE_CODE;
             return;
         }
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
-        this.status = appStatus.MOUNTING;
+        this.state = appStates.MOUNTING;
         cloneContainer(this.source.html, this.container, !this.umdMode);
         (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute);
         let umdHookMountResult; // result of mount function
@@ -2218,20 +2240,23 @@ class CreateApp {
      * dispatch mounted event when app run finished
      */
     dispatchMountedEvent() {
-        if (appStatus.UNMOUNT !== this.status) {
-            this.status = appStatus.MOUNTED;
+        if (appStates.UNMOUNT !== this.state) {
+            this.state = appStates.MOUNTED;
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
         }
     }
     /**
      * unmount app
      * @param destroy completely destroy, delete cache resources
+     * @param unmountcb callback of unmount
      */
-    unmount(destroy) {
-        if (this.status === appStatus.LOAD_SOURCE_ERROR) {
+    unmount(destroy, unmountcb) {
+        if (this.state === appStates.LOAD_SOURCE_ERROR) {
             destroy = true;
         }
-        this.status = appStatus.UNMOUNT;
+        this.state = appStates.UNMOUNT;
+        this.keepAliveState = null;
+        this.keepAliveContainer = null;
         // result of unmount function
         let umdHookUnmountResult;
         /**
@@ -2247,28 +2272,31 @@ class CreateApp {
             }
         }
         // dispatch unmount event to micro app
-        dispatchUnmountToMicroApp(this.name);
-        this.handleUnmounted(destroy, umdHookUnmountResult);
+        dispatchCustomEventToMicroApp('unmount', this.name);
+        this.handleUnmounted(destroy, umdHookUnmountResult, unmountcb);
     }
     /**
      * handle for promise umdHookUnmount
+     * @param destroy completely destroy, delete cache resources
      * @param umdHookUnmountResult result of umdHookUnmount
+     * @param unmountcb callback of unmount
      */
-    handleUnmounted(destroy, umdHookUnmountResult) {
+    handleUnmounted(destroy, umdHookUnmountResult, unmountcb) {
         if (isPromise(umdHookUnmountResult)) {
             umdHookUnmountResult
-                .then(() => this.actionsForUnmount(destroy))
-                .catch(() => this.actionsForUnmount(destroy));
+                .then(() => this.actionsForUnmount(destroy, unmountcb))
+                .catch(() => this.actionsForUnmount(destroy, unmountcb));
         }
         else {
-            this.actionsForUnmount(destroy);
+            this.actionsForUnmount(destroy, unmountcb);
         }
     }
     /**
      * actions for unmount app
      * @param destroy completely destroy, delete cache resources
+     * @param unmountcb callback of unmount
      */
-    actionsForUnmount(destroy) {
+    actionsForUnmount(destroy, unmountcb) {
         var _a;
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
@@ -2277,12 +2305,11 @@ class CreateApp {
             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
-            */
             cloneContainer(this.container, this.source.html, false);
         }
+        this.container.innerHTML = '';
         this.container = null;
+        unmountcb && unmountcb();
     }
     // actions for completely destroy
     actionsForCompletelyDestory() {
@@ -2291,6 +2318,37 @@ class CreateApp {
         }
         appInstanceMap.delete(this.name);
     }
+    // hidden app when disconnectedCallback called with keep-alive
+    hiddenKeepAliveApp() {
+        this.keepAliveState = keepAliveStates.KEEP_ALIVE_HIDDEN;
+        // event should dispatch before clone node
+        // dispatch afterhidden event to micro-app
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            appState: 'afterhidden',
+        });
+        // dispatch afterhidden event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERHIDDEN);
+        cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
+        this.container = this.keepAliveContainer;
+    }
+    // show app when connectedCallback called with keep-alive
+    showKeepAliveApp(container) {
+        // dispatch beforeshow event to micro-app
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            appState: 'beforeshow',
+        });
+        // dispatch beforeshow event to base app
+        dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
+        cloneContainer(this.container, container, false);
+        this.container = container;
+        this.keepAliveState = keepAliveStates.KEEP_ALIVE_SHOW;
+        // dispatch aftershow event to micro-app
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            appState: 'aftershow',
+        });
+        // dispatch aftershow event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERSHOW);
+    }
     /**
      * app rendering error
      * @param e Error
@@ -2298,15 +2356,19 @@ class CreateApp {
     onerror(e) {
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
     }
-    // get app status
-    getAppStatus() {
-        return this.status;
+    // get app state
+    getAppState() {
+        return this.state;
+    }
+    // get keep-alive state
+    getKeepAliveState() {
+        return this.keepAliveState;
     }
     // get umd library, if it not exist, return empty object
     getUmdLibraryHooks() {
         var _a, _b;
         // after execScripts, the app maybe unmounted
-        if (appStatus.UNMOUNT !== this.status) {
+        if (appStates.UNMOUNT !== this.state) {
             const global = ((_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) !== null && _b !== void 0 ? _b : globalEnv.rawWindow);
             this.libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
             // do not use isObject
@@ -2315,6 +2377,20 @@ class CreateApp {
         return {};
     }
 }
+// if app not prefetch & not unmount, then app is active
+function getActiveApps() {
+    const activeApps = [];
+    appInstanceMap.forEach((app, appName) => {
+        if (appStates.UNMOUNT !== app.getAppState() && !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();
@@ -2345,7 +2421,7 @@ function handleNewNode(parent, child, app) {
         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.__MICRO_APP_LINK_PATH__ = url;
@@ -2682,7 +2758,7 @@ function rejectMicroAppStyle() {
 }
 
 function unmountNestedApp() {
-    replaseUnmountOfNestedApp();
+    releaseUnmountOfNestedApp();
     appInstanceMap.forEach(app => {
         // @ts-ignore
         app.container && getRootContainer(app.container).disconnectedCallback();
@@ -2700,7 +2776,7 @@ function listenUmountOfNestedApp() {
     }
 }
 // release listener
-function replaseUnmountOfNestedApp() {
+function releaseUnmountOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
         window.removeEventListener('unmount', unmountNestedApp, false);
     }
@@ -2727,7 +2803,6 @@ function defineElement(tagName) {
              * handle for change of name an url after element inited
              */
             this.handleAttributeUpdate = () => {
-                var _a;
                 this.isWating = false;
                 const formatAttrName = formatAppName(this.getAttribute('name'));
                 const formatAttrUrl = formatAppURL(this.getAttribute('url'), this.appName);
@@ -2735,44 +2810,27 @@ function defineElement(tagName) {
                     const existApp = appInstanceMap.get(formatAttrName);
                     if (formatAttrName !== this.appName && existApp) {
                         // handling of cached and non-prefetch apps
-                        if (appStatus.UNMOUNT !== existApp.getAppStatus() && !existApp.isPrefetch) {
+                        if (appStates.UNMOUNT !== existApp.getAppState() &&
+                            keepAliveStates.KEEP_ALIVE_HIDDEN !== existApp.getKeepAliveState() &&
+                            !existApp.isPrefetch) {
                             this.setAttribute('name', this.appName);
-                            return logError(`an app named ${formatAttrName} already exists`, this.appName);
+                            return logError(`app name conflict, an app named ${formatAttrName} is running`, this.appName);
                         }
                     }
                     if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
-                        this.handleUnmount(formatAttrName === this.appName);
-                        /**
-                         * change ssrUrl in ssr mode
-                         * do not add judgment of formatAttrUrl === this.appUrl
-                         */
-                        if (this.getDisposeResult('ssr')) {
-                            this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, formatAttrUrl);
-                        }
-                        else if (this.ssrUrl) {
-                            this.ssrUrl = '';
-                        }
-                        this.appName = formatAttrName;
-                        this.appUrl = formatAttrUrl;
-                        ((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this).innerHTML = '';
-                        if (formatAttrName !== this.getAttribute('name')) {
-                            this.setAttribute('name', this.appName);
+                        if (formatAttrName === this.appName) {
+                            this.handleUnmount(true, () => {
+                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
+                            });
                         }
-                        /**
-                         * when existApp not null:
-                         * scene1: if formatAttrName and this.appName are equal: exitApp is the current app, the url must be different, existApp has been unmounted
-                         * scene2: if formatAttrName and this.appName are different: existApp must be prefetch or unmounted, if url is equal, then just mount, if url is different, then create new app to replace existApp
-                         * scene3: url is different but ssrUrl is equal
-                         * scene4: url is equal but ssrUrl is different, if url is equal, name must different
-                         */
-                        if (existApp &&
-                            existApp.url === this.appUrl &&
-                            existApp.ssrUrl === this.ssrUrl) {
-                            // mount app
-                            this.handleAppMount(existApp);
+                        else if (this.getDisposeResult('keep-alive')) {
+                            this.handleHiddenKeepAliveApp();
+                            this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                         }
                         else {
-                            this.handleCreateApp();
+                            this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'), () => {
+                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
+                            });
                         }
                     }
                 }
@@ -2798,6 +2856,7 @@ function defineElement(tagName) {
         // 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 ''
+        // keep-alive: open keep-alive mode, keep-alive has priority over destroy
         connectedCallback() {
             this.hasConnected = true;
             if (!elementInstanceMap.has(this)) {
@@ -2808,10 +2867,17 @@ function defineElement(tagName) {
         }
         disconnectedCallback() {
             this.hasConnected = false;
-            elementInstanceMap.delete(this);
-            this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'));
-            if (elementInstanceMap.size === 0) {
-                releasePatches();
+            // keep-alive has priority over destroy
+            if (this.getDisposeResult('keep-alive')) {
+                this.handleHiddenKeepAliveApp();
+            }
+            else {
+                elementInstanceMap.delete(this);
+                this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'), () => {
+                    if (elementInstanceMap.size === 0) {
+                        releasePatches();
+                    }
+                });
             }
         }
         attributeChangedCallback(attr, _oldVal, newVal) {
@@ -2855,7 +2921,7 @@ function defineElement(tagName) {
             if (elementInstanceMap.set(this, true).size === 1) {
                 patchElementPrototypeMethods();
                 rejectMicroAppStyle();
-                replaseUnmountOfNestedApp();
+                releaseUnmountOfNestedApp();
                 listenUmountOfNestedApp();
             }
         }
@@ -2874,15 +2940,21 @@ function defineElement(tagName) {
             else if (this.ssrUrl) {
                 this.ssrUrl = '';
             }
-            const app = appInstanceMap.get(this.appName);
-            if (app) {
+            if (appInstanceMap.has(this.appName)) {
+                const app = appInstanceMap.get(this.appName);
                 const existAppUrl = app.ssrUrl || app.url;
                 const activeAppUrl = this.ssrUrl || this.appUrl;
-                if (existAppUrl === activeAppUrl && (app.isPrefetch ||
-                    app.getAppStatus() === appStatus.UNMOUNT)) {
+                // keep-alive don't care about ssrUrl
+                // Even if the keep-alive app is pushed into the background, it is still active and cannot be replaced. Otherwise, it is difficult for developers to troubleshoot in case of conflict and  will leave developers at a loss
+                if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN &&
+                    app.url === this.appUrl) {
+                    this.handleShowKeepAliveApp(app);
+                }
+                else if (existAppUrl === activeAppUrl && (app.isPrefetch ||
+                    app.getAppState() === appStates.UNMOUNT)) {
                     this.handleAppMount(app);
                 }
-                else if (app.isPrefetch || app.getAppStatus() === appStatus.UNMOUNT) {
+                else if (app.isPrefetch || app.getAppState() === appStates.UNMOUNT) {
                     /**
                      * url is different & old app is unmounted or prefetch, create new app to replace old one
                      */
@@ -2890,7 +2962,56 @@ function defineElement(tagName) {
                     this.handleCreateApp();
                 }
                 else {
-                    logError(`an app named ${this.appName} already exists`, this.appName);
+                    logError(`app name conflict, an app named ${this.appName} is running`, this.appName);
+                }
+            }
+            else {
+                this.handleCreateApp();
+            }
+        }
+        // remount app or create app if attribute url or name change
+        actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp) {
+            var _a;
+            /**
+             * change ssrUrl in ssr mode
+             * do not add judgment of formatAttrUrl === this.appUrl
+             */
+            if (this.getDisposeResult('ssr')) {
+                this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, formatAttrUrl);
+            }
+            else if (this.ssrUrl) {
+                this.ssrUrl = '';
+            }
+            this.appName = formatAttrName;
+            this.appUrl = formatAttrUrl;
+            ((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this).innerHTML = '';
+            if (formatAttrName !== this.getAttribute('name')) {
+                this.setAttribute('name', this.appName);
+            }
+            /**
+             * when existApp not null: this.appName === existApp.name
+             * scene1: if formatAttrName and this.appName are equal: exitApp is the current app, the url must be different, existApp has been unmounted
+             * scene2: if formatAttrName and this.appName are different: existApp must be prefetch or unmounted, if url is equal, then just mount, if url is different, then create new app to replace existApp
+             * scene3: url is different but ssrUrl is equal
+             * scene4: url is equal but ssrUrl is different, if url is equal, name must different
+             * scene5: if existApp is KEEP_ALIVE_HIDDEN, name must different
+             */
+            if (existApp) {
+                if (existApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                    if (existApp.url === this.appUrl) {
+                        this.handleShowKeepAliveApp(existApp);
+                    }
+                    else {
+                        // the hidden keep-alive app is still active
+                        logError(`app name conflict, an app named ${this.appName} is running`, this.appName);
+                    }
+                }
+                else if (existApp.url === this.appUrl && existApp.ssrUrl === this.ssrUrl) {
+                    // mount app
+                    this.handleAppMount(existApp);
+                }
+                else {
+                    this.handleCreateApp();
                 }
             }
             else {
@@ -2950,10 +3071,24 @@ function defineElement(tagName) {
          * unmount app
          * @param destroy delete cache resources when unmount
          */
-        handleUnmount(destroy) {
+        handleUnmount(destroy, unmountcb) {
             const app = appInstanceMap.get(this.appName);
-            if (app && appStatus.UNMOUNT !== app.getAppStatus())
-                app.unmount(destroy);
+            if (app &&
+                app.getAppState() !== appStates.UNMOUNT)
+                app.unmount(destroy, unmountcb);
+        }
+        // hidden app when disconnectedCallback called with keep-alive
+        handleHiddenKeepAliveApp() {
+            const app = appInstanceMap.get(this.appName);
+            if (app &&
+                app.getAppState() !== appStates.UNMOUNT &&
+                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN)
+                app.hiddenKeepAliveApp();
+        }
+        // show app when connectedCallback called with keep-alive
+        handleShowKeepAliveApp(app) {
+            // must be asnyc
+            defer(() => { var _a; return app.showKeepAliveApp((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this); });
         }
         /**
          * Get configuration
@@ -3129,6 +3264,7 @@ class MicroApp extends EventCenterForBaseApp {
             this.disableScopecss = options.disableScopecss;
             this.disableSandbox = options.disableSandbox;
             this.macro = options.macro;
+            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
@@ -3156,5 +3292,5 @@ class MicroApp extends EventCenterForBaseApp {
 var microApp = new MicroApp();
 
 export default microApp;
-export { EventCenterForMicroApp, preFetch, pureCreateElement, removeDomScope, version };
+export { EventCenterForMicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, version };
 //# sourceMappingURL=index.esm.js.map