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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.4';
+const version = '1.0.0-alpha.7';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -72,6 +72,12 @@ function isShadowRoot(target) {
 function isURL(target) {
     return target instanceof URL;
 }
+function isElement(target) {
+    return target instanceof Element;
+}
+function isNode(target) {
+    return target instanceof Node;
+}
 // is ProxyDocument
 function isProxyDocument(target) {
     return toString.call(target) === '[object ProxyDocument]';
@@ -258,8 +264,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 +450,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 +533,38 @@ var lifeCycles;
     lifeCycles["AFTERSHOW"] = "aftershow";
     lifeCycles["AFTERHIDDEN"] = "afterhidden";
 })(lifeCycles || (lifeCycles = {}));
+// global event of child app
+var microGlobalEvent;
+(function (microGlobalEvent) {
+    microGlobalEvent["ONMOUNT"] = "onmount";
+    microGlobalEvent["ONUNMOUNT"] = "onunmount";
+})(microGlobalEvent || (microGlobalEvent = {}));
 // keep-alive status
 var keepAliveStates;
 (function (keepAliveStates) {
     keepAliveStates["KEEP_ALIVE_SHOW"] = "keep_alive_show";
     keepAliveStates["KEEP_ALIVE_HIDDEN"] = "keep_alive_hidden";
 })(keepAliveStates || (keepAliveStates = {}));
+// micro-app config
+var MicroAppConfig;
+(function (MicroAppConfig) {
+    MicroAppConfig["DESTROY"] = "destroy";
+    MicroAppConfig["DESTORY"] = "destory";
+    MicroAppConfig["INLINE"] = "inline";
+    MicroAppConfig["DISABLESCOPECSS"] = "disableScopecss";
+    MicroAppConfig["DISABLESANDBOX"] = "disableSandbox";
+    MicroAppConfig["DISABLE_SCOPECSS"] = "disable-scopecss";
+    MicroAppConfig["DISABLE_SANDBOX"] = "disable-sandbox";
+    MicroAppConfig["DISABLE_MEMORY_ROUTER"] = "disable-memory-router";
+    MicroAppConfig["DISABLE_PATCH_REQUEST"] = "disable-patch-request";
+    MicroAppConfig["KEEP_ROUTER_STATE"] = "keep-router-state";
+    MicroAppConfig["HIDDEN_ROUTER"] = "hidden-router";
+    MicroAppConfig["KEEP_ALIVE"] = "keep-alive";
+    MicroAppConfig["CLEAR_DATA"] = "clear-data";
+    MicroAppConfig["ESMODULE"] = "esmodule";
+    MicroAppConfig["SSR"] = "ssr";
+    MicroAppConfig["FIBER"] = "fiber";
+})(MicroAppConfig || (MicroAppConfig = {}));
 /**
  * global key must be static key, they can not rewrite
  * e.g.
@@ -493,8 +589,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 +627,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 +649,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 +687,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 +814,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 +874,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 +1011,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 +1032,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 +1077,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 +1161,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 +1212,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 {
@@ -1169,17 +1412,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 +1459,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 +1479,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,20 +1508,40 @@ function handleNewNode(parent, child, app) {
  * @param passiveChild second param of insertBefore and replaceChild
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
-    const hijackElement = getHijackElement(parent, app);
+    const hijackParent = getHijackParent(parent, app);
     /**
      * If passiveChild is not the child node, insertBefore replaceChild will have a problem, at this time, it will be degraded to appendChild
      * E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
      */
-    if (hijackElement) {
+    if (hijackParent) {
+        /**
+         * WARNING:
+         * Verifying that the parentNode of the targetChild points to document.body will cause other problems ?
+         */
+        if (hijackParent.tagName === 'MICRO-APP-BODY' && rawMethod !== globalEnv.rawRemoveChild) {
+            const descriptor = Object.getOwnPropertyDescriptor(targetChild, 'parentNode');
+            if (!descriptor || descriptor.configurable) {
+                rawDefineProperty(targetChild, 'parentNode', {
+                    configurable: true,
+                    get() {
+                        /**
+                         * When operate child from parentNode async, Element.prototype may reset
+                         * e.g.
+                         * target.parentNode.remove(target)
+                         */
+                        return Element.prototype.removeChild === globalEnv.rawRemoveChild ? hijackParent : document.body;
+                    },
+                });
+            }
+        }
         /**
          * 1. If passiveChild exists, it must be insertBefore or replaceChild
          * 2. When removeChild, targetChild may not be in microAppHead or head
          */
-        if (passiveChild && !hijackElement.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(hijackElement, targetChild);
+        if (passiveChild && !hijackParent.contains(passiveChild)) {
+            return globalEnv.rawAppendChild.call(hijackParent, targetChild);
         }
-        else if (rawMethod === globalEnv.rawRemoveChild && !hijackElement.contains(targetChild)) {
+        else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetChild)) {
             if (parent.contains(targetChild)) {
                 return rawMethod.call(parent, targetChild);
             }
@@ -1281,12 +1553,12 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             rawMethod === globalEnv.rawAppendChild) {
             fixReactHMRConflict(app);
         }
-        return invokeRawMethod(rawMethod, hijackElement, targetChild, passiveChild);
+        return invokeRawMethod(rawMethod, hijackParent, targetChild, passiveChild);
     }
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
 }
 // head/body map to micro-app-head/micro-app-body
-function getHijackElement(node, app) {
+function getHijackParent(node, app) {
     var _a, _b;
     if (node === document.head) {
         return (_a = app === null || app === void 0 ? void 0 : app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-head');
@@ -1319,13 +1591,13 @@ function getMappingNode(node) {
  */
 function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
     const currentAppName = getCurrentAppName();
-    if (newChild instanceof Node &&
+    if (isNode(newChild) &&
         (newChild.__MICRO_APP_NAME__ ||
             (currentAppName && !newChild.__PURE_ELEMENT__))) {
         newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
         if (app === null || app === void 0 ? void 0 : app.container) {
-            if (newChild instanceof Element) {
+            if (isElement(newChild)) {
                 if (/^(img|script)$/i.test(newChild.tagName)) {
                     if (newChild.hasAttribute('src')) {
                         globalEnv.rawSetAttribute.call(newChild, 'src', CompletionPath(newChild.getAttribute('src'), app.url));
@@ -1345,7 +1617,7 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
         }
     }
     else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        if (!(newChild instanceof Node) && currentAppName) {
+        if (!isNode(newChild) && currentAppName) {
             const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
                 if (parent === document.head) {
@@ -1705,8 +1977,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 +2061,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 +2077,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 +2167,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 +2207,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) {
+            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 +2240,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) {
+        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 +2467,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 +2546,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 +2568,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 +2596,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 +2622,37 @@ function extractSourceDom(htmlStr, app) {
 class EventCenter {
     constructor() {
         this.eventList = new Map();
+        this.queue = [];
+        this.recordStep = {};
+        // run task
+        this.process = () => {
+            var _a, _b;
+            let name;
+            const temRecordStep = this.recordStep;
+            const queue = this.queue;
+            this.recordStep = {};
+            this.queue = [];
+            while (name = queue.shift()) {
+                const eventInfo = this.eventList.get(name);
+                // clear tempData, force before exec nextStep
+                const tempData = eventInfo.tempData;
+                const force = eventInfo.force;
+                eventInfo.tempData = null;
+                eventInfo.force = false;
+                if (force || !this.isEqual(eventInfo.data, tempData)) {
+                    eventInfo.data = tempData || eventInfo.data;
+                    for (const f of eventInfo.callbacks) {
+                        f(eventInfo.data);
+                    }
+                    (_b = (_a = temRecordStep[name]).dispatchDataEvent) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    /**
+                     * WARING:
+                     * If data of other app is sent in nextStep, it may cause confusion of tempData and force
+                     */
+                    temRecordStep[name].nextStepList.forEach((nextStep) => nextStep());
+                }
+            }
+        };
     }
     // whether the name is legal
     isLegalName(name) {
@@ -2175,6 +2662,39 @@ class EventCenter {
         }
         return true;
     }
+    // add appName to queue
+    enqueue(name, nextStep, dispatchDataEvent) {
+        // this.nextStepList.push(nextStep)
+        if (this.recordStep[name]) {
+            this.recordStep[name].nextStepList.push(nextStep);
+            dispatchDataEvent && (this.recordStep[name].dispatchDataEvent = dispatchDataEvent);
+        }
+        else {
+            this.recordStep[name] = {
+                nextStepList: [nextStep],
+                dispatchDataEvent,
+            };
+        }
+        /**
+         * The micro task is executed async when the second render of child.
+         * We should ensure that the data changes are executed before binding the listening function
+         */
+        (!this.queue.includes(name) && this.queue.push(name) === 1) && defer(this.process);
+    }
+    /**
+     * In react, each setState will trigger setData, so we need a filter operation to avoid repeated trigger
+     */
+    isEqual(oldData, newData) {
+        if (!newData || Object.keys(oldData).length !== Object.keys(newData).length)
+            return false;
+        for (const key in oldData) {
+            if (Object.prototype.hasOwnProperty.call(oldData, key)) {
+                if (oldData[key] !== newData[key])
+                    return false;
+            }
+        }
+        return true;
+    }
     /**
      * add listener
      * @param name event name
@@ -2194,7 +2714,10 @@ class EventCenter {
                 };
                 this.eventList.set(name, eventInfo);
             }
-            else if (autoTrigger && Object.getOwnPropertyNames(eventInfo.data).length) {
+            else if (autoTrigger &&
+                Object.keys(eventInfo.data).length &&
+                (!this.queue.includes(name) ||
+                    this.isEqual(eventInfo.data, eventInfo.tempData))) {
                 // auto trigger when data not null
                 f(eventInfo.data);
             }
@@ -2215,21 +2738,27 @@ class EventCenter {
             }
         }
     }
+    /**
+     * clearData
+     */
+    clearData(name) {
+        if (this.isLegalName(name)) {
+            const eventInfo = this.eventList.get(name);
+            if (eventInfo) {
+                eventInfo.data = {};
+            }
+        }
+    }
     // dispatch data
-    dispatch(name, data) {
+    dispatch(name, data, nextStep, force, dispatchDataEvent) {
         if (this.isLegalName(name)) {
             if (!isPlainObject(data)) {
                 return logError('event-center: data must be object');
             }
             let eventInfo = this.eventList.get(name);
             if (eventInfo) {
-                // Update when the data is not equal
-                if (eventInfo.data !== data) {
-                    eventInfo.data = data;
-                    for (const f of eventInfo.callbacks) {
-                        f(data);
-                    }
-                }
+                eventInfo.tempData = assign({}, eventInfo.tempData || eventInfo.data, data);
+                !eventInfo.force && (eventInfo.force = !!force);
             }
             else {
                 eventInfo = {
@@ -2237,7 +2766,13 @@ class EventCenter {
                     callbacks: new Set(),
                 };
                 this.eventList.set(name, eventInfo);
+                /**
+                 * When sent data to parent, eventInfo probably does not exist, because parent may listen to datachange
+                 */
+                eventInfo.force = true;
             }
+            // add to queue, event eventInfo is null
+            this.enqueue(name, nextStep, dispatchDataEvent);
         }
     }
     // get data
@@ -2286,10 +2821,13 @@ class EventCenterForGlobal {
      * dispatch global data
      * @param data data
      */
-    setGlobalData(data) {
+    setGlobalData(data, nextStep, force) {
         // clear dom scope before dispatch global data, apply to micro app
         removeDomScope();
-        eventCenter.dispatch('global', data);
+        eventCenter.dispatch('global', data, () => isFunction(nextStep) && nextStep(), force);
+    }
+    forceSetGlobalData(data, nextStep) {
+        this.setGlobalData(data, nextStep, true);
     }
     /**
      * get global data
@@ -2297,6 +2835,12 @@ class EventCenterForGlobal {
     getGlobalData() {
         return eventCenter.getData('global');
     }
+    /**
+     * clear global data
+     */
+    clearGlobalData() {
+        eventCenter.clearData('global');
+    }
     /**
      * clear all listener of global data
      * if appName exists, only the specified functions is cleared
@@ -2347,8 +2891,19 @@ class EventCenterForBaseApp extends EventCenterForGlobal {
      * @param appName app.name
      * @param data data
      */
-    setData(appName, data) {
-        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data);
+    setData(appName, data, nextStep, force) {
+        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data, () => isFunction(nextStep) && nextStep(), force);
+    }
+    forceSetData(appName, data, nextStep) {
+        this.setData(appName, data, nextStep, true);
+    }
+    /**
+     * clear data from base app
+     * @param appName app.name
+     * @param fromBaseApp whether clear data from child app, default is true
+     */
+    clearData(appName, fromBaseApp = true) {
+        eventCenter.clearData(formatEventName(formatAppName(appName), fromBaseApp));
     }
     /**
      * clear all listener for specified micro app
@@ -2384,25 +2939,36 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
     /**
      * get data from base app
      */
-    getData() {
-        return eventCenter.getData(formatEventName(this.appName, true));
+    getData(fromBaseApp = true) {
+        return eventCenter.getData(formatEventName(this.appName, fromBaseApp));
     }
     /**
      * dispatch data to base app
      * @param data data
      */
-    dispatch(data) {
+    dispatch(data, nextStep, force) {
         removeDomScope();
-        eventCenter.dispatch(formatEventName(this.appName, false), data);
-        const app = appInstanceMap.get(this.appName);
-        if ((app === null || app === void 0 ? void 0 : app.container) && isPlainObject(data)) {
-            const event = new CustomEvent('datachange', {
-                detail: {
-                    data,
-                }
-            });
-            getRootContainer(app.container).dispatchEvent(event);
-        }
+        eventCenter.dispatch(formatEventName(this.appName, false), data, () => isFunction(nextStep) && nextStep(), force, () => {
+            const app = appInstanceMap.get(this.appName);
+            if ((app === null || app === void 0 ? void 0 : app.container) && isPlainObject(data)) {
+                const event = new CustomEvent('datachange', {
+                    detail: {
+                        data: eventCenter.getData(formatEventName(this.appName, false))
+                    }
+                });
+                getRootContainer(app.container).dispatchEvent(event);
+            }
+        });
+    }
+    forceDispatch(data, nextStep) {
+        this.dispatch(data, nextStep, true);
+    }
+    /**
+     * clear data from child app
+     * @param fromBaseApp whether clear data from base app, default is false
+     */
+    clearData(fromBaseApp = false) {
+        eventCenter.clearData(formatEventName(this.appName, fromBaseApp));
     }
     /**
      * clear all listeners
@@ -2989,9 +3555,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 +3582,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
@@ -3163,7 +3739,6 @@ 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 => {
             const app = appInstanceMap.get(appName);
@@ -3273,7 +3848,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);
@@ -3614,7 +4189,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) {
@@ -3766,7 +4346,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
@@ -3791,26 +4371,36 @@ class SandBox {
         // Rewrite global event listener & timeout
         assign(this, 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 +4411,26 @@ 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();
+            clearData && this.microAppWindow.microApp.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:
@@ -3883,9 +4481,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,7 +4601,7 @@ 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;
@@ -4018,8 +4616,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 +4793,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 +4897,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 +4918,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, }) {
         this.state = appStates.CREATED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
@@ -4331,30 +4927,26 @@ class CreateApp {
         this.umdHookUnmount = null;
         this.libraryName = null;
         this.umdMode = false;
-        this.isPrefetch = false;
-        this.prefetchResolve = null;
-        this.container = null;
         this.sandBox = null;
+        this.keepRouteState = false;
+        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(),
-        };
+        // not exist when normal 👇
+        this.isPrefetch = isPrefetch !== null && isPrefetch !== void 0 ? isPrefetch : false;
+        // 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() {
@@ -4365,16 +4957,12 @@ class CreateApp {
      * When resource is loaded, mount app if it is not prefetch or unmount
      */
     onLoad(html) {
-        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;
-            }
-            else if (appStates.UNMOUNT !== this.state) {
-                this.state = appStates.LOADED;
-                this.mount();
+            this.state = appStates.LOADED;
+            if (!this.isPrefetch && appStates.UNMOUNT !== this.state) {
+                // @ts-ignore
+                getRootContainer(this.container).mount(this);
             }
         }
     }
@@ -4384,10 +4972,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;
@@ -4401,15 +4985,16 @@ class CreateApp {
      * @param keepRouteState keep route state when unmount, default is false
      * @param disablePatchRequest prevent rewrite request method of child app
      */
-    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, esmodule, useMemoryRouter, baseroute, keepRouteState, defaultPage, disablePatchRequest, fiber, }) {
+        var _a, _b;
+        this.container = container;
+        this.inline = inline;
+        this.esmodule = esmodule;
+        this.keepRouteState = keepRouteState;
+        this.fiber = fiber;
+        // use in sandbox/effect
+        this.useMemoryRouter = useMemoryRouter;
+        // this.hiddenRouter = hiddenRouter ?? this.hiddenRouter
         if (this.loadSourceLevel !== 2) {
             this.state = appStates.LOADING;
             return;
@@ -4417,24 +5002,34 @@ class CreateApp {
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
         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);
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.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) => {
                 if (!this.umdMode) {
                     const { mount, unmount } = this.getUmdLibraryHooks();
+                    /**
+                     * umdHookUnmount can works in non UMD mode
+                     * register with window.unmount
+                     */
+                    this.umdHookUnmount = unmount;
                     // if mount & unmount is function, the sub app is umd mode
                     if (isFunction(mount) && isFunction(unmount)) {
                         this.umdHookMount = mount;
-                        this.umdHookUnmount = unmount;
                         this.umdMode = true;
                         if (this.sandBox)
                             this.sandBox.proxyWindow.__MICRO_APP_UMD_MODE__ = true;
                         // this.sandBox?.recordUmdSnapshot()
                         try {
-                            umdHookMountResult = this.umdHookMount();
+                            umdHookMountResult = this.umdHookMount(microApp.getData(this.name, true));
                         }
                         catch (e) {
                             logError('an error occurred in the mount function \n', this.name, e);
@@ -4448,7 +5043,7 @@ class CreateApp {
             });
         }
         else {
-            (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.rebuildUmdSnapshot();
+            (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.rebuildUmdSnapshot();
             try {
                 umdHookMountResult = this.umdHookMount();
             }
@@ -4478,6 +5073,9 @@ class CreateApp {
     dispatchMountedEvent() {
         if (appStates.UNMOUNT !== this.state) {
             this.state = appStates.MOUNTED;
+            // call window.onmount of child app
+            callFnWithTryCatch(this.getGlobalEventListener(microGlobalEvent.ONMOUNT), this.name, `window.${microGlobalEvent.ONMOUNT}`, microApp.getData(this.name, true));
+            // dispatch event mounted to parent
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
         }
     }
@@ -4487,7 +5085,7 @@ class CreateApp {
      * @param destroy completely destroy, delete cache resources
      * @param unmountcb callback of unmount
      */
-    unmount(destroy, unmountcb) {
+    unmount({ destroy, clearData, unmountcb, }) {
         if (this.state === appStates.LOAD_FAILED) {
             destroy = true;
         }
@@ -4500,17 +5098,19 @@ class CreateApp {
          * send an unmount event to the micro app or call umd unmount hook
          * before the sandbox is cleared
          */
-        if (this.umdHookUnmount) {
+        if (isFunction(this.umdHookUnmount)) {
             try {
-                umdHookUnmountResult = this.umdHookUnmount();
+                umdHookUnmountResult = this.umdHookUnmount(microApp.getData(this.name, true));
             }
             catch (e) {
                 logError('an error occurred in the unmount function \n', this.name, e);
             }
         }
+        // call window.onunmount of child app
+        callFnWithTryCatch(this.getGlobalEventListener(microGlobalEvent.ONUNMOUNT), this.name, `window.${microGlobalEvent.ONUNMOUNT}`);
         // dispatch unmount event to micro app
         dispatchCustomEventToMicroApp('unmount', this.name);
-        this.handleUnmounted(destroy, umdHookUnmountResult, unmountcb);
+        this.handleUnmounted(destroy, clearData, umdHookUnmountResult, unmountcb);
     }
     /**
      * handle for promise umdHookUnmount
@@ -4518,14 +5118,14 @@ class CreateApp {
      * @param umdHookUnmountResult result of umdHookUnmount
      * @param unmountcb callback of unmount
      */
-    handleUnmounted(destroy, umdHookUnmountResult, unmountcb) {
+    handleUnmounted(destroy, clearData, umdHookUnmountResult, unmountcb) {
         if (isPromise(umdHookUnmountResult)) {
             umdHookUnmountResult
-                .then(() => this.actionsForUnmount(destroy, unmountcb))
-                .catch(() => this.actionsForUnmount(destroy, unmountcb));
+                .then(() => this.actionsForUnmount(destroy, clearData, unmountcb))
+                .catch(() => this.actionsForUnmount(destroy, clearData, unmountcb));
         }
         else {
-            this.actionsForUnmount(destroy, unmountcb);
+            this.actionsForUnmount(destroy, clearData, unmountcb);
         }
     }
     /**
@@ -4533,7 +5133,7 @@ class CreateApp {
      * @param destroy completely destroy, delete cache resources
      * @param unmountcb callback of unmount
      */
-    actionsForUnmount(destroy, unmountcb) {
+    actionsForUnmount(destroy, clearData, unmountcb) {
         var _a, _b;
         if (destroy) {
             this.actionsForCompletelyDestroy();
@@ -4544,13 +5144,21 @@ class CreateApp {
         if (this.umdMode) {
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordUmdSnapshot();
         }
+        if (clearData || destroy) {
+            microApp.clearData(this.name);
+        }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
          * NOTE:
          * 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: this.keepRouteState && !destroy,
+            clearEventSource: !this.umdMode || destroy,
+            clearData: clearData || destroy,
+        });
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
         }
@@ -4565,10 +5173,11 @@ class CreateApp {
         if (!this.useSandbox && this.umdMode) {
             delete window[this.libraryName];
         }
+        sourceCenter.script.deleteInlineInfo(this.source.scripts);
         appInstanceMap.delete(this.name);
     }
     // hidden app when disconnectedCallback called with keep-alive
-    hiddenKeepAliveApp() {
+    hiddenKeepAliveApp(callback) {
         var _a;
         const oldContainer = this.container;
         cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
@@ -4583,6 +5192,7 @@ class CreateApp {
         dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
         // called after lifeCyclesEvent
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
+        callback && callback();
     }
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
@@ -4622,16 +5232,27 @@ class CreateApp {
     }
     // get umd library, if it not exist, return empty object
     getUmdLibraryHooks() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         // after execScripts, the app maybe unmounted
         if (appStates.UNMOUNT !== this.state) {
             const global = ((_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) !== null && _b !== void 0 ? _b : globalEnv.rawWindow);
             this.libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
-            // do not use isObject
-            return typeof global[this.libraryName] === 'object' ? global[this.libraryName] : {};
+            if (isObject(global[this.libraryName])) {
+                return global[this.libraryName];
+            }
+            return {
+                mount: (_c = this.sandBox) === null || _c === void 0 ? void 0 : _c.proxyWindow.mount,
+                unmount: (_d = this.sandBox) === null || _d === void 0 ? void 0 : _d.proxyWindow.unmount,
+            };
         }
         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;
+    }
 }
 
 /**
@@ -4644,7 +5265,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
@@ -4654,6 +5276,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)) {
@@ -4664,7 +5288,7 @@ function defineElement(tagName) {
                             keepAliveStates.KEEP_ALIVE_HIDDEN !== existApp.getKeepAliveState() &&
                             !existApp.isPrefetch) {
                             this.setAttribute('name', this.appName);
-                            return logError(`app name conflict, an app named ${formatAttrName} is running`, this.appName);
+                            return logError(`app name conflict, an app named ${formatAttrName} is running`);
                         }
                     }
                     if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
@@ -4705,22 +5329,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);
                 }
             }
         }
@@ -4758,12 +5416,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)) {
@@ -4773,26 +5431,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 {
@@ -4827,7 +5494,7 @@ function defineElement(tagName) {
                     }
                     else {
                         // the hidden keep-alive app is still active
-                        logError(`app name conflict, an app named ${this.appName} is running`, this.appName);
+                        logError(`app name conflict, an app named ${this.appName} is running`);
                     }
                 }
                 else if (existApp.url === this.appUrl && existApp.ssrUrl === this.ssrUrl) {
@@ -4854,20 +5521,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;
@@ -4878,41 +5531,69 @@ 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'),
+                esmodule: this.getDisposeResult('esmodule'),
                 useMemoryRouter: !this.getDisposeResult('disable-memory-router'),
                 baseroute: this.getBaseRouteCompatible(),
                 keepRouteState: this.getDisposeResult('keep-router-state'),
                 defaultPage: this.getDefaultPageValue(),
                 hiddenRouter: this.getDisposeResult('hidden-router'),
                 disablePatchRequest: this.getDisposeResult('disable-patch-request'),
+                fiber: this.getDisposeResult('fiber'),
             });
-            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'),
+                    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) {
@@ -4925,8 +5606,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) {
@@ -4948,6 +5628,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
@@ -4995,8 +5681,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
@@ -5022,7 +5710,7 @@ function defineElement(tagName) {
             return null;
         }
     }
-    window.customElements.define(tagName, MicroAppElement);
+    globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
 }
 
 /**
@@ -5053,33 +5741,40 @@ function preFetch(apps) {
     });
 }
 // 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 preFetchInSerial(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,
+                    scopecss: !((_b = (_a = options['disable-scopecss']) !== null && _a !== void 0 ? _a : options.disableScopecss) !== null && _b !== void 0 ? _b : microApp.options['disable-scopecss']),
+                    useSandbox: !((_d = (_c = options['disable-sandbox']) !== null && _c !== void 0 ? _c : options.disableSandbox) !== null && _d !== void 0 ? _d : microApp.options['disable-sandbox']),
+                    inline: (_e = options.inline) !== null && _e !== void 0 ? _e : microApp.options.inline,
+                    esmodule: (_f = options.esmodule) !== null && _f !== void 0 ? _f : microApp.options.esmodule,
+                    isPrefetch: true,
+                });
+                const oldOnload = app.onLoad;
+                const oldOnLoadError = app.onLoadError;
+                app.onLoad = (html) => {
                     resolve();
-                }
+                    oldOnload.call(app, html);
+                };
+                app.onLoadError = (e) => {
+                    resolve();
+                    oldOnLoadError.call(app, e);
+                };
             }
             else {
                 resolve();
             }
-        });
+        }
+        else {
+            resolve();
+        }
     });
 }
 /**
@@ -5089,21 +5784,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);
@@ -5146,33 +5855,41 @@ function unmountApp(appName, options) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
                     app.actionsForCompletelyDestroy();
                 }
-                resolve();
+                resolve(true);
             }
             else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
-                    app.unmount(true, resolve);
+                    app.unmount({
+                        destroy: true,
+                        clearData: true,
+                        unmountcb: resolve.bind(null, true)
+                    });
                 }
                 else if (options === null || options === void 0 ? void 0 : options.clearAliveState) {
-                    app.unmount(false, resolve);
+                    app.unmount({
+                        destroy: false,
+                        clearData: !!options.clearData,
+                        unmountcb: resolve.bind(null, true)
+                    });
                 }
                 else {
-                    resolve();
+                    resolve(true);
                 }
             }
             else {
                 const container = getRootContainer(app.container);
                 const unmountHandler = () => {
-                    container.removeEventListener('unmount', unmountHandler);
-                    container.removeEventListener('afterhidden', afterhiddenHandler);
-                    resolve();
+                    container.removeEventListener(lifeCycles.UNMOUNT, unmountHandler);
+                    container.removeEventListener(lifeCycles.AFTERHIDDEN, afterhiddenHandler);
+                    resolve(true);
                 };
                 const afterhiddenHandler = () => {
-                    container.removeEventListener('unmount', unmountHandler);
-                    container.removeEventListener('afterhidden', afterhiddenHandler);
-                    resolve();
+                    container.removeEventListener(lifeCycles.UNMOUNT, unmountHandler);
+                    container.removeEventListener(lifeCycles.AFTERHIDDEN, afterhiddenHandler);
+                    resolve(true);
                 };
-                container.addEventListener('unmount', unmountHandler);
-                container.addEventListener('afterhidden', afterhiddenHandler);
+                container.addEventListener(lifeCycles.UNMOUNT, unmountHandler);
+                container.addEventListener(lifeCycles.AFTERHIDDEN, afterhiddenHandler);
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
                     let destroyAttrValue, destoryAttrValue;
                     container.hasAttribute('destroy') && (destroyAttrValue = container.getAttribute('destroy'));
@@ -5180,36 +5897,131 @@ function unmountApp(appName, options) {
                     container.setAttribute('destroy', 'true');
                     container.parentNode.removeChild(container);
                     container.removeAttribute('destroy');
-                    typeof destroyAttrValue === 'string' && container.setAttribute('destroy', destroyAttrValue);
-                    typeof destoryAttrValue === 'string' && container.setAttribute('destory', destoryAttrValue);
+                    isString(destroyAttrValue) && container.setAttribute('destroy', destroyAttrValue);
+                    isString(destoryAttrValue) && container.setAttribute('destory', destoryAttrValue);
                 }
                 else if ((options === null || options === void 0 ? void 0 : options.clearAliveState) && container.hasAttribute('keep-alive')) {
                     const keepAliveAttrValue = container.getAttribute('keep-alive');
                     container.removeAttribute('keep-alive');
+                    let clearDataAttrValue;
+                    if (options.clearData) {
+                        clearDataAttrValue = container.getAttribute('clear-data');
+                        container.setAttribute('clear-data', 'true');
+                    }
                     container.parentNode.removeChild(container);
                     container.setAttribute('keep-alive', keepAliveAttrValue);
+                    isString(clearDataAttrValue) && container.setAttribute('clear-data', clearDataAttrValue);
                 }
                 else {
+                    let clearDataAttrValue;
+                    if (options === null || options === void 0 ? void 0 : options.clearData) {
+                        clearDataAttrValue = container.getAttribute('clear-data');
+                        container.setAttribute('clear-data', 'true');
+                    }
                     container.parentNode.removeChild(container);
+                    isString(clearDataAttrValue) && container.setAttribute('clear-data', clearDataAttrValue);
                 }
             }
         }
         else {
             logWarn(`app ${appName} does not exist`);
-            resolve();
+            resolve(false);
         }
     });
 }
 // unmount all apps in turn
 function unmountAllApps(options) {
-    return Array.from(appInstanceMap.keys()).reduce((pre, next) => pre.then(() => unmountApp(next, options)), Promise.resolve());
+    return Array.from(appInstanceMap.keys()).reduce((pre, next) => pre.then(() => unmountApp(next, options)), Promise.resolve(true));
+}
+/**
+ * Re render app from the command line
+ * microApp.reload(destroy)
+ * @param appName app.name
+ * @param destroy unmount app with destroy mode
+ * @returns Promise<boolean>
+ */
+function reload(appName, destroy) {
+    return new Promise((resolve) => {
+        const app = appInstanceMap.get(formatAppName(appName));
+        if (app) {
+            const rootContainer = app.container && getRootContainer(app.container);
+            if (rootContainer) {
+                resolve(rootContainer.reload(destroy));
+            }
+            else {
+                logWarn(`app ${appName} is not rendered, cannot use reload`);
+                resolve(false);
+            }
+        }
+        else {
+            logWarn(`app ${appName} does not exist`);
+            resolve(false);
+        }
+    });
+}
+/**
+ * Manually render app
+ * @param options RenderAppOptions
+ * @returns Promise<boolean>
+ */
+function renderApp(options) {
+    return new Promise((resolve) => {
+        if (!isPlainObject(options))
+            return logError('renderApp options must be an object');
+        const container = isElement(options.container) ? options.container : isString(options.container) ? document.querySelector(options.container) : null;
+        if (!isElement(container))
+            return logError('Target container is not a DOM element.');
+        const microAppElement = pureCreateElement(microApp.tagName);
+        for (const attr in options) {
+            if (attr === 'onDataChange') {
+                if (isFunction(options[attr])) {
+                    microAppElement.addEventListener('datachange', options[attr]);
+                }
+            }
+            else if (attr === 'lifeCycles') {
+                const lifeCycleConfig = options[attr];
+                if (isPlainObject(lifeCycleConfig)) {
+                    for (const lifeName in lifeCycleConfig) {
+                        if (lifeName.toUpperCase() in lifeCycles && isFunction(lifeCycleConfig[lifeName])) {
+                            microAppElement.addEventListener(lifeName.toLowerCase(), lifeCycleConfig[lifeName]);
+                        }
+                    }
+                }
+            }
+            else if (attr !== 'container') {
+                microAppElement.setAttribute(attr, options[attr]);
+            }
+        }
+        const handleMount = () => {
+            releaseListener();
+            resolve(true);
+        };
+        const handleError = () => {
+            releaseListener();
+            resolve(false);
+        };
+        const releaseListener = () => {
+            microAppElement.removeEventListener(lifeCycles.MOUNTED, handleMount);
+            microAppElement.removeEventListener(lifeCycles.ERROR, handleError);
+        };
+        microAppElement.addEventListener(lifeCycles.MOUNTED, handleMount);
+        microAppElement.addEventListener(lifeCycles.ERROR, handleError);
+        container.appendChild(microAppElement);
+    });
 }
 class MicroApp extends EventCenterForBaseApp {
     constructor() {
         super(...arguments);
         this.tagName = 'micro-app';
-        this.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;
@@ -5228,26 +6040,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
@@ -5263,15 +6059,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