@micro-zoe/micro-app 1.0.0-rc.7 → 1.0.0-rc.9

package/lib/index.d.ts

@@ -143,6 +143,10 @@ declare module '@micro-zoe/micro-app/libs/utils' {
     export function isURL(target: unknown): target is URL;
     export function isElement(target: unknown): target is Element;
     export function isNode(target: unknown): target is Node;
+    export function isCanvasElement(target: unknown): target is HTMLAnchorElement;
+    export function isAnchorElement(target: unknown): target is HTMLAnchorElement;
+    export function isAudioElement(target: unknown): target is HTMLAnchorElement;
+    export function isVideoElement(target: unknown): target is HTMLAnchorElement;
     export function isLinkElement(target: unknown): target is HTMLLinkElement;
     export function isStyleElement(target: unknown): target is HTMLStyleElement;
     export function isScriptElement(target: unknown): target is HTMLScriptElement;
@@ -340,6 +344,12 @@ declare module '@micro-zoe/micro-app/libs/utils' {
         * target maybe number, string, array ...
         */
     export function isEmptyObject(target: unknown): boolean;
+    /**
+        *
+        * @param {string} url  input url
+        * @returns {boolean} is relative path
+        */
+    export const isRelativePath: (url: string) => boolean;
 }
 
 declare module '@micro-zoe/micro-app/interact' {

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.7';
+const version = '1.0.0-rc.9';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -89,6 +89,15 @@ function isNode(target) {
     var _a;
     return target instanceof Node || isNumber((_a = target) === null || _a === void 0 ? void 0 : _a.nodeType);
 }
+function isAnchorElement(target) {
+    return toTypeString(target) === '[object HTMLAnchorElement]';
+}
+function isAudioElement(target) {
+    return toTypeString(target) === '[object HTMLAudioElement]';
+}
+function isVideoElement(target) {
+    return toTypeString(target) === '[object HTMLVideoElement]';
+}
 function isLinkElement(target) {
     return toTypeString(target) === '[object HTMLLinkElement]';
 }
@@ -643,6 +652,12 @@ function formatEventType(type, appName) {
 function isEmptyObject(target) {
     return isPlainObject(target) ? !Object.keys(target).length : true;
 }
+/**
+ *
+ * @param {string} url  input url
+ * @returns {boolean} is relative path
+ */
+const isRelativePath = (url) => !/^https?:\/\//i.test(url) && !/^\/\//i.test(url);
 
 function formatEventInfo(event, element) {
     Object.defineProperties(event, {
@@ -865,7 +880,7 @@ class CSSParser {
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
         if (!selectors)
-            return parseError('selector missing', this.linkPath);
+            return this.printError('selector missing', this.linkPath);
         this.recordResult(selectors);
         this.matchComments();
         this.styleDeclarations();
@@ -910,10 +925,10 @@ class CSSParser {
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
     styleDeclarations() {
         if (!this.matchOpenBrace())
-            return parseError("Declaration missing '{'", this.linkPath);
+            return this.printError("Declaration missing '{'", this.linkPath);
         this.matchAllDeclarations();
         if (!this.matchCloseBrace())
-            return parseError("Declaration missing '}'", this.linkPath);
+            return this.printError("Declaration missing '}'", this.linkPath);
         return true;
     }
     matchAllDeclarations(nesting = 0) {
@@ -936,7 +951,7 @@ class CSSParser {
         }
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        if (!this.cssText)
+        if (!this.cssText.length)
             return;
         // extract comments in declarations
         if (this.cssText.charAt(0) === '/') {
@@ -990,16 +1005,16 @@ class CSSParser {
         if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/))
             return false;
         if (!this.commonMatch(/^[^{]+/))
-            return parseError('@keyframes missing name', this.linkPath);
+            return this.printError('@keyframes missing name', this.linkPath);
         this.matchComments();
         if (!this.matchOpenBrace())
-            return parseError("@keyframes missing '{'", this.linkPath);
+            return this.printError("@keyframes missing '{'", this.linkPath);
         this.matchComments();
         while (this.keyframeRule()) {
             this.matchComments();
         }
         if (!this.matchCloseBrace())
-            return parseError("@keyframes missing '}'", this.linkPath);
+            return this.printError("@keyframes missing '}'", this.linkPath);
         this.matchLeadingSpaces();
         return true;
     }
@@ -1047,7 +1062,7 @@ class CSSParser {
         this.matchComments();
         this.matchRules();
         if (!this.matchCloseBrace())
-            return parseError('@layer missing \'}\'', this.linkPath);
+            return this.printError('@layer missing \'}\'', this.linkPath);
         this.matchLeadingSpaces();
         return true;
     }
@@ -1057,11 +1072,11 @@ class CSSParser {
             if (!this.commonMatch(reg))
                 return false;
             if (!this.matchOpenBrace())
-                return parseError(`${name} missing '{'`, this.linkPath);
+                return this.printError(`${name} missing '{'`, this.linkPath);
             this.matchComments();
             this.matchRules();
             if (!this.matchCloseBrace())
-                return parseError(`${name} missing '}'`, this.linkPath);
+                return this.printError(`${name} missing '}'`, this.linkPath);
             this.matchLeadingSpaces();
             return true;
         };
@@ -1079,10 +1094,10 @@ class CSSParser {
     // common handler for @font-face, @page
     commonHandlerForAtRuleWithSelfRule(name) {
         if (!this.matchOpenBrace())
-            return parseError(`@${name} missing '{'`, this.linkPath);
+            return this.printError(`@${name} missing '{'`, this.linkPath);
         this.matchAllDeclarations();
         if (!this.matchCloseBrace())
-            return parseError(`@${name} missing '}'`, this.linkPath);
+            return this.printError(`@${name} missing '}'`, this.linkPath);
         this.matchLeadingSpaces();
         return true;
     }
@@ -1102,7 +1117,7 @@ class CSSParser {
             ++i;
         i += 2;
         if (this.cssText.charAt(i - 1) === '') {
-            return parseError('End of comment missing', this.linkPath);
+            return this.printError('End of comment missing', this.linkPath);
         }
         // get comment content
         let commentText = this.cssText.slice(2, i - 2);
@@ -1162,6 +1177,11 @@ class CSSParser {
             this.result += strFragment;
         }
     }
+    printError(msg, linkPath) {
+        if (this.cssText.length) {
+            parseError(msg, linkPath);
+        }
+    }
 }
 /**
  * common method of bind CSS
@@ -2968,14 +2988,37 @@ function updateElementInfo(node, appName) {
          *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
          *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
         */
-        rawDefineProperties(node, {
+        const props = {
             __MICRO_APP_NAME__: {
                 configurable: true,
                 enumerable: true,
                 writable: true,
                 value: appName,
             },
-        });
+        };
+        if (isAnchorElement(node)) {
+            // a 标签
+            const microApp = AppManager.getInstance().get(appName);
+            if (microApp) {
+                let originalHref = node.href;
+                props.href = {
+                    get() {
+                        if (isRelativePath(originalHref)) {
+                            return `${microApp.url}${originalHref}`;
+                        }
+                        return originalHref;
+                    },
+                    set(value) {
+                        originalHref = value;
+                    }
+                };
+            }
+        }
+        if (isImageElement(node) || isVideoElement(node) || isAudioElement(node)) {
+            // @ts-ignore
+            node.crossOrigin = 'anonymous';
+        }
+        rawDefineProperties(node, props);
         /**
          * In FireFox, iframe Node.prototype will point to native Node.prototype after insert to document
          *
@@ -4065,32 +4108,34 @@ function createMicroHistory(appName, microLocation) {
             (_c = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : (_b = _a.sandBox).updateIframeBase) === null || _c === void 0 ? void 0 : _c.call(_b);
         };
     }
-    const pushState = getMicroHistoryMethod('pushState');
-    const replaceState = getMicroHistoryMethod('replaceState');
+    const originalHistory = {
+        pushState: getMicroHistoryMethod('pushState'),
+        replaceState: getMicroHistoryMethod('replaceState'),
+    };
     if (isIframeSandbox(appName)) {
-        return {
-            pushState,
-            replaceState,
+        return assign({
             go(delta) {
                 return rawHistory.go(delta);
             }
-        };
+        }, originalHistory);
     }
     return new Proxy(rawHistory, {
         get(target, key) {
-            if (key === 'state') {
-                return getMicroState(appName);
-            }
-            else if (key === 'pushState') {
-                return pushState;
+            if (key === 'pushState' || key === 'replaceState') {
+                return originalHistory[key];
             }
-            else if (key === 'replaceState') {
-                return replaceState;
+            else if (key === 'state') {
+                return getMicroState(appName);
             }
             return bindFunctionToRawTarget(Reflect.get(target, key), target, 'HISTORY');
         },
         set(target, key, value) {
-            Reflect.set(target, key, value);
+            if (key === 'pushState' || key === 'replaceState') {
+                originalHistory[key] = value;
+            }
+            else {
+                Reflect.set(target, key, value);
+            }
             /**
              * If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
              * e.g. history.state = {}
@@ -4186,7 +4231,6 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            // TODO: 大部分情况下，history.pushState 都是先执行，micro-app后卸载，所以会产生一种情况：跳转到新地址后，search模式会在url上添加参数，卸载后再将参数删除，所以会导致浏览器地址闪烁，是否需要去掉这个功能
             if ((isRouterModeSearch(appName) || isRouterModeState(appName)) && !getMicroPathFromURL(appName)) {
                 const app = appInstanceMap.get(appName);
                 attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName), app.sandBox.proxyWindow.location));
@@ -5534,7 +5578,7 @@ const proxy2RawDocumentMethods = [
  * @returns EffectHook
  */
 function patchWindow$1(appName, microAppWindow, sandbox) {
-    patchWindowProperty$1(appName, microAppWindow);
+    patchWindowProperty$1(appName, microAppWindow, sandbox);
     createProxyWindow$1(microAppWindow, sandbox);
     return patchWindowEffect$1(microAppWindow);
 }
@@ -5543,7 +5587,7 @@ function patchWindow$1(appName, microAppWindow, sandbox) {
  * @param appName app name
  * @param microAppWindow child app microWindow
  */
-function patchWindowProperty$1(appName, microAppWindow) {
+function patchWindowProperty$1(appName, microAppWindow, sandbox) {
     const rawWindow = globalEnv.rawWindow;
     escape2RawWindowKeys.forEach((key) => {
         microAppWindow[key] = bindFunctionToRawTarget(rawWindow[key], rawWindow);
@@ -5588,25 +5632,10 @@ function patchWindowProperty$1(appName, microAppWindow) {
                 configurable: true,
                 enumerable: false,
                 value(target) {
-                    return target instanceof rawWindow[key] || instanceOf(target, microAppWindow[key]);
+                    return instanceOf(target, rawWindow[key]) || instanceOf(target, microAppWindow[key]);
                 },
             });
         }
-        // hijackInstanceOfWindowRegExpKeys.some((reg: RegExp) => {
-        //   if (reg.test(key) && key in rawWindow) {
-        //     rawDefineProperty(microAppWindow[key], Symbol.hasInstance, {
-        //       configurable: true,
-        //       enumerable: false,
-        //       value: (target: unknown) => {
-        //         return target instanceof rawWindow[key]
-        //           ? true
-        //           : instanceOf(target, microAppWindow[key])
-        //       },
-        //     })
-        //     return true
-        //   }
-        //   return false
-        // })
         return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT_OF_IFRAME.includes(key);
     })
         .forEach((eventName) => {
@@ -5627,6 +5656,23 @@ function patchWindowProperty$1(appName, microAppWindow) {
             logWarn(e, appName);
         }
     });
+    /**
+     * In esmodule(vite) proxyWindow will not take effect,
+     * escapeProperties should define to microAppWindow
+     */
+    sandbox.escapeProperties.forEach((key) => {
+        let rawValue = microAppWindow[key];
+        rawDefineProperty(microAppWindow, key, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return rawValue !== null && rawValue !== void 0 ? rawValue : bindFunctionToRawTarget(rawWindow[key], rawWindow);
+            },
+            set(value) {
+                rawValue = value;
+            }
+        });
+    });
 }
 /**
  * create proxyWindow with Proxy(microAppWindow)
@@ -5661,7 +5707,7 @@ function createProxyWindow$1(microAppWindow, sandbox) {
              *  2. window.key in module app(vite), fall into microAppWindow(iframeWindow), escapeProperties will not take effect
              *  3. if (key)... --> fall into microAppWindow(iframeWindow), escapeProperties will not take effect
              */
-            if (includes(sandbox.escapeProperties, key) && !Reflect.has(target, key)) {
+            if (includes(sandbox.escapeProperties, key) && !Reflect.get(target, key)) {
                 return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
             }
             return bindFunctionToRawTarget(Reflect.get(target, key), target);
@@ -5673,17 +5719,13 @@ function createProxyWindow$1(microAppWindow, sandbox) {
             if (!Reflect.has(target, key)) {
                 customProperties.add(key);
             }
+            // sandbox.escapeProperties will not set to rawWindow from rc.9
             Reflect.set(target, key, value);
-            if (includes(sandbox.escapeProperties, key)) {
-                !Reflect.has(rawWindow, key) && sandbox.escapeKeys.add(key);
-                Reflect.set(rawWindow, key, value);
-            }
             return true;
         },
         has: (target, key) => key in target,
         deleteProperty: (target, key) => {
             if (Reflect.has(target, key)) {
-                sandbox.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
                 return Reflect.deleteProperty(target, key);
             }
             return true;
@@ -6377,8 +6419,6 @@ class IframeSandbox {
         this.active = false;
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
-        // Properties escape to rawWindow, cleared when unmount
-        this.escapeKeys = new Set();
         // Update the base.href when initial and each redirect
         this.updateIframeBase = () => {
             var _a;
@@ -6494,10 +6534,6 @@ class IframeSandbox {
         /* --- memory router part --- end */
         if (!umdMode || destroy) {
             this.deleteIframeElement();
-            this.escapeKeys.forEach((key) => {
-                Reflect.deleteProperty(globalEnv.rawWindow, key);
-            });
-            this.escapeKeys.clear();
             this.clearHijackUmdHooks();
         }
         if (--globalEnv.activeSandbox === 0) {
@@ -7851,7 +7887,7 @@ function patchElementAndDocument() {
         },
         set(code) {
             globalEnv.rawInnerHTMLDesc.set.call(this, code);
-            const currentAppName = this.__MICRO_APP_NAME__ || getCurrentAppName();
+            const currentAppName = this.__MICRO_APP_NAME__ || getIframeCurrentAppName() || getCurrentAppName();
             Array.from(this.children).forEach((child) => {
                 if (isElement(child) && currentAppName) {
                     updateElementInfo(child, currentAppName);
@@ -8026,6 +8062,68 @@ function rejectMicroAppStyle() {
     }
 }
 
+// 重写 Worker 构造函数的类型
+const originalWorker = window.Worker;
+function isSameOrigin(url) {
+    if (url instanceof URL && url.protocol === 'blob:') {
+        // 如果 url 是 Blob URL，直接返回 true
+        return true;
+    }
+    // 检查 URL 是否与当前页面在同一个源
+    try {
+        const parsedUrl = new URL(url);
+        return (parsedUrl.protocol === window.location.protocol &&
+            parsedUrl.hostname === window.location.hostname &&
+            parsedUrl.port === window.location.port);
+    }
+    catch (error) {
+        return false;
+    }
+}
+function urlFromScript(script) {
+    let blob;
+    try {
+        blob = new Blob([script], {
+            type: 'application/javascript'
+        });
+    }
+    catch (e) {
+        const BlobBuilder = 
+        // @ts-ignore
+        window.BlobBuilder ||
+            // @ts-ignore
+            window.WebKitBlobBuilder ||
+            // @ts-ignore
+            window.MozBlobBuilder ||
+            // @ts-ignore
+            window.MSBlobBuilder;
+        const blobBuilder = new BlobBuilder();
+        blobBuilder.append(script);
+        blob = blobBuilder.getBlob('application/javascript');
+    }
+    const URL = window.URL || window.webkitURL;
+    return URL.createObjectURL(blob);
+}
+// @ts-ignore
+const WorkerProxy = new Proxy(originalWorker, {
+    construct(Target, args) {
+        const [scriptURL, options] = args;
+        if (!isSameOrigin(scriptURL)) {
+            // 如果 scriptURL 是跨域的，使用 Blob URL 加载并执行 worker
+            const script = `import "${scriptURL}";`;
+            const workerPath = urlFromScript(script);
+            options.type = 'module';
+            return new Target(workerPath, options);
+        }
+        else {
+            // 如果 scriptURL 是同源的，直接使用原生的 Worker 构造函数
+            return new Target(scriptURL, options);
+        }
+    },
+});
+// @ts-ignore
+window.Worker = WorkerProxy;
+
 const globalEnv = {
     // active sandbox count
     activeSandbox: 0,
@@ -8283,8 +8381,7 @@ function defineElement(tagName) {
             if (this.legalAttribute(attr, newVal) &&
                 this[attr === ObservedAttrName.NAME ? 'appName' : 'appUrl'] !== newVal) {
                 if (attr === ObservedAttrName.URL && (!this.appUrl ||
-                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
-                )) {
+                    !this.connectStateMap.get(this.connectedCount))) {
                     newVal = formatAppURL(newVal, this.appName);
                     if (!newVal) {
                         return logError(`Invalid attribute url ${newVal}`, this.appName);
@@ -8293,13 +8390,11 @@ function defineElement(tagName) {
                     this.handleInitialNameAndUrl();
                 }
                 else if (attr === ObservedAttrName.NAME && (!this.appName ||
-                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
-                )) {
+                    !this.connectStateMap.get(this.connectedCount))) {
                     const formatNewName = formatAppName(newVal);
                     if (!formatNewName) {
                         return logError(`Invalid attribute name ${newVal}`, this.appName);
                     }
-                    // TODO: 当micro-app还未插入文档中就修改name，逻辑可否再优化一下
                     if (this.cacheData) {
                         microApp.setData(formatNewName, this.cacheData);
                         this.cacheData = null;