@micro-zoe/micro-app 0.8.1 → 0.8.5

package/README.md

@@ -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="./.github/contributors.svg" /></a>
+<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=11" /></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="./.github/contributors.svg" /></a>
+<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=11" /></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.1';
+const version = '0.8.5';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -224,7 +224,7 @@ const requestIdleCallback = globalThis.requestIdleCallback ||
                     return Math.max(0, 50 - (Date.now() - lastTime));
                 },
             });
-        }, 1);
+        }, 50);
     };
 /**
  * Record the currently running app.name
@@ -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) {
@@ -359,9 +362,8 @@ function fetchSource(url, appName = null, options = {}) {
 // common reg
 const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/;
 const bodySelectorREG = /(^|\s+)((html[\s>~]+body)|body)(?=[\s>~[.#:]+|$)/;
-const cssUrlREG = /url\(["']?([^)"']+)["']?\)/gm;
 function parseError(msg, linkPath) {
-    msg = linkPath ? `${linkPath}:${msg}` : msg;
+    msg = linkPath ? `${linkPath} ${msg}` : msg;
     const err = new Error(msg);
     err.reason = msg;
     if (linkPath) {
@@ -370,7 +372,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
@@ -404,7 +406,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 = '';
@@ -423,92 +425,76 @@ 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())
             return parseError("Declaration missing '{'", this.linkPath);
-        this.matchComments();
-        while (this.styleDeclaration()) {
-            this.matchComments();
-        }
+        this.matchAllDeclarations();
         if (!this.matchCloseBrace())
             return parseError("Declaration missing '}'", this.linkPath);
         return true;
     }
-    // match one styleDeclaration at a time
-    styleDeclaration() {
-        // css property
-        if (!this.commonMatch(/^(\*?[-#+\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/))
-            return false;
-        // match :
-        if (!this.commonMatch(/^:\s*/))
-            return parseError("property missing ':'", this.linkPath);
-        // match css value
-        const r = this.commonMatch(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/, true);
-        let cssValue = r ? r[0] : '';
-        if (!this.scopecssDisableNextLine &&
-            (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
-            cssValue = cssValue.replace(cssUrlREG, (all, $1) => {
-                if (/^((data|blob):|#)/.test($1) || /^(https?:)?\/\//.test($1)) {
-                    return all;
-                }
-                // ./a/b.png  ../a/b.png  a/b.png
-                if (/^((\.\.?\/)|[^/])/.test($1) && this.linkPath) {
-                    this.baseURI = getLinkFileDir(this.linkPath);
-                }
-                return `url("${CompletionPath($1, this.baseURI)}")`;
-            });
+    matchAllDeclarations() {
+        let cssValue = this.commonMatch(/^(?:url\(["']?(?:[^)"'}]+)["']?\)|[^}/])*/, true)[0];
+        if (cssValue) {
+            if (!this.scopecssDisableNextLine &&
+                (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
+                cssValue = cssValue.replace(/url\(["']?([^)"']+)["']?\)/gm, (all, $1) => {
+                    if (/^((data|blob):|#)/.test($1) || /^(https?:)?\/\//.test($1)) {
+                        return all;
+                    }
+                    // ./a/b.png  ../a/b.png  a/b.png
+                    if (/^((\.\.?\/)|[^/])/.test($1) && this.linkPath) {
+                        this.baseURI = getLinkFileDir(this.linkPath);
+                    }
+                    return `url("${CompletionPath($1, this.baseURI)}")`;
+                });
+            }
+            this.recordResult(cssValue);
         }
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        this.result += cssValue;
-        this.matchLeadingSpaces();
-        this.commonMatch(/^[;\s]*/);
-        return true;
-    }
-    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;
-        });
+        if (!this.cssText || this.cssText.charAt(0) === '}')
+            return;
+        // extract comments in declarations
+        if (this.cssText.charAt(0) === '/' && this.cssText.charAt(1) === '*') {
+            this.matchComments();
+        }
+        else {
+            this.commonMatch(/\/+/);
+        }
+        return this.matchAllDeclarations();
     }
     matchAtRule() {
         if (this.cssText[0] !== '@')
@@ -569,7 +555,7 @@ class CSSParser {
     pageRule() {
         if (!this.commonMatch(/^@page */))
             return false;
-        this.formatSelector();
+        this.formatSelector(false);
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
         return this.commonHandlerForAtRuleWithSelfRule('page');
@@ -602,17 +588,14 @@ class CSSParser {
             if (!this.commonMatch(reg))
                 return false;
             this.matchLeadingSpaces();
-            return false;
+            return true;
         };
     }
     // common handler for @font-face, @page
     commonHandlerForAtRuleWithSelfRule(name) {
         if (!this.matchOpenBrace())
             return parseError(`@${name} missing '{'`, this.linkPath);
-        this.matchComments();
-        while (this.styleDeclaration()) {
-            this.matchComments();
-        }
+        this.matchAllDeclarations();
         if (!this.matchCloseBrace())
             return parseError(`@${name} missing '}'`, this.linkPath);
         this.matchLeadingSpaces();
@@ -638,7 +621,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') {
@@ -671,7 +654,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() {
@@ -684,6 +667,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
@@ -698,7 +691,7 @@ function commonAction(styleElement, appName, prefix, baseURI, linkPath) {
         }
         catch (e) {
             parser.reset();
-            logError('CSSParser: An error occurred while parsing CSS', appName, e);
+            logError('An error occurred while parsing CSS:\n', appName, e);
         }
         if (result)
             styleElement.textContent = result;
@@ -834,11 +827,9 @@ function extractLinkFromHtml(link, parent, app, isDynamic = false) {
  */
 function fetchLinksFromHtml(wrapElement, app, microAppHead) {
     const linkEntries = Array.from(app.source.links.entries());
-    const fetchLinkPromise = [];
-    for (const [url] of linkEntries) {
-        const globalLinkCode = globalLinks.get(url);
-        globalLinkCode ? fetchLinkPromise.push(globalLinkCode) : fetchLinkPromise.push(fetchSource(url, app.name));
-    }
+    const fetchLinkPromise = linkEntries.map(([url]) => {
+        return globalLinks.has(url) ? globalLinks.get(url) : fetchSource(url, app.name);
+    });
     promiseStream(fetchLinkPromise, (res) => {
         fetchLinkSuccess(linkEntries[res.index][0], linkEntries[res.index][1], res.data, microAppHead, app);
     }, (err) => {
@@ -1115,6 +1106,27 @@ function patchElementPrototypeMethods() {
         this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
         return clonedNode;
     };
+    // patch getBoundingClientRect
+    // TODO: scenes test
+    // Element.prototype.getBoundingClientRect = function getBoundingClientRect () {
+    //   const rawRect: DOMRect = globalEnv.rawGetBoundingClientRect.call(this)
+    //   if (this.__MICRO_APP_NAME__) {
+    //     const app = appInstanceMap.get(this.__MICRO_APP_NAME__)
+    //     if (!app?.container) {
+    //       return rawRect
+    //     }
+    //     const appBody = app.container.querySelector('micro-app-body')
+    //     const appBodyRect: DOMRect = globalEnv.rawGetBoundingClientRect.call(appBody)
+    //     const computedRect: DOMRect = new DOMRect(
+    //       rawRect.x - appBodyRect.x,
+    //       rawRect.y - appBodyRect.y,
+    //       rawRect.width,
+    //       rawRect.height,
+    //     )
+    //     return computedRect
+    //   }
+    //   return rawRect
+    // }
 }
 /**
  * Mark the newly created element in the micro application
@@ -1281,6 +1293,7 @@ function releasePatches() {
     Element.prototype.append = globalEnv.rawAppend;
     Element.prototype.prepend = globalEnv.rawPrepend;
     Element.prototype.cloneNode = globalEnv.rawCloneNode;
+    // Element.prototype.getBoundingClientRect = globalEnv.rawGetBoundingClientRect
 }
 // Set the style of micro-app-head and micro-app-body
 let hasRejectMicroAppStyle = false;
@@ -1334,6 +1347,7 @@ function initGlobalEnv() {
         const rawAppend = Element.prototype.append;
         const rawPrepend = Element.prototype.prepend;
         const rawCloneNode = Element.prototype.cloneNode;
+        // const rawGetBoundingClientRect = Element.prototype.getBoundingClientRect
         const rawCreateElement = Document.prototype.createElement;
         const rawCreateElementNS = Document.prototype.createElementNS;
         const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
@@ -1377,6 +1391,7 @@ function initGlobalEnv() {
             rawAppend,
             rawPrepend,
             rawCloneNode,
+            // rawGetBoundingClientRect,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -1497,7 +1512,7 @@ function fetchScriptsFromHtml(wrapElement, app) {
             if (globalScriptText) {
                 info.code = globalScriptText;
             }
-            else if (!info.defer && !info.async) {
+            else if ((!info.defer && !info.async) || app.isPrefetch) {
                 fetchScriptPromise.push(fetchSource(url, app.name));
                 fetchScriptPromiseInfo.push([url, info]);
             }
@@ -1590,7 +1605,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);
@@ -1643,7 +1658,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);
             }
@@ -1699,13 +1714,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__);`;
     }
@@ -1717,19 +1732,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);
@@ -2432,8 +2448,11 @@ const escapeSetterKeyList = [
 const globalPropertyList = ['window', 'self', 'globalThis'];
 class SandBox {
     constructor(appName, url) {
-        // Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
-        this.scopeProperties = ['webpackJsonp'];
+        /**
+         * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
+         * https://github.com/micro-zoe/micro-app/issues/234
+         */
+        this.scopeProperties = ['webpackJsonp', 'Vue'];
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
         // Properties newly added to microAppWindow
@@ -2631,10 +2650,12 @@ class SandBox {
         microAppWindow.__MICRO_APP_NAME__ = appName;
         microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
-        microAppWindow.microApp = new EventCenterForMicroApp(appName);
+        microAppWindow.microApp = Object.assign(new EventCenterForMicroApp(appName), {
+            removeDomScope,
+            pureCreateElement,
+        });
         microAppWindow.rawWindow = globalEnv.rawWindow;
         microAppWindow.rawDocument = globalEnv.rawDocument;
-        microAppWindow.removeDomScope = removeDomScope;
         microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
         this.setMappingPropertiesWithRawDescriptor(microAppWindow);
         this.setHijackProperties(microAppWindow, appName);
@@ -2779,6 +2800,7 @@ class CreateApp {
         this.libraryName = null;
         this.umdMode = false;
         this.isPrefetch = false;
+        this.prefetchResolve = null;
         this.container = null;
         this.baseroute = '';
         this.sandBox = null;
@@ -2807,12 +2829,17 @@ 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 || appStates.UNMOUNT === this.state)
-                return;
-            this.state = appStates.LOAD_SOURCE_FINISHED;
-            this.mount();
+            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.LOAD_SOURCE_FINISHED;
+                this.mount();
+            }
         }
     }
     /**
@@ -2821,6 +2848,10 @@ 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_SOURCE_ERROR;
@@ -3406,21 +3437,6 @@ function defineElement(tagName) {
     window.customElements.define(tagName, MicroAppElement);
 }
 
-function filterPreFetchTarget(apps) {
-    const validApps = [];
-    if (isArray(apps)) {
-        apps.forEach((item) => {
-            if (isPlainObject(item)) {
-                item.name = formatAppName(item.name);
-                item.url = formatAppURL(item.url, item.name);
-                if (item.name && item.url && !appInstanceMap.has(item.name)) {
-                    validApps.push(item);
-                }
-            }
-        });
-    }
-    return validApps;
-}
 /**
  * preFetch([
  *  {
@@ -3442,16 +3458,37 @@ function preFetch(apps) {
     }
     requestIdleCallback(() => {
         isFunction(apps) && (apps = apps());
-        filterPreFetchTarget(apps).forEach((item) => {
+        if (isArray(apps)) {
+            apps.reduce((pre, next) => pre.then(() => preFetchInSerial(next)), Promise.resolve());
+        }
+    });
+}
+// sequential preload app
+function preFetchInSerial(prefetchApp) {
+    return new Promise((resolve) => {
+        requestIdleCallback(() => {
             var _a, _b;
-            const app = new CreateApp({
-                name: item.name,
-                url: item.url,
-                scopecss: !((_a = item.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
-                useSandbox: !((_b = item.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
-            });
-            app.isPrefetch = true;
-            appInstanceMap.set(item.name, app);
+            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: !((_a = prefetchApp.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
+                        useSandbox: !((_b = prefetchApp.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
+                    });
+                    app.isPrefetch = true;
+                    app.prefetchResolve = resolve;
+                    appInstanceMap.set(prefetchApp.name, app);
+                }
+                else {
+                    resolve();
+                }
+            }
+            else {
+                resolve();
+            }
         });
     });
 }
@@ -3462,38 +3499,24 @@ function preFetch(apps) {
 function getGlobalAssets(assets) {
     if (isPlainObject(assets)) {
         requestIdleCallback(() => {
-            if (isArray(assets.js)) {
-                const effectiveJs = assets.js.filter((path) => isString(path) && path.includes('.js') && !globalScripts.has(path));
-                const fetchJSPromise = [];
-                effectiveJs.forEach((path) => {
-                    fetchJSPromise.push(fetchSource(path));
-                });
-                // fetch js with stream
-                promiseStream(fetchJSPromise, (res) => {
-                    const path = effectiveJs[res.index];
-                    if (!globalScripts.has(path)) {
-                        globalScripts.set(path, res.data);
-                    }
-                }, (err) => {
-                    logError(err);
-                });
-            }
-            if (isArray(assets.css)) {
-                const effectiveCss = assets.css.filter((path) => isString(path) && path.includes('.css') && !globalLinks.has(path));
-                const fetchCssPromise = [];
-                effectiveCss.forEach((path) => {
-                    fetchCssPromise.push(fetchSource(path));
-                });
-                // fetch css with stream
-                promiseStream(fetchCssPromise, (res) => {
-                    const path = effectiveCss[res.index];
-                    if (!globalLinks.has(path)) {
-                        globalLinks.set(path, res.data);
-                    }
-                }, (err) => {
-                    logError(err);
-                });
+            fetchGlobalResources(assets.js, 'js', globalScripts);
+            fetchGlobalResources(assets.css, 'css', globalLinks);
+        });
+    }
+}
+// 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));
+        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);
             }
+        }, (err) => {
+            logError(err);
         });
     }
 }