@open-wxa/wxa-runner-core 0.10.1 → 0.12.0

package/dist/runtime/host.js

@@ -1018,9 +1018,9 @@ ${frames}` : "");
       (this.replies.get(query.id) ?? Promise.resolve(null)).then((reply) => port.postMessage(reply));
     }
   };
-  function installMockMirror() {
-    if (navigator.webdriver || !navigator.serviceWorker) return null;
-    navigator.serviceWorker.register(SERVICE_WORKER_URL, { scope: "/" }).catch((error) => console.warn("[wxa-runner] Service Worker \u6CE8\u518C\u5931\u8D25\uFF0C\u88AB\u62E6\u622A\u7684\u8BF7\u6C42\u4E0D\u4F1A\u663E\u793A\u5728 Network \u9762\u677F\u91CC", error));
+  function installMockMirror(externalServiceWorker = false) {
+    if (!externalServiceWorker && navigator.webdriver || !navigator.serviceWorker) return null;
+    if (!externalServiceWorker) navigator.serviceWorker.register(SERVICE_WORKER_URL, { scope: "/" }).catch((error) => console.warn("[wxa-runner] Service Worker \u6CE8\u518C\u5931\u8D25\uFF0C\u88AB\u62E6\u622A\u7684\u8BF7\u6C42\u4E0D\u4F1A\u663E\u793A\u5728 Network \u9762\u677F\u91CC", error));
     return new MockMirror(navigator.serviceWorker);
   }
 
@@ -1697,16 +1697,11 @@ ${frames}` : "");
   }
 
   // src/runtime/host/api/webView.ts
-  function createWebViewApis({ documentOf, emitToWebview }) {
+  function createWebViewApis({ documentOf, emitToWebview, windows }) {
+    if (windows) return createWindowApis(documentOf, windows);
     const find = (webviewId, htmlId) => documentOf(webviewId)?.querySelector(`iframe[data-wxa-html-id="${Number(htmlId)}"]`) ?? null;
     const reportStart = (webviewId, htmlId, src) => emitToWebview(webviewId, "onWebviewStartLoad", { htmlId, src, isMainFrame: true });
     const reportFinish = (webviewId, htmlId, src) => emitToWebview(webviewId, "onWebviewFinishLoad", { htmlId, src });
-    const place = (frame, position) => {
-      if (!position) return;
-      for (const side of ["left", "top", "width", "height"]) {
-        if (typeof position[side] === "number") frame.style[side] = `${position[side]}px`;
-      }
-    };
     return {
       insertHTMLWebView: (args, { api, webviewId }) => {
         const doc = documentOf(webviewId);
@@ -1737,7 +1732,9 @@ ${frames}` : "");
         place(frame, args.position);
         if (args.src) {
           const src = String(args.src);
+          warnCrossSite(src);
           frame.dataset.wxaLoading = src;
+          frame.dataset.wxaSrc = src;
           reportStart(webviewId, Number(args.htmlId), src);
           frame.src = src;
         }
@@ -1749,6 +1746,161 @@ ${frames}` : "");
       }
     };
   }
+  function createWindowApis(documentOf, windows) {
+    return {
+      insertHTMLWebView: (args, { api, webviewId }) => {
+        const doc = documentOf(webviewId);
+        if (!doc) return fail(api, "page not found");
+        windows.insert(webviewId, Number(args.htmlId), doc, args.position);
+        return ok(api);
+      },
+      updateHTMLWebView: (args, { api, webviewId }) => {
+        if (!windows.update(webviewId, Number(args.htmlId), args.position, args.src ? String(args.src) : void 0)) {
+          return fail(api, "web-view not found");
+        }
+        return ok(api);
+      },
+      removeHTMLWebView: (args, { api, webviewId }) => {
+        windows.remove(webviewId, Number(args.htmlId));
+        return ok(api);
+      }
+    };
+  }
+  function iframeWebViews(doc) {
+    return Array.from(doc?.querySelectorAll("iframe[data-wxa-src]") ?? []).map((frame) => ({ src: frame.dataset.wxaSrc, windowName: null }));
+  }
+  var WebViewWindows = class {
+    /** @param isShown 页面当前是否显示：隐藏的页面先记下地址，显示时再打开窗口 */
+    constructor(device, isShown) {
+      this.device = device;
+      this.isShown = isShown;
+      this.records = /* @__PURE__ */ new Map();
+    }
+    insert(webviewId, htmlId, doc, position) {
+      const previous = this.records.get(windowName(webviewId, htmlId));
+      previous?.placeholder.remove();
+      const placeholder = doc.createElement("div");
+      placeholder.dataset.wxaHtmlId = String(htmlId);
+      placeholder.style.cssText = "position:fixed;z-index:2147483647;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:#f7f7f7;color:#666;font:14px/1.6 sans-serif;text-align:center;word-break:break-all";
+      const status = doc.createElement("div");
+      const button = doc.createElement("button");
+      button.textContent = "\u5728\u65B0\u7A97\u53E3\u6253\u5F00 H5";
+      button.style.cssText = "padding:8px 16px;border:0;border-radius:4px;background:#07c160;color:#fff;font-size:14px";
+      placeholder.append(status, button);
+      place(placeholder, position);
+      doc.body.appendChild(placeholder);
+      const record = { webviewId, name: windowName(webviewId, htmlId), placeholder, status, src: previous?.src, win: previous?.win ?? null };
+      this.records.set(record.name, record);
+      button.addEventListener("click", () => {
+        if (record.win && !record.win.closed) record.win.focus();
+        else this.open(record);
+      });
+      this.render(record);
+    }
+    /** @returns 找不到这个 web-view 时为 false */
+    update(webviewId, htmlId, position, src) {
+      const record = this.records.get(windowName(webviewId, htmlId));
+      if (!record) return false;
+      place(record.placeholder, position);
+      if (src && src !== record.src) {
+        record.src = src;
+        if (this.isShown(webviewId)) this.open(record);
+        else this.render(record);
+      }
+      return true;
+    }
+    remove(webviewId, htmlId) {
+      const record = this.records.get(windowName(webviewId, htmlId));
+      if (!record) return;
+      this.records.delete(record.name);
+      close(record);
+      record.placeholder.remove();
+    }
+    pageShown(webviewId) {
+      for (const record of this.recordsOf(webviewId)) {
+        if (record.src && !(record.win && !record.win.closed)) this.open(record);
+      }
+    }
+    pageHidden(webviewId) {
+      for (const record of this.recordsOf(webviewId)) {
+        close(record);
+        this.render(record);
+      }
+    }
+    /** 页面关闭：渲染层已经或即将被删除，不必再动占位 */
+    pageDestroyed(webviewId) {
+      for (const record of this.recordsOf(webviewId)) {
+        this.records.delete(record.name);
+        close(record);
+      }
+    }
+    closeAll() {
+      for (const record of this.records.values()) close(record);
+    }
+    /** 页面里的 web-view，按创建顺序；还没设置 src 的不算 */
+    list(webviewId) {
+      return this.recordsOf(webviewId).flatMap((record) => record.src ? [{ src: record.src, windowName: record.name }] : []);
+    }
+    recordsOf(webviewId) {
+      return [...this.records.values()].filter((record) => record.webviewId === webviewId);
+    }
+    open(record) {
+      if (!record.src) return;
+      if (record.win && !record.win.closed) {
+        record.win.location.href = record.src;
+      } else {
+        const features = `popup,width=${this.device.screenWidth},height=${this.device.screenHeight}`;
+        record.win = window.open(record.src, record.name, features);
+        if (record.win) notify("open", record.name, record.src);
+      }
+      this.render(record);
+    }
+    render(record) {
+      const opened = record.win && !record.win.closed;
+      const [title, detail] = !record.src ? ["web-view \u8FD8\u6CA1\u6709\u8BBE\u7F6E src", ""] : opened ? ["H5 \u5DF2\u5728\u65B0\u7A97\u53E3\u6253\u5F00", record.src] : record.win === null && this.isShown(record.webviewId) ? ["\u6D4F\u89C8\u5668\u62E6\u622A\u4E86\u5F39\u51FA\u7A97\u53E3\uFF0C\u70B9\u4E0B\u9762\u7684\u6309\u94AE\u6253\u5F00 H5", record.src] : ["H5 \u5728\u65B0\u7A97\u53E3\u6253\u5F00", record.src];
+      record.status.textContent = "";
+      const heading = record.status.ownerDocument.createElement("div");
+      heading.textContent = title;
+      heading.style.cssText = "color:#333;font-size:16px";
+      record.status.append(heading);
+      if (detail) record.status.append(detail);
+    }
+  };
+  function windowName(webviewId, htmlId) {
+    return `wxa-h5-${webviewId}-${htmlId}`;
+  }
+  function close(record) {
+    if (!record.win) return;
+    record.win.close();
+    record.win = null;
+    notify("close", record.name);
+  }
+  function notify(type, name, src) {
+    const listener = window.__wxa_webview_window_event__;
+    listener?.(type, name, src)?.catch(() => void 0);
+  }
+  function place(element2, position) {
+    if (!position) return;
+    for (const side of ["left", "top", "width", "height"]) {
+      if (typeof position[side] === "number") element2.style[side] = `${position[side]}px`;
+    }
+  }
+  var warnedOrigins = /* @__PURE__ */ new Set();
+  function warnCrossSite(src) {
+    let url;
+    try {
+      url = new URL(src, location.href);
+    } catch {
+      return;
+    }
+    if (!["http:", "https:"].includes(url.protocol)) return;
+    if (url.hostname === location.hostname && url.protocol === location.protocol) return;
+    if (warnedOrigins.has(url.origin)) return;
+    warnedOrigins.add(url.origin);
+    console.warn(
+      `[wxa-runner] web-view \u52A0\u8F7D\u7684 ${url.origin} \u4E0E\u6A21\u62DF\u5668\uFF08${location.origin}\uFF09\u4E0D\u662F\u540C\u4E00\u4E2A\u7AD9\u70B9\uFF0C\u6D4F\u89C8\u5668\u6309\u8DE8\u7AD9\u5D4C\u5165\u5904\u7406\uFF0C\u7F51\u9875\u7684 Cookie \u53EF\u80FD\u4E0D\u751F\u6548\uFF08\u5FAE\u4FE1\u91CC\u7684\u5C0F\u7A0B\u5E8F\u6CA1\u6709\u8FD9\u4E2A\u95EE\u9898\uFF09\u3002\u9700\u8981 Cookie \u65F6\u8BA9\u7F51\u9875\u5728\u65B0\u7A97\u53E3\u6253\u5F00\uFF1A\u547D\u4EE4\u884C\u52A0 --webview-window\uFF0CPlaywright \u7528 test.use({ wxaWebView: 'window' })`
+    );
+  }
   function readableUrl(frame) {
     try {
       return frame.contentWindow?.location.href ?? null;
@@ -2089,15 +2241,15 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     layer.append(mask, sheet);
     container.appendChild(layer);
     columns.forEach((column, index) => column.setItems(options.columns[index], options.current[index] ?? 0));
-    const close = (value) => {
+    const close2 = (value) => {
       layer.remove();
       resolve(value);
     };
-    cancel.addEventListener("click", () => close(null));
-    mask.addEventListener("click", () => close(null));
+    cancel.addEventListener("click", () => close2(null));
+    mask.addEventListener("click", () => close2(null));
     confirm.addEventListener("click", () => {
       columns.forEach((column) => column.settle());
-      close(columns.map((column) => column.index));
+      close2(columns.map((column) => column.index));
     });
     return {
       result,
@@ -2435,19 +2587,19 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
           modal.appendChild(input);
         }
         const actions = element("div", "wxa-modal-actions");
-        const close = (confirm2) => {
+        const close2 = (confirm2) => {
           wrapper.remove();
           resolve({ confirm: confirm2, cancel: !confirm2, ...options.editable ? { content: input.value } : {} });
         };
         if (options.showCancel !== false) {
           const cancel = element("button", "wxa-modal-cancel", options.cancelText || "\u53D6\u6D88");
           cancel.style.color = options.cancelColor || "#000";
-          cancel.addEventListener("click", () => close(false));
+          cancel.addEventListener("click", () => close2(false));
           actions.appendChild(cancel);
         }
         const confirm = element("button", "wxa-modal-confirm", options.confirmText || "\u786E\u5B9A");
         confirm.style.color = options.confirmColor || "#576b95";
-        confirm.addEventListener("click", () => close(true));
+        confirm.addEventListener("click", () => close2(true));
         actions.appendChild(confirm);
         modal.appendChild(actions);
         wrapper.appendChild(modal);
@@ -2459,7 +2611,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         const wrapper = document.createElement("div");
         const mask = maskElement(true);
         const sheet = element("div", "wxa-actionsheet");
-        const close = (index) => {
+        const close2 = (index) => {
           wrapper.remove();
           resolve(index);
         };
@@ -2467,13 +2619,13 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         options.itemList.forEach((text, index) => {
           const button = element("button", "wxa-actionsheet-item", text);
           button.style.color = options.itemColor || "#000";
-          button.addEventListener("click", () => close(index));
+          button.addEventListener("click", () => close2(index));
           sheet.appendChild(button);
         });
         const cancel = element("button", "wxa-actionsheet-cancel", "\u53D6\u6D88");
-        cancel.addEventListener("click", () => close(null));
+        cancel.addEventListener("click", () => close2(null));
         sheet.appendChild(cancel);
-        mask.addEventListener("click", () => close(null));
+        mask.addEventListener("click", () => close2(null));
         wrapper.append(mask, sheet);
         this.overlay.appendChild(wrapper);
       });
@@ -2494,10 +2646,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       notice.setAttribute("role", "alert");
       const text = element("div", "wxa-notice-text");
       text.append(element("div", "wxa-notice-title", title), element("div", "wxa-notice-message", message));
-      const close = element("button", "wxa-notice-close", "\xD7");
-      close.setAttribute("aria-label", "\u5173\u95ED");
-      close.addEventListener("click", () => this.hideNotice());
-      notice.append(element("span", "wxa-notice-icon", "!"), text, close);
+      const close2 = element("button", "wxa-notice-close", "\xD7");
+      close2.setAttribute("aria-label", "\u5173\u95ED");
+      close2.addEventListener("click", () => this.hideNotice());
+      notice.append(element("span", "wxa-notice-icon", "!"), text, close2);
       this.stage.appendChild(notice);
       this.noticeEl = notice;
       this.noticeTimer = setTimeout(() => this.hideNotice(), NOTICE_DURATION);
@@ -2553,8 +2705,6 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.api = new ApiRegistry((context) => this.reportUnimplemented(context));
       /** setup 和测试 API 声明的请求拦截 */
       this.routes = new RequestRoutes();
-      /** 把被拦截的请求显示在 Network 面板里 */
-      this.mockMirror = installMockMirror();
       this.mapOperations = new MapOperations((webviewId, event, data) => this.publishToPages(event, data, [webviewId]));
       this.service = null;
       /** 新版基础库的业务子上下文；旧版基础库业务代码直接在逻辑层 iframe 里 */
@@ -2570,6 +2720,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.routeListeners = [];
       /** 渲染层报来的 2d、webgl 画布，按编号记下所在页面和最近的位置，供 placeCanvas 认出逻辑层的画布元素 */
       this.canvases = /* @__PURE__ */ new Map();
+      this.mockMirror = installMockMirror(info.externalServiceWorker);
       this.device = info.device;
       this.forwarder = new ConsoleForwarder(
         info.forwardConsole ?? false,
@@ -2580,6 +2731,11 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.shell = new PhoneShell(root, info.device);
       this.tabPaths = new Set((info.wxConfig.tabBar?.list || []).map((item) => stripHtml(item.pagePath)));
       this.storage = new MiniProgramStorage(window.localStorage, info.appid);
+      this.webViewWindows = info.webViewWindow ? new WebViewWindows(info.device, (webviewId) => this.currentPage()?.id === webviewId) : null;
+      if (this.webViewWindows) {
+        const windows = this.webViewWindows;
+        window.addEventListener("pagehide", () => windows.closeAll());
+      }
       const tabBar = info.wxConfig.tabBar ? { ...info.wxConfig.tabBar, list: info.wxConfig.tabBar.list.map((item) => ({ ...item, pagePath: stripHtml(item.pagePath) })) } : void 0;
       this.shell.setTabBar(tabBar, (pagePath) => this.enqueueRoute(() => this.switchTab(pagePath)));
       this.shell.onBack(() => this.enqueueRoute(() => this.navigateBack(1)));
@@ -2849,11 +3005,12 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     }
     closePage(page, options = { keepTab: true }) {
       if (options.keepTab && this.tabPaths.has(page.path) && this.tabPages.get(page.path) === page) {
-        page.hide();
+        this.hidePage(page);
         return;
       }
       if (this.tabPages.get(page.path) === page) this.tabPages.delete(page.path);
       this.pages.delete(page.id);
+      this.webViewWindows?.pageDestroyed(page.id);
       page.destroy();
       for (const [canvasNumber, record] of this.canvases) {
         if (record.webviewId === page.id) this.canvases.delete(canvasNumber);
@@ -2861,9 +3018,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     }
     activate(page, openType) {
       for (const other of this.pages.values()) {
-        if (other !== page) other.hide();
+        if (other !== page) this.hidePage(other);
       }
       page.show();
+      this.webViewWindows?.pageShown(page.id);
       page.navigation = { ...page.navigation, showBack: this.stack.size > 1 };
       this.shell.setNavigation(page.navigation);
       this.shell.renderTabBar(this.tabPaths.has(page.path) ? page.path : null);
@@ -2876,6 +3034,14 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       }, ROUTE_DONE_DELAY);
       this.routeListeners.forEach((listener) => listener(page, openType));
     }
+    hidePage(page) {
+      page.hide();
+      this.webViewWindows?.pageHidden(page.id);
+    }
+    /** 页面里设置过 src 的 web-view，按创建顺序 */
+    webViewsOf(page) {
+      return this.webViewWindows ? this.webViewWindows.list(page.id) : iframeWebViews(page.win?.document);
+    }
     /** 宿主地址栏同步为当前页面，刷新后可回到同一页面 */
     updateLocation(page) {
       const params = new URLSearchParams(location.search);
@@ -2996,7 +3162,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         }),
         ...createWebViewApis({
           documentOf: (webviewId) => this.pages.get(webviewId)?.win?.document,
-          emitToWebview: (webviewId, event, data) => this.emitToWebview(webviewId, event, data)
+          emitToWebview: (webviewId, event, data) => this.emitToWebview(webviewId, event, data),
+          windows: this.webViewWindows
         }),
         ...createMiscApis(this.info.appid, {
           devtoolsLogin: this.info.devtoolsLogin,
@@ -3355,6 +3522,10 @@ ${script}
       ready,
       currentPage: () => snapshot(host.currentPage()),
       pageStack: () => host.pageStack().map((page) => snapshot(page)),
+      webViews: () => {
+        const page = host.currentPage();
+        return page ? host.webViewsOf(page) : [];
+      },
       waitForPage(path, timeout = 1e4) {
         const target = path.replace(/^\//, "");
         return new Promise((resolve, reject) => {
@@ -3418,13 +3589,14 @@ ${script}
     const root = document.getElementById("wxa-root");
     const info = await (await fetch("/__wxa__/app-info.json")).json();
     const restore = new PageStackRestore(info.appid);
-    const sendReport = connectDevServer(restore);
+    const sendReport = info.liveReload === false ? () => void 0 : connectDevServer(restore);
     if (info.buildError) {
       new PhoneShell(root, info.device).showError(`\u7F16\u8BD1\u5931\u8D25
 
 ${info.buildError}`);
       return;
     }
+    if (window.__wxa_webview_window__ === true) info.webViewWindow = true;
     const host = new Host(info, root, sendReport);
     window.__wxaHost = host;
     let markReady;