@micro-zoe/micro-app 0.8.3 → 0.8.6

package/README.md

@@ -97,7 +97,7 @@ yarn bootstrap
 yarn start
 ```
 
-For more commands, see [DEVELP](https://github.com/micro-zoe/micro-app/blob/master/DEVELOP.md)
+For more commands, see [DEVELOP](https://github.com/micro-zoe/micro-app/blob/master/DEVELOP.md)
 
 # FAQ
 <details>
@@ -152,7 +152,7 @@ For more commands, see [DEVELP](https://github.com/micro-zoe/micro-app/blob/mast
 </details>
 
 # Contributors
-<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=11" /></a>
+<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=13" /></a>
 <!-- opencollective is inaccurate  -->
 <!-- <a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://opencollective.com/micro-app/contributors.svg?width=890&button=false" /></a> -->
 

package/README.zh-cn.md

@@ -153,7 +153,7 @@ yarn start # 访问 http://localhost:3000
 </details>
 
 # 贡献者们
-<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=11" /></a>
+<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=13" /></a>
 <!-- opencollective is inaccurate  -->
 <!-- <a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://opencollective.com/micro-app/contributors.svg?width=890&button=false" /></a> -->
 

package/lib/index.d.ts

@@ -190,6 +190,7 @@ declare module '@micro-zoe/micro-app/libs/utils' {
         * trim start & end
         */
     export function trim(str: string): string;
+    export function isFireFox(): boolean;
 }
 
 declare module '@micro-zoe/micro-app/interact' {

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.8.3';
+const version = '0.8.6';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -303,6 +303,9 @@ function getRootContainer(target) {
 function trim(str) {
     return str ? str.replace(/^\s+|\s+$/g, '') : '';
 }
+function isFireFox() {
+    return navigator.userAgent.indexOf('Firefox') > -1;
+}
 
 var ObservedAttrName;
 (function (ObservedAttrName) {
@@ -356,6 +359,66 @@ function fetchSource(url, appName = null, options = {}) {
     });
 }
 
+class HTMLLoader {
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new HTMLLoader();
+        }
+        return this.instance;
+    }
+    /**
+     * run logic of load and format html
+     * @param successCb success callback
+     * @param errorCb error callback, type: (err: Error, meetFetchErr: boolean) => void
+     */
+    run(app, successCb) {
+        const appName = app.name;
+        const htmlUrl = app.ssrUrl || app.url;
+        fetchSource(htmlUrl, appName, { cache: 'no-cache' }).then((htmlStr) => {
+            if (!htmlStr) {
+                const msg = 'html is empty, please check in detail';
+                app.onerror(new Error(msg));
+                return logError(msg, appName);
+            }
+            htmlStr = this.formatHTML(htmlUrl, htmlStr, appName);
+            successCb(htmlStr, app);
+        }).catch((e) => {
+            logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, appName, e);
+            app.onLoadError(e);
+        });
+    }
+    formatHTML(htmlUrl, htmlStr, appName) {
+        return this.processHtml(htmlUrl, htmlStr, appName, microApp.plugins)
+            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
+            return match
+                .replace(/<head/i, '<micro-app-head')
+                .replace(/<\/head>/i, '</micro-app-head>');
+        })
+            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
+            return match
+                .replace(/<body/i, '<micro-app-body')
+                .replace(/<\/body>/i, '</micro-app-body>');
+        });
+    }
+    processHtml(url, code, appName, plugins) {
+        var _a;
+        if (!plugins)
+            return code;
+        const mergedPlugins = [];
+        plugins.global && mergedPlugins.push(...plugins.global);
+        ((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]) && mergedPlugins.push(...plugins.modules[appName]);
+        if (mergedPlugins.length > 0) {
+            return mergedPlugins.reduce((preCode, plugin) => {
+                if (isPlainObject(plugin) && isFunction(plugin.processHtml)) {
+                    return plugin.processHtml(preCode, url, plugin.options);
+                }
+                return preCode;
+            }, code);
+        }
+        return code;
+    }
+}
+
 // common reg
 const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/;
 const bodySelectorREG = /(^|\s+)((html[\s>~]+body)|body)(?=[\s>~[.#:]+|$)/;
@@ -369,7 +432,7 @@ function parseError(msg, linkPath) {
     throw err;
 }
 /**
- * Reference resources https://github.com/reworkcss/css
+ * Reference https://github.com/reworkcss/css
  * CSSParser mainly deals with 3 scenes: styleRule, @, and comment
  * And scopecss deals with 2 scenes: selector & url
  * And can also disable scopecss with inline comments
@@ -403,7 +466,7 @@ class CSSParser {
         this.baseURI = baseURI;
         this.linkPath = linkPath || '';
         this.matchRules();
-        return this.result;
+        return isFireFox() ? decodeURIComponent(this.result) : this.result;
     }
     reset() {
         this.cssText = this.prefix = this.baseURI = this.linkPath = this.result = '';
@@ -422,17 +485,37 @@ class CSSParser {
     }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule
     matchStyleRule() {
-        const selectorList = this.formatSelector();
+        const selectors = this.formatSelector(true);
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        if (!selectorList)
+        if (!selectors)
             return parseError('selector missing', this.linkPath);
-        this.result += selectorList.join(', ');
+        this.recordResult(selectors);
         this.matchComments();
         this.styleDeclarations();
         this.matchLeadingSpaces();
         return true;
     }
+    formatSelector(skip) {
+        const m = this.commonMatch(/^([^{]+)/, skip);
+        if (!m)
+            return false;
+        return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
+            selector = trim(selector);
+            if (!(this.scopecssDisableNextLine ||
+                (this.scopecssDisable && (!this.scopecssDisableSelectors.length ||
+                    this.scopecssDisableSelectors.includes(selector))) ||
+                rootSelectorREG.test(selector))) {
+                if (bodySelectorREG.test(selector)) {
+                    selector = selector.replace(bodySelectorREG, this.prefix + ' micro-app-body');
+                }
+                else {
+                    selector = this.prefix + ' ' + selector;
+                }
+            }
+            return separator + selector;
+        });
+    }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
     styleDeclarations() {
         if (!this.matchOpenBrace())
@@ -458,7 +541,7 @@ class CSSParser {
                     return `url("${CompletionPath($1, this.baseURI)}")`;
                 });
             }
-            this.result += cssValue;
+            this.recordResult(cssValue);
         }
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
@@ -473,39 +556,6 @@ class CSSParser {
         }
         return this.matchAllDeclarations();
     }
-    formatSelector() {
-        const m = this.commonMatch(/^([^{]+)/, true);
-        if (!m)
-            return false;
-        return trim(m[0])
-            .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
-            .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (r) => {
-            return r.replace(/,/g, '\u200C');
-        })
-            .split(/\s*(?![^(]*\)),\s*/)
-            .map((s) => {
-            const selectorText = s.replace(/\u200C/g, ',');
-            if (this.scopecssDisableNextLine) {
-                return selectorText;
-            }
-            else if (this.scopecssDisable) {
-                if (!this.scopecssDisableSelectors.length ||
-                    this.scopecssDisableSelectors.includes(selectorText)) {
-                    return selectorText;
-                }
-            }
-            if (selectorText === '*') {
-                return this.prefix + ' *';
-            }
-            else if (bodySelectorREG.test(selectorText)) {
-                return selectorText.replace(bodySelectorREG, this.prefix + ' micro-app-body');
-            }
-            else if (rootSelectorREG.test(selectorText)) { // ignore root selector
-                return selectorText;
-            }
-            return this.prefix + ' ' + selectorText;
-        });
-    }
     matchAtRule() {
         if (this.cssText[0] !== '@')
             return false;
@@ -565,7 +615,7 @@ class CSSParser {
     pageRule() {
         if (!this.commonMatch(/^@page */))
             return false;
-        this.formatSelector();
+        this.formatSelector(false);
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
         return this.commonHandlerForAtRuleWithSelfRule('page');
@@ -598,7 +648,7 @@ class CSSParser {
             if (!this.commonMatch(reg))
                 return false;
             this.matchLeadingSpaces();
-            return false;
+            return true;
         };
     }
     // common handler for @font-face, @page
@@ -631,7 +681,7 @@ class CSSParser {
         }
         // get comment content
         let commentText = this.cssText.slice(2, i - 2);
-        this.result += `/*${commentText}*/`;
+        this.recordResult(`/*${commentText}*/`);
         commentText = trim(commentText.replace(/^\s*!/, ''));
         // set ignore config
         if (commentText === 'scopecss-disable-next-line') {
@@ -664,7 +714,7 @@ class CSSParser {
         const matchStr = matchArray[0];
         this.cssText = this.cssText.slice(matchStr.length);
         if (!skip)
-            this.result += matchStr;
+            this.recordResult(matchStr);
         return matchArray;
     }
     matchOpenBrace() {
@@ -677,6 +727,16 @@ class CSSParser {
     matchLeadingSpaces() {
         this.commonMatch(/^\s*/);
     }
+    // splice string
+    recordResult(strFragment) {
+        // Firefox is slow when string contain special characters, see https://github.com/micro-zoe/micro-app/issues/256
+        if (isFireFox()) {
+            this.result += encodeURIComponent(strFragment);
+        }
+        else {
+            this.result += strFragment;
+        }
+    }
 }
 /**
  * common method of bind CSS
@@ -921,12 +981,12 @@ function handleNewNode(parent, child, app) {
         return child;
     }
     else if (child instanceof HTMLLinkElement) {
-        if (child.hasAttribute('exclude')) {
+        if (child.hasAttribute('exclude') || checkExcludeUrl(child.getAttribute('href'), app.name)) {
             const linkReplaceComment = document.createComment('link element with exclude attribute ignored by micro-app');
             dynamicElementInMicroAppMap.set(child, linkReplaceComment);
             return linkReplaceComment;
         }
-        else if (child.hasAttribute('ignore')) {
+        else if (child.hasAttribute('ignore') || checkIgnoreUrl(child.getAttribute('href'), app.name)) {
             return child;
         }
         const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, true);
@@ -974,51 +1034,48 @@ function handleNewNode(parent, child, app) {
  * @param passiveChild second param of insertBefore and replaceChild
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
+    const container = getContainer(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 (parent === document.head) {
-        const microAppHead = app.container.querySelector('micro-app-head');
+    if (container) {
         /**
          * 1. If passiveChild exists, it must be insertBefore or replaceChild
          * 2. When removeChild, targetChild may not be in microAppHead or head
          */
-        if (passiveChild && !microAppHead.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(microAppHead, targetChild);
+        if (passiveChild && !container.contains(passiveChild)) {
+            return globalEnv.rawAppendChild.call(container, targetChild);
         }
-        else if (rawMethod === globalEnv.rawRemoveChild && !microAppHead.contains(targetChild)) {
+        else if (rawMethod === globalEnv.rawRemoveChild && !container.contains(targetChild)) {
             if (parent.contains(targetChild)) {
                 return rawMethod.call(parent, targetChild);
             }
             return targetChild;
         }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppHead, targetChild);
-        }
-        return rawMethod.call(microAppHead, targetChild, passiveChild);
+        return invokeRawMethod(rawMethod, container, targetChild, passiveChild);
     }
-    else if (parent === document.body) {
-        const microAppBody = app.container.querySelector('micro-app-body');
-        if (passiveChild && !microAppBody.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(microAppBody, targetChild);
-        }
-        else if (rawMethod === globalEnv.rawRemoveChild && !microAppBody.contains(targetChild)) {
-            if (parent.contains(targetChild)) {
-                return rawMethod.call(parent, targetChild);
-            }
-            return targetChild;
-        }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppBody, targetChild);
-        }
-        return rawMethod.call(microAppBody, targetChild, passiveChild);
-    }
-    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
+    return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
+}
+function invokeRawMethod(rawMethod, parent, targetChild, passiveChild) {
+    if (isPendMethod(rawMethod)) {
         return rawMethod.call(parent, targetChild);
     }
     return rawMethod.call(parent, targetChild, passiveChild);
 }
+function isPendMethod(method) {
+    return method === globalEnv.rawAppend || method === globalEnv.rawPrepend;
+}
+function getContainer(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');
+    }
+    if (node === document.body) {
+        return (_b = app === null || app === void 0 ? void 0 : app.container) === null || _b === void 0 ? void 0 : _b.querySelector('micro-app-body');
+    }
+    return null;
+}
 // Get the map element
 function getMappingNode(node) {
     var _a;
@@ -1134,7 +1191,8 @@ function patchElementPrototypeMethods() {
  */
 function markElement(element) {
     const appName = getCurrentAppName();
-    appName && (element.__MICRO_APP_NAME__ = appName);
+    if (appName)
+        element.__MICRO_APP_NAME__ = appName;
     return element;
 }
 // methods of document
@@ -1307,13 +1365,39 @@ function rejectMicroAppStyle() {
     }
 }
 
+// 管理 app 的单例
+class AppManager {
+    constructor() {
+        // Todo: appInstanceMap 由 AppManager 来创建，不再由 create_app 管理
+        this.appInstanceMap = appInstanceMap;
+    }
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new AppManager();
+        }
+        return this.instance;
+    }
+    get(appName) {
+        return this.appInstanceMap.get(appName);
+    }
+    set(appName, app) {
+        this.appInstanceMap.set(appName, app);
+    }
+    getAll() {
+        return Array.from(this.appInstanceMap.values());
+    }
+    clear() {
+        this.appInstanceMap.clear();
+    }
+}
+
 function unmountNestedApp() {
     releaseUnmountOfNestedApp();
-    appInstanceMap.forEach(app => {
+    AppManager.getInstance().getAll().forEach(app => {
         // @ts-ignore
         app.container && getRootContainer(app.container).disconnectedCallback();
     });
-    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.clear();
+    !window.__MICRO_APP_UMD_MODE__ && AppManager.getInstance().clear();
 }
 // if micro-app run in micro application, delete all next generation application when unmount event received
 function listenUmountOfNestedApp() {
@@ -1435,11 +1519,14 @@ const globalScripts = new Map();
 function extractScriptElement(script, parent, app, isDynamic = false) {
     let replaceComment = null;
     let src = script.getAttribute('src');
-    if (script.hasAttribute('exclude')) {
+    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'].includes(script.type)) ||
-        script.hasAttribute('ignore')) {
+        script.hasAttribute('ignore') || checkIgnoreUrl(src, app.name)) {
         return null;
     }
     else if ((globalEnv.supportModuleScript && script.noModule) ||
@@ -1447,7 +1534,6 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
     }
     else if (src) { // remote script
-        src = CompletionPath(src, app.url);
         const info = {
             code: '',
             isExternal: true,
@@ -1497,6 +1583,46 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         return parent.replaceChild(replaceComment, script);
     }
 }
+/**
+ * get assets plugins
+ * @param appName app name
+ */
+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]) || [];
+    return [...globalPlugins, ...modulePlugins];
+}
+/**
+ * whether the url needs to be excluded
+ * @param url css or js link
+ * @param plugins microApp plugins
+ */
+function checkExcludeUrl(url, appName) {
+    if (!url)
+        return false;
+    const plugins = getAssetsPlugins(appName) || [];
+    return plugins.some(plugin => {
+        if (!plugin.excludeChecker)
+            return false;
+        return plugin.excludeChecker(url);
+    });
+}
+/**
+ * whether the url needs to be ignore
+ * @param url css or js link
+ * @param plugins microApp plugins
+ */
+function checkIgnoreUrl(url, appName) {
+    if (!url)
+        return false;
+    const plugins = getAssetsPlugins(appName) || [];
+    return plugins.some(plugin => {
+        if (!plugin.ignoreChecker)
+            return false;
+        return plugin.ignoreChecker(url);
+    });
+}
 /**
  *  Get remote resources of script
  * @param wrapElement htmlDom
@@ -1605,7 +1731,7 @@ function execScripts(scriptList, app, initHook) {
 function runScript(url, app, info, isDynamic, callback) {
     var _a;
     try {
-        const code = bindScope(url, app, info.code, info.module);
+        const code = bindScope(url, app, info.code, info);
         if (app.inline || info.module) {
             const scriptElement = pureCreateElement('script');
             runCode2InlineScript(url, code, info.module, scriptElement, callback);
@@ -1658,7 +1784,7 @@ function runDynamicRemoteScript(url, info, app, originScript) {
         app.source.scripts.set(url, info);
         info.isGlobal && globalScripts.set(url, code);
         try {
-            code = bindScope(url, app, code, info.module);
+            code = bindScope(url, app, code, info);
             if (app.inline || info.module) {
                 runCode2InlineScript(url, code, info.module, replaceElement, dispatchScriptOnLoadEvent);
             }
@@ -1714,13 +1840,13 @@ function runCode2Function(code, info) {
  * @param url script address
  * @param app app
  * @param code code
- * @param module type='module' of script
+ * @param info source script info
  */
-function bindScope(url, app, code, module) {
+function bindScope(url, app, code, info) {
     if (isPlainObject(microApp.plugins)) {
-        code = usePlugins(url, code, app.name, microApp.plugins);
+        code = usePlugins(url, code, app.name, microApp.plugins, info);
     }
-    if (app.sandBox && !module) {
+    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__);`;
     }
@@ -1732,19 +1858,20 @@ function bindScope(url, app, code, module) {
  * @param code code
  * @param appName app name
  * @param plugins plugin list
+ * @param info source script info
  */
-function usePlugins(url, code, appName, plugins) {
+function usePlugins(url, code, appName, plugins, info) {
     var _a;
-    const newCode = processCode(plugins.global, code, url);
-    return processCode((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName], newCode, url);
+    const newCode = processCode(plugins.global, code, url, info);
+    return processCode((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName], newCode, url, info);
 }
-function processCode(configs, code, url) {
+function processCode(configs, code, url, info) {
     if (!isArray(configs)) {
         return code;
     }
     return configs.reduce((preCode, config) => {
         if (isPlainObject(config) && isFunction(config.loader)) {
-            return config.loader(preCode, url, config.options);
+            return config.loader(preCode, url, config.options, info);
         }
         return preCode;
     }, code);
@@ -1772,10 +1899,10 @@ function flatChildren(parent, app, microAppHead) {
     });
     for (const dom of children) {
         if (dom instanceof HTMLLinkElement) {
-            if (dom.hasAttribute('exclude')) {
+            if (dom.hasAttribute('exclude') || checkExcludeUrl(dom.getAttribute('href'), app.name)) {
                 parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
             }
-            else if (!dom.hasAttribute('ignore')) {
+            else if (!(dom.hasAttribute('ignore') || checkIgnoreUrl(dom.getAttribute('href'), app.name))) {
                 extractLinkFromHtml(dom, parent, app);
             }
             else if (dom.hasAttribute('href')) {
@@ -1829,34 +1956,6 @@ function extractSourceDom(htmlStr, app) {
         app.onLoad(wrapElement);
     }
 }
-/**
- * Get and format html
- * @param app app
- */
-function extractHtml(app) {
-    fetchSource(app.ssrUrl || app.url, app.name, { cache: 'no-cache' }).then((htmlStr) => {
-        if (!htmlStr) {
-            const msg = 'html is empty, please check in detail';
-            app.onerror(new Error(msg));
-            return logError(msg, app.name);
-        }
-        htmlStr = htmlStr
-            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
-            return match
-                .replace(/<head/i, '<micro-app-head')
-                .replace(/<\/head>/i, '</micro-app-head>');
-        })
-            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
-            return match
-                .replace(/<body/i, '<micro-app-body')
-                .replace(/<\/body>/i, '</micro-app-body>');
-        });
-        extractSourceDom(htmlStr, app);
-    }).catch((e) => {
-        logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, app.name, e);
-        app.onLoadError(e);
-    });
-}
 
 class EventCenter {
     constructor() {
@@ -2822,7 +2921,7 @@ class CreateApp {
     // Load resources
     loadSourceCode() {
         this.state = appStates.LOADING_SOURCE_CODE;
-        extractHtml(this);
+        HTMLLoader.getInstance().run(this, extractSourceDom);
     }
     /**
      * When resource is loaded, mount app if it is not prefetch or unmount
@@ -3503,6 +3602,7 @@ function getGlobalAssets(assets) {
         });
     }
 }
+// TODO: requestIdleCallback for every file
 function fetchGlobalResources(resources, suffix, cache) {
     if (isArray(resources)) {
         const effectiveResource = resources.filter((path) => isString(path) && path.includes(`.${suffix}`) && !cache.has(path));