@open-wxa/wxa-runner-core 0.2.0 → 0.2.2

package/dist/runtime/host.js

@@ -85,17 +85,32 @@
   }
 
   // src/runtime/host/api/tempFiles.ts
+  var TEMP_DIR = "/__wxa__/tmp";
   async function saveTempFile(data, type) {
-    const res = await fetch(`/__wxa__/tmp?type=${encodeURIComponent(type)}`, { method: "POST", body: data });
+    const res = await fetch(`${TEMP_DIR}?type=${encodeURIComponent(type)}`, { method: "POST", body: data });
     if (!res.ok) throw new Error(await res.text());
     const { url } = await res.json();
     return url;
   }
+  function tempFileRootPath(url) {
+    const prefix = `${location.origin}${TEMP_DIR}/`;
+    return url.startsWith(prefix) ? url.slice(location.origin.length) : url;
+  }
   function tempFileType(name, mimeType, fallback) {
     const fromName = /\.([a-z\d]+)$/i.exec(name)?.[1];
     const fromType = /^[a-z]+\/([a-z\d]+)\s*(;|$)/i.exec(mimeType)?.[1];
     return (fromName || fromType || fallback).toLowerCase();
   }
+  function isTempFile(filePath) {
+    return typeof filePath === "string" && filePath.startsWith(`${location.origin}${TEMP_DIR}/`);
+  }
+  async function tempFileSize(url) {
+    const res = await fetch(url, { method: "HEAD" });
+    return res.ok ? Number(res.headers.get("content-length")) : null;
+  }
+  async function removeTempFile(url) {
+    await fetch(url, { method: "DELETE" });
+  }
 
   // src/runtime/host/api/media.ts
   var SOURCES = ["camera", "album"];
@@ -236,6 +251,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() || {});
@@ -267,6 +290,9 @@
       unlink: (args, { api }) => guard(api, () => fs.remove(args.filePath, { dir: false })),
       rmdir: (args, { api }) => guard(api, () => fs.remove(args.dirPath, { dir: true, recursive: !!args.recursive })),
       getFileInfo: (args, { api }) => {
+        if (isTempFile(args.filePath)) {
+          return tempFileSize(args.filePath).then((size) => size === null ? fail(api, "file not exist") : ok(api, { size }));
+        }
         const node = fs.stat(args.filePath);
         return node ? ok(api, { size: node.data.length }) : fail(api, "file not exist");
       }
@@ -285,9 +311,9 @@
       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, {
@@ -823,6 +849,50 @@
     return text.replace(/[.+?^${}()|[\]\\]/g, "\\$&");
   }
 
+  // src/runtime/host/api/savedFiles.ts
+  var NAMESPACE = "savedFiles";
+  function createSavedFileApis(storage) {
+    const record = (filePath) => storage.get(NAMESPACE, filePath)?.data;
+    const liveRecord = async (filePath) => {
+      const saved = record(filePath);
+      if (!saved) return void 0;
+      if (await tempFileSize(filePath) !== null) return saved;
+      storage.remove(NAMESPACE, filePath);
+      return void 0;
+    };
+    return {
+      // 和真机一样：存成新文件，原来的临时文件随之删除
+      saveFile: async (args) => {
+        if (args.filePath) throw new Error("wxa-runner \u6682\u4E0D\u652F\u6301\u6307\u5B9A filePath\uFF0C\u4E0D\u4F20\u65F6\u4FDD\u5B58\u6210\u529F\u540E\u8FD4\u56DE savedFilePath");
+        const res = isTempFile(args.tempFilePath) ? await fetch(args.tempFilePath) : null;
+        if (!res?.ok) throw new Error(`tempFilePath file not exist ${args.tempFilePath}`);
+        const data = await res.blob();
+        const savedFilePath = await saveTempFile(data, tempFileType(args.tempFilePath, data.type, "tmp"));
+        await removeTempFile(args.tempFilePath);
+        storage.set(NAMESPACE, savedFilePath, { size: data.size, createTime: Math.floor(Date.now() / 1e3) });
+        return { savedFilePath };
+      },
+      getSavedFileList: async () => {
+        const fileList = [];
+        for (const filePath of storage.keys(NAMESPACE)) {
+          const saved = await liveRecord(filePath);
+          if (saved) fileList.push({ filePath, ...saved });
+        }
+        return { fileList };
+      },
+      getSavedFileInfo: async (args) => {
+        const saved = await liveRecord(args.filePath);
+        if (!saved) throw new Error(`file not exist ${args.filePath}`);
+        return { ...saved };
+      },
+      removeSavedFile: async (args) => {
+        if (!record(args.filePath)) throw new Error(`file not exist ${args.filePath}`);
+        storage.remove(NAMESPACE, args.filePath);
+        await removeTempFile(args.filePath);
+      }
+    };
+  }
+
   // src/runtime/host/api/storage.ts
   var LIMIT_SIZE_KB = 10 * 1024;
   var MiniProgramStorage = class {
@@ -1404,7 +1474,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
@@ -1493,6 +1570,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);
@@ -1507,6 +1585,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 };
@@ -1542,6 +1622,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");
@@ -1771,6 +1852,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);
@@ -1876,9 +1981,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     publish(kind, win, event, data, webviewIds) {
       if (kind === "service") {
         const targets = webviewIds?.length ? webviewIds.map((id) => this.pages.get(Number(id))) : this.livePages();
+        const message = event === "canvasActionsChanged" ? withDrawableImages(data) : data;
         for (const page of targets) {
           page?.dispatch((bridge, target) => {
-            const payload2 = cloneInto(target, data);
+            const payload2 = cloneInto(target, message);
             queueMicrotask(() => bridge.__dispatchSub(event, payload2, 0));
           });
         }
@@ -2126,6 +2232,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         reLaunch: routeApi((args) => this.reLaunch(args.url)),
         switchTab: routeApi((args) => this.switchTab(args.url)),
         ...createStorageApis(this.storage),
+        ...createSavedFileApis(this.storage),
         ...createSystemApis({
           device: this.device,
           baseLibVersion: this.info.baseLibVersion,
@@ -2154,7 +2261,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)
+        })
       });
     }
   };
@@ -2162,6 +2272,20 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     if (value === void 0) return value;
     return win.JSON.parse(JSON.stringify(value));
   }
+  function withDrawableImages(message) {
+    const actions = message?.data?.actions;
+    if (!Array.isArray(actions)) return message;
+    return {
+      ...message,
+      data: {
+        ...message.data,
+        actions: actions.map((action) => {
+          const [src, ...rest] = action.data ?? [];
+          return action.method === "drawImage" && typeof src === "string" ? { ...action, data: [tempFileRootPath(src), ...rest] } : action;
+        })
+      }
+    };
+  }
   function stripHtml(path) {
     return path.replace(/\.html$/, "");
   }