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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.6';
+const version = '1.0.0-alpha.9';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -33,6 +33,10 @@ function isString(target) {
 function isBoolean(target) {
     return typeof target === 'boolean';
 }
+// is Number
+function isNumber(target) {
+    return typeof target === 'number';
+}
 // is function
 function isFunction(target) {
     return typeof target === 'function';
@@ -72,6 +76,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]';
@@ -334,7 +344,8 @@ function isInvalidQuerySelectorKey(key) {
 function isUniqueElement(key) {
     return (/^body$/i.test(key) ||
         /^head$/i.test(key) ||
-        /^html$/i.test(key));
+        /^html$/i.test(key) ||
+        /^title$/i.test(key));
 }
 /**
  * get micro-app element
@@ -483,6 +494,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 +538,39 @@ 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 = {}));
+const PREFETCH_LEVEL = [1, 2, 3];
 /**
  * global key must be static key, they can not rewrite
  * e.g.
@@ -527,7 +579,7 @@ var keepAliveStates;
  * NOTE:
  * 1. Do not add fetch, XMLHttpRequest, EventSource
  */
-const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,Document,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
+const globalKeyToBeCached = 'window,self,globalThis,document,Document,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
 
 /**
  * fetch source of html, js, css
@@ -1319,10 +1371,9 @@ class Adapter {
         ];
         this.injectReactHRMProperty();
     }
-    // TODO: __DEV__ process.env.NODE_ENV !== 'production'
     // adapter for react
     injectReactHRMProperty() {
-        if (process.env.NODE_ENV !== 'production') {
+        if ((process.env.NODE_ENV !== 'production')) {
             // react child in non-react env
             this.staticEscapeProperties.push('__REACT_ERROR_OVERLAY_GLOBAL_HOOK__');
             // in react parent
@@ -1346,7 +1397,7 @@ function fixBabelPolyfill6() {
  */
 function fixReactHMRConflict(app) {
     var _a;
-    if (process.env.NODE_ENV !== 'production') {
+    if ((process.env.NODE_ENV !== 'production')) {
         const rawReactErrorHook = globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
         const childReactErrorHook = (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
         if (rawReactErrorHook && childReactErrorHook) {
@@ -1366,16 +1417,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,37 +1513,56 @@ 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, may have been unmount
+                         * e.g.
+                         * target.parentNode.remove(target)
+                         */
+                        return !app.container ? 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);
             }
             return targetChild;
         }
-        // TODO: __DEV__
-        if (process.env.NODE_ENV !== 'production' &&
+        if ((process.env.NODE_ENV !== 'production') &&
             targetChild instanceof HTMLIFrameElement &&
             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 +1595,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 +1621,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) {
@@ -1593,7 +1668,6 @@ function patchElementPrototypeMethods() {
     };
     // prototype methods of delete element👇
     Element.prototype.removeChild = function removeChild(oldChild) {
-        var _a;
         if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
             const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
@@ -1602,8 +1676,8 @@ function patchElementPrototypeMethods() {
             try {
                 return globalEnv.rawRemoveChild.call(this, oldChild);
             }
-            catch (_b) {
-                return (_a = oldChild === null || oldChild === void 0 ? void 0 : oldChild.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(oldChild);
+            catch (_a) {
+                return ((oldChild === null || oldChild === void 0 ? void 0 : oldChild.parentNode) && globalEnv.rawRemoveChild.call(oldChild.parentNode, oldChild));
             }
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
@@ -2142,7 +2216,7 @@ function fetchScriptsFromHtml(wrapElement, app) {
     for (const address of scriptList) {
         const scriptInfo = sourceCenter.script.getInfo(address);
         const appSpaceData = scriptInfo.appSpace[app.name];
-        if ((!appSpaceData.defer && !appSpaceData.async) || app.isPrefetch) {
+        if ((!appSpaceData.defer && !appSpaceData.async) || (app.isPrefetch && !app.isPrerender)) {
             fetchScriptPromise.push(scriptInfo.code ? scriptInfo.code : fetchSource(address, app.name));
             fetchScriptPromiseInfo.push([address, scriptInfo]);
         }
@@ -2183,7 +2257,7 @@ function fetchScriptSuccess(address, scriptInfo, code, app) {
      * 2. if app is inline or script is esmodule, skip this step
      * 3. if global parseResult not exist, the current script occupies the position, when js is reused, parseResult is reference
      */
-    if (app.isPrefetch) {
+    if (app.isPrefetch && app.prefetchLevel === 2) {
         const appSpaceData = scriptInfo.appSpace[app.name];
         /**
          * When prefetch app is replaced by a new app in the processing phase, since the scriptInfo is common, when the scriptInfo of the prefetch app is processed, it may have already been processed.
@@ -2503,12 +2577,20 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
         else if (dom instanceof HTMLScriptElement) {
             extractScriptElement(dom, parent, app);
         }
-        else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
-            parent.removeChild(dom);
-        }
         else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
             dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
         }
+        /**
+         * Don't remove meta and title, they have some special scenes
+         * e.g.
+         * document.querySelector('meta[name="viewport"]') // for flexible
+         * document.querySelector('meta[name="baseurl"]').baseurl // for api request
+         *
+         * Title point to main app title, child app title used to be compatible with some special scenes
+         */
+        // else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
+        //   parent.removeChild(dom)
+        // }
     }
 }
 /**
@@ -2551,6 +2633,39 @@ 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;
+                let resArr;
+                if (force || !this.isEqual(eventInfo.data, tempData)) {
+                    eventInfo.data = tempData || eventInfo.data;
+                    for (const f of eventInfo.callbacks) {
+                        const res = f(eventInfo.data);
+                        res && (resArr !== null && resArr !== void 0 ? resArr : (resArr = [])).push(res);
+                    }
+                    (_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(resArr));
+                }
+            }
+        };
     }
     // whether the name is legal
     isLegalName(name) {
@@ -2560,6 +2675,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 +2727,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 +2751,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 +2779,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 +2834,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, (resArr) => isFunction(nextStep) && nextStep(resArr), force);
+    }
+    forceSetGlobalData(data, nextStep) {
+        this.setGlobalData(data, nextStep, true);
     }
     /**
      * get global data
@@ -2682,6 +2848,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 +2904,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, (resArr) => isFunction(nextStep) && nextStep(resArr), 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 +2952,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, (resArr) => isFunction(nextStep) && nextStep(resArr), 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
@@ -2977,12 +3171,14 @@ function effectDocumentEvent() {
     const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
     !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
     document.addEventListener = function (type, listener, options) {
-        var _a;
         const appName = getCurrentAppName();
         /**
          * ignore bound function of document event in umd mode, used to solve problem of react global events
+         * update in 2022-09-02:
+         * boundFunction is no longer exclude, because events in UMD mode will not cleared from v1.0.0-alpha.4
+         * if (appName && !(appInstanceMap.get(appName)?.umdMode && isBoundFunction(listener))) {
          */
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
+        if (appName) {
             const appListenersMap = documentEventListenerMap.get(appName);
             if (appListenersMap) {
                 const appListenerList = appListenersMap.get(type);
@@ -3001,9 +3197,13 @@ function effectDocumentEvent() {
         rawDocumentAddEventListener.call(rawDocument, type, listener, options);
     };
     document.removeEventListener = function (type, listener, options) {
-        var _a;
         const appName = getCurrentAppName();
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
+        /**
+         * update in 2022-09-02:
+         * boundFunction is no longer exclude, because events in UMD mode will not cleared from v1.0.0-alpha.4
+         * if (appName && !(appInstanceMap.get(appName)?.umdMode && isBoundFunction(listener))) {
+         */
+        if (appName) {
             const appListenersMap = documentEventListenerMap.get(appName);
             if (appListenersMap) {
                 const appListenerList = appListenersMap.get(type);
@@ -3068,69 +3268,80 @@ function effect(appName, microAppWindow) {
         timeoutIdMap.delete(timeoutId);
         rawClearTimeout.call(rawWindow, timeoutId);
     };
-    const umdWindowListenerMap = new Map();
-    const umdDocumentListenerMap = new Map();
-    let umdIntervalIdMap = new Map();
-    let umdTimeoutIdMap = new Map();
-    let umdOnClickHandler;
-    const clearUmdSnapshotData = () => {
-        umdWindowListenerMap.clear();
-        umdIntervalIdMap.clear();
-        umdTimeoutIdMap.clear();
-        umdDocumentListenerMap.clear();
-        umdOnClickHandler = null;
+    const sstWindowListenerMap = new Map();
+    const sstDocumentListenerMap = new Map();
+    let sstIntervalIdMap = new Map();
+    let sstTimeoutIdMap = new Map();
+    let sstOnClickHandler;
+    const clearSnapshotData = () => {
+        sstWindowListenerMap.clear();
+        sstIntervalIdMap.clear();
+        sstTimeoutIdMap.clear();
+        sstDocumentListenerMap.clear();
+        sstOnClickHandler = null;
     };
-    // record event and timer before exec umdMountHook
-    const recordUmdEffect = () => {
+    /**
+     * record event and timer
+     * Scenes:
+     * 1. exec umdMountHook in umd mode
+     * 2. hidden keep-alive app
+     * 3. after init prerender app
+     */
+    const recordEffect = () => {
         // record window event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
-                umdWindowListenerMap.set(type, new Set(listenerList));
+                sstWindowListenerMap.set(type, new Set(listenerList));
             }
         });
         // record timers
         if (intervalIdMap.size) {
-            umdIntervalIdMap = new Map(intervalIdMap);
+            sstIntervalIdMap = new Map(intervalIdMap);
         }
         if (timeoutIdMap.size) {
-            umdTimeoutIdMap = new Map(timeoutIdMap);
+            sstTimeoutIdMap = new Map(timeoutIdMap);
         }
         // record onclick handler
-        umdOnClickHandler = documentClickListMap.get(appName);
+        sstOnClickHandler = documentClickListMap.get(appName);
         // record document event
         const documentAppListenersMap = documentEventListenerMap.get(appName);
         if (documentAppListenersMap) {
             documentAppListenersMap.forEach((listenerList, type) => {
                 if (listenerList.size) {
-                    umdDocumentListenerMap.set(type, new Set(listenerList));
+                    sstDocumentListenerMap.set(type, new Set(listenerList));
                 }
             });
         }
     };
-    // rebuild event and timer before remount umd app
-    const rebuildUmdEffect = () => {
+    // rebuild event and timer before remount app
+    const rebuildEffect = () => {
         // rebuild window event
-        umdWindowListenerMap.forEach((listenerList, type) => {
+        sstWindowListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
                 microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
         });
         // rebuild timer
-        umdIntervalIdMap.forEach((info) => {
+        sstIntervalIdMap.forEach((info) => {
             microAppWindow.setInterval(info.handler, info.timeout, ...info.args);
         });
-        umdTimeoutIdMap.forEach((info) => {
+        sstTimeoutIdMap.forEach((info) => {
             microAppWindow.setTimeout(info.handler, info.timeout, ...info.args);
         });
         // rebuild onclick event
-        umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
-        // rebuild document event
-        umdDocumentListenerMap.forEach((listenerList, type) => {
+        sstOnClickHandler && documentClickListMap.set(appName, sstOnClickHandler);
+        /**
+         * rebuild document event
+         * WARNING!!: do not delete setCurrentAppName & removeDomScope
+         */
+        setCurrentAppName(appName);
+        sstDocumentListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
                 document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
         });
-        clearUmdSnapshotData();
+        removeDomScope();
+        clearSnapshotData();
     };
     // release all event listener & interval & timeout when unmount app
     const releaseEffect = () => {
@@ -3170,8 +3381,8 @@ function effect(appName, microAppWindow) {
         }
     };
     return {
-        recordUmdEffect,
-        rebuildUmdEffect,
+        recordEffect,
+        rebuildEffect,
         releaseEffect,
     };
 }
@@ -3197,7 +3408,6 @@ function removeMicroState(appName, rawState) {
             delete rawState.microAppState;
         }
     }
-    // 生成新的state对象
     return assign({}, rawState);
 }
 // get micro app state form origin state
@@ -3209,12 +3419,15 @@ const ENC_AD_RE = /&/g; // %M1
 const ENC_EQ_RE = /=/g; // %M2
 const DEC_AD_RE = /%M1/g; // &
 const DEC_EQ_RE = /%M2/g; // =
+// encode path with special symbol
 function encodeMicroPath(path) {
     return encodeURIComponent(commonDecode(path).replace(ENC_AD_RE, '%M1').replace(ENC_EQ_RE, '%M2'));
 }
+// decode path
 function decodeMicroPath(path) {
     return commonDecode(path).replace(DEC_AD_RE, '&').replace(DEC_EQ_RE, '=');
 }
+// Recursively resolve address
 function commonDecode(path) {
     try {
         const decPath = decodeURIComponent(path);
@@ -3226,12 +3439,15 @@ function commonDecode(path) {
         return path;
     }
 }
-// 格式化query参数key，防止与原有参数的冲突
+// Format the query parameter key to prevent conflicts with the original parameters
 function formatQueryAppName(appName) {
     // return `app-${appName}`
     return appName;
 }
-// 根据浏览器url参数，获取当前子应用的path
+/**
+ * Get app fullPath from browser url
+ * @param appName app.name
+ */
 function getMicroPathFromURL(appName) {
     var _a, _b;
     const rawLocation = globalEnv.rawWindow.location;
@@ -3239,15 +3455,23 @@ function getMicroPathFromURL(appName) {
     const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
     return isString(microPath) ? decodeMicroPath(microPath) : null;
 }
-// 将name=encodeUrl地址插入到浏览器url上
+/**
+ * Attach child app fullPath to browser url
+ * @param appName app.name
+ * @param microLocation location of child app
+ */
 function setMicroPathToURL(appName, microLocation) {
     let { pathname, search, hash } = globalEnv.rawWindow.location;
     const queryObject = getQueryObjectFromURL(search, hash);
     const encodedMicroPath = encodeMicroPath(microLocation.pathname +
         microLocation.search +
         microLocation.hash);
-    let isAttach2Hash = false; // 基座是否是hash模式，这个其实也不准，只是表示参数加到了hash上
-    // hash存在且search不存在，则认为是hash路由
+    /**
+     * Is parent is hash router
+     * In fact, this is not true. It just means that the parameter is added to the hash
+     */
+    let isAttach2Hash = false;
+    // If hash exists and search does not exist, it is considered as a hash route
     if (hash && !search) {
         isAttach2Hash = true;
         if (queryObject.hashQuery) {
@@ -3277,7 +3501,11 @@ function setMicroPathToURL(appName, microLocation) {
         isAttach2Hash,
     };
 }
-// 将name=encodeUrl的参数从浏览器url上删除
+/**
+ * Delete child app fullPath from browser url
+ * @param appName app.name
+ * @param targetLocation target Location, default is rawLocation
+ */
 function removeMicroPathFromURL(appName, targetLocation) {
     var _a, _b, _c, _d;
     let { pathname, search, hash } = targetLocation || globalEnv.rawWindow.location;
@@ -3300,7 +3528,7 @@ function removeMicroPathFromURL(appName, targetLocation) {
     };
 }
 /**
- * 根据location获取query对象
+ * Format search, hash to object
  */
 function getQueryObjectFromURL(search, hash) {
     const queryObject = {};
@@ -3322,6 +3550,18 @@ function getNoHashMicroPathFromURL(appName, baseUrl) {
     const formatLocation = createURL(microPath, baseUrl);
     return formatLocation.origin + formatLocation.pathname + formatLocation.search;
 }
+/**
+ * Effect app is an app that can perform route navigation
+ * NOTE: Invalid app action
+ * 1. prevent update browser url, dispatch popStateEvent, reload browser
+ * 2. It can update path with pushState/replaceState
+ * 3. Can not update path outside (with router api)
+ * 3. Can not update path by location
+ */
+function isEffectiveApp(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && !app.isPrefetch);
+}
 
 /**
  * dispatch PopStateEvent & HashChangeEvent to child app
@@ -3338,7 +3578,8 @@ function addHistoryListener(appName) {
          * 1. unmount app & hidden keep-alive app will not receive popstate event
          * 2. filter out onlyForBrowser
          */
-        if (getActiveApps(true).includes(appName) && !e.onlyForBrowser) {
+        if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName) &&
+            !e.onlyForBrowser) {
             const microPath = getMicroPathFromURL(appName);
             const app = appInstanceMap.get(appName);
             const proxyWindow = app.sandBox.proxyWindow;
@@ -3426,15 +3667,18 @@ function dispatchNativeHashChangeEvent(oldHref) {
 }
 /**
  * dispatch popstate & hashchange event to browser
+ * @param appName app.name
  * @param onlyForBrowser only dispatch event to browser
  * @param oldHref old href of rawWindow.location
  */
-function dispatchNativeEvent(onlyForBrowser, oldHref) {
+function dispatchNativeEvent(appName, onlyForBrowser, oldHref) {
     // clear element scope before dispatch global event
     removeDomScope();
-    dispatchNativePopStateEvent(onlyForBrowser);
-    if (oldHref) {
-        dispatchNativeHashChangeEvent(oldHref);
+    if (isEffectiveApp(appName)) {
+        dispatchNativePopStateEvent(onlyForBrowser);
+        if (oldHref) {
+            dispatchNativeHashChangeEvent(oldHref);
+        }
     }
 }
 
@@ -3451,7 +3695,7 @@ function createMicroHistory(appName, microLocation) {
             if (isString(rests[2]) || isURL(rests[2])) {
                 const targetLocation = createURL(rests[2], microLocation.href);
                 if (targetLocation.origin === microLocation.origin) {
-                    navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
+                    navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
                     const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
                     if (targetFullPath !== microLocation.fullPath) {
                         updateMicroLocation(appName, targetFullPath, microLocation);
@@ -3459,7 +3703,7 @@ function createMicroHistory(appName, microLocation) {
                     return void 0;
                 }
             }
-            nativeHistoryNavigate(methodName, rests[2], rests[0], rests[1]);
+            nativeHistoryNavigate(appName, methodName, rests[2], rests[0], rests[1]);
         };
     }
     const pushState = getMicroHistoryMethod('pushState');
@@ -3491,14 +3735,17 @@ function createMicroHistory(appName, microLocation) {
 }
 /**
  * navigate to new path base on native method of history
+ * @param appName app.name
  * @param methodName pushState/replaceState
  * @param fullPath full path
  * @param state history.state, default is null
  * @param title history.title, default is ''
  */
-function nativeHistoryNavigate(methodName, fullPath, state = null, title = '') {
-    const method = methodName === 'pushState' ? globalEnv.rawPushState : globalEnv.rawReplaceState;
-    method.call(globalEnv.rawWindow.history, state, title, fullPath);
+function nativeHistoryNavigate(appName, methodName, fullPath, state = null, title = '') {
+    if (isEffectiveApp(appName)) {
+        const method = methodName === 'pushState' ? globalEnv.rawPushState : globalEnv.rawReplaceState;
+        method.call(globalEnv.rawWindow.history, state, title, fullPath);
+    }
 }
 /**
  * Navigate to new path, and dispatch native popStateEvent/hashChangeEvent to browser
@@ -3507,29 +3754,33 @@ function nativeHistoryNavigate(methodName, fullPath, state = null, title = '') {
  * 2. proxyHistory.pushState/replaceState with limited popstateEvent
  * 3. api microApp.router.push/replace
  * 4. proxyLocation.hash = xxx
+ * @param appName app.name
  * @param methodName pushState/replaceState
  * @param result result of add/remove microApp path on browser url
  * @param onlyForBrowser only dispatch event to browser
  * @param state history.state, not required
  * @param title history.title, not required
  */
-function navigateWithNativeEvent(methodName, result, onlyForBrowser, state, title) {
-    const rawLocation = globalEnv.rawWindow.location;
-    const oldFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
-    const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
-    // navigate with native history method
-    nativeHistoryNavigate(methodName, result.fullPath, state, title);
-    if (oldFullPath !== result.fullPath)
-        dispatchNativeEvent(onlyForBrowser, oldHref);
+function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, state, title) {
+    if (isEffectiveApp(appName)) {
+        const rawLocation = globalEnv.rawWindow.location;
+        const oldFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
+        const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
+        // navigate with native history method
+        nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
+        if (oldFullPath !== result.fullPath)
+            dispatchNativeEvent(appName, onlyForBrowser, oldHref);
+    }
 }
 /**
  * update browser url when mount/unmount/hidden/show/attachToURL/attachAllToURL
  * just attach microRoute info to browser, dispatch event to base app(exclude child)
+ * @param appName app.name
  * @param result result of add/remove microApp path on browser url
  * @param state history.state
  */
-function attachRouteToBrowserURL(result, state) {
-    navigateWithNativeEvent('replaceState', result, true, state);
+function attachRouteToBrowserURL(appName, result, state) {
+    navigateWithNativeEvent(appName, 'replaceState', result, true, state);
 }
 /**
  * When path is same, keep the microAppState in history.state
@@ -3559,10 +3810,13 @@ function reWriteHistoryMethod(method) {
          * 2. Unable to catch when base app navigate with location
          * 3. When in nest app, rawPushState/rawReplaceState has been modified by parent
          */
-        getActiveApps(true).forEach(appName => {
+        getActiveApps({
+            excludeHiddenApp: true,
+            excludePreRender: true,
+        }).forEach(appName => {
             const app = appInstanceMap.get(appName);
             if (app.sandBox && app.useMemoryRouter && !getMicroPathFromURL(appName)) {
-                attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+                attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
             }
         });
         // fix bug for nest app
@@ -3594,7 +3848,7 @@ function createRouterApi() {
      * @param state to.state
      */
     function navigateWithRawHistory(appName, methodName, targetLocation, state) {
-        navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, state !== null && state !== void 0 ? state : null));
+        navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, state !== null && state !== void 0 ? state : null));
         // clear element scope after navigate
         removeDomScope();
     }
@@ -3615,7 +3869,7 @@ function createRouterApi() {
                     return logError(`navigation failed, memory router of app ${appName} is closed`);
                 }
                 // active apps, include hidden keep-alive app
-                if (getActiveApps().includes(appName)) {
+                if (getActiveApps({ excludePreRender: true }).includes(appName)) {
                     const microLocation = app.sandBox.proxyWindow.location;
                     const targetLocation = createURL(to.path, microLocation.href);
                     // Only get path data, even if the origin is different from microApp
@@ -3698,7 +3952,7 @@ function createRouterApi() {
     function commonHandlerForAttachToURL(appName) {
         const app = appInstanceMap.get(appName);
         if (app.sandBox && app.useMemoryRouter) {
-            attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+            attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
         }
     }
     /**
@@ -3713,10 +3967,14 @@ function createRouterApi() {
     }
     /**
      * Attach all active app router info to browser url
-     * exclude hidden keep-alive app
+     * @param includeHiddenApp include hidden keep-alive app
+     * @param includePreRender include preRender app
      */
-    function attachAllToURL(includeHiddenApp = false) {
-        getActiveApps(!includeHiddenApp).forEach(appName => commonHandlerForAttachToURL(appName));
+    function attachAllToURL({ includeHiddenApp = false, includePreRender = false, }) {
+        getActiveApps({
+            excludeHiddenApp: !includeHiddenApp,
+            excludePreRender: !includePreRender,
+        }).forEach(appName => commonHandlerForAttachToURL(appName));
     }
     function createDefaultPageApi() {
         // defaultPage data
@@ -3731,7 +3989,7 @@ function createRouterApi() {
         function setDefaultPage(options) {
             const appName = formatAppName(options.name);
             if (!appName || !options.path) {
-                if (process.env.NODE_ENV !== 'production') {
+                if ((process.env.NODE_ENV !== 'production')) {
                     if (!appName) {
                         logWarn(`setDefaultPage: invalid appName "${appName}"`);
                     }
@@ -3774,7 +4032,7 @@ function createRouterApi() {
                     }
                 });
             }
-            else if (process.env.NODE_ENV !== 'production') {
+            else if ((process.env.NODE_ENV !== 'production')) {
                 logWarn('setBaseAppRouter: Invalid base router');
             }
         }
@@ -3842,13 +4100,13 @@ function createMicroLocation(appName, url) {
                 if (targetLocation.hash !== shadowLocation.hash) {
                     if (setMicroPathResult.isAttach2Hash)
                         oldHref = rawLocation.href;
-                    nativeHistoryNavigate(methodName, setMicroPathResult.fullPath);
+                    nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
                 }
                 if (targetLocation.hash) {
-                    dispatchNativeEvent(false, oldHref);
+                    dispatchNativeEvent(appName, false, oldHref);
                 }
                 else {
-                    rawLocation.reload();
+                    rawReload();
                 }
                 return void 0;
                 /**
@@ -3857,8 +4115,8 @@ function createMicroLocation(appName, url) {
                  */
             }
             else if (setMicroPathResult.isAttach2Hash) {
-                nativeHistoryNavigate(methodName, setMicroPathResult.fullPath);
-                rawLocation.reload();
+                nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
+                rawReload();
                 return void 0;
             }
             value = setMicroPathResult.fullPath;
@@ -3888,7 +4146,7 @@ function createMicroLocation(appName, url) {
         // When the browser url has a hash value, the same pathname/search will not refresh browser
         if (targetLocation[key] === shadowLocation[key] && shadowLocation.hash) {
             // The href has not changed, not need to dispatch hashchange event
-            dispatchNativeEvent(false);
+            dispatchNativeEvent(appName, false);
         }
         else {
             /**
@@ -3897,19 +4155,24 @@ function createMicroLocation(appName, url) {
              * pathname: /path ==> /path#hash, /path ==> /path?query
              * search: ?query ==> ?query#hash
              */
-            nativeHistoryNavigate(targetLocation[key] === shadowLocation[key] ? 'replaceState' : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath);
-            rawLocation.reload();
+            nativeHistoryNavigate(appName, targetLocation[key] === shadowLocation[key] ? 'replaceState' : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath);
+            rawReload();
         }
     }
+    function rawReload() {
+        isEffectiveApp(appName) && rawLocation.reload();
+    }
     /**
      * Special processing for four keys: href, pathname, search and hash
      * They take values from shadowLocation, and require special operations when assigning values
      */
     rawDefineProperties(microLocation, {
         href: createPropertyDescriptor(() => shadowLocation.href, (value) => {
-            const targetPath = commonHandler(value, 'pushState');
-            if (targetPath)
-                rawLocation.href = targetPath;
+            if (isEffectiveApp(appName)) {
+                const targetPath = commonHandler(value, 'pushState');
+                if (targetPath)
+                    rawLocation.href = targetPath;
+            }
         }),
         pathname: createPropertyDescriptor(() => shadowLocation.pathname, (value) => {
             const targetPath = ('/' + value).replace(/^\/+/, '/') + shadowLocation.search + shadowLocation.hash;
@@ -3924,16 +4187,18 @@ function createMicroLocation(appName, url) {
             const targetLocation = createURL(targetPath, url);
             // The same hash will not trigger popStateEvent
             if (targetLocation.hash !== shadowLocation.hash) {
-                navigateWithNativeEvent('pushState', setMicroPathToURL(appName, targetLocation), false);
+                navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
             }
         }),
         fullPath: createPropertyDescriptor(() => shadowLocation.pathname + shadowLocation.search + shadowLocation.hash, noop),
     });
     const createLocationMethod = (locationMethodName) => {
         return function (value) {
-            const targetPath = commonHandler(value, locationMethodName === 'assign' ? 'pushState' : 'replaceState');
-            if (targetPath)
-                rawLocation[locationMethodName](targetPath);
+            if (isEffectiveApp(appName)) {
+                const targetPath = commonHandler(value, locationMethodName === 'assign' ? 'pushState' : 'replaceState');
+                if (targetPath)
+                    rawLocation[locationMethodName](targetPath);
+            }
         };
     };
     return assign(microLocation, {
@@ -4032,7 +4297,7 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     if (defaultPage)
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
     // attach microApp route info to browser URL
-    attachRouteToBrowserURL(setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
+    attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -4056,7 +4321,7 @@ function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
  * called on sandbox.stop or hidden of keep-alive app
  */
 function removeStateAndPathFromBrowser(appName) {
-    attachRouteToBrowserURL(removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
+    attachRouteToBrowserURL(appName, removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
 /**
@@ -4079,8 +4344,6 @@ function createMicroFetch(url, target) {
          * When fetch rewrite by baseApp, domScope still active when exec rawWindow.fetch
          * If baseApp operate dom in fetch, it will cause error
          * The same for XMLHttpRequest, EventSource
-         * e.g.
-         * baseApp: <script crossorigin src="https://sgm-static.jd.com/sgm-2.8.0.js" name="SGMH5" sid="6f88a6e4ba4b4ae5acef2ec22c075085" appKey="jdb-adminb2b-pc"></script>
          */
         removeDomScope();
         return rawFetch.call(globalEnv.rawWindow, input, init, ...rests);
@@ -4188,7 +4451,7 @@ class SandBox {
         // create proxyWindow with Proxy(microAppWindow)
         this.proxyWindow = this.createProxyWindow(appName);
         // Rewrite global event listener & timeout
-        assign(this, effect(appName, this.microAppWindow));
+        this.effectController = effect(appName, this.microAppWindow);
         // inject global properties
         this.initStaticGlobalKeys(this.microAppWindow, appName, url);
     }
@@ -4215,8 +4478,9 @@ class SandBox {
                 this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
             }
             /**
-             * 1. prevent the key deleted during sandBox.stop after rewrite
-             * 2. umd mode will not delete any keys during sandBox.stop
+             * 1. Prevent the key deleted during sandBox.stop after rewrite
+             * 2. Umd mode will not delete any keys during sandBox.stop
+             * 3. It must not be umd mode when call sandbox.start at the first time
              */
             if (!umdMode) {
                 this.initGlobalKeysWhenStart(this.microAppWindow, this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, disablePatchRequest);
@@ -4235,12 +4499,12 @@ 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();
+            // clear global event, timeout, data listener
+            this.releaseGlobalEffect(clearData);
             if (this.removeHistoryListener) {
                 this.clearRouteState(keepRouteState);
                 // release listener of popstate
@@ -4273,10 +4537,33 @@ class SandBox {
             this.active = false;
         }
     }
-    // record umd snapshot before the first execution of umdHookMount
-    recordUmdSnapshot() {
+    /**
+     * clear global event, timeout, data listener
+     * Scenes:
+     * 1. unmount of normal/umd app
+     * 2. hidden keep-alive app
+     * 3. after init prerender app
+     * @param clearData clear data from base app
+     */
+    releaseGlobalEffect(clearData = false) {
+        this.effectController.releaseEffect();
+        this.microAppWindow.microApp.clearDataListener();
+        this.microAppWindow.microApp.clearGlobalDataListener();
+        if (clearData) {
+            microApp.clearData(this.microAppWindow.__MICRO_APP_NAME__);
+            this.microAppWindow.microApp.clearData();
+        }
+    }
+    /**
+     * record umd snapshot before the first execution of umdHookMount
+     * Scenes:
+     * 1. exec umdMountHook in umd mode
+     * 2. hidden keep-alive app
+     * 3. after init prerender app
+     */
+    recordEffectSnapshot() {
         // this.microAppWindow.__MICRO_APP_UMD_MODE__ = true
-        this.recordUmdEffect();
+        this.effectController.recordEffect();
         recordDataCenterSnapshot(this.microAppWindow.microApp);
         // this.recordUmdInjectedValues = new Map<PropertyKey, unknown>()
         // this.injectedKeys.forEach((key: PropertyKey) => {
@@ -4284,13 +4571,17 @@ class SandBox {
         // })
     }
     // rebuild umd snapshot before remount umd app
-    rebuildUmdSnapshot() {
+    rebuildEffectSnapshot() {
         // this.recordUmdInjectedValues!.forEach((value: unknown, key: PropertyKey) => {
         //   Reflect.set(this.proxyWindow, key, value)
         // })
-        this.rebuildUmdEffect();
+        this.effectController.rebuildEffect();
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
+    // set __MICRO_APP_PRE_RENDER__ state
+    setPreRenderState(state) {
+        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = state;
+    }
     /**
      * get scopeProperties and escapeProperties from plugins & adapter
      * @param appName app name
@@ -4424,6 +4715,7 @@ class SandBox {
         microAppWindow.__MICRO_APP_URL__ = url;
         microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
+        microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
         microAppWindow.rawWindow = globalEnv.rawWindow;
         microAppWindow.rawDocument = globalEnv.rawDocument;
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
@@ -4441,7 +4733,6 @@ class SandBox {
                 configurable: false,
                 enumerable: true,
                 get() {
-                    throttleDeferForSetAppName(appName);
                     // return globalEnv.rawDocument
                     return proxyDocument;
                 },
@@ -4450,7 +4741,6 @@ class SandBox {
                 configurable: false,
                 enumerable: false,
                 get() {
-                    throttleDeferForSetAppName(appName);
                     // return globalEnv.rawRootDocument
                     return MicroDocument;
                 },
@@ -4496,6 +4786,7 @@ class SandBox {
         this.setHijackProperty(microAppWindow, appName);
         if (!disablePatchRequest)
             this.patchRequestApi(microAppWindow, appName, url);
+        this.setScopeProperties(microAppWindow);
     }
     // set hijack Properties to microAppWindow
     setHijackProperty(microAppWindow, appName) {
@@ -4563,6 +4854,18 @@ class SandBox {
             },
         });
     }
+    /**
+     * Init scope keys to microAppWindow, prevent fall to rawWindow from with(microAppWindow)
+     * like: if (!xxx) {}
+     * NOTE:
+     * 1. Symbol.unscopables cannot affect undefined keys
+     * 2. Doesn't use for window.xxx because it fall to proxyWindow
+     */
+    setScopeProperties(microAppWindow) {
+        this.scopeProperties.forEach((key) => {
+            Reflect.set(microAppWindow, key, microAppWindow[key]);
+        });
+    }
     // set location & history for memory router
     setMicroAppRouter(microAppWindow, appName, url) {
         const { microLocation, microHistory } = createMicroRouter(appName, url);
@@ -4623,11 +4926,11 @@ class SandBox {
                 return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
             },
             set: (target, key, value) => {
-                // Fix TypeError: Illegal invocation when set document.title
-                Reflect.set(target, key, value);
                 /**
-                 * If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
+                 * 1. Fix TypeError: Illegal invocation when set document.title
+                 * 2. If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
                  */
+                Reflect.set(target, key, value);
                 return true;
             }
         });
@@ -4735,7 +5038,7 @@ function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, container, scopecss, useSandbox, inline, esmodule, ssrUrl, isPrefetch, }) {
+    constructor({ name, url, container, scopecss, useSandbox, inline, esmodule, ssrUrl, isPrefetch, prefetchLevel, }) {
         this.state = appStates.CREATED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
@@ -4745,7 +5048,6 @@ class CreateApp {
         this.libraryName = null;
         this.umdMode = false;
         this.sandBox = null;
-        this.keepRouteState = false;
         this.fiber = false;
         this.useMemoryRouter = true;
         this.name = name;
@@ -4757,8 +5059,10 @@ class CreateApp {
         // not exist when prefetch 👇
         this.container = container !== null && container !== void 0 ? container : null;
         this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
-        // not exist when normal 👇
+        // exist only prefetch 👇
         this.isPrefetch = isPrefetch !== null && isPrefetch !== void 0 ? isPrefetch : false;
+        this.isPrerender = prefetchLevel === 3;
+        this.prefetchLevel = prefetchLevel;
         // init actions
         appInstanceMap.set(this.name, this);
         this.source = { html: null, links: new Set(), scripts: new Set() };
@@ -4773,14 +5077,46 @@ class CreateApp {
     /**
      * When resource is loaded, mount app if it is not prefetch or unmount
      */
-    onLoad(html) {
+    onLoad(html, defaultPage, disablePatchRequest) {
+        var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
             this.state = appStates.LOADED;
             if (!this.isPrefetch && appStates.UNMOUNT !== this.state) {
-                // @ts-ignore
                 getRootContainer(this.container).mount(this);
             }
+            else if (this.isPrerender) {
+                /**
+                 * PreRender is an option of prefetch, it will render app during prefetch
+                 * Limit:
+                 * 1. fiber forced on
+                 * 2. only virtual router support
+                 *
+                 * NOTE: (4P: not - update browser url, dispatch popstateEvent, reload window, dispatch lifecycle event)
+                 * 1. pushState/replaceState in child can update microLocation, but will not attach router info to browser url
+                 * 2. prevent dispatch popstate/hashchange event to browser
+                 * 3. all navigation actions of location are invalid (In the future, we can consider update microLocation without trigger browser reload)
+                 * 4. lifecycle event will not trigger when prerender
+                 *
+                 * Special scenes
+                 * 1. unmount prerender app when loading
+                 * 2. unmount prerender app when exec js
+                 * 2. unmount prerender app after exec js
+                 */
+                const container = pureCreateElement('div');
+                container.setAttribute('prerender', 'true');
+                (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.setPreRenderState(true);
+                this.mount({
+                    container,
+                    inline: this.inline,
+                    useMemoryRouter: true,
+                    baseroute: '',
+                    fiber: true,
+                    esmodule: this.esmodule,
+                    defaultPage: defaultPage !== null && defaultPage !== void 0 ? defaultPage : '',
+                    disablePatchRequest: disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : false,
+                });
+            }
         }
     }
     /**
@@ -4797,29 +5133,86 @@ class CreateApp {
     /**
      * mount app
      * @param container app container
-     * @param inline js runs in inline mode
+     * @param inline run js in inline mode
+     * @param useMemoryRouter use virtual router
+     * @param defaultPage default page of virtual router
      * @param baseroute route prefix, default is ''
-     * @param keepRouteState keep route state when unmount, default is false
      * @param disablePatchRequest prevent rewrite request method of child app
+     * @param fiber run js in fiber mode
+     * @param esmodule support type='module' script
      */
-    mount({ container, inline, esmodule, useMemoryRouter, baseroute, keepRouteState, defaultPage, disablePatchRequest, fiber, }) {
-        var _a, _b;
+    mount({ container, inline, useMemoryRouter, defaultPage, baseroute, disablePatchRequest, fiber, esmodule, }) {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.loadSourceLevel !== 2) {
+            /**
+             * unmount prefetch app when loading source, when mount again before loading end,
+             * isPrefetch & isPrerender will be reset, and this.container sill be null
+             * so we should set this.container
+             */
+            this.container = container;
+            // mount before prerender exec mount (loading source), set isPrerender to false
+            this.isPrerender = false;
+            // reset app state to LOADING
+            this.state = appStates.LOADING;
+            return;
+        }
+        /**
+         * Mount app with prerender, this.container is empty
+         * When rendering again, identify prerender by this.container
+         * Transfer the contents of div to the <micro-app> tag
+         *
+         * Special scenes:
+         * 1. mount before prerender exec mount (loading source)
+         * 2. mount when prerender js executing
+         * 3. mount after prerender js exec end
+         *
+         * TODO: test shadowDOM
+         */
+        if (this.container instanceof HTMLDivElement &&
+            this.container.hasAttribute('prerender')) {
+            /**
+             * rebuild effect event of window, document, data center
+             * explain:
+             * 1. rebuild before exec mount, do nothing
+             * 2. rebuild when js executing, recovery recorded effect event, because prerender fiber mode
+             * 3. rebuild after js exec end, normal recovery effect event
+             */
+            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
+            // current this.container is <div prerender='true'></div>
+            cloneContainer(this.container, container, false);
+            /**
+             * set this.container to <micro-app></micro-app>
+             * NOTE:
+             * must before exec this.preRenderEvent?.forEach((cb) => cb())
+             */
+            this.container = container;
+            (_b = this.preRenderEvent) === null || _b === void 0 ? void 0 : _b.forEach((cb) => cb());
+            // reset isPrerender config
+            this.isPrerender = false;
+            this.preRenderEvent = undefined;
+            // attach router info to browser url
+            router.attachToURL(this.name);
+            return (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.setPreRenderState(false);
+        }
         this.container = container;
         this.inline = inline;
         this.esmodule = esmodule;
-        this.keepRouteState = keepRouteState;
         this.fiber = fiber;
         // use in sandbox/effect
         this.useMemoryRouter = useMemoryRouter;
         // this.hiddenRouter = hiddenRouter ?? this.hiddenRouter
-        if (this.loadSourceLevel !== 2) {
-            this.state = appStates.LOADING;
-            return;
+        const dispatchBeforeMount = () => {
+            dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+        };
+        if (this.isPrerender) {
+            ((_d = this.preRenderEvent) !== null && _d !== void 0 ? _d : (this.preRenderEvent = [])).push(dispatchBeforeMount);
+        }
+        else {
+            dispatchBeforeMount();
         }
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
         this.state = appStates.MOUNTING;
         cloneContainer(this.source.html, this.container, !this.umdMode);
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.start({
+        (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
             umdMode: this.umdMode,
             baseroute,
             useMemoryRouter,
@@ -4831,6 +5224,7 @@ class CreateApp {
             let hasDispatchMountedEvent = false;
             // if all js are executed, param isFinished will be true
             execScripts(this, (isFinished) => {
+                var _a;
                 if (!this.umdMode) {
                     const { mount, unmount } = this.getUmdLibraryHooks();
                     /**
@@ -4844,9 +5238,9 @@ class CreateApp {
                         this.umdMode = true;
                         if (this.sandBox)
                             this.sandBox.proxyWindow.__MICRO_APP_UMD_MODE__ = true;
-                        // this.sandBox?.recordUmdSnapshot()
+                        // this.sandBox?.recordEffectSnapshot()
                         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);
@@ -4855,12 +5249,19 @@ class CreateApp {
                 }
                 if (!hasDispatchMountedEvent && (isFinished === true || this.umdMode)) {
                     hasDispatchMountedEvent = true;
-                    this.handleMounted(umdHookMountResult);
+                    const dispatchMounted = () => this.handleMounted(umdHookMountResult);
+                    if (this.isPrerender) {
+                        ((_a = this.preRenderEvent) !== null && _a !== void 0 ? _a : (this.preRenderEvent = [])).push(dispatchMounted);
+                        this.recordAndReleaseEffect();
+                    }
+                    else {
+                        dispatchMounted();
+                    }
                 }
             });
         }
         else {
-            (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.rebuildUmdSnapshot();
+            (_f = this.sandBox) === null || _f === void 0 ? void 0 : _f.rebuildEffectSnapshot();
             try {
                 umdHookMountResult = this.umdHookMount();
             }
@@ -4890,6 +5291,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);
         }
     }
@@ -4897,9 +5301,11 @@ class CreateApp {
      * unmount app
      * NOTE: Do not add any params on account of unmountApp
      * @param destroy completely destroy, delete cache resources
+     * @param clearData clear data of dateCenter
+     * @param keepRouteState keep route state when unmount, default is false
      * @param unmountcb callback of unmount
      */
-    unmount(destroy, unmountcb) {
+    unmount({ destroy, clearData, keepRouteState, unmountcb, }) {
         if (this.state === appStates.LOAD_FAILED) {
             destroy = true;
         }
@@ -4914,38 +5320,50 @@ 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, keepRouteState, umdHookUnmountResult, unmountcb);
     }
     /**
      * handle for promise umdHookUnmount
      * @param destroy completely destroy, delete cache resources
+     * @param clearData clear data of dateCenter
+     * @param keepRouteState keep route state when unmount, default is false
      * @param umdHookUnmountResult result of umdHookUnmount
      * @param unmountcb callback of unmount
      */
-    handleUnmounted(destroy, umdHookUnmountResult, unmountcb) {
+    handleUnmounted(destroy, clearData, keepRouteState, umdHookUnmountResult, unmountcb) {
+        const unmountParam = {
+            destroy,
+            clearData,
+            keepRouteState,
+            unmountcb,
+        };
         if (isPromise(umdHookUnmountResult)) {
             umdHookUnmountResult
-                .then(() => this.actionsForUnmount(destroy, unmountcb))
-                .catch(() => this.actionsForUnmount(destroy, unmountcb));
+                .then(() => this.actionsForUnmount(unmountParam))
+                .catch(() => this.actionsForUnmount(unmountParam));
         }
         else {
-            this.actionsForUnmount(destroy, unmountcb);
+            this.actionsForUnmount(unmountParam);
         }
     }
     /**
      * actions for unmount app
      * @param destroy completely destroy, delete cache resources
+     * @param clearData clear data of dateCenter
+     * @param keepRouteState keep route state when unmount, default is false
      * @param unmountcb callback of unmount
      */
-    actionsForUnmount(destroy, unmountcb) {
+    actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb }) {
         var _a, _b;
         if (destroy) {
             this.actionsForCompletelyDestroy();
@@ -4954,7 +5372,7 @@ class CreateApp {
             cloneContainer(this.container, this.source.html, false);
         }
         if (this.umdMode) {
-            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
+            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordEffectSnapshot();
         }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
@@ -4964,27 +5382,34 @@ class CreateApp {
          */
         (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.stop({
             umdMode: this.umdMode,
-            keepRouteState: this.keepRouteState && !destroy,
+            keepRouteState: keepRouteState && !destroy,
             clearEventSource: !this.umdMode || destroy,
+            clearData: clearData || destroy,
         });
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
         }
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
+        this.resetConfig();
+        unmountcb && unmountcb();
+    }
+    resetConfig() {
         this.container.innerHTML = '';
         this.container = null;
-        unmountcb && unmountcb();
+        this.isPrerender = false;
+        this.preRenderEvent = undefined;
     }
     // actions for completely destroy
     actionsForCompletelyDestroy() {
         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);
@@ -4997,12 +5422,17 @@ class CreateApp {
         });
         // dispatch afterHidden event to base app
         dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
-        // called after lifeCyclesEvent
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
+        if (this.useMemoryRouter) {
+            // called after lifeCyclesEvent
+            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
+        }
+        this.recordAndReleaseEffect();
+        callback && callback();
     }
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
-        var _a;
+        var _a, _b;
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
         // dispatch beforeShow event to micro-app
         dispatchCustomEventToMicroApp('appstate-change', this.name, {
             appState: 'beforeshow',
@@ -5012,8 +5442,10 @@ class CreateApp {
         cloneContainer(this.container, container, false);
         this.container = container;
         this.keepAliveState = keepAliveStates.KEEP_ALIVE_SHOW;
-        // called before lifeCyclesEvent
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.setRouteInfoForKeepAliveApp();
+        if (this.useMemoryRouter) {
+            // called before lifeCyclesEvent
+            (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
+        }
         // dispatch afterShow event to micro-app
         dispatchCustomEventToMicroApp('appstate-change', this.name, {
             appState: 'aftershow',
@@ -5053,6 +5485,23 @@ 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;
+    }
+    /**
+     * Record global effect and then release (effect: global event, timeout, data listener)
+     * Scenes:
+     * 1. hidden keep-alive app
+     * 2. after init prerender app
+     */
+    recordAndReleaseEffect() {
+        var _a, _b;
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordEffectSnapshot();
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.releaseGlobalEffect();
+    }
 }
 
 /**
@@ -5088,7 +5537,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) {
@@ -5135,25 +5584,56 @@ function defineElement(tagName) {
              * In some special scenes, such as vue's keep-alive, the micro-app will be inserted and deleted twice in an instant
              * So we execute the mount method async and record connectState to prevent repeated rendering
              */
+            const effectiveApp = this.appName && this.appUrl;
             defer(() => {
                 if (this.connectStateMap.get(cacheCount)) {
                     dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED);
-                    this.initialMount();
+                    /**
+                     * If insert micro-app element without name or url, and set them in next action like angular,
+                     * handleConnected will be executed twice, causing the app render repeatedly,
+                     * so we only execute handleConnected() if url and name exist when connectedCallback
+                     */
+                    effectiveApp && 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 +5671,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)) {
@@ -5223,7 +5703,7 @@ function defineElement(tagName) {
                     this.handleAppMount(app);
                 }
                 else if (app.isPrefetch || app.getAppState() === appStates.UNMOUNT) {
-                    if (process.env.NODE_ENV !== 'production' &&
+                    if ((process.env.NODE_ENV !== 'production') &&
                         app.scopecss === this.isScopecss() &&
                         app.useSandbox === this.isSandbox()) {
                         /**
@@ -5234,7 +5714,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 +5749,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 +5776,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:
@@ -5315,55 +5816,38 @@ function defineElement(tagName) {
             app.mount({
                 container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
                 inline: this.getDisposeResult('inline'),
-                esmodule: this.getDisposeResult('esmodule'),
                 useMemoryRouter: !this.getDisposeResult('disable-memory-router'),
-                baseroute: this.getBaseRouteCompatible(),
-                keepRouteState: this.getDisposeResult('keep-router-state'),
                 defaultPage: this.getDefaultPageValue(),
-                hiddenRouter: this.getDisposeResult('hidden-router'),
+                baseroute: this.getBaseRouteCompatible(),
                 disablePatchRequest: this.getDisposeResult('disable-patch-request'),
                 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'),
+                    keepRouteState: this.getDisposeResult('keep-router-state'),
+                    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 +5964,7 @@ function defineElement(tagName) {
             return null;
         }
     }
-    window.customElements.define(tagName, MicroAppElement);
+    globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
 }
 
 /**
@@ -5488,30 +5972,57 @@ function defineElement(tagName) {
  *  {
  *    name: string,
  *    url: string,
- *    disableScopecss?: boolean,
- *    disableSandbox?: boolean,
- *    disableMemoryRouter?: boolean,
+ *    esmodule: boolean,
+ *    inline: boolean,
+ *    'disable-scopecss': boolean,
+ *    'disable-sandbox': boolean,
+ *    level: number,
+ *    'default-page': string,
+ *    'disable-patch-request': boolean,
  *  },
  *  ...
  * ])
  * Note:
- *  1: preFetch is asynchronous and is performed only when the browser is idle
- *  2: disableScopecss, disableSandbox, disableMemoryRouter must be same with micro-app element, if conflict, the one who executes first shall prevail
- * @param apps micro apps
+ *  1: preFetch is async and is performed only when the browser is idle
+ *  2: options of prefetch preferably match the config of the micro-app element, although this is not required
+ * @param apps micro app options
+ * @param delay delay time
  */
-function preFetch(apps) {
+function preFetch(apps, delay) {
     if (!isBrowser) {
         return logError('preFetch is only supported in browser environment');
     }
     requestIdleCallback(() => {
-        isFunction(apps) && (apps = apps());
-        if (isArray(apps)) {
-            apps.reduce((pre, next) => pre.then(() => preFetchInSerial(next)), Promise.resolve());
-        }
+        const delayTime = isNumber(delay) ? delay : microApp.options.prefetchDelay;
+        /**
+         * TODO: remove setTimeout
+         * Is there a better way?
+         */
+        setTimeout(() => {
+            // releasePrefetchEffect()
+            preFetchInSerial(apps);
+        }, isNumber(delayTime) ? delayTime : 3000);
     });
+    // const handleOnLoad = (): void => {
+    //   releasePrefetchEffect()
+    //   requestIdleCallback(() => {
+    //     preFetchInSerial(apps)
+    //   })
+    // }
+    // const releasePrefetchEffect = (): void => {
+    //   window.removeEventListener('load', handleOnLoad)
+    //   clearTimeout(preFetchTime)
+    // }
+    // window.addEventListener('load', handleOnLoad)
+}
+function preFetchInSerial(apps) {
+    isFunction(apps) && (apps = apps());
+    if (isArray(apps)) {
+        apps.reduce((pre, next) => pre.then(() => preFetchAction(next)), Promise.resolve());
+    }
 }
 // sequential preload app
-function preFetchInSerial(options) {
+function preFetchAction(options) {
     return promiseRequestIdle((resolve) => {
         var _a, _b, _c, _d, _e, _f;
         if (isPlainObject(options) && navigator.onLine) {
@@ -5521,21 +6032,22 @@ function preFetchInSerial(options) {
                 const app = new CreateApp({
                     name: options.name,
                     url: options.url,
+                    isPrefetch: true,
                     scopecss: !((_b = (_a = options['disable-scopecss']) !== null && _a !== void 0 ? _a : options.disableScopecss) !== null && _b !== void 0 ? _b : microApp.options['disable-scopecss']),
                     useSandbox: !((_d = (_c = options['disable-sandbox']) !== null && _c !== void 0 ? _c : options.disableSandbox) !== null && _d !== void 0 ? _d : microApp.options['disable-sandbox']),
                     inline: (_e = options.inline) !== null && _e !== void 0 ? _e : microApp.options.inline,
                     esmodule: (_f = options.esmodule) !== null && _f !== void 0 ? _f : microApp.options.esmodule,
-                    isPrefetch: true,
+                    prefetchLevel: options.level && PREFETCH_LEVEL.includes(options.level) ? options.level : microApp.options.prefetchLevel && PREFETCH_LEVEL.includes(microApp.options.prefetchLevel) ? microApp.options.prefetchLevel : 2,
                 });
                 const oldOnload = app.onLoad;
                 const oldOnLoadError = app.onLoadError;
                 app.onLoad = (html) => {
                     resolve();
-                    oldOnload.call(app, html);
+                    oldOnload.call(app, html, options['default-page'], options['disable-patch-request']);
                 };
-                app.onLoadError = (e) => {
+                app.onLoadError = (...rests) => {
                     resolve();
-                    oldOnLoadError.call(app, e);
+                    oldOnLoadError.call(app, ...rests);
                 };
             }
             else {
@@ -5593,13 +6105,14 @@ function fetchGlobalResources(resources, suffix, sourceHandler) {
 /**
  * if app not prefetch & not unmount, then app is active
  * @param excludeHiddenApp exclude hidden keep-alive app, default is false
+ * @param excludePreRender exclude pre render app
  * @returns active apps
  */
-function getActiveApps(excludeHiddenApp = false) {
+function getActiveApps({ excludeHiddenApp = false, excludePreRender = false, } = {}) {
     const activeApps = [];
     appInstanceMap.forEach((app, appName) => {
         if (appStates.UNMOUNT !== app.getAppState() &&
-            !app.isPrefetch &&
+            (!app.isPrefetch || (app.isPrerender && !excludePreRender)) &&
             (!excludeHiddenApp ||
                 keepAliveStates.KEEP_ALIVE_HIDDEN !== app.getKeepAliveState())) {
             activeApps.push(appName);
@@ -5625,33 +6138,43 @@ 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,
+                        keepRouteState: 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,
+                        keepRouteState: true,
+                        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 +6182,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 +6350,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