@micro-zoe/micro-app 1.0.0-alpha.6 → 1.0.0-alpha.7

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.6';
+const version = '1.0.0-alpha.7';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -72,6 +72,12 @@ function isShadowRoot(target) {
 function isURL(target) {
     return target instanceof URL;
 }
+function isElement(target) {
+    return target instanceof Element;
+}
+function isNode(target) {
+    return target instanceof Node;
+}
 // is ProxyDocument
 function isProxyDocument(target) {
     return toString.call(target) === '[object ProxyDocument]';
@@ -483,6 +489,20 @@ function serialExecFiberTasks(tasks) {
 function isInlineScript(address) {
     return address.startsWith('inline-');
 }
+/**
+ * call function with try catch
+ * @param fn target function
+ * @param appName app.name
+ * @param args arguments
+ */
+function callFnWithTryCatch(fn, appName, msgSuffix, ...args) {
+    try {
+        isFunction(fn) && fn(...args);
+    }
+    catch (e) {
+        logError(`an error occurred in app ${appName} ${msgSuffix} \n`, null, e);
+    }
+}
 
 var ObservedAttrName;
 (function (ObservedAttrName) {
@@ -513,12 +533,38 @@ var lifeCycles;
     lifeCycles["AFTERSHOW"] = "aftershow";
     lifeCycles["AFTERHIDDEN"] = "afterhidden";
 })(lifeCycles || (lifeCycles = {}));
+// global event of child app
+var microGlobalEvent;
+(function (microGlobalEvent) {
+    microGlobalEvent["ONMOUNT"] = "onmount";
+    microGlobalEvent["ONUNMOUNT"] = "onunmount";
+})(microGlobalEvent || (microGlobalEvent = {}));
 // keep-alive status
 var keepAliveStates;
 (function (keepAliveStates) {
     keepAliveStates["KEEP_ALIVE_SHOW"] = "keep_alive_show";
     keepAliveStates["KEEP_ALIVE_HIDDEN"] = "keep_alive_hidden";
 })(keepAliveStates || (keepAliveStates = {}));
+// micro-app config
+var MicroAppConfig;
+(function (MicroAppConfig) {
+    MicroAppConfig["DESTROY"] = "destroy";
+    MicroAppConfig["DESTORY"] = "destory";
+    MicroAppConfig["INLINE"] = "inline";
+    MicroAppConfig["DISABLESCOPECSS"] = "disableScopecss";
+    MicroAppConfig["DISABLESANDBOX"] = "disableSandbox";
+    MicroAppConfig["DISABLE_SCOPECSS"] = "disable-scopecss";
+    MicroAppConfig["DISABLE_SANDBOX"] = "disable-sandbox";
+    MicroAppConfig["DISABLE_MEMORY_ROUTER"] = "disable-memory-router";
+    MicroAppConfig["DISABLE_PATCH_REQUEST"] = "disable-patch-request";
+    MicroAppConfig["KEEP_ROUTER_STATE"] = "keep-router-state";
+    MicroAppConfig["HIDDEN_ROUTER"] = "hidden-router";
+    MicroAppConfig["KEEP_ALIVE"] = "keep-alive";
+    MicroAppConfig["CLEAR_DATA"] = "clear-data";
+    MicroAppConfig["ESMODULE"] = "esmodule";
+    MicroAppConfig["SSR"] = "ssr";
+    MicroAppConfig["FIBER"] = "fiber";
+})(MicroAppConfig || (MicroAppConfig = {}));
 /**
  * global key must be static key, they can not rewrite
  * e.g.
@@ -1366,16 +1412,21 @@ function fixReactHMRConflict(app) {
 function throttleDeferForParentNode(proxyDocument) {
     const html = globalEnv.rawDocument.firstElementChild;
     if (html && html.parentNode !== proxyDocument) {
-        setRootParentNode(html, proxyDocument);
+        setParentNode(html, proxyDocument);
         defer(() => {
-            setRootParentNode(html, globalEnv.rawDocument);
+            setParentNode(html, globalEnv.rawDocument);
         });
     }
 }
-function setRootParentNode(root, value) {
-    const descriptor = Object.getOwnPropertyDescriptor(root, 'parentNode');
+/**
+ * Modify the point of parentNode
+ * @param target target Node
+ * @param value parentNode
+ */
+function setParentNode(target, value) {
+    const descriptor = Object.getOwnPropertyDescriptor(target, 'parentNode');
     if (!descriptor || descriptor.configurable) {
-        Object.defineProperty(root, 'parentNode', {
+        rawDefineProperty(target, 'parentNode', {
             value,
             configurable: true,
         });
@@ -1457,20 +1508,40 @@ function handleNewNode(parent, child, app) {
  * @param passiveChild second param of insertBefore and replaceChild
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
-    const hijackElement = getHijackElement(parent, app);
+    const hijackParent = getHijackParent(parent, app);
     /**
      * If passiveChild is not the child node, insertBefore replaceChild will have a problem, at this time, it will be degraded to appendChild
      * E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
      */
-    if (hijackElement) {
+    if (hijackParent) {
+        /**
+         * WARNING:
+         * Verifying that the parentNode of the targetChild points to document.body will cause other problems ?
+         */
+        if (hijackParent.tagName === 'MICRO-APP-BODY' && rawMethod !== globalEnv.rawRemoveChild) {
+            const descriptor = Object.getOwnPropertyDescriptor(targetChild, 'parentNode');
+            if (!descriptor || descriptor.configurable) {
+                rawDefineProperty(targetChild, 'parentNode', {
+                    configurable: true,
+                    get() {
+                        /**
+                         * When operate child from parentNode async, Element.prototype may reset
+                         * e.g.
+                         * target.parentNode.remove(target)
+                         */
+                        return Element.prototype.removeChild === globalEnv.rawRemoveChild ? hijackParent : document.body;
+                    },
+                });
+            }
+        }
         /**
          * 1. If passiveChild exists, it must be insertBefore or replaceChild
          * 2. When removeChild, targetChild may not be in microAppHead or head
          */
-        if (passiveChild && !hijackElement.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(hijackElement, targetChild);
+        if (passiveChild && !hijackParent.contains(passiveChild)) {
+            return globalEnv.rawAppendChild.call(hijackParent, targetChild);
         }
-        else if (rawMethod === globalEnv.rawRemoveChild && !hijackElement.contains(targetChild)) {
+        else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetChild)) {
             if (parent.contains(targetChild)) {
                 return rawMethod.call(parent, targetChild);
             }
@@ -1482,12 +1553,12 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             rawMethod === globalEnv.rawAppendChild) {
             fixReactHMRConflict(app);
         }
-        return invokeRawMethod(rawMethod, hijackElement, targetChild, passiveChild);
+        return invokeRawMethod(rawMethod, hijackParent, targetChild, passiveChild);
     }
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
 }
 // head/body map to micro-app-head/micro-app-body
-function getHijackElement(node, app) {
+function getHijackParent(node, app) {
     var _a, _b;
     if (node === document.head) {
         return (_a = app === null || app === void 0 ? void 0 : app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-head');
@@ -1520,13 +1591,13 @@ function getMappingNode(node) {
  */
 function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
     const currentAppName = getCurrentAppName();
-    if (newChild instanceof Node &&
+    if (isNode(newChild) &&
         (newChild.__MICRO_APP_NAME__ ||
             (currentAppName && !newChild.__PURE_ELEMENT__))) {
         newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
         if (app === null || app === void 0 ? void 0 : app.container) {
-            if (newChild instanceof Element) {
+            if (isElement(newChild)) {
                 if (/^(img|script)$/i.test(newChild.tagName)) {
                     if (newChild.hasAttribute('src')) {
                         globalEnv.rawSetAttribute.call(newChild, 'src', CompletionPath(newChild.getAttribute('src'), app.url));
@@ -1546,7 +1617,7 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
         }
     }
     else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        if (!(newChild instanceof Node) && currentAppName) {
+        if (!isNode(newChild) && currentAppName) {
             const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
                 if (parent === document.head) {
@@ -2551,6 +2622,37 @@ function extractSourceDom(htmlStr, app) {
 class EventCenter {
     constructor() {
         this.eventList = new Map();
+        this.queue = [];
+        this.recordStep = {};
+        // run task
+        this.process = () => {
+            var _a, _b;
+            let name;
+            const temRecordStep = this.recordStep;
+            const queue = this.queue;
+            this.recordStep = {};
+            this.queue = [];
+            while (name = queue.shift()) {
+                const eventInfo = this.eventList.get(name);
+                // clear tempData, force before exec nextStep
+                const tempData = eventInfo.tempData;
+                const force = eventInfo.force;
+                eventInfo.tempData = null;
+                eventInfo.force = false;
+                if (force || !this.isEqual(eventInfo.data, tempData)) {
+                    eventInfo.data = tempData || eventInfo.data;
+                    for (const f of eventInfo.callbacks) {
+                        f(eventInfo.data);
+                    }
+                    (_b = (_a = temRecordStep[name]).dispatchDataEvent) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    /**
+                     * WARING:
+                     * If data of other app is sent in nextStep, it may cause confusion of tempData and force
+                     */
+                    temRecordStep[name].nextStepList.forEach((nextStep) => nextStep());
+                }
+            }
+        };
     }
     // whether the name is legal
     isLegalName(name) {
@@ -2560,6 +2662,39 @@ class EventCenter {
         }
         return true;
     }
+    // add appName to queue
+    enqueue(name, nextStep, dispatchDataEvent) {
+        // this.nextStepList.push(nextStep)
+        if (this.recordStep[name]) {
+            this.recordStep[name].nextStepList.push(nextStep);
+            dispatchDataEvent && (this.recordStep[name].dispatchDataEvent = dispatchDataEvent);
+        }
+        else {
+            this.recordStep[name] = {
+                nextStepList: [nextStep],
+                dispatchDataEvent,
+            };
+        }
+        /**
+         * The micro task is executed async when the second render of child.
+         * We should ensure that the data changes are executed before binding the listening function
+         */
+        (!this.queue.includes(name) && this.queue.push(name) === 1) && defer(this.process);
+    }
+    /**
+     * In react, each setState will trigger setData, so we need a filter operation to avoid repeated trigger
+     */
+    isEqual(oldData, newData) {
+        if (!newData || Object.keys(oldData).length !== Object.keys(newData).length)
+            return false;
+        for (const key in oldData) {
+            if (Object.prototype.hasOwnProperty.call(oldData, key)) {
+                if (oldData[key] !== newData[key])
+                    return false;
+            }
+        }
+        return true;
+    }
     /**
      * add listener
      * @param name event name
@@ -2579,7 +2714,10 @@ class EventCenter {
                 };
                 this.eventList.set(name, eventInfo);
             }
-            else if (autoTrigger && Object.getOwnPropertyNames(eventInfo.data).length) {
+            else if (autoTrigger &&
+                Object.keys(eventInfo.data).length &&
+                (!this.queue.includes(name) ||
+                    this.isEqual(eventInfo.data, eventInfo.tempData))) {
                 // auto trigger when data not null
                 f(eventInfo.data);
             }
@@ -2600,21 +2738,27 @@ class EventCenter {
             }
         }
     }
+    /**
+     * clearData
+     */
+    clearData(name) {
+        if (this.isLegalName(name)) {
+            const eventInfo = this.eventList.get(name);
+            if (eventInfo) {
+                eventInfo.data = {};
+            }
+        }
+    }
     // dispatch data
-    dispatch(name, data) {
+    dispatch(name, data, nextStep, force, dispatchDataEvent) {
         if (this.isLegalName(name)) {
             if (!isPlainObject(data)) {
                 return logError('event-center: data must be object');
             }
             let eventInfo = this.eventList.get(name);
             if (eventInfo) {
-                // Update when the data is not equal
-                if (eventInfo.data !== data) {
-                    eventInfo.data = data;
-                    for (const f of eventInfo.callbacks) {
-                        f(data);
-                    }
-                }
+                eventInfo.tempData = assign({}, eventInfo.tempData || eventInfo.data, data);
+                !eventInfo.force && (eventInfo.force = !!force);
             }
             else {
                 eventInfo = {
@@ -2622,7 +2766,13 @@ class EventCenter {
                     callbacks: new Set(),
                 };
                 this.eventList.set(name, eventInfo);
+                /**
+                 * When sent data to parent, eventInfo probably does not exist, because parent may listen to datachange
+                 */
+                eventInfo.force = true;
             }
+            // add to queue, event eventInfo is null
+            this.enqueue(name, nextStep, dispatchDataEvent);
         }
     }
     // get data
@@ -2671,10 +2821,13 @@ class EventCenterForGlobal {
      * dispatch global data
      * @param data data
      */
-    setGlobalData(data) {
+    setGlobalData(data, nextStep, force) {
         // clear dom scope before dispatch global data, apply to micro app
         removeDomScope();
-        eventCenter.dispatch('global', data);
+        eventCenter.dispatch('global', data, () => isFunction(nextStep) && nextStep(), force);
+    }
+    forceSetGlobalData(data, nextStep) {
+        this.setGlobalData(data, nextStep, true);
     }
     /**
      * get global data
@@ -2682,6 +2835,12 @@ class EventCenterForGlobal {
     getGlobalData() {
         return eventCenter.getData('global');
     }
+    /**
+     * clear global data
+     */
+    clearGlobalData() {
+        eventCenter.clearData('global');
+    }
     /**
      * clear all listener of global data
      * if appName exists, only the specified functions is cleared
@@ -2732,8 +2891,19 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param appName app.name
      * @param data data
      */
-    setData(appName, data) {
-        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data);
+    setData(appName, data, nextStep, force) {
+        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data, () => isFunction(nextStep) && nextStep(), force);
+    }
+    forceSetData(appName, data, nextStep) {
+        this.setData(appName, data, nextStep, true);
+    }
+    /**
+     * clear data from base app
+     * @param appName app.name
+     * @param fromBaseApp whether clear data from child app, default is true
+     */
+    clearData(appName, fromBaseApp = true) {
+        eventCenter.clearData(formatEventName(formatAppName(appName), fromBaseApp));
     }
     /**
      * clear all listener for specified micro app
@@ -2769,25 +2939,36 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
     /**
      * get data from base app
      */
-    getData() {
-        return eventCenter.getData(formatEventName(this.appName, true));
+    getData(fromBaseApp = true) {
+        return eventCenter.getData(formatEventName(this.appName, fromBaseApp));
     }
     /**
      * dispatch data to base app
      * @param data data
      */
-    dispatch(data) {
+    dispatch(data, nextStep, force) {
         removeDomScope();
-        eventCenter.dispatch(formatEventName(this.appName, false), data);
-        const app = appInstanceMap.get(this.appName);
-        if ((app === null || app === void 0 ? void 0 : app.container) && isPlainObject(data)) {
-            const event = new CustomEvent('datachange', {
-                detail: {
-                    data,
-                }
-            });
-            getRootContainer(app.container).dispatchEvent(event);
-        }
+        eventCenter.dispatch(formatEventName(this.appName, false), data, () => isFunction(nextStep) && nextStep(), force, () => {
+            const app = appInstanceMap.get(this.appName);
+            if ((app === null || app === void 0 ? void 0 : app.container) && isPlainObject(data)) {
+                const event = new CustomEvent('datachange', {
+                    detail: {
+                        data: eventCenter.getData(formatEventName(this.appName, false))
+                    }
+                });
+                getRootContainer(app.container).dispatchEvent(event);
+            }
+        });
+    }
+    forceDispatch(data, nextStep) {
+        this.dispatch(data, nextStep, true);
+    }
+    /**
+     * clear data from child app
+     * @param fromBaseApp whether clear data from base app, default is false
+     */
+    clearData(fromBaseApp = false) {
+        eventCenter.clearData(formatEventName(this.appName, fromBaseApp));
     }
     /**
      * clear all listeners
@@ -4235,12 +4416,14 @@ class SandBox {
      * @param umdMode is umd mode
      * @param keepRouteState prevent reset route
      * @param clearEventSource clear MicroEventSource when destroy
+     * @param clearData clear data from base app
      */
-    stop({ umdMode, keepRouteState, clearEventSource, }) {
+    stop({ umdMode, keepRouteState, clearEventSource, clearData, }) {
         if (this.active) {
             this.releaseEffect();
             this.microAppWindow.microApp.clearDataListener();
             this.microAppWindow.microApp.clearGlobalDataListener();
+            clearData && this.microAppWindow.microApp.clearData();
             if (this.removeHistoryListener) {
                 this.clearRouteState(keepRouteState);
                 // release listener of popstate
@@ -4846,7 +5029,7 @@ class CreateApp {
                             this.sandBox.proxyWindow.__MICRO_APP_UMD_MODE__ = true;
                         // this.sandBox?.recordUmdSnapshot()
                         try {
-                            umdHookMountResult = this.umdHookMount();
+                            umdHookMountResult = this.umdHookMount(microApp.getData(this.name, true));
                         }
                         catch (e) {
                             logError('an error occurred in the mount function \n', this.name, e);
@@ -4890,6 +5073,9 @@ class CreateApp {
     dispatchMountedEvent() {
         if (appStates.UNMOUNT !== this.state) {
             this.state = appStates.MOUNTED;
+            // call window.onmount of child app
+            callFnWithTryCatch(this.getGlobalEventListener(microGlobalEvent.ONMOUNT), this.name, `window.${microGlobalEvent.ONMOUNT}`, microApp.getData(this.name, true));
+            // dispatch event mounted to parent
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
         }
     }
@@ -4899,7 +5085,7 @@ class CreateApp {
      * @param destroy completely destroy, delete cache resources
      * @param unmountcb callback of unmount
      */
-    unmount(destroy, unmountcb) {
+    unmount({ destroy, clearData, unmountcb, }) {
         if (this.state === appStates.LOAD_FAILED) {
             destroy = true;
         }
@@ -4914,15 +5100,17 @@ class CreateApp {
          */
         if (isFunction(this.umdHookUnmount)) {
             try {
-                umdHookUnmountResult = this.umdHookUnmount();
+                umdHookUnmountResult = this.umdHookUnmount(microApp.getData(this.name, true));
             }
             catch (e) {
                 logError('an error occurred in the unmount function \n', this.name, e);
             }
         }
+        // call window.onunmount of child app
+        callFnWithTryCatch(this.getGlobalEventListener(microGlobalEvent.ONUNMOUNT), this.name, `window.${microGlobalEvent.ONUNMOUNT}`);
         // dispatch unmount event to micro app
         dispatchCustomEventToMicroApp('unmount', this.name);
-        this.handleUnmounted(destroy, umdHookUnmountResult, unmountcb);
+        this.handleUnmounted(destroy, clearData, umdHookUnmountResult, unmountcb);
     }
     /**
      * handle for promise umdHookUnmount
@@ -4930,14 +5118,14 @@ class CreateApp {
      * @param umdHookUnmountResult result of umdHookUnmount
      * @param unmountcb callback of unmount
      */
-    handleUnmounted(destroy, umdHookUnmountResult, unmountcb) {
+    handleUnmounted(destroy, clearData, umdHookUnmountResult, unmountcb) {
         if (isPromise(umdHookUnmountResult)) {
             umdHookUnmountResult
-                .then(() => this.actionsForUnmount(destroy, unmountcb))
-                .catch(() => this.actionsForUnmount(destroy, unmountcb));
+                .then(() => this.actionsForUnmount(destroy, clearData, unmountcb))
+                .catch(() => this.actionsForUnmount(destroy, clearData, unmountcb));
         }
         else {
-            this.actionsForUnmount(destroy, unmountcb);
+            this.actionsForUnmount(destroy, clearData, unmountcb);
         }
     }
     /**
@@ -4945,7 +5133,7 @@ class CreateApp {
      * @param destroy completely destroy, delete cache resources
      * @param unmountcb callback of unmount
      */
-    actionsForUnmount(destroy, unmountcb) {
+    actionsForUnmount(destroy, clearData, unmountcb) {
         var _a, _b;
         if (destroy) {
             this.actionsForCompletelyDestroy();
@@ -4956,6 +5144,9 @@ class CreateApp {
         if (this.umdMode) {
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
         }
+        if (clearData || destroy) {
+            microApp.clearData(this.name);
+        }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
          * NOTE:
@@ -4966,6 +5157,7 @@ class CreateApp {
             umdMode: this.umdMode,
             keepRouteState: this.keepRouteState && !destroy,
             clearEventSource: !this.umdMode || destroy,
+            clearData: clearData || destroy,
         });
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
@@ -4981,10 +5173,11 @@ class CreateApp {
         if (!this.useSandbox && this.umdMode) {
             delete window[this.libraryName];
         }
+        sourceCenter.script.deleteInlineInfo(this.source.scripts);
         appInstanceMap.delete(this.name);
     }
     // hidden app when disconnectedCallback called with keep-alive
-    hiddenKeepAliveApp() {
+    hiddenKeepAliveApp(callback) {
         var _a;
         const oldContainer = this.container;
         cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
@@ -4999,6 +5192,7 @@ class CreateApp {
         dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
         // called after lifeCyclesEvent
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
+        callback && callback();
     }
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
@@ -5053,6 +5247,12 @@ class CreateApp {
         }
         return {};
     }
+    getGlobalEventListener(eventName) {
+        var _a;
+        // @ts-ignore
+        const listener = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow[eventName];
+        return isFunction(listener) ? listener : null;
+    }
 }
 
 /**
@@ -5088,7 +5288,7 @@ function defineElement(tagName) {
                             keepAliveStates.KEEP_ALIVE_HIDDEN !== existApp.getKeepAliveState() &&
                             !existApp.isPrefetch) {
                             this.setAttribute('name', this.appName);
-                            return logError(`app name conflict, an app named ${formatAttrName} is running`, this.appName);
+                            return logError(`app name conflict, an app named ${formatAttrName} is running`);
                         }
                     }
                     if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
@@ -5138,22 +5338,47 @@ function defineElement(tagName) {
             defer(() => {
                 if (this.connectStateMap.get(cacheCount)) {
                     dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED);
-                    this.initialMount();
+                    this.handleConnected();
                 }
             });
         }
         disconnectedCallback() {
             this.connectStateMap.set(this.connectedCount, false);
+            this.handleDisconnected();
+        }
+        /**
+         * Re render app from the command line
+         * MicroAppElement.reload(destroy)
+         */
+        reload(destroy) {
+            return new Promise((resolve) => {
+                const handleAfterReload = () => {
+                    this.removeEventListener(lifeCycles.MOUNTED, handleAfterReload);
+                    this.removeEventListener(lifeCycles.AFTERSHOW, handleAfterReload);
+                    resolve(true);
+                };
+                this.addEventListener(lifeCycles.MOUNTED, handleAfterReload);
+                this.addEventListener(lifeCycles.AFTERSHOW, handleAfterReload);
+                this.handleDisconnected(destroy, () => {
+                    this.handleConnected();
+                });
+            });
+        }
+        /**
+         * common action for unmount
+         * @param destroy reload param
+         */
+        handleDisconnected(destroy = false, callback) {
             const app = appInstanceMap.get(this.appName);
             if (app &&
                 app.getAppState() !== appStates.UNMOUNT &&
                 app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN) {
                 // keep-alive
-                if (this.getKeepAliveModeResult()) {
-                    this.handleHiddenKeepAliveApp();
+                if (this.getKeepAliveModeResult() && !destroy) {
+                    this.handleHiddenKeepAliveApp(callback);
                 }
                 else {
-                    this.handleUnmount(this.getDestroyCompatibleResult());
+                    this.handleUnmount(destroy || this.getDestroyCompatibleResult(), callback);
                 }
             }
         }
@@ -5191,12 +5416,12 @@ function defineElement(tagName) {
         }
         // handle for connectedCallback run before attributeChangedCallback
         handleInitialNameAndUrl() {
-            this.connectStateMap.get(this.connectedCount) && this.initialMount();
+            this.connectStateMap.get(this.connectedCount) && this.handleConnected();
         }
         /**
          * first mount of this app
          */
-        initialMount() {
+        handleConnected() {
             if (!this.appName || !this.appUrl)
                 return;
             if (this.getDisposeResult('shadowDOM') && !this.shadowRoot && isFunction(this.attachShadow)) {
@@ -5234,7 +5459,7 @@ function defineElement(tagName) {
                     this.handleCreateApp();
                 }
                 else {
-                    logError(`app name conflict, an app named: ${this.appName} with url: ${existAppUrl} is running`, this.appName);
+                    logError(`app name conflict, an app named: ${this.appName} with url: ${existAppUrl} is running`);
                 }
             }
             else {
@@ -5269,7 +5494,7 @@ function defineElement(tagName) {
                     }
                     else {
                         // the hidden keep-alive app is still active
-                        logError(`app name conflict, an app named ${this.appName} is running`, this.appName);
+                        logError(`app name conflict, an app named ${this.appName} is running`);
                     }
                 }
                 else if (existApp.url === this.appUrl && existApp.ssrUrl === this.ssrUrl) {
@@ -5296,6 +5521,27 @@ function defineElement(tagName) {
             }
             return true;
         }
+        // create app instance
+        handleCreateApp() {
+            var _a;
+            /**
+             * actions for destroy old app
+             * fix of unmounted umd app with disableSandbox
+             */
+            if (appInstanceMap.has(this.appName)) {
+                appInstanceMap.get(this.appName).actionsForCompletelyDestroy();
+            }
+            new CreateApp({
+                name: this.appName,
+                url: this.appUrl,
+                scopecss: this.isScopecss(),
+                useSandbox: this.isSandbox(),
+                inline: this.getDisposeResult('inline'),
+                esmodule: this.getDisposeResult('esmodule'),
+                container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
+                ssrUrl: this.ssrUrl,
+            });
+        }
         /**
          * mount app
          * some serious note before mount:
@@ -5325,45 +5571,29 @@ function defineElement(tagName) {
                 fiber: this.getDisposeResult('fiber'),
             });
         }
-        // create app instance
-        handleCreateApp() {
-            var _a;
-            /**
-             * actions for destroy old app
-             * fix of unmounted umd app with disableSandbox
-             */
-            if (appInstanceMap.has(this.appName)) {
-                appInstanceMap.get(this.appName).actionsForCompletelyDestroy();
-            }
-            new CreateApp({
-                name: this.appName,
-                url: this.appUrl,
-                scopecss: this.isScopecss(),
-                useSandbox: this.isSandbox(),
-                inline: this.getDisposeResult('inline'),
-                esmodule: this.getDisposeResult('esmodule'),
-                container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
-                ssrUrl: this.ssrUrl,
-            });
-        }
         /**
          * unmount app
          * @param destroy delete cache resources when unmount
          */
-        handleUnmount(destroy, unmountCb) {
+        handleUnmount(destroy, unmountcb) {
             const app = appInstanceMap.get(this.appName);
             if (app &&
                 app.getAppState() !== appStates.UNMOUNT) {
-                app.unmount(destroy, unmountCb);
+                app.unmount({
+                    destroy,
+                    clearData: this.getDisposeResult('clear-data'),
+                    unmountcb,
+                });
             }
         }
         // hidden app when disconnectedCallback called with keep-alive
-        handleHiddenKeepAliveApp() {
+        handleHiddenKeepAliveApp(callback) {
             const app = appInstanceMap.get(this.appName);
             if (app &&
                 app.getAppState() !== appStates.UNMOUNT &&
-                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN)
-                app.hiddenKeepAliveApp();
+                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                app.hiddenKeepAliveApp(callback);
+            }
         }
         // show app when connectedCallback called with keep-alive
         handleShowKeepAliveApp(app) {
@@ -5480,7 +5710,7 @@ function defineElement(tagName) {
             return null;
         }
     }
-    window.customElements.define(tagName, MicroAppElement);
+    globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
 }
 
 /**
@@ -5625,33 +5855,41 @@ function unmountApp(appName, options) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
                     app.actionsForCompletelyDestroy();
                 }
-                resolve();
+                resolve(true);
             }
             else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
-                    app.unmount(true, resolve);
+                    app.unmount({
+                        destroy: true,
+                        clearData: true,
+                        unmountcb: resolve.bind(null, true)
+                    });
                 }
                 else if (options === null || options === void 0 ? void 0 : options.clearAliveState) {
-                    app.unmount(false, resolve);
+                    app.unmount({
+                        destroy: false,
+                        clearData: !!options.clearData,
+                        unmountcb: resolve.bind(null, true)
+                    });
                 }
                 else {
-                    resolve();
+                    resolve(true);
                 }
             }
             else {
                 const container = getRootContainer(app.container);
                 const unmountHandler = () => {
-                    container.removeEventListener('unmount', unmountHandler);
-                    container.removeEventListener('afterhidden', afterhiddenHandler);
-                    resolve();
+                    container.removeEventListener(lifeCycles.UNMOUNT, unmountHandler);
+                    container.removeEventListener(lifeCycles.AFTERHIDDEN, afterhiddenHandler);
+                    resolve(true);
                 };
                 const afterhiddenHandler = () => {
-                    container.removeEventListener('unmount', unmountHandler);
-                    container.removeEventListener('afterhidden', afterhiddenHandler);
-                    resolve();
+                    container.removeEventListener(lifeCycles.UNMOUNT, unmountHandler);
+                    container.removeEventListener(lifeCycles.AFTERHIDDEN, afterhiddenHandler);
+                    resolve(true);
                 };
-                container.addEventListener('unmount', unmountHandler);
-                container.addEventListener('afterhidden', afterhiddenHandler);
+                container.addEventListener(lifeCycles.UNMOUNT, unmountHandler);
+                container.addEventListener(lifeCycles.AFTERHIDDEN, afterhiddenHandler);
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
                     let destroyAttrValue, destoryAttrValue;
                     container.hasAttribute('destroy') && (destroyAttrValue = container.getAttribute('destroy'));
@@ -5659,37 +5897,131 @@ function unmountApp(appName, options) {
                     container.setAttribute('destroy', 'true');
                     container.parentNode.removeChild(container);
                     container.removeAttribute('destroy');
-                    typeof destroyAttrValue === 'string' && container.setAttribute('destroy', destroyAttrValue);
-                    typeof destoryAttrValue === 'string' && container.setAttribute('destory', destoryAttrValue);
+                    isString(destroyAttrValue) && container.setAttribute('destroy', destroyAttrValue);
+                    isString(destoryAttrValue) && container.setAttribute('destory', destoryAttrValue);
                 }
                 else if ((options === null || options === void 0 ? void 0 : options.clearAliveState) && container.hasAttribute('keep-alive')) {
                     const keepAliveAttrValue = container.getAttribute('keep-alive');
                     container.removeAttribute('keep-alive');
+                    let clearDataAttrValue;
+                    if (options.clearData) {
+                        clearDataAttrValue = container.getAttribute('clear-data');
+                        container.setAttribute('clear-data', 'true');
+                    }
                     container.parentNode.removeChild(container);
                     container.setAttribute('keep-alive', keepAliveAttrValue);
+                    isString(clearDataAttrValue) && container.setAttribute('clear-data', clearDataAttrValue);
                 }
                 else {
+                    let clearDataAttrValue;
+                    if (options === null || options === void 0 ? void 0 : options.clearData) {
+                        clearDataAttrValue = container.getAttribute('clear-data');
+                        container.setAttribute('clear-data', 'true');
+                    }
                     container.parentNode.removeChild(container);
+                    isString(clearDataAttrValue) && container.setAttribute('clear-data', clearDataAttrValue);
                 }
             }
         }
         else {
             logWarn(`app ${appName} does not exist`);
-            resolve();
+            resolve(false);
         }
     });
 }
 // unmount all apps in turn
 function unmountAllApps(options) {
-    return Array.from(appInstanceMap.keys()).reduce((pre, next) => pre.then(() => unmountApp(next, options)), Promise.resolve());
+    return Array.from(appInstanceMap.keys()).reduce((pre, next) => pre.then(() => unmountApp(next, options)), Promise.resolve(true));
+}
+/**
+ * Re render app from the command line
+ * microApp.reload(destroy)
+ * @param appName app.name
+ * @param destroy unmount app with destroy mode
+ * @returns Promise<boolean>
+ */
+function reload(appName, destroy) {
+    return new Promise((resolve) => {
+        const app = appInstanceMap.get(formatAppName(appName));
+        if (app) {
+            const rootContainer = app.container && getRootContainer(app.container);
+            if (rootContainer) {
+                resolve(rootContainer.reload(destroy));
+            }
+            else {
+                logWarn(`app ${appName} is not rendered, cannot use reload`);
+                resolve(false);
+            }
+        }
+        else {
+            logWarn(`app ${appName} does not exist`);
+            resolve(false);
+        }
+    });
+}
+/**
+ * Manually render app
+ * @param options RenderAppOptions
+ * @returns Promise<boolean>
+ */
+function renderApp(options) {
+    return new Promise((resolve) => {
+        if (!isPlainObject(options))
+            return logError('renderApp options must be an object');
+        const container = isElement(options.container) ? options.container : isString(options.container) ? document.querySelector(options.container) : null;
+        if (!isElement(container))
+            return logError('Target container is not a DOM element.');
+        const microAppElement = pureCreateElement(microApp.tagName);
+        for (const attr in options) {
+            if (attr === 'onDataChange') {
+                if (isFunction(options[attr])) {
+                    microAppElement.addEventListener('datachange', options[attr]);
+                }
+            }
+            else if (attr === 'lifeCycles') {
+                const lifeCycleConfig = options[attr];
+                if (isPlainObject(lifeCycleConfig)) {
+                    for (const lifeName in lifeCycleConfig) {
+                        if (lifeName.toUpperCase() in lifeCycles && isFunction(lifeCycleConfig[lifeName])) {
+                            microAppElement.addEventListener(lifeName.toLowerCase(), lifeCycleConfig[lifeName]);
+                        }
+                    }
+                }
+            }
+            else if (attr !== 'container') {
+                microAppElement.setAttribute(attr, options[attr]);
+            }
+        }
+        const handleMount = () => {
+            releaseListener();
+            resolve(true);
+        };
+        const handleError = () => {
+            releaseListener();
+            resolve(false);
+        };
+        const releaseListener = () => {
+            microAppElement.removeEventListener(lifeCycles.MOUNTED, handleMount);
+            microAppElement.removeEventListener(lifeCycles.ERROR, handleError);
+        };
+        microAppElement.addEventListener(lifeCycles.MOUNTED, handleMount);
+        microAppElement.addEventListener(lifeCycles.ERROR, handleError);
+        container.appendChild(microAppElement);
+    });
 }
 class MicroApp extends EventCenterForBaseApp {
     constructor() {
         super(...arguments);
         this.tagName = 'micro-app';
         this.options = {};
-        this.preFetch = preFetch;
         this.router = router;
+        this.preFetch = preFetch;
+        this.unmountApp = unmountApp;
+        this.unmountAllApps = unmountAllApps;
+        this.getActiveApps = getActiveApps;
+        this.getAllApps = getAllApps;
+        this.reload = reload;
+        this.renderApp = renderApp;
     }
     start(options) {
         var _a, _b;
@@ -5733,8 +6065,8 @@ class MicroApp extends EventCenterForBaseApp {
         defineElement(this.tagName);
     }
 }
-var microApp = new MicroApp();
+const microApp = new MicroApp();
 
 export default microApp;
-export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, unmountAllApps, unmountApp, version };
+export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, reload, removeDomScope, renderApp, unmountAllApps, unmountApp, version };
 //# sourceMappingURL=index.esm.js.map