@micro-zoe/micro-app 0.5.3 → 0.6.0

package/lib/index.d.ts

@@ -324,15 +324,19 @@ declare module '@micro-zoe/micro-app/create_app' {
             /**
                 * unmount app
                 * @param destroy completely destroy, delete cache resources
+                * @param unmountcb callback of unmount
                 */
-            unmount(destroy: boolean): void;
+            unmount(destroy: boolean, unmountcb?: CallableFunction): void;
             actionsForCompletelyDestory(): void;
+            hiddenKeepAliveApp(): void;
+            showKeepAliveApp(container: HTMLElement | ShadowRoot): void;
             /**
                 * app rendering error
                 * @param e Error
                 */
             onerror(e: Error): void;
-            getAppStatus(): string;
+            getAppState(): string;
+            getKeepAliveState(): string | null;
     }
     export function getActiveApps(): string[];
     export function getAllApps(): string[];

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.5.3';
+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
@@ -1317,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;
 }
@@ -2076,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);
 }
 
@@ -2088,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;
@@ -2118,7 +2136,7 @@ class CreateApp {
     }
     // Load resources
     loadSourceCode() {
-        this.status = appStatus.LOADING_SOURCE_CODE;
+        this.state = appStates.LOADING_SOURCE_CODE;
         extractHtml(this);
     }
     /**
@@ -2127,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();
         }
     }
@@ -2139,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;
         }
     }
     /**
@@ -2158,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
@@ -2222,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;
         /**
@@ -2251,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);
@@ -2281,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() {
@@ -2295,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
@@ -2302,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
@@ -2323,7 +2381,7 @@ class CreateApp {
 function getActiveApps() {
     const activeApps = [];
     appInstanceMap.forEach((app, appName) => {
-        if (appStatus.UNMOUNT !== app.getAppStatus() && !app.isPrefetch) {
+        if (appStates.UNMOUNT !== app.getAppState() && !app.isPrefetch) {
             activeApps.push(appName);
         }
     });
@@ -2700,7 +2758,7 @@ function rejectMicroAppStyle() {
 }
 
 function unmountNestedApp() {
-    replaseUnmountOfNestedApp();
+    releaseUnmountOfNestedApp();
     appInstanceMap.forEach(app => {
         // @ts-ignore
         app.container && getRootContainer(app.container).disconnectedCallback();
@@ -2718,7 +2776,7 @@ function listenUmountOfNestedApp() {
     }
 }
 // release listener
-function replaseUnmountOfNestedApp() {
+function releaseUnmountOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
         window.removeEventListener('unmount', unmountNestedApp, false);
     }
@@ -2745,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);
@@ -2753,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);
+                            });
                         }
                     }
                 }
@@ -2816,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)) {
@@ -2826,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) {
@@ -2873,7 +2921,7 @@ function defineElement(tagName) {
             if (elementInstanceMap.set(this, true).size === 1) {
                 patchElementPrototypeMethods();
                 rejectMicroAppStyle();
-                replaseUnmountOfNestedApp();
+                releaseUnmountOfNestedApp();
                 listenUmountOfNestedApp();
             }
         }
@@ -2892,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
                      */
@@ -2908,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 {
@@ -2968,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 &&
+                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 && appStatus.UNMOUNT !== app.getAppStatus())
-                app.unmount(destroy);
+            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