@micro-zoe/micro-app 1.0.0-alpha.5 → 1.0.0-alpha.8

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.5';
+const version = '1.0.0-alpha.8';
 // 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]';
@@ -258,8 +268,19 @@ const requestIdleCallback = globalThis.requestIdleCallback ||
                     return Math.max(0, 50 - (Date.now() - lastTime));
                 },
             });
-        }, 50);
+        }, 1);
     };
+/**
+ * Wrap requestIdleCallback with promise
+ * Exec callback when browser idle
+ */
+function promiseRequestIdle(callback) {
+    return new Promise((resolve) => {
+        requestIdleCallback(() => {
+            callback(resolve);
+        });
+    });
+}
 /**
  * Record the currently running app.name
  */
@@ -433,6 +454,59 @@ function useMapRecord() {
         }
     };
 }
+function getAttributes(element) {
+    const attr = element.attributes;
+    const attrMap = new Map();
+    for (let i = 0; i < attr.length; i++) {
+        attrMap.set(attr[i].name, attr[i].value);
+    }
+    return attrMap;
+}
+/**
+ * if fiberTasks exist, wrap callback with promiseRequestIdle
+ * if not, execute callback
+ * @param fiberTasks fiber task list
+ * @param callback action callback
+ */
+function injectFiberTask(fiberTasks, callback) {
+    if (fiberTasks) {
+        fiberTasks.push(() => promiseRequestIdle((resolve) => {
+            callback();
+            resolve();
+        }));
+    }
+    else {
+        callback();
+    }
+}
+/**
+ * serial exec fiber task of link, style, script
+ * @param tasks task array or null
+ */
+function serialExecFiberTasks(tasks) {
+    return (tasks === null || tasks === void 0 ? void 0 : tasks.reduce((pre, next) => pre.then(next), Promise.resolve())) || null;
+}
+/**
+ * inline script start with inline-xxx
+ * @param address source address
+ */
+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) {
@@ -463,12 +537,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.
@@ -493,8 +594,8 @@ function fetchSource(url, appName = null, options = {}) {
      * baseApp: <script crossorigin src="https://sgm-static.jd.com/sgm-2.8.0.js" name="SGMH5" sid="6f88a6e4ba4b4ae5acef2ec22c075085" appKey="jdb-adminb2b-pc"></script>
      */
     removeDomScope();
-    if (isFunction(microApp.fetch)) {
-        return microApp.fetch(url, options, appName);
+    if (isFunction(microApp.options.fetch)) {
+        return microApp.options.fetch(url, options, appName);
     }
     // Don’t use globalEnv.rawWindow.fetch, will cause sgm-2.8.0.js throw error in nest app
     return window.fetch(url, options).then((res) => {
@@ -531,7 +632,7 @@ class HTMLLoader {
         });
     }
     formatHTML(htmlUrl, htmlStr, appName) {
-        return this.processHtml(htmlUrl, htmlStr, appName, microApp.plugins)
+        return this.processHtml(htmlUrl, htmlStr, appName, microApp.options.plugins)
             .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
             return match
                 .replace(/<head/i, '<micro-app-head')
@@ -553,7 +654,7 @@ class HTMLLoader {
         if (mergedPlugins.length > 0) {
             return mergedPlugins.reduce((preCode, plugin) => {
                 if (isPlainObject(plugin) && isFunction(plugin.processHtml)) {
-                    return plugin.processHtml(preCode, url, plugin.options);
+                    return plugin.processHtml(preCode, url);
                 }
                 return preCode;
             }, code);
@@ -591,11 +692,13 @@ class CSSParser {
         this.scopecssDisableSelectors = []; // disable or enable scopecss for specific selectors
         this.scopecssDisableNextLine = false; // use block comments /* scopecss-disable-next-line */ to disable scopecss on a specific line
         // https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
-        this.mediaRule = this.createMatcherForAtRuleWithChildRule(/^@media *([^{]+)/, 'media');
+        this.mediaRule = this.createMatcherForRuleWithChildRule(/^@media *([^{]+)/, '@media');
         // https://developer.mozilla.org/en-US/docs/Web/API/CSSSupportsRule
-        this.supportsRule = this.createMatcherForAtRuleWithChildRule(/^@supports *([^{]+)/, 'supports');
-        this.documentRule = this.createMatcherForAtRuleWithChildRule(/^@([-\w]+)?document *([^{]+)/, 'document');
-        this.hostRule = this.createMatcherForAtRuleWithChildRule(/^@host\s*/, 'host');
+        this.supportsRule = this.createMatcherForRuleWithChildRule(/^@supports *([^{]+)/, '@supports');
+        this.documentRule = this.createMatcherForRuleWithChildRule(/^@([-\w]+)?document *([^{]+)/, '@document');
+        this.hostRule = this.createMatcherForRuleWithChildRule(/^@host\s*/, '@host');
+        // :global is CSS Modules rule, it will be converted to normal syntax
+        // private globalRule = this.createMatcherForRuleWithChildRule(/^:global([^{]*)/, ':global')
         // https://developer.mozilla.org/en-US/docs/Web/API/CSSImportRule
         this.importRule = this.createMatcherForNoneBraceAtRule('import');
         // Removed in most browsers
@@ -716,6 +819,13 @@ class CSSParser {
             this.hostRule() ||
             this.fontFaceRule();
     }
+    // :global is CSS Modules rule, it will be converted to normal syntax
+    // private matchGlobalRule (): boolean | void {
+    //   if (this.cssText[0] !== ':') return false
+    //   // reset scopecssDisableNextLine
+    //   this.scopecssDisableNextLine = false
+    //   return this.globalRule()
+    // }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
     keyframesRule() {
         if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/))
@@ -769,17 +879,17 @@ class CSSParser {
             return false;
         return this.commonHandlerForAtRuleWithSelfRule('font-face');
     }
-    // common matcher for @media, @supports, @document, @host
-    createMatcherForAtRuleWithChildRule(reg, name) {
+    // common matcher for @media, @supports, @document, @host, :global
+    createMatcherForRuleWithChildRule(reg, name) {
         return () => {
             if (!this.commonMatch(reg))
                 return false;
             if (!this.matchOpenBrace())
-                return parseError(`@${name} missing '{'`, this.linkPath);
+                return parseError(`${name} missing '{'`, this.linkPath);
             this.matchComments();
             this.matchRules();
             if (!this.matchCloseBrace())
-                return parseError(`@${name} missing '}'`, this.linkPath);
+                return parseError(`${name} missing '}'`, this.linkPath);
             this.matchLeadingSpaces();
             return true;
         };
@@ -906,20 +1016,20 @@ let parser;
  * @param styleElement target style element
  * @param appName app name
  */
-function scopedCSS(styleElement, app) {
+function scopedCSS(styleElement, app, linkPath) {
     if (app.scopecss) {
-        const prefix = `${microApp.tagName}[name=${app.name}]`;
+        const prefix = createPrefix(app.name);
         if (!parser)
             parser = new CSSParser();
         if (styleElement.textContent) {
-            commonAction(styleElement, app.name, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
+            commonAction(styleElement, app.name, prefix, app.url, linkPath);
         }
         else {
             const observer = new MutationObserver(function () {
                 observer.disconnect();
                 // styled-component will be ignore
                 if (styleElement.textContent && !styleElement.hasAttribute('data-styled')) {
-                    commonAction(styleElement, app.name, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
+                    commonAction(styleElement, app.name, prefix, app.url, linkPath);
                 }
             });
             observer.observe(styleElement, { childList: true });
@@ -927,6 +1037,10 @@ function scopedCSS(styleElement, app) {
     }
     return styleElement;
 }
+function createPrefix(appName, reg = false) {
+    const regCharacter = reg ? '\\' : '';
+    return `${microApp.tagName}${regCharacter}[name=${appName}${regCharacter}]`;
+}
 
 function eventHandler(event, element) {
     Object.defineProperties(event, {
@@ -968,8 +1082,76 @@ function dispatchOnErrorEvent(element) {
     }
 }
 
-// Global links, reuse across apps
-const globalLinks = new Map();
+/**
+ * SourceCenter is a resource management center
+ * All html, js, css will be recorded and processed here
+ * NOTE:
+ * 1. All resources are global and shared between apps
+ * 2. Pay attention to the case of html with parameters
+ * 3. The resource is first processed by the plugin
+ */
+function createSourceCenter() {
+    const linkList = new Map();
+    const scriptList = new Map();
+    // setInterval(() => {
+    //   console.log(linkList, scriptList)
+    // }, 10000);
+    function createSourceHandler(targetList) {
+        return {
+            setInfo(address, info) {
+                targetList.set(address, info);
+            },
+            getInfo(address) {
+                var _a;
+                return (_a = targetList.get(address)) !== null && _a !== void 0 ? _a : null;
+            },
+            hasInfo(address) {
+                return targetList.has(address);
+            },
+            deleteInfo(address) {
+                return targetList.delete(address);
+            }
+        };
+    }
+    return {
+        link: createSourceHandler(linkList),
+        script: Object.assign(Object.assign({}, createSourceHandler(scriptList)), { deleteInlineInfo(addressList) {
+                addressList.forEach((address) => {
+                    if (isInlineScript(address)) {
+                        scriptList.delete(address);
+                    }
+                });
+            } }),
+    };
+}
+var sourceCenter = createSourceCenter();
+
+/**
+ *
+ * @param appName app.name
+ * @param linkInfo linkInfo of current address
+ */
+function getExistParseCode(appName, prefix, linkInfo) {
+    const appSpace = linkInfo.appSpace;
+    for (const item in appSpace) {
+        if (item !== appName) {
+            const appSpaceData = appSpace[item];
+            if (appSpaceData.parsedCode) {
+                return appSpaceData.parsedCode.replaceAll(new RegExp(createPrefix(item, true), 'g'), prefix);
+            }
+        }
+    }
+}
+// transfer the attributes on the link to convertStyle
+function setConvertStyleAttr(convertStyle, attrs) {
+    attrs.forEach((value, key) => {
+        if (key === 'rel')
+            return;
+        if (key === 'href')
+            key = 'data-origin-href';
+        convertStyle.setAttribute(key, value);
+    });
+}
 /**
  * Extract link elements
  * @param link link element
@@ -984,22 +1166,29 @@ function extractLinkFromHtml(link, parent, app, isDynamic = false) {
     let replaceComment = null;
     if (rel === 'stylesheet' && href) {
         href = CompletionPath(href, app.url);
+        let linkInfo = sourceCenter.link.getInfo(href);
+        const appSpaceData = {
+            attrs: getAttributes(link),
+        };
+        if (!linkInfo) {
+            linkInfo = {
+                code: '',
+                appSpace: {
+                    [app.name]: appSpaceData,
+                }
+            };
+        }
+        else {
+            linkInfo.appSpace[app.name] = linkInfo.appSpace[app.name] || appSpaceData;
+        }
+        sourceCenter.link.setInfo(href, linkInfo);
         if (!isDynamic) {
+            app.source.links.add(href);
             replaceComment = document.createComment(`link element with href=${href} move to micro-app-head as style element`);
-            app.source.links.set(href, {
-                code: '',
-                placeholder: replaceComment,
-                isGlobal: link.hasAttribute('global'),
-            });
+            linkInfo.appSpace[app.name].placeholder = replaceComment;
         }
         else {
-            return {
-                url: href,
-                info: {
-                    code: '',
-                    isGlobal: link.hasAttribute('global'),
-                }
-            };
+            return { address: href, linkInfo };
         }
     }
     else if (rel && ['prefetch', 'preload', 'prerender', 'icon', 'apple-touch-icon'].includes(rel)) {
@@ -1028,79 +1217,138 @@ function extractLinkFromHtml(link, parent, app, isDynamic = false) {
  * @param app app
  * @param microAppHead micro-app-head
  */
-function fetchLinksFromHtml(wrapElement, app, microAppHead) {
-    const linkEntries = Array.from(app.source.links.entries());
-    const fetchLinkPromise = linkEntries.map(([url]) => {
-        return globalLinks.has(url) ? globalLinks.get(url) : fetchSource(url, app.name);
+function fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult) {
+    const styleList = Array.from(app.source.links);
+    const fetchLinkPromise = styleList.map((address) => {
+        const linkInfo = sourceCenter.link.getInfo(address);
+        return linkInfo.code ? linkInfo.code : fetchSource(address, app.name);
     });
+    const fiberLinkTasks = app.isPrefetch || app.fiber ? [] : null;
     promiseStream(fetchLinkPromise, (res) => {
-        fetchLinkSuccess(linkEntries[res.index][0], linkEntries[res.index][1], res.data, microAppHead, app);
+        injectFiberTask(fiberLinkTasks, () => fetchLinkSuccess(styleList[res.index], res.data, microAppHead, app));
     }, (err) => {
         logError(err, app.name);
     }, () => {
-        app.onLoad(wrapElement);
+        if (fiberLinkTasks) {
+            /**
+             * 1. If fiberLinkTasks is not null, fiberStyleResult is not null
+             * 2. Download link source while processing style
+             * 3. Process style first, and then process link
+             */
+            fiberStyleResult.then(() => {
+                fiberLinkTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                serialExecFiberTasks(fiberLinkTasks);
+            });
+        }
+        else {
+            app.onLoad(wrapElement);
+        }
     });
 }
 /**
- * fetch link succeeded, replace placeholder with style tag
- * @param url resource address
- * @param info resource link info
- * @param data code
+ * Fetch link succeeded, replace placeholder with style tag
+ * NOTE:
+ * 1. Only exec when init, no longer exec when remount
+ * 2. Only handler html link element, not dynamic link or style
+ * 3. The same prefix can reuse parsedCode
+ * 4. Async exec with requestIdleCallback in prefetch or fiber
+ * 5. appSpace[app.name].placeholder/attrs must exist
+ * @param address resource address
+ * @param code link source code
  * @param microAppHead micro-app-head
- * @param app app
+ * @param app app instance
  */
-function fetchLinkSuccess(url, info, data, microAppHead, app) {
-    if (info.isGlobal && !globalLinks.has(url)) {
-        globalLinks.set(url, data);
+function fetchLinkSuccess(address, code, microAppHead, app) {
+    /**
+     * linkInfo must exist, but linkInfo.code not
+     * so we set code to linkInfo.code
+     */
+    const linkInfo = sourceCenter.link.getInfo(address);
+    linkInfo.code = code;
+    const appSpaceData = linkInfo.appSpace[app.name];
+    const placeholder = appSpaceData.placeholder;
+    /**
+     * When prefetch app is replaced by a new app in the processing phase, since the linkInfo is common, when the linkInfo of the prefetch app is processed, it may have already been processed.
+     * This causes placeholder to be possibly null
+     * e.g.
+     * 1. prefetch app.url different from <micro-app></micro-app>
+     * 2. prefetch param different from <micro-app></micro-app>
+     */
+    if (placeholder) {
+        const convertStyle = pureCreateElement('style');
+        handleConvertStyle(app, address, convertStyle, linkInfo, appSpaceData.attrs);
+        if (placeholder.parentNode) {
+            placeholder.parentNode.replaceChild(convertStyle, placeholder);
+        }
+        else {
+            microAppHead.appendChild(convertStyle);
+        }
+        // clear placeholder
+        appSpaceData.placeholder = null;
     }
-    const styleLink = pureCreateElement('style');
-    styleLink.textContent = data;
-    styleLink.__MICRO_APP_LINK_PATH__ = url;
-    styleLink.setAttribute('data-origin-href', url);
-    if (info.placeholder.parentNode) {
-        info.placeholder.parentNode.replaceChild(scopedCSS(styleLink, app), info.placeholder);
+}
+/**
+ * Get parsedCode, update convertStyle
+ * Actions:
+ * 1. get scope css (through scopedCSS or oldData)
+ * 2. record parsedCode
+ * 3. set parsedCode to convertStyle if need
+ * @param app app instance
+ * @param address resource address
+ * @param convertStyle converted style
+ * @param linkInfo linkInfo in sourceCenter
+ * @param attrs attrs of link
+ */
+function handleConvertStyle(app, address, convertStyle, linkInfo, attrs) {
+    if (app.scopecss) {
+        const appSpaceData = linkInfo.appSpace[app.name];
+        appSpaceData.prefix = appSpaceData.prefix || createPrefix(app.name);
+        if (!appSpaceData.parsedCode) {
+            const existParsedCode = getExistParseCode(app.name, appSpaceData.prefix, linkInfo);
+            if (!existParsedCode) {
+                convertStyle.textContent = linkInfo.code;
+                scopedCSS(convertStyle, app, address);
+            }
+            else {
+                convertStyle.textContent = existParsedCode;
+            }
+            appSpaceData.parsedCode = convertStyle.textContent;
+        }
+        else {
+            convertStyle.textContent = appSpaceData.parsedCode;
+        }
     }
     else {
-        microAppHead.appendChild(scopedCSS(styleLink, app));
+        convertStyle.textContent = linkInfo.code;
     }
-    info.placeholder = null;
-    info.code = data;
+    setConvertStyleAttr(convertStyle, attrs);
 }
 /**
- * get css from dynamic link
- * @param url link address
- * @param info info
+ * Handle css of dynamic link
+ * @param address link address
  * @param app app
+ * @param linkInfo linkInfo
  * @param originLink origin link element
- * @param replaceStyle style element which replaced origin link
  */
-function formatDynamicLink(url, info, app, originLink, replaceStyle) {
-    if (app.source.links.has(url)) {
-        replaceStyle.textContent = app.source.links.get(url).code;
-        scopedCSS(replaceStyle, app);
-        defer(() => dispatchOnLoadEvent(originLink));
-        return;
+function formatDynamicLink(address, app, linkInfo, originLink) {
+    const convertStyle = pureCreateElement('style');
+    const handleDynamicLink = () => {
+        handleConvertStyle(app, address, convertStyle, linkInfo, linkInfo.appSpace[app.name].attrs);
+        dispatchOnLoadEvent(originLink);
+    };
+    if (linkInfo.code) {
+        defer(handleDynamicLink);
     }
-    if (globalLinks.has(url)) {
-        const code = globalLinks.get(url);
-        info.code = code;
-        app.source.links.set(url, info);
-        replaceStyle.textContent = code;
-        scopedCSS(replaceStyle, app);
-        defer(() => dispatchOnLoadEvent(originLink));
-        return;
+    else {
+        fetchSource(address, app.name).then((data) => {
+            linkInfo.code = data;
+            handleDynamicLink();
+        }).catch((err) => {
+            logError(err, app.name);
+            dispatchOnErrorEvent(originLink);
+        });
     }
-    fetchSource(url, app.name).then((data) => {
-        info.code = data;
-        app.source.links.set(url, info);
-        info.isGlobal && globalLinks.set(url, data);
-        replaceStyle.textContent = data;
-        scopedCSS(replaceStyle, app);
-        dispatchOnLoadEvent(originLink);
-    }).catch((err) => {
-        logError(err, app.name);
-        dispatchOnErrorEvent(originLink);
-    });
+    return convertStyle;
 }
 
 class Adapter {
@@ -1122,10 +1370,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
@@ -1149,7 +1396,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) {
@@ -1169,17 +1416,25 @@ 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) {
-    Object.defineProperty(root, 'parentNode', {
-        value,
-        configurable: true,
-    });
+/**
+ * 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) {
+        rawDefineProperty(target, 'parentNode', {
+            value,
+            configurable: true,
+        });
+    }
 }
 
 // Record element and map element
@@ -1208,14 +1463,16 @@ function handleNewNode(parent, child, app) {
             dynamicElementInMicroAppMap.set(child, linkReplaceComment);
             return linkReplaceComment;
         }
-        else if (child.hasAttribute('ignore') || checkIgnoreUrl(child.getAttribute('href'), app.name)) {
+        else if (child.hasAttribute('ignore') ||
+            checkIgnoreUrl(child.getAttribute('href'), app.name) ||
+            (child.href &&
+                isFunction(microApp.options.excludeAssetFilter) &&
+                microApp.options.excludeAssetFilter(child.href))) {
             return child;
         }
-        const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, true);
-        if (url && info) {
-            const replaceStyle = pureCreateElement('style');
-            replaceStyle.__MICRO_APP_LINK_PATH__ = url;
-            formatDynamicLink(url, info, app, child, replaceStyle);
+        const { address, linkInfo, replaceComment } = extractLinkFromHtml(child, parent, app, true);
+        if (address && linkInfo) {
+            const replaceStyle = formatDynamicLink(address, app, linkInfo, child);
             dynamicElementInMicroAppMap.set(child, replaceStyle);
             return replaceStyle;
         }
@@ -1226,18 +1483,17 @@ function handleNewNode(parent, child, app) {
         return child;
     }
     else if (child instanceof HTMLScriptElement) {
-        const { replaceComment, url, info } = extractScriptElement(child, parent, app, true) || {};
-        if (url && info) {
-            if (!info.isExternal) { // inline script
-                const replaceElement = runScript(url, app, info, true);
-                dynamicElementInMicroAppMap.set(child, replaceElement);
-                return replaceElement;
-            }
-            else { // remote script
-                const replaceElement = runDynamicRemoteScript(url, info, app, child);
-                dynamicElementInMicroAppMap.set(child, replaceElement);
-                return replaceElement;
-            }
+        if (child.src &&
+            isFunction(microApp.options.excludeAssetFilter) &&
+            microApp.options.excludeAssetFilter(child.src)) {
+            return child;
+        }
+        const { replaceComment, address, scriptInfo } = extractScriptElement(child, parent, app, true) || {};
+        if (address && scriptInfo) {
+            // remote script or inline script
+            const replaceElement = scriptInfo.isExternal ? runDynamicRemoteScript(address, app, scriptInfo, child) : runDynamicInlineScript(address, app, scriptInfo);
+            dynamicElementInMicroAppMap.set(child, replaceElement);
+            return replaceElement;
         }
         else if (replaceComment) {
             dynamicElementInMicroAppMap.set(child, replaceComment);
@@ -1256,37 +1512,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');
@@ -1319,13 +1594,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));
@@ -1345,7 +1620,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) {
@@ -1392,7 +1667,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) {
@@ -1401,8 +1675,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);
@@ -1705,8 +1979,80 @@ function initGlobalEnv() {
     }
 }
 
-// Global scripts, reuse across apps
-const globalScripts = new Map();
+const scriptTypes = ['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'];
+// whether use type='module' script
+function isTypeModule(app, scriptInfo) {
+    return scriptInfo.appSpace[app.name].module && (!app.useSandbox || app.esmodule);
+}
+// special script element
+function isSpecialScript(app, scriptInfo) {
+    const attrs = scriptInfo.appSpace[app.name].attrs;
+    return attrs.has('id');
+}
+/**
+ * whether to run js in inline mode
+ * scene:
+ * 1. inline config for app
+ * 2. inline attr in script element
+ * 3. module script
+ * 4. script with special attr
+ */
+function isInlineMode(app, scriptInfo) {
+    return (app.inline ||
+        scriptInfo.appSpace[app.name].inline ||
+        isTypeModule(app, scriptInfo) ||
+        isSpecialScript(app, scriptInfo));
+}
+// Convert string code to function
+function code2Function(code) {
+    return new Function(code);
+}
+/**
+ * If the appSpace of the current js address has other app, try to reuse parsedFunction of other app
+ * @param appName app.name
+ * @param scriptInfo scriptInfo of current address
+ * @param currentCode pure code of current address
+ */
+function getExistParseResult(appName, scriptInfo, currentCode) {
+    const appSpace = scriptInfo.appSpace;
+    for (const item in appSpace) {
+        if (item !== appName) {
+            const appSpaceData = appSpace[item];
+            if (appSpaceData.parsedCode === currentCode && appSpaceData.parsedFunction) {
+                return appSpaceData.parsedFunction;
+            }
+        }
+    }
+}
+/**
+ * get parsedFunction from exist data or parsedCode
+ * @returns parsedFunction
+ */
+function getParsedFunction(app, scriptInfo, parsedCode) {
+    return getExistParseResult(app.name, scriptInfo, parsedCode) || code2Function(parsedCode);
+}
+// Prevent randomly created strings from repeating
+function getUniqueNonceSrc() {
+    const nonceStr = createNonceSrc();
+    if (sourceCenter.script.hasInfo(nonceStr)) {
+        return getUniqueNonceSrc();
+    }
+    return nonceStr;
+}
+// transfer the attributes on the script to convertScript
+function setConvertScriptAttr(convertScript, attrs) {
+    attrs.forEach((value, key) => {
+        if ((key === 'type' && value === 'module') || key === 'defer' || key === 'async')
+            return;
+        if (key === 'src')
+            key = 'data-origin-src';
+        convertScript.setAttribute(key, value);
+    });
+}
+// wrap code in sandbox
+function isWrapInSandBox(app, scriptInfo) {
+    return app.useSandbox && !isTypeModule(app, scriptInfo);
+}
 /**
  * Extract script elements
  * @param script script element
@@ -1717,14 +2063,15 @@ const globalScripts = new Map();
 function extractScriptElement(script, parent, app, isDynamic = false) {
     let replaceComment = null;
     let src = script.getAttribute('src');
-    if (src) {
+    if (src)
         src = CompletionPath(src, app.url);
-    }
     if (script.hasAttribute('exclude') || checkExcludeUrl(src, app.name)) {
         replaceComment = document.createComment('script element with exclude attribute removed by micro-app');
     }
-    else if ((script.type && !['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'].includes(script.type)) ||
-        script.hasAttribute('ignore') || checkIgnoreUrl(src, app.name)) {
+    else if ((script.type &&
+        !scriptTypes.includes(script.type)) ||
+        script.hasAttribute('ignore') ||
+        checkIgnoreUrl(src, app.name)) {
         return null;
     }
     else if ((globalEnv.supportModuleScript && script.noModule) ||
@@ -1732,39 +2079,74 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
     }
     else if (src) { // remote script
-        const info = {
-            code: '',
-            isExternal: true,
-            isDynamic: isDynamic,
+        let scriptInfo = sourceCenter.script.getInfo(src);
+        const appSpaceData = {
             async: script.hasAttribute('async'),
             defer: script.defer || script.type === 'module',
             module: script.type === 'module',
-            isGlobal: script.hasAttribute('global'),
+            inline: script.hasAttribute('inline'),
+            pure: script.hasAttribute('pure'),
+            attrs: getAttributes(script),
         };
+        if (!scriptInfo) {
+            scriptInfo = {
+                code: '',
+                isExternal: true,
+                appSpace: {
+                    [app.name]: appSpaceData,
+                }
+            };
+        }
+        else {
+            /**
+             * Reuse when appSpace exists
+             * NOTE:
+             * 1. The same static script, appSpace must be the same (in fact, it may be different when url change)
+             * 2. The same dynamic script, appSpace may be the same, but we still reuse appSpace, which should pay attention
+             */
+            scriptInfo.appSpace[app.name] = scriptInfo.appSpace[app.name] || appSpaceData;
+        }
+        sourceCenter.script.setInfo(src, scriptInfo);
         if (!isDynamic) {
-            app.source.scripts.set(src, info);
+            app.source.scripts.add(src);
             replaceComment = document.createComment(`script with src='${src}' extract by micro-app`);
         }
         else {
-            return { url: src, info };
+            return { address: src, scriptInfo };
         }
     }
     else if (script.textContent) { // inline script
-        const nonceStr = createNonceSrc();
-        const info = {
+        /**
+         * NOTE:
+         * 1. Each inline script is unique
+         * 2. Every dynamic created inline script will be re-executed
+         * ACTION:
+         * 1. Delete dynamic inline script info after exec
+         * 2. Delete static inline script info when destroy
+         */
+        const nonceStr = getUniqueNonceSrc();
+        const scriptInfo = {
             code: script.textContent,
             isExternal: false,
-            isDynamic: isDynamic,
-            async: false,
-            defer: script.type === 'module',
-            module: script.type === 'module',
+            appSpace: {
+                [app.name]: {
+                    async: false,
+                    defer: script.type === 'module',
+                    module: script.type === 'module',
+                    inline: script.hasAttribute('inline'),
+                    pure: script.hasAttribute('pure'),
+                    attrs: getAttributes(script),
+                }
+            }
         };
         if (!isDynamic) {
-            app.source.scripts.set(nonceStr, info);
+            app.source.scripts.add(nonceStr);
+            sourceCenter.script.setInfo(nonceStr, scriptInfo);
             replaceComment = document.createComment('inline script extract by micro-app');
         }
         else {
-            return { url: nonceStr, info };
+            // Because each dynamic script is unique, it is not put into sourceCenter
+            return { address: nonceStr, scriptInfo };
         }
     }
     else if (!isDynamic) {
@@ -1787,38 +2169,38 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
  */
 function getAssetsPlugins(appName) {
     var _a, _b, _c;
-    const globalPlugins = ((_a = microApp.plugins) === null || _a === void 0 ? void 0 : _a.global) || [];
-    const modulePlugins = ((_c = (_b = microApp.plugins) === null || _b === void 0 ? void 0 : _b.modules) === null || _c === void 0 ? void 0 : _c[appName]) || [];
+    const globalPlugins = ((_a = microApp.options.plugins) === null || _a === void 0 ? void 0 : _a.global) || [];
+    const modulePlugins = ((_c = (_b = microApp.options.plugins) === null || _b === void 0 ? void 0 : _b.modules) === null || _c === void 0 ? void 0 : _c[appName]) || [];
     return [...globalPlugins, ...modulePlugins];
 }
 /**
- * whether the url needs to be excluded
- * @param url css or js link
+ * whether the address needs to be excluded
+ * @param address css or js link
  * @param plugins microApp plugins
  */
-function checkExcludeUrl(url, appName) {
-    if (!url)
+function checkExcludeUrl(address, appName) {
+    if (!address)
         return false;
     const plugins = getAssetsPlugins(appName) || [];
     return plugins.some(plugin => {
         if (!plugin.excludeChecker)
             return false;
-        return plugin.excludeChecker(url);
+        return plugin.excludeChecker(address);
     });
 }
 /**
- * whether the url needs to be ignore
- * @param url css or js link
+ * whether the address needs to be ignore
+ * @param address css or js link
  * @param plugins microApp plugins
  */
-function checkIgnoreUrl(url, appName) {
-    if (!url)
+function checkIgnoreUrl(address, appName) {
+    if (!address)
         return false;
     const plugins = getAssetsPlugins(appName) || [];
     return plugins.some(plugin => {
         if (!plugin.ignoreChecker)
             return false;
-        return plugin.ignoreChecker(url);
+        return plugin.ignoreChecker(address);
     });
 }
 /**
@@ -1827,28 +2209,31 @@ function checkIgnoreUrl(url, appName) {
  * @param app app
  */
 function fetchScriptsFromHtml(wrapElement, app) {
-    const scriptEntries = Array.from(app.source.scripts.entries());
+    const scriptList = Array.from(app.source.scripts);
     const fetchScriptPromise = [];
     const fetchScriptPromiseInfo = [];
-    for (const [url, info] of scriptEntries) {
-        if (info.isExternal) {
-            const globalScriptText = globalScripts.get(url);
-            if (globalScriptText) {
-                info.code = globalScriptText;
-            }
-            else if ((!info.defer && !info.async) || app.isPrefetch) {
-                fetchScriptPromise.push(fetchSource(url, app.name));
-                fetchScriptPromiseInfo.push([url, info]);
-            }
+    for (const address of scriptList) {
+        const scriptInfo = sourceCenter.script.getInfo(address);
+        const appSpaceData = scriptInfo.appSpace[app.name];
+        if ((!appSpaceData.defer && !appSpaceData.async) || (app.isPrefetch && !app.isPrerender)) {
+            fetchScriptPromise.push(scriptInfo.code ? scriptInfo.code : fetchSource(address, app.name));
+            fetchScriptPromiseInfo.push([address, scriptInfo]);
         }
     }
+    const fiberScriptTasks = app.isPrefetch || app.fiber ? [] : null;
     if (fetchScriptPromise.length) {
         promiseStream(fetchScriptPromise, (res) => {
-            fetchScriptSuccess(fetchScriptPromiseInfo[res.index][0], fetchScriptPromiseInfo[res.index][1], res.data);
+            injectFiberTask(fiberScriptTasks, () => fetchScriptSuccess(fetchScriptPromiseInfo[res.index][0], fetchScriptPromiseInfo[res.index][1], res.data, app));
         }, (err) => {
             logError(err, app.name);
         }, () => {
-            app.onLoad(wrapElement);
+            if (fiberScriptTasks) {
+                fiberScriptTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                serialExecFiberTasks(fiberScriptTasks);
+            }
+            else {
+                app.onLoad(wrapElement);
+            }
         });
     }
     else {
@@ -1857,169 +2242,224 @@ function fetchScriptsFromHtml(wrapElement, app) {
 }
 /**
  * fetch js succeeded, record the code value
- * @param url script address
- * @param info resource script info
+ * @param address script address
+ * @param scriptInfo resource script info
  * @param data code
  */
-function fetchScriptSuccess(url, info, data) {
-    if (info.isGlobal && !globalScripts.has(url)) {
-        globalScripts.set(url, data);
+function fetchScriptSuccess(address, scriptInfo, code, app) {
+    // reset scriptInfo.code
+    scriptInfo.code = code;
+    /**
+     * Pre parse script for prefetch, improve rendering performance
+     * NOTE:
+     * 1. if global parseResult exist, skip this step
+     * 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 && 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.
+         * This causes parsedCode to already exist when preloading ends
+         * e.g.
+         * 1. prefetch app.url different from <micro-app></micro-app>
+         * 2. prefetch param different from <micro-app></micro-app>
+         */
+        if (!appSpaceData.parsedCode) {
+            appSpaceData.parsedCode = bindScope(address, app, code, scriptInfo);
+            appSpaceData.wrapInSandBox = isWrapInSandBox(app, scriptInfo);
+            if (!isInlineMode(app, scriptInfo)) {
+                try {
+                    appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
+                }
+                catch (err) {
+                    logWarn('Something went wrong while handling preloaded resources', app.name, '\n', err);
+                }
+            }
+        }
     }
-    info.code = data;
 }
 /**
  * Execute js in the mount lifecycle
- * @param scriptList script list
  * @param app app
  * @param initHook callback for umd mode
  */
-function execScripts(scriptList, app, initHook) {
-    const scriptListEntries = Array.from(scriptList.entries());
+function execScripts(app, initHook) {
+    const fiberScriptTasks = app.fiber ? [] : null;
+    const scriptList = Array.from(app.source.scripts);
     const deferScriptPromise = [];
     const deferScriptInfo = [];
-    for (const [url, info] of scriptListEntries) {
-        if (!info.isDynamic) {
-            // Notice the second render
-            if (info.defer || info.async) {
-                if (info.isExternal && !info.code) {
-                    deferScriptPromise.push(fetchSource(url, app.name));
-                }
-                else {
-                    deferScriptPromise.push(info.code);
-                }
-                deferScriptInfo.push([url, info]);
-                info.module && (initHook.moduleCount = initHook.moduleCount ? ++initHook.moduleCount : 1);
+    for (const address of scriptList) {
+        const scriptInfo = sourceCenter.script.getInfo(address);
+        const appSpaceData = scriptInfo.appSpace[app.name];
+        // Notice the second render
+        if (appSpaceData.defer || appSpaceData.async) {
+            if (scriptInfo.isExternal && !scriptInfo.code) {
+                deferScriptPromise.push(fetchSource(address, app.name));
             }
             else {
-                runScript(url, app, info, false);
-                initHook(false);
+                deferScriptPromise.push(scriptInfo.code);
             }
+            deferScriptInfo.push([address, scriptInfo]);
+            isTypeModule(app, scriptInfo) && (initHook.moduleCount = initHook.moduleCount ? ++initHook.moduleCount : 1);
+        }
+        else {
+            injectFiberTask(fiberScriptTasks, () => {
+                runScript(address, app, scriptInfo);
+                initHook(false);
+            });
         }
     }
     if (deferScriptPromise.length) {
         promiseStream(deferScriptPromise, (res) => {
-            const info = deferScriptInfo[res.index][1];
-            info.code = info.code || res.data;
+            const scriptInfo = deferScriptInfo[res.index][1];
+            scriptInfo.code = scriptInfo.code || res.data;
         }, (err) => {
             initHook.errorCount = initHook.errorCount ? ++initHook.errorCount : 1;
             logError(err, app.name);
         }, () => {
-            deferScriptInfo.forEach(([url, info]) => {
-                if (info.code) {
-                    runScript(url, app, info, false, initHook);
-                    !info.module && initHook(false);
+            deferScriptInfo.forEach(([address, scriptInfo]) => {
+                if (scriptInfo.code) {
+                    injectFiberTask(fiberScriptTasks, () => {
+                        runScript(address, app, scriptInfo, initHook);
+                        !isTypeModule(app, scriptInfo) && initHook(false);
+                    });
                 }
             });
-            initHook(isUndefined(initHook.moduleCount) ||
-                initHook.errorCount === deferScriptPromise.length);
+            /**
+             * Fiber wraps js in requestIdleCallback and executes it in sequence
+             * NOTE:
+             * 1. In order to ensure the execution order, wait for all js loaded and then execute
+             * 2. If js create a dynamic script, it may be errors in the execution order, because the subsequent js is wrapped in requestIdleCallback, even putting dynamic script in requestIdleCallback doesn't solve it
+             *
+             * BUG: NOTE.2 - execution order problem
+             */
+            if (fiberScriptTasks) {
+                fiberScriptTasks.push(() => Promise.resolve(initHook(isUndefined(initHook.moduleCount) ||
+                    initHook.errorCount === deferScriptPromise.length)));
+                serialExecFiberTasks(fiberScriptTasks);
+            }
+            else {
+                initHook(isUndefined(initHook.moduleCount) ||
+                    initHook.errorCount === deferScriptPromise.length);
+            }
         });
     }
     else {
-        initHook(true);
+        if (fiberScriptTasks) {
+            fiberScriptTasks.push(() => Promise.resolve(initHook(true)));
+            serialExecFiberTasks(fiberScriptTasks);
+        }
+        else {
+            initHook(true);
+        }
     }
 }
 /**
  * run code
- * @param url script address
+ * @param address script address
  * @param app app
- * @param info script info
- * @param isDynamic dynamically created script
+ * @param scriptInfo script info
  * @param callback callback of module script
  */
-function runScript(url, app, info, isDynamic, callback) {
+function runScript(address, app, scriptInfo, callback, replaceElement) {
     var _a;
     try {
-        const code = bindScope(url, app, info.code, info);
-        if (app.inline || info.module) {
-            const scriptElement = pureCreateElement('script');
-            runCode2InlineScript(url, code, info.module, scriptElement, callback);
-            if (isDynamic)
-                return scriptElement;
-            // TEST IGNORE
-            (_a = app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-body').appendChild(scriptElement);
+        actionsBeforeRunScript(app);
+        const appSpaceData = scriptInfo.appSpace[app.name];
+        const wrapInSandBox = isWrapInSandBox(app, scriptInfo);
+        /**
+         * NOTE:
+         * 1. plugins and wrapCode will only be executed once
+         * 2. if parsedCode not exist, parsedFunction is not exist
+         * 3. if parsedCode exist, parsedFunction does not necessarily exist
+         */
+        if (!appSpaceData.parsedCode || appSpaceData.wrapInSandBox !== wrapInSandBox) {
+            appSpaceData.parsedCode = bindScope(address, app, scriptInfo.code, scriptInfo);
+            appSpaceData.wrapInSandBox = wrapInSandBox;
+            appSpaceData.parsedFunction = null;
+        }
+        if (isInlineMode(app, scriptInfo)) {
+            const scriptElement = replaceElement || pureCreateElement('script');
+            runCode2InlineScript(address, appSpaceData.parsedCode, isTypeModule(app, scriptInfo), scriptElement, appSpaceData.attrs, callback);
+            if (!replaceElement) {
+                // TEST IGNORE
+                (_a = app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-body').appendChild(scriptElement);
+            }
         }
         else {
-            runCode2Function(code, info);
-            if (isDynamic)
-                return document.createComment('dynamic script extract by micro-app');
+            runParsedFunction(app, scriptInfo);
         }
     }
     catch (e) {
-        console.error(`[micro-app from runScript] app ${app.name}: `, e);
+        console.error(`[micro-app from ${replaceElement ? 'runDynamicScript' : 'runScript'}] app ${app.name}: `, e, address);
     }
 }
 /**
  * Get dynamically created remote script
- * @param url script address
- * @param info info
- * @param app app
+ * @param address script address
+ * @param app app instance
+ * @param scriptInfo scriptInfo
  * @param originScript origin script element
  */
-function runDynamicRemoteScript(url, info, app, originScript) {
+function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
     const dispatchScriptOnLoadEvent = () => dispatchOnLoadEvent(originScript);
-    // url is unique
-    if (app.source.scripts.has(url)) {
-        const existInfo = app.source.scripts.get(url);
-        !existInfo.module && defer(dispatchScriptOnLoadEvent);
-        /**
-         * TODO: 这里要改，当script初始化时动态创建远程script时，初次渲染和二次渲染的顺序不一致，会导致错误
-         * 1、url不存在缓存，初始化的时候肯定是要异步请求，那么执行顺序就会靠后，至少落后于html自带的script
-         * 2、url存在缓存，那么二次渲染的时候这里会同步执行，就会先于html自带的script执行
-         * 3、测试一下，初次渲染和二次渲染时，onload的执行时机，是在js执行完成，还是执行之前
-         * 4、将上述问题做成注释，方便后续阅读和理解
-         */
-        return runScript(url, app, existInfo, true, dispatchScriptOnLoadEvent);
-    }
-    if (globalScripts.has(url)) {
-        const code = globalScripts.get(url);
-        info.code = code;
-        app.source.scripts.set(url, info);
-        !info.module && defer(dispatchScriptOnLoadEvent);
-        return runScript(url, app, info, true, dispatchScriptOnLoadEvent);
-    }
-    let replaceElement;
-    if (app.inline || info.module) {
-        replaceElement = pureCreateElement('script');
+    const runDynamicScript = () => {
+        const descriptor = Object.getOwnPropertyDescriptor(globalEnv.rawDocument, 'currentScript');
+        if (!descriptor || descriptor.configurable) {
+            Object.defineProperty(globalEnv.rawDocument, 'currentScript', {
+                value: originScript,
+                configurable: true,
+            });
+        }
+        runScript(address, app, scriptInfo, dispatchScriptOnLoadEvent, replaceElement);
+        !isTypeModule(app, scriptInfo) && dispatchScriptOnLoadEvent();
+    };
+    if (scriptInfo.code) {
+        defer(runDynamicScript);
     }
     else {
-        replaceElement = document.createComment(`dynamic script with src='${url}' extract by micro-app`);
+        fetchSource(address, app.name).then((code) => {
+            scriptInfo.code = code;
+            runDynamicScript();
+        }).catch((err) => {
+            logError(err, app.name);
+            dispatchOnErrorEvent(originScript);
+        });
     }
-    fetchSource(url, app.name).then((code) => {
-        info.code = code;
-        app.source.scripts.set(url, info);
-        info.isGlobal && globalScripts.set(url, code);
-        try {
-            code = bindScope(url, app, code, info);
-            if (app.inline || info.module) {
-                runCode2InlineScript(url, code, info.module, replaceElement, dispatchScriptOnLoadEvent);
-            }
-            else {
-                runCode2Function(code, info);
-            }
-        }
-        catch (e) {
-            console.error(`[micro-app from runDynamicScript] app ${app.name}: `, e, url);
-        }
-        !info.module && dispatchScriptOnLoadEvent();
-    }).catch((err) => {
-        logError(err, app.name);
-        dispatchOnErrorEvent(originScript);
-    });
+    return replaceElement;
+}
+/**
+ * Get dynamically created inline script
+ * @param address script address
+ * @param app app instance
+ * @param scriptInfo scriptInfo
+ */
+function runDynamicInlineScript(address, app, scriptInfo) {
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
+    runScript(address, app, scriptInfo, void 0, replaceElement);
     return replaceElement;
 }
 /**
  * common handle for inline script
- * @param url script address
+ * @param address script address
  * @param code bound code
  * @param module type='module' of script
  * @param scriptElement target script element
+ * @param attrs attributes of script element
  * @param callback callback of module script
  */
-function runCode2InlineScript(url, code, module, scriptElement, callback) {
+function runCode2InlineScript(address, code, module, scriptElement, attrs, callback) {
     if (module) {
         // module script is async, transform it to a blob for subsequent operations
-        const blob = new Blob([code], { type: 'text/javascript' });
-        scriptElement.src = URL.createObjectURL(blob);
+        if (isInlineScript(address)) {
+            const blob = new Blob([code], { type: 'text/javascript' });
+            scriptElement.src = URL.createObjectURL(blob);
+        }
+        else {
+            scriptElement.src = address;
+        }
         scriptElement.setAttribute('type', 'module');
         if (callback) {
             callback.moduleCount && callback.moduleCount--;
@@ -2029,55 +2469,65 @@ function runCode2InlineScript(url, code, module, scriptElement, callback) {
     else {
         scriptElement.textContent = code;
     }
-    if (!url.startsWith('inline-')) {
-        scriptElement.setAttribute('data-origin-src', url);
-    }
+    setConvertScriptAttr(scriptElement, attrs);
 }
 // init & run code2Function
-function runCode2Function(code, info) {
-    if (!info.code2Function) {
-        info.code2Function = new Function(code);
+function runParsedFunction(app, scriptInfo) {
+    const appSpaceData = scriptInfo.appSpace[app.name];
+    if (!appSpaceData.parsedFunction) {
+        appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
     }
-    info.code2Function.call(window);
+    appSpaceData.parsedFunction.call(window);
 }
 /**
  * bind js scope
- * @param url script address
  * @param app app
  * @param code code
- * @param info source script info
+ * @param scriptInfo source script info
  */
-function bindScope(url, app, code, info) {
-    // TODO: 增加缓存机制
-    if (isPlainObject(microApp.plugins)) {
-        code = usePlugins(url, code, app.name, microApp.plugins, info);
+function bindScope(address, app, code, scriptInfo) {
+    // TODO: cache
+    if (isPlainObject(microApp.options.plugins)) {
+        code = usePlugins(address, code, app.name, microApp.options.plugins);
     }
-    if (app.sandBox && !info.module) {
-        globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
-        return `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
+    if (isWrapInSandBox(app, scriptInfo)) {
+        return `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
     }
     return code;
 }
+/**
+ * actions before run script
+ */
+function actionsBeforeRunScript(app) {
+    setActiveProxyWindow(app);
+}
+/**
+ * set active sandBox.proxyWindow to window.__MICRO_APP_PROXY_WINDOW__
+ */
+function setActiveProxyWindow(app) {
+    if (app.sandBox) {
+        globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
+    }
+}
 /**
  * Call the plugin to process the file
- * @param url script address
+ * @param address script address
  * @param code code
  * @param appName app name
  * @param plugins plugin list
- * @param info source script info
  */
-function usePlugins(url, code, appName, plugins, info) {
+function usePlugins(address, code, appName, plugins) {
     var _a;
-    const newCode = processCode(plugins.global, code, url, info);
-    return processCode((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName], newCode, url, info);
+    const newCode = processCode(plugins.global, code, address);
+    return processCode((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName], newCode, address);
 }
-function processCode(configs, code, url, info) {
+function processCode(configs, code, address) {
     if (!isArray(configs)) {
         return code;
     }
     return configs.reduce((preCode, config) => {
         if (isPlainObject(config) && isFunction(config.loader)) {
-            return config.loader(preCode, url, config.options, info);
+            return config.loader(preCode, address);
         }
         return preCode;
     }, code);
@@ -2098,10 +2548,10 @@ function getWrapElement(str) {
  * @param app app
  * @param microAppHead micro-app-head element
  */
-function flatChildren(parent, app, microAppHead) {
+function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
     const children = Array.from(parent.children);
     children.length && children.forEach((child) => {
-        flatChildren(child, app);
+        flatChildren(child, app, microAppHead, fiberStyleTasks);
     });
     for (const dom of children) {
         if (dom instanceof HTMLLinkElement) {
@@ -2120,7 +2570,7 @@ function flatChildren(parent, app, microAppHead) {
                 parent.replaceChild(document.createComment('style element with exclude attribute ignored by micro-app'), dom);
             }
             else if (app.scopecss && !dom.hasAttribute('ignore')) {
-                scopedCSS(dom, app);
+                injectFiberTask(fiberStyleTasks, () => scopedCSS(dom, app));
             }
         }
         else if (dom instanceof HTMLScriptElement) {
@@ -2148,9 +2598,17 @@ function extractSourceDom(htmlStr, app) {
         app.onerror(new Error(msg));
         return logError(msg, app.name);
     }
-    flatChildren(wrapElement, app);
+    const fiberStyleTasks = app.isPrefetch || app.fiber ? [] : null;
+    flatChildren(wrapElement, app, microAppHead, fiberStyleTasks);
+    /**
+     * Style and link are parallel, because it takes a lot of time for link to request resources. During this period, style processing can be performed to improve efficiency.
+     */
+    const fiberStyleResult = serialExecFiberTasks(fiberStyleTasks);
     if (app.source.links.size) {
-        fetchLinksFromHtml(wrapElement, app, microAppHead);
+        fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult);
+    }
+    else if (fiberStyleResult) {
+        fiberStyleResult.then(() => app.onLoad(wrapElement));
     }
     else {
         app.onLoad(wrapElement);
@@ -2166,6 +2624,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) {
@@ -2175,6 +2666,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
@@ -2194,7 +2718,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);
             }
@@ -2215,21 +2742,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 = {
@@ -2237,7 +2770,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
@@ -2286,10 +2825,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
@@ -2297,6 +2839,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
@@ -2347,8 +2895,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
@@ -2384,25 +2943,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
@@ -2592,12 +3162,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);
@@ -2616,9 +3188,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);
@@ -2683,69 +3259,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 = () => {
@@ -2785,8 +3372,8 @@ function effect(appName, microAppWindow) {
         }
     };
     return {
-        recordUmdEffect,
-        rebuildUmdEffect,
+        recordEffect,
+        rebuildEffect,
         releaseEffect,
     };
 }
@@ -2812,7 +3399,6 @@ function removeMicroState(appName, rawState) {
             delete rawState.microAppState;
         }
     }
-    // 生成新的state对象
     return assign({}, rawState);
 }
 // get micro app state form origin state
@@ -2824,12 +3410,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);
@@ -2841,12 +3430,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;
@@ -2854,15 +3446,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) {
@@ -2892,7 +3492,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;
@@ -2915,7 +3519,7 @@ function removeMicroPathFromURL(appName, targetLocation) {
     };
 }
 /**
- * 根据location获取query对象
+ * Format search, hash to object
  */
 function getQueryObjectFromURL(search, hash) {
     const queryObject = {};
@@ -2937,6 +3541,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
@@ -2953,7 +3569,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;
@@ -2989,9 +3606,19 @@ function addHistoryListener(appName) {
 function dispatchPopStateEventToMicroApp(appName, proxyWindow) {
     // create PopStateEvent named popstate-appName with sub app state
     const newPopStateEvent = new PopStateEvent(formatEventName$1('popstate', appName), { state: getMicroState(appName) });
+    /**
+     * angular14 takes e.type as type judgment
+     * when e.type is popstate-appName popstate event will be invalid
+     */
+    // Object.defineProperty(newPopStateEvent, 'type', {
+    //   value: 'popstate',
+    //   writable: true,
+    //   configurable: true,
+    //   enumerable: true,
+    // })
     globalEnv.rawWindow.dispatchEvent(newPopStateEvent);
     // call function window.onpopstate if it exists
-    typeof proxyWindow.onpopstate === 'function' && proxyWindow.onpopstate(newPopStateEvent);
+    isFunction(proxyWindow.onpopstate) && proxyWindow.onpopstate(newPopStateEvent);
 }
 /**
  * dispatch formatted hashchange event to microApp
@@ -3006,7 +3633,7 @@ function dispatchHashChangeEventToMicroApp(appName, proxyWindow, oldHref) {
     });
     globalEnv.rawWindow.dispatchEvent(newHashChangeEvent);
     // call function window.onhashchange if it exists
-    typeof proxyWindow.onhashchange === 'function' && proxyWindow.onhashchange(newHashChangeEvent);
+    isFunction(proxyWindow.onhashchange) && proxyWindow.onhashchange(newHashChangeEvent);
 }
 /**
  * dispatch native PopStateEvent, simulate location behavior
@@ -3031,15 +3658,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);
+        }
     }
 }
 
@@ -3056,7 +3686,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);
@@ -3064,7 +3694,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');
@@ -3096,14 +3726,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
@@ -3112,29 +3745,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
@@ -3163,12 +3800,14 @@ function reWriteHistoryMethod(method) {
          * 1. Exec after apply pushState/replaceState
          * 2. Unable to catch when base app navigate with location
          * 3. When in nest app, rawPushState/rawReplaceState has been modified by parent
-         * 4.
          */
-        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
@@ -3200,7 +3839,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();
     }
@@ -3221,7 +3860,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
@@ -3273,7 +3912,7 @@ function createRouterApi() {
         removeDomScope();
         for (const guard of guards) {
             if (isFunction(guard)) {
-                guard(appName, to, from);
+                guard(to, from, appName);
             }
             else if (isPlainObject(guard) && isFunction(guard[appName])) {
                 guard[appName](to, from);
@@ -3304,7 +3943,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)));
         }
     }
     /**
@@ -3319,10 +3958,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
@@ -3337,7 +3980,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}"`);
                     }
@@ -3380,7 +4023,7 @@ function createRouterApi() {
                     }
                 });
             }
-            else if (process.env.NODE_ENV !== 'production') {
+            else if ((process.env.NODE_ENV !== 'production')) {
                 logWarn('setBaseAppRouter: Invalid base router');
             }
         }
@@ -3448,13 +4091,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;
                 /**
@@ -3463,8 +4106,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;
@@ -3494,7 +4137,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 {
             /**
@@ -3503,19 +4146,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;
@@ -3530,16 +4178,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, {
@@ -3614,7 +4264,12 @@ function createMicroRouter(appName, url) {
         microHistory: createMicroHistory(appName, microLocation),
     };
 }
-// 当沙箱执行start, 或者隐藏的keep-alive应用重新渲染时时才根据浏览器url更新location 或者 将参数更新到url上
+/**
+ * When the sandbox executes start, or the hidden keep-alive application is re-rendered, the location is updated according to the browser url or attach router info to browser url
+ * @param appName app.name
+ * @param microLocation MicroLocation for sandbox
+ * @param defaultPage default page
+ */
 function initRouteStateWithURL(appName, microLocation, defaultPage) {
     const microPath = getMicroPathFromURL(appName);
     if (microPath) {
@@ -3633,7 +4288,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);
 }
@@ -3657,7 +4312,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));
 }
 
 /**
@@ -3766,7 +4421,7 @@ function useMicroEventSource() {
 const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
 const globalPropertyList = ['window', 'self', 'globalThis'];
 class SandBox {
-    constructor(appName, url, useMemoryRouter = true) {
+    constructor(appName, url) {
         /**
          * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
          * Fix https://github.com/micro-zoe/micro-app/issues/234
@@ -3789,28 +4444,38 @@ 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, useMemoryRouter);
+        this.initStaticGlobalKeys(this.microAppWindow, appName, url);
     }
-    // TODO: 重构
-    start(umdMode = false, baseRoute = '', useMemoryRouter = true, defaultPage = '', disablePatchRequest = false) {
+    /**
+     * open sandbox and perform some initial actions
+     * @param umdMode is umd mode
+     * @param baseroute base route for child
+     * @param useMemoryRouter use virtual router
+     * @param defaultPage default page when mount child base on virtual router
+     * @param disablePatchRequest prevent patchRequestApi
+     */
+    start({ umdMode, baseroute, useMemoryRouter, defaultPage, disablePatchRequest, }) {
         if (!this.active) {
             this.active = true;
             if (useMemoryRouter) {
+                if (isUndefined(this.microAppWindow.location)) {
+                    this.setMicroAppRouter(this.microAppWindow, this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__);
+                }
                 this.initRouteState(defaultPage);
                 // unique listener of popstate event for sub app
-                this.removeHistoryListener = addHistoryListener(this.proxyWindow.__MICRO_APP_NAME__);
+                this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
             }
             else {
-                this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseRoute;
+                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
              */
             if (!umdMode) {
-                this.initGlobalKeysWhenStart(this.microAppWindow, this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.__MICRO_APP_URL__, disablePatchRequest);
+                this.initGlobalKeysWhenStart(this.microAppWindow, this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, disablePatchRequest);
             }
             if (++SandBox.activeCount === 1) {
                 effectDocumentEvent();
@@ -3821,18 +4486,24 @@ class SandBox {
             fixBabelPolyfill6();
         }
     }
-    stop(umdMode, keepRouteState, clearEventSource) {
+    /**
+     * close sandbox and perform some clean up actions
+     * @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, 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
                 this.removeHistoryListener();
             }
             if (clearEventSource) {
-                clearMicroEventSource(this.proxyWindow.__MICRO_APP_NAME__);
+                clearMicroEventSource(this.microAppWindow.__MICRO_APP_NAME__);
             }
             /**
              * NOTE:
@@ -3858,10 +4529,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) => {
@@ -3869,13 +4563,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
@@ -3883,9 +4581,9 @@ class SandBox {
     getSpecialProperties(appName) {
         var _a;
         this.scopeProperties = this.scopeProperties.concat(this.adapter.staticScopeProperties);
-        if (isPlainObject(microApp.plugins)) {
-            this.commonActionForSpecialProperties(microApp.plugins.global);
-            this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+        if (isPlainObject(microApp.options.plugins)) {
+            this.commonActionForSpecialProperties(microApp.options.plugins.global);
+            this.commonActionForSpecialProperties((_a = microApp.options.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
         }
     }
     // common action for global plugins and module plugins
@@ -4003,12 +4701,13 @@ class SandBox {
      * @param url app url
      * @param useMemoryRouter whether use memory router
      */
-    initStaticGlobalKeys(microAppWindow, appName, url, useMemoryRouter) {
+    initStaticGlobalKeys(microAppWindow, appName, url) {
         microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
         microAppWindow.__MICRO_APP_NAME__ = appName;
         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), {
@@ -4018,8 +4717,6 @@ class SandBox {
         });
         this.setProxyDocument(microAppWindow, appName);
         this.setMappingPropertiesWithRawDescriptor(microAppWindow);
-        if (useMemoryRouter)
-            this.setMicroAppRouter(microAppWindow, appName, url);
     }
     setProxyDocument(microAppWindow, appName) {
         const { proxyDocument, MicroDocument } = this.createProxyDocument(appName);
@@ -4197,17 +4894,19 @@ class SandBox {
             return element;
         };
         const proxyDocument = new Proxy(rawDocument, {
-            get(target, key) {
+            get: (target, key) => {
                 throttleDeferForSetAppName(appName);
                 throttleDeferForParentNode(proxyDocument);
                 if (key === 'createElement')
                     return createElement;
                 if (key === Symbol.toStringTag)
                     return 'ProxyDocument';
+                if (key === 'defaultView')
+                    return this.proxyWindow;
                 const rawValue = Reflect.get(target, key);
                 return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
             },
-            set(target, key, value) {
+            set: (target, key, value) => {
                 // Fix TypeError: Illegal invocation when set document.title
                 Reflect.set(target, key, value);
                 /**
@@ -4299,10 +4998,8 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     });
     formatEventInfo(event, element);
     // global hooks
-    // @ts-ignore
-    if (isFunction((_a = microApp.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName])) {
-        // @ts-ignore
-        microApp.lifeCycles[lifecycleName](event);
+    if (isFunction((_a = microApp.options.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName])) {
+        microApp.options.lifeCycles[lifecycleName](event);
     }
     element.dispatchEvent(event);
 }
@@ -4322,7 +5019,7 @@ function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, useMemoryRouter, baseroute, keepRouteState, hiddenRouter, defaultPage, disablePatchRequest, }) {
+    constructor({ name, url, container, scopecss, useSandbox, inline, esmodule, ssrUrl, isPrefetch, prefetchLevel, }) {
         this.state = appStates.CREATED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
@@ -4331,30 +5028,27 @@ class CreateApp {
         this.umdHookUnmount = null;
         this.libraryName = null;
         this.umdMode = false;
-        this.isPrefetch = false;
-        this.prefetchResolve = null;
-        this.container = null;
         this.sandBox = null;
+        this.fiber = false;
+        this.useMemoryRouter = true;
         this.name = name;
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
-        this.useMemoryRouter = this.useSandbox && useMemoryRouter;
-        // optional during init base on prefetch 👇
+        this.inline = inline !== null && inline !== void 0 ? inline : false;
+        this.esmodule = esmodule !== null && esmodule !== void 0 ? esmodule : false;
+        // not exist when prefetch 👇
         this.container = container !== null && container !== void 0 ? container : null;
         this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
-        this.inline = inline !== null && inline !== void 0 ? inline : false;
-        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : '';
-        this.keepRouteState = keepRouteState !== null && keepRouteState !== void 0 ? keepRouteState : false;
-        this.hiddenRouter = hiddenRouter !== null && hiddenRouter !== void 0 ? hiddenRouter : false;
-        this.defaultPage = defaultPage !== null && defaultPage !== void 0 ? defaultPage : '';
-        this.disablePatchRequest = disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : false;
-        this.source = {
-            links: new Map(),
-            scripts: new Map(),
-        };
+        // 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() };
         this.loadSourceCode();
-        this.useSandbox && (this.sandBox = new SandBox(name, url, this.useMemoryRouter));
+        this.useSandbox && (this.sandBox = new SandBox(name, url));
     }
     // Load resources
     loadSourceCode() {
@@ -4364,17 +5058,45 @@ 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;
-            if (this.isPrefetch) {
-                (_a = this.prefetchResolve) === null || _a === void 0 ? void 0 : _a.call(this);
-                this.prefetchResolve = null;
+            this.state = appStates.LOADED;
+            if (!this.isPrefetch && appStates.UNMOUNT !== this.state) {
+                getRootContainer(this.container).mount(this);
             }
-            else if (appStates.UNMOUNT !== this.state) {
-                this.state = appStates.LOADED;
-                this.mount();
+            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,
+                });
             }
         }
     }
@@ -4384,10 +5106,6 @@ class CreateApp {
      */
     onLoadError(e) {
         this.loadSourceLevel = -1;
-        if (this.prefetchResolve) {
-            this.prefetchResolve();
-            this.prefetchResolve = null;
-        }
         if (appStates.UNMOUNT !== this.state) {
             this.onerror(e);
             this.state = appStates.LOAD_FAILED;
@@ -4396,33 +5114,98 @@ 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, baseroute, keepRouteState, defaultPage, hiddenRouter, disablePatchRequest) {
-        var _a, _b, _c;
-        this.inline = inline !== null && inline !== void 0 ? inline : this.inline;
-        this.keepRouteState = keepRouteState !== null && keepRouteState !== void 0 ? keepRouteState : this.keepRouteState;
-        this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
-        this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
-        this.defaultPage = defaultPage !== null && defaultPage !== void 0 ? defaultPage : this.defaultPage;
-        this.hiddenRouter = hiddenRouter !== null && hiddenRouter !== void 0 ? hiddenRouter : this.hiddenRouter;
-        this.disablePatchRequest = disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : this.disablePatchRequest;
+    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;
         }
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+        /**
+         * 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.fiber = fiber;
+        // use in sandbox/effect
+        this.useMemoryRouter = useMemoryRouter;
+        // this.hiddenRouter = hiddenRouter ?? this.hiddenRouter
+        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();
+        }
         this.state = appStates.MOUNTING;
         cloneContainer(this.source.html, this.container, !this.umdMode);
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.umdMode, this.baseroute, this.useMemoryRouter, this.defaultPage, this.disablePatchRequest);
+        (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
+            umdMode: this.umdMode,
+            baseroute,
+            useMemoryRouter,
+            defaultPage,
+            disablePatchRequest,
+        });
         let umdHookMountResult; // result of mount function
         if (!this.umdMode) {
             let hasDispatchMountedEvent = false;
             // if all js are executed, param isFinished will be true
-            execScripts(this.source.scripts, this, (isFinished) => {
+            execScripts(this, (isFinished) => {
+                var _a;
                 if (!this.umdMode) {
                     const { mount, unmount } = this.getUmdLibraryHooks();
                     /**
@@ -4436,9 +5219,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);
@@ -4447,12 +5230,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 {
-            (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.rebuildUmdSnapshot();
+            (_f = this.sandBox) === null || _f === void 0 ? void 0 : _f.rebuildEffectSnapshot();
             try {
                 umdHookMountResult = this.umdHookMount();
             }
@@ -4482,6 +5272,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);
         }
     }
@@ -4489,9 +5282,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;
         }
@@ -4506,38 +5301,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();
@@ -4546,7 +5353,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
@@ -4554,25 +5361,36 @@ class CreateApp {
          * 1. if destroy is true, clear route state
          * 2. umd mode and keep-alive will not clear EventSource
          */
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.stop(this.umdMode, this.keepRouteState && !destroy, !this.umdMode || destroy);
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.stop({
+            umdMode: this.umdMode,
+            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);
@@ -4587,10 +5405,13 @@ class CreateApp {
         dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
         // 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',
@@ -4601,7 +5422,7 @@ class CreateApp {
         this.container = container;
         this.keepAliveState = keepAliveStates.KEEP_ALIVE_SHOW;
         // called before lifeCyclesEvent
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.setRouteInfoForKeepAliveApp();
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
         // dispatch afterShow event to micro-app
         dispatchCustomEventToMicroApp('appstate-change', this.name, {
             appState: 'aftershow',
@@ -4641,6 +5462,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();
+    }
 }
 
 /**
@@ -4653,7 +5491,8 @@ function defineElement(tagName) {
             super();
             this.isWaiting = false;
             this.cacheData = null;
-            this.hasConnected = false;
+            this.connectedCount = 0;
+            this.connectStateMap = new Map();
             this.appName = ''; // app name
             this.appUrl = ''; // app url
             this.ssrUrl = ''; // html path in ssr mode
@@ -4663,6 +5502,8 @@ function defineElement(tagName) {
              */
             this.handleAttributeUpdate = () => {
                 this.isWaiting = false;
+                if (!this.connectStateMap.get(this.connectedCount))
+                    return;
                 const formatAttrName = formatAppName(this.getAttribute('name'));
                 const formatAttrUrl = formatAppURL(this.getAttribute('url'), this.appName);
                 if (this.legalAttribute('name', formatAttrName) && this.legalAttribute('url', formatAttrUrl)) {
@@ -4673,7 +5514,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) {
@@ -4714,22 +5555,56 @@ function defineElement(tagName) {
         // baseRoute: route prefix, default is ''
         // keep-alive: open keep-alive mode
         connectedCallback() {
-            this.hasConnected = true;
-            defer(() => dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED));
-            this.initialMount();
+            const cacheCount = ++this.connectedCount;
+            this.connectStateMap.set(cacheCount, true);
+            /**
+             * 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
+             */
+            defer(() => {
+                if (this.connectStateMap.get(cacheCount)) {
+                    dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED);
+                    this.handleConnected();
+                }
+            });
         }
         disconnectedCallback() {
-            this.hasConnected = false;
+            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);
                 }
             }
         }
@@ -4767,12 +5642,12 @@ function defineElement(tagName) {
         }
         // handle for connectedCallback run before attributeChangedCallback
         handleInitialNameAndUrl() {
-            this.hasConnected && 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)) {
@@ -4782,26 +5657,35 @@ function defineElement(tagName) {
             if (appInstanceMap.has(this.appName)) {
                 const app = appInstanceMap.get(this.appName);
                 const existAppUrl = app.ssrUrl || app.url;
-                const activeAppUrl = this.ssrUrl || this.appUrl;
-                // keep-alive don't care about ssrUrl
-                // Even if the keep-alive app is pushed into the background, it is still active and cannot be replaced. Otherwise, it is difficult for developers to troubleshoot in case of conflict and  will leave developers at a loss
+                const targetAppUrl = this.ssrUrl || this.appUrl;
+                /**
+                 * NOTE:
+                 * 1. keep-alive don't care about ssrUrl
+                 * 2. Even if the keep-alive app is pushed into the background, it is still active and cannot be replaced. Otherwise, it is difficult for developers to troubleshoot in case of conflict and  will leave developers at a loss
+                 * 3. When scopecss, useSandbox of prefetch app different from target app, delete prefetch app and create new one
+                 */
                 if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN &&
                     app.url === this.appUrl) {
                     this.handleShowKeepAliveApp(app);
                 }
-                else if (existAppUrl === activeAppUrl && (app.isPrefetch ||
-                    app.getAppState() === appStates.UNMOUNT)) {
+                else if (existAppUrl === targetAppUrl && (app.getAppState() === appStates.UNMOUNT ||
+                    (app.isPrefetch && (app.scopecss === this.isScopecss() &&
+                        app.useSandbox === this.isSandbox())))) {
                     this.handleAppMount(app);
                 }
                 else if (app.isPrefetch || app.getAppState() === appStates.UNMOUNT) {
-                    /**
-                     * url is different & old app is unmounted or prefetch, create new app to replace old one
-                     */
-                    logWarn(`the ${app.isPrefetch ? 'prefetch' : 'unmounted'} app with url: ${existAppUrl} is replaced by a new app`, this.appName);
+                    if ((process.env.NODE_ENV !== 'production') &&
+                        app.scopecss === this.isScopecss() &&
+                        app.useSandbox === this.isSandbox()) {
+                        /**
+                         * url is different & old app is unmounted or prefetch, create new app to replace old one
+                         */
+                        logWarn(`the ${app.isPrefetch ? 'prefetch' : 'unmounted'} app with url: ${existAppUrl} replaced by a new app with url: ${targetAppUrl}`, this.appName);
+                    }
                     this.handleCreateApp();
                 }
                 else {
-                    logError(`app name conflict, an app named ${this.appName} is running`, this.appName);
+                    logError(`app name conflict, an app named: ${this.appName} with url: ${existAppUrl} is running`);
                 }
             }
             else {
@@ -4836,7 +5720,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) {
@@ -4863,20 +5747,6 @@ function defineElement(tagName) {
             }
             return true;
         }
-        /**
-         * mount app
-         * some serious note before mount:
-         * 1. is prefetch ?
-         * 2. is remount in another container ?
-         * 3. is remount with change properties of the container ?
-         */
-        handleAppMount(app) {
-            app.isPrefetch = false;
-            defer(() => {
-                var _a;
-                return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), this.getBaseRouteCompatible(), this.getDisposeResult('keep-router-state'), this.getDefaultPageValue(), this.getDisposeResult('hidden-router'), this.getDisposeResult('disable-patch-request'));
-            });
-        }
         // create app instance
         handleCreateApp() {
             var _a;
@@ -4887,41 +5757,68 @@ function defineElement(tagName) {
             if (appInstanceMap.has(this.appName)) {
                 appInstanceMap.get(this.appName).actionsForCompletelyDestroy();
             }
-            const instance = new CreateApp({
+            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:
+         * 1. is prefetch ?
+         * 2. is remount in another container ?
+         * 3. is remount with change properties of the container ?
+         */
+        handleAppMount(app) {
+            app.isPrefetch = false;
+            defer(() => this.mount(app));
+        }
+        /**
+         * public mount action for micro_app_element & create_app
+         */
+        mount(app) {
+            var _a;
+            app.mount({
                 container: (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this,
                 inline: this.getDisposeResult('inline'),
-                scopecss: !(this.getDisposeResult('disable-scopecss') || this.getDisposeResult('shadowDOM')),
-                useSandbox: !this.getDisposeResult('disable-sandbox'),
                 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'),
+                esmodule: this.getDisposeResult('esmodule'),
             });
-            appInstanceMap.set(this.appName, instance);
         }
         /**
          * 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) {
@@ -4934,8 +5831,7 @@ function defineElement(tagName) {
          * @param name Configuration item name
          */
         getDisposeResult(name) {
-            // @ts-ignore
-            return (this.compatibleSpecialProperties(name) || !!microApp[name]) && this.compatibleDisableSpecialProperties(name);
+            return (this.compatibleSpecialProperties(name) || !!microApp.options[name]) && this.compatibleDisableSpecialProperties(name);
         }
         // compatible of disableScopecss & disableSandbox
         compatibleSpecialProperties(name) {
@@ -4957,6 +5853,12 @@ function defineElement(tagName) {
             }
             return this.getAttribute(name) !== 'false';
         }
+        isScopecss() {
+            return !(this.getDisposeResult('disable-scopecss') || this.getDisposeResult('shadowDOM'));
+        }
+        isSandbox() {
+            return !this.getDisposeResult('disable-sandbox');
+        }
         /**
          * 2021-09-08
          * get baseRoute
@@ -5004,8 +5906,10 @@ function defineElement(tagName) {
          * get config of default page
          */
         getDefaultPageValue() {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = router.getDefaultPage(this.appName)) !== null && _a !== void 0 ? _a : this.getAttribute('default-page')) !== null && _b !== void 0 ? _b : this.getAttribute('defaultPage')) !== null && _c !== void 0 ? _c : '';
+            return (router.getDefaultPage(this.appName) ||
+                this.getAttribute('default-page') ||
+                this.getAttribute('defaultPage') ||
+                '');
         }
         /**
          * Data from the base application
@@ -5031,7 +5935,7 @@ function defineElement(tagName) {
             return null;
         }
     }
-    window.customElements.define(tagName, MicroAppElement);
+    globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
 }
 
 /**
@@ -5050,45 +5954,71 @@ function defineElement(tagName) {
  *  2: disableScopecss, disableSandbox, disableMemoryRouter must be same with micro-app element, if conflict, the one who executes first shall prevail
  * @param apps micro apps
  */
-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 = delay !== null && delay !== void 0 ? delay : microApp.options.prefetchDelay;
+        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(prefetchApp) {
-    return new Promise((resolve) => {
-        requestIdleCallback(() => {
-            var _a, _b, _c, _d, _e;
-            if (isPlainObject(prefetchApp) && navigator.onLine) {
-                prefetchApp.name = formatAppName(prefetchApp.name);
-                prefetchApp.url = formatAppURL(prefetchApp.url, prefetchApp.name);
-                if (prefetchApp.name && prefetchApp.url && !appInstanceMap.has(prefetchApp.name)) {
-                    const app = new CreateApp({
-                        name: prefetchApp.name,
-                        url: prefetchApp.url,
-                        scopecss: !((_b = (_a = prefetchApp['disable-scopecss']) !== null && _a !== void 0 ? _a : prefetchApp.disableScopecss) !== null && _b !== void 0 ? _b : microApp['disable-scopecss']),
-                        useSandbox: !((_d = (_c = prefetchApp['disable-sandbox']) !== null && _c !== void 0 ? _c : prefetchApp.disableSandbox) !== null && _d !== void 0 ? _d : microApp['disable-sandbox']),
-                        useMemoryRouter: !((_e = prefetchApp['disable-memory-router']) !== null && _e !== void 0 ? _e : microApp['disable-memory-router']),
-                    });
-                    app.isPrefetch = true;
-                    app.prefetchResolve = resolve;
-                    appInstanceMap.set(prefetchApp.name, app);
-                }
-                else {
+function preFetchAction(options) {
+    return promiseRequestIdle((resolve) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (isPlainObject(options) && navigator.onLine) {
+            options.name = formatAppName(options.name);
+            options.url = formatAppURL(options.url, options.name);
+            if (options.name && options.url && !appInstanceMap.has(options.name)) {
+                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,
+                    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, options['default-page'], options['disable-patch-request']);
+                };
+                app.onLoadError = (...rests) => {
+                    resolve();
+                    oldOnLoadError.call(app, ...rests);
+                };
             }
             else {
                 resolve();
             }
-        });
+        }
+        else {
+            resolve();
+        }
     });
 }
 /**
@@ -5098,21 +6028,35 @@ function preFetchInSerial(prefetchApp) {
 function getGlobalAssets(assets) {
     if (isPlainObject(assets)) {
         requestIdleCallback(() => {
-            fetchGlobalResources(assets.js, 'js', globalScripts);
-            fetchGlobalResources(assets.css, 'css', globalLinks);
+            fetchGlobalResources(assets.js, 'js', sourceCenter.script);
+            fetchGlobalResources(assets.css, 'css', sourceCenter.link);
         });
     }
 }
 // TODO: requestIdleCallback for every file
-function fetchGlobalResources(resources, suffix, cache) {
+function fetchGlobalResources(resources, suffix, sourceHandler) {
     if (isArray(resources)) {
-        const effectiveResource = resources.filter((path) => isString(path) && path.includes(`.${suffix}`) && !cache.has(path));
+        const effectiveResource = resources.filter((path) => isString(path) && path.includes(`.${suffix}`) && !sourceHandler.hasInfo(path));
         const fetchResourcePromise = effectiveResource.map((path) => fetchSource(path));
         // fetch resource with stream
         promiseStream(fetchResourcePromise, (res) => {
             const path = effectiveResource[res.index];
-            if (!cache.has(path)) {
-                cache.set(path, res.data);
+            if (suffix === 'js') {
+                if (!sourceHandler.hasInfo(path)) {
+                    sourceHandler.setInfo(path, {
+                        code: res.data,
+                        isExternal: false,
+                        appSpace: {},
+                    });
+                }
+            }
+            else {
+                if (!sourceHandler.hasInfo(path)) {
+                    sourceHandler.setInfo(path, {
+                        code: res.data,
+                        appSpace: {}
+                    });
+                }
             }
         }, (err) => {
             logError(err);
@@ -5123,13 +6067,14 @@ function fetchGlobalResources(resources, suffix, cache) {
 /**
  * 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);
@@ -5155,33 +6100,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'));
@@ -5189,36 +6144,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.preFetch = preFetch;
+        this.options = {};
         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;
@@ -5237,26 +6287,10 @@ class MicroApp extends EventCenterForBaseApp {
             return logWarn(`element ${this.tagName} is already defined`);
         }
         initGlobalEnv();
-        if (options && isPlainObject(options)) {
-            this.shadowDOM = options.shadowDOM;
-            this.destroy = options.destroy;
-            /**
-             * compatible with versions below 0.4.2 of destroy
-             * do not merge with the previous line
-             */
-            // @ts-ignore
-            this.destory = options.destory;
-            this.inline = options.inline;
-            this['disable-scopecss'] = (_a = options['disable-scopecss']) !== null && _a !== void 0 ? _a : options.disableScopecss;
-            this['disable-sandbox'] = (_b = options['disable-sandbox']) !== null && _b !== void 0 ? _b : options.disableSandbox;
-            this['disable-memory-router'] = options['disable-memory-router'];
-            this['disable-patch-request'] = options['disable-patch-request'];
-            this['keep-router-state'] = options['keep-router-state'];
-            this['hidden-router'] = options['hidden-router'];
-            this.esmodule = options.esmodule;
-            this.ssr = options.ssr;
-            isFunction(options.fetch) && (this.fetch = options.fetch);
-            isPlainObject(options.lifeCycles) && (this.lifeCycles = options.lifeCycles);
+        if (isPlainObject(options)) {
+            this.options = options;
+            options['disable-scopecss'] = (_a = options['disable-scopecss']) !== null && _a !== void 0 ? _a : options.disableScopecss;
+            options['disable-sandbox'] = (_b = options['disable-sandbox']) !== null && _b !== void 0 ? _b : options.disableSandbox;
             // load app assets when browser is idle
             options.preFetchApps && preFetch(options.preFetchApps);
             // load global assets when browser is idle
@@ -5272,15 +6306,14 @@ class MicroApp extends EventCenterForBaseApp {
                         }
                     }
                 }
-                this.plugins = options.plugins;
             }
         }
         // define customElement after init
         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