@open-wxa/wxa-runner-core 0.1.0 → 0.2.1

package/dist/runtime/host.js

@@ -236,6 +236,14 @@
   };
   function createMiscApis(appid, options) {
     const fs = new MemoryFileSystem();
+    const realLogin = async (api, url) => {
+      try {
+        return await postDevServer(url);
+      } catch (error) {
+        options?.onRealLoginFail?.(api, error.message);
+        throw error;
+      }
+    };
     const guard = (api, action) => {
       try {
         return ok(api, action() || {});
@@ -281,13 +289,13 @@
         const bytes = Uint8Array.from(atob(String(args.base64Data || "")), (char) => char.charCodeAt(0));
         return { tempFilePath: await saveTempFile(bytes, String(args.fileType || "png")) };
       },
-      // 基础库经这里向后台拉各种配置。业务域名列表（webapi_getwxanetwork）要明确失败：
-      // 拿到空列表时基础库会把 web-view 事件里的网页地址清空，拉取失败才不校验，等同开发者工具的「不校验业务域名」
-      operateWXData: (args, { api }) => args.data?.api_name === "webapi_getwxanetwork" ? fail(api, "not available in wxa-runner") : ok(api),
+      // 基础库经这两个接口向后台拉各种配置和小程序信息
+      operateWXData: (args, { api }) => args.data?.api_name === "webapi_getwxanetwork" ? bizDomainUnavailable(api) : ok(api),
+      getAppContact: (args, { api }) => args.keyPath === "WxaAppInfo.Network.BizDomain" ? bizDomainUnavailable(api) : ok(api),
       // 真实登录失败时明确返回 fail，不退回假数据：配置或登录态的问题要让开发者马上发现
-      login: options?.realLogin ? async (_args, { api }) => ok(api, { code: (await postDevServer("/__wxa__/api/login")).code }) : (_args, { api }) => ok(api, { code: `wxa_mock_code_${Date.now().toString(36)}` }),
+      login: options?.realLogin ? async (_args, { api }) => ok(api, { code: (await realLogin(api, "/__wxa__/api/login")).code }) : (_args, { api }) => ok(api, { code: `wxa_mock_code_${Date.now().toString(36)}` }),
       // 基础库只从 JSON.parse(data) 里取手机号的 code
-      getPhoneNumber: options?.realLogin ? async (_args, { api }) => ok(api, await postDevServer("/__wxa__/api/phone-number")) : (_args, { api }) => ok(api, { data: JSON.stringify({ code: `mock_phone_code_${Date.now()}` }), encryptedData: "mock_encrypted", iv: "mock_iv" }),
+      getPhoneNumber: options?.realLogin ? async (_args, { api }) => ok(api, await realLogin(api, "/__wxa__/api/phone-number")) : (_args, { api }) => ok(api, { data: JSON.stringify({ code: `mock_phone_code_${Date.now()}` }), encryptedData: "mock_encrypted", iv: "mock_iv" }),
       checkSession: () => void 0,
       authorize: () => void 0,
       getSetting: (_args, { api }) => ok(api, {
@@ -321,6 +329,9 @@
   function mockUser() {
     return { nickName: "wxa-runner", avatarUrl: "", gender: 0, country: "", province: "", city: "", language: "zh_CN" };
   }
+  function bizDomainUnavailable(api) {
+    return fail(api, "not available in wxa-runner");
+  }
 
   // src/runtime/host/api/network.ts
   var RequestLog = class {
@@ -479,20 +490,26 @@
       }
       return ok(api);
     };
-    return {
+    const createTask = {
       createRequestTask,
       createRequestTaskAsync: createRequestTask,
-      operateRequestTask: (args) => abortTask(args, "requestTaskId"),
       createDownloadTask,
       createDownloadTaskAsync: createDownloadTask,
-      operateDownloadTask: (args) => abortTask(args, "downloadTaskId"),
       createUploadTask,
       createUploadTaskAsync: createUploadTask,
+      createSocketTask
+    };
+    return {
+      ...Object.fromEntries(Object.entries(createTask).map(([api, handler]) => [api, rejectBaseLibInternal(handler)])),
+      operateRequestTask: (args) => abortTask(args, "requestTaskId"),
+      operateDownloadTask: (args) => abortTask(args, "downloadTaskId"),
       operateUploadTask: (args) => abortTask(args, "uploadTaskId"),
-      createSocketTask,
       operateSocketTask
     };
   }
+  function rejectBaseLibInternal(handler) {
+    return (args, context) => args?.__skipDomainCheck__ === true ? fail(context.api, "\u57FA\u7840\u5E93\u5185\u90E8\u7684\u7F51\u7EDC\u8BF7\u6C42\uFF0Cwxa-runner \u4E0D\u53D1\u51FA") : handler(args, context);
+  }
   async function proxyFetch(url, init) {
     if (!/^https?:\/\//i.test(url)) throw new Error(`invalid url "${url}"`);
     const hasBody = init.body !== void 0 && init.body !== "" && !["GET", "HEAD"].includes(init.method);
@@ -1395,7 +1412,14 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
 .wxa-toolbar button { border: 0; background: #111214; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
 .wxa-toolbar .wxa-scale { min-width: 52px; background: #fff; color: #333; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); font-variant-numeric: tabular-nums; }
 .wxa-route { font-family: Menlo, monospace; }
+.wxa-notice { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 12px 10px 12px 14px; box-sizing: border-box; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 12px 32px -8px rgba(15,23,42,.28); font-size: 13px; line-height: 20px; color: #555; animation: wxa-notice-in .18s ease-out; }
+.wxa-notice-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #fa5151; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
+.wxa-notice-text { flex: 1; min-width: 0; word-break: break-word; text-wrap: pretty; }
+.wxa-notice-title { font-weight: 600; color: #111214; }
+.wxa-notice-close { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: #999; font-size: 16px; line-height: 20px; cursor: pointer; }
+.wxa-notice-close:hover { background: rgba(0,0,0,.06); color: #111214; }
 @keyframes wxa-spin { to { transform: rotate(360deg); } }
+@keyframes wxa-notice-in { from { opacity: 0; transform: translateY(-8px); } }
 `;
 
   // src/runtime/host/ui/Picker.ts
@@ -1484,6 +1508,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
   // src/runtime/host/ui/PhoneShell.ts
   var SCALE_STORAGE_KEY = "wxa-runner:scale";
   var MIN_SCALE = 0.5;
+  var NOTICE_DURATION = 6e3;
   function loadScaleMode() {
     try {
       const saved = localStorage.getItem(SCALE_STORAGE_KEY);
@@ -1498,6 +1523,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.scaleMode = loadScaleMode();
       this.toastEl = null;
       this.toastTimer = null;
+      this.noticeEl = null;
+      this.noticeTimer = null;
       this.tabBarConfig = null;
       this.onTabTap = () => void 0;
       this.navigation = { title: "", backgroundColor: "#000", textStyle: "white", showBack: false, custom: false };
@@ -1533,6 +1560,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
           <span class="wxa-route"></span><button class="wxa-scale"></button><button class="wxa-reload">\u5237\u65B0</button>
         </div>
       </div>`;
+      this.stage = root.querySelector(".wxa-stage");
       this.slot = root.querySelector(".wxa-device-slot");
       this.device = root.querySelector(".wxa-device");
       this.toolbar = root.querySelector(".wxa-toolbar");
@@ -1762,6 +1790,30 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     showImagePreview(urls, current) {
       openImagePreview(this.overlay, urls, current);
     }
+    /**
+     * 在手机外面提示 wxa-runner 自身的问题（如真实登录失败），不混进小程序的界面。
+     * 同一时间只显示一条，新的替换旧的：业务代码反复重试时不会堆满屏幕
+     */
+    showNotice(title, message) {
+      this.hideNotice();
+      const notice = element("div", "wxa-notice");
+      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);
+      this.stage.appendChild(notice);
+      this.noticeEl = notice;
+      this.noticeTimer = setTimeout(() => this.hideNotice(), NOTICE_DURATION);
+    }
+    hideNotice() {
+      if (this.noticeTimer) clearTimeout(this.noticeTimer);
+      this.noticeTimer = null;
+      this.noticeEl?.remove();
+      this.noticeEl = null;
+    }
     showError(message) {
       this.clearError();
       const el = element("div", "wxa-error", message);
@@ -1799,6 +1851,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       /** setup 和测试 API 声明的请求拦截 */
       this.routes = new RequestRoutes();
       this.service = null;
+      /** 新版基础库的业务子上下文；旧版基础库业务代码直接在逻辑层 iframe 里 */
+      this.appContext = null;
       this.serviceReady = new Promise((resolve) => {
         this.serviceLoaded = resolve;
       });
@@ -1843,6 +1897,9 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         this.pages.get(webviewId)?.attach(win, bridge);
       }
     }
+    registerAppContext(win) {
+      this.appContext = win;
+    }
     frameLoaded(kind, webviewId) {
       if (kind === "service") this.serviceLoaded();
       else this.pages.get(webviewId)?.loaded();
@@ -1851,7 +1908,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       const webviewId = kind === "webview" ? this.webviewIdOf(win) : this.currentPage()?.id ?? 0;
       const result = this.api.invoke(api, args, { api, from: kind, webviewId });
       const deliver = (res) => {
-        if (callback) callback(cloneInto(win, res));
+        if (callback) callback(kind === "service" ? this.cloneForService(res) : cloneInto(win, res));
       };
       if (result && typeof result.then === "function") {
         result.then(deliver);
@@ -1873,7 +1930,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       const fromId = this.webviewIdOf(win);
       const service = this.service;
       if (!service) return;
-      const payload = cloneInto(service.win, data);
+      const payload = this.cloneForService(data);
       queueMicrotask(() => service.bridge.__dispatchSub(event, payload, fromId));
     }
     reportError(kind, webviewId, error) {
@@ -1887,10 +1944,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     }
     /**
      * 业务代码只运行在逻辑层，所以只记逻辑层调用、名字在 wx 上的 API，每个 API 一次。
-     * 其余是基础库内部调用的原生接口（如 getAppContact、loadLibFilesSync），业务既没调用也 mock 不了
+     * 其余是基础库内部调用的原生接口（如 getPermissionBytes、loadLibFilesSync），业务既没调用也 mock 不了
      */
     reportUnimplemented({ api, from }) {
-      const wx = this.service?.win?.wx;
+      const wx = this.serviceWindow()?.wx;
       if (from !== "service" || typeof wx?.[api] !== "function") return;
       if (this.errors.some((error) => error.api === api)) return;
       this.errors.push({
@@ -1913,8 +1970,16 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     livePages() {
       return [...this.pages.values()];
     }
+    /** 业务代码所在的 window：getCurrentPages / wx 等在它上面 */
     serviceWindow() {
-      return this.service?.win ?? null;
+      return this.appContext ?? this.service?.win ?? null;
+    }
+    /**
+     * 交给逻辑层的值属于业务代码所在的全局环境，而不是逻辑层 iframe：新版基础库不一定在业务子上下文里
+     * 重建这些值，属于别的 iframe 的对象在业务代码里 instanceof 不成立，setData 也会把这样的数组当成普通对象
+     */
+    cloneForService(value) {
+      return cloneInto(this.serviceWindow(), value);
     }
     onRoute(listener) {
       this.routeListeners.push(listener);
@@ -2073,7 +2138,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     emitToService(event, data, webviewId) {
       const service = this.service;
       if (!service) return;
-      const payload = cloneInto(service.win, data);
+      const payload = this.cloneForService(data);
       queueMicrotask(() => service.bridge.__dispatchOn(event, payload, webviewId));
     }
     /** 派发给渲染层的原生事件（渲染层里 WeixinJSBridge.on 收到） */
@@ -2132,7 +2197,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
           documentOf: (webviewId) => this.pages.get(webviewId)?.win?.document,
           emitToWebview: (webviewId, event, data) => this.emitToWebview(webviewId, event, data)
         }),
-        ...createMiscApis(this.info.appid, { realLogin: this.info.realLogin })
+        ...createMiscApis(this.info.appid, {
+          realLogin: this.info.realLogin,
+          onRealLoginFail: (api, reason2) => this.shell.showNotice(`wx.${api} \u771F\u5B9E\u767B\u5F55\u5931\u8D25`, reason2)
+        })
       });
     }
   };
@@ -2176,7 +2244,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     const sheets = win.__styleSheetManager2__?._pathMap;
     if (!sheets) throw new Error("\u57FA\u7840\u5E93\u6CA1\u6709\u6837\u5F0F\u8868\u7BA1\u7406\u5668\uFF0C\u65E0\u6CD5\u70ED\u66FF\u6362\u6837\u5F0F");
     const applied = Object.keys(sheets);
-    win.eval(code);
+    runScript(win, code);
     for (const key of applied) {
       const [, file, classPrefix] = /^\.\/(.+\.wxss):(.*)$/.exec(key) || [];
       const inject = file && win.__wxAppCode__[file];
@@ -2196,7 +2264,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
   function updateTemplates(win, code, units) {
     const cache = win.__WXML_GLOBAL__;
     if (cache) Object.assign(cache, { ops_cached: {}, ops_set: {}, ops_init: {}, debuginfo_set: {}, modules: {} });
-    win.eval(code);
+    runScript(win, code);
     for (const id of units) {
       const generate = win.__wxAppCode__[id + ".wxml"];
       if (generate) win.__virtualDOM__.updateWxAppCode(id + ".wxml", generate);
@@ -2231,11 +2299,16 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
   }
   function loadModule(service, script, hotId) {
     let factory;
-    service.eval(`(function (define) {
-${script}
-})`)((_id, fn) => {
+    service.__wxaHotDefine__ = (_id, fn) => {
       factory = fn;
-    });
+    };
+    try {
+      runScript(service, `(function (define) {
+${script}
+})(__wxaHotDefine__);`);
+    } finally {
+      delete service.__wxaHotDefine__;
+    }
     if (typeof factory !== "function") throw new Error("\u6A21\u5757\u811A\u672C\u6CA1\u6709 define \u6A21\u5757");
     service.define(hotId, factory);
     const { Page, Component } = service;
@@ -2264,6 +2337,26 @@ ${script}
     const added = Object.keys(data).filter((key) => !(key in instance.data));
     if (added.length) instance.setData(Object.fromEntries(added.map((key) => [key, data[key]])));
   }
+  function runScript(win, code) {
+    let failed = false;
+    let error;
+    const onError = (event) => {
+      failed = true;
+      error = event.error ?? new Error(event.message);
+      event.stopImmediatePropagation();
+      event.preventDefault();
+    };
+    const script = win.document.createElement("script");
+    script.text = code;
+    win.addEventListener("error", onError, true);
+    try {
+      win.document.head.appendChild(script);
+    } finally {
+      win.removeEventListener("error", onError, true);
+      script.remove();
+    }
+    if (failed) throw error;
+  }
   async function fetchText(url) {
     const response = await fetch(url);
     if (!response.ok) throw new Error(`${url} ${response.status}`);