@micro-zoe/micro-app 0.8.1 → 0.8.2

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.esm.js

@@ -1,4 +1,4 @@
-const version = '0.8.1';
+const version = '0.8.2';
 // 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
@@ -834,11 +834,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 +1113,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 +1300,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;
@@ -1289,7 +1309,7 @@ function rejectMicroAppStyle() {
         hasRejectMicroAppStyle = true;
         const style = pureCreateElement('style');
         globalEnv.rawSetAttribute.call(style, 'type', 'text/css');
-        style.textContent = `\n${microApp.tagName}, micro-app-body { display: block; } \nmicro-app-head { display: none; }`;
+        style.textContent = `\n${microApp.tagName}, micro-app-body { display: block; position: relative; } \nmicro-app-head { display: none; }`;
         globalEnv.rawDocument.head.appendChild(style);
     }
 }
@@ -1334,6 +1354,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 +1398,7 @@ function initGlobalEnv() {
             rawAppend,
             rawPrepend,
             rawCloneNode,
+            // rawGetBoundingClientRect,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -1497,7 +1519,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]);
             }
@@ -2432,8 +2454,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 +2656,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 +2806,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 +2835,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 +2854,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 +3443,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 +3464,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 +3505,23 @@ 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);
+        });
+    }
+}
+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);
         });
     }
 }