@lark-apaas/coding-preset-vite-react 0.1.0

package/src/runtime/ws-watchdog-client.mjs

@@ -0,0 +1,148 @@
+/* eslint-env browser */
+
+/**
+ * WebSocket Watchdog Client。在 Vite 沙箱 iframe 内自启动；
+ * 通过 createHotContext 走 HMR 通道发 ping/收 pong；判死后 postMessage 给 parent。
+ *
+ * 设计 spec: docs/superpowers/specs/2026-04-27-sandbox-ws-watchdog-design.md
+ */
+
+/**
+ * @typedef {Object} WatchdogDeps
+ * @property {(event: string, data: unknown) => void} sendCustom
+ * @property {(event: string, cb: (data: unknown) => void) => void} onCustom
+ * @property {(status: 'connected' | 'disconnected') => void} postStatus
+ * @property {(handler: () => void, ms: number) => number} setInterval
+ * @property {(handle: number) => void} clearInterval
+ */
+
+/**
+ * @typedef {Object} WatchdogOptions
+ * @property {number} [intervalMs]        默认 5000
+ * @property {number} [missThreshold]     默认 2
+ * @property {number} [echoFreshnessMs]   默认 15000
+ * @property {string} [pingEvent]         默认 'ws-watchdog:ping'
+ * @property {string} [pongEvent]         默认 'ws-watchdog:pong'
+ */
+
+/**
+ * 不返回 dispose——watchdog 跟 iframe 同生命周期，无独立销毁路径。
+ * @param {WatchdogDeps} deps
+ * @param {WatchdogOptions} [options]
+ */
+export function createWatchdog(deps, options = {}) {
+  const intervalMs = options.intervalMs ?? 5000;
+  const missThreshold = options.missThreshold ?? 2;
+  const echoFreshnessMs = options.echoFreshnessMs ?? 15000;
+  const pingEvent = options.pingEvent ?? 'ws-watchdog:ping';
+  const pongEvent = options.pongEvent ?? 'ws-watchdog:pong';
+
+  let missed = 0;
+  /** @type {'connected' | 'disconnected'} */
+  let reportedStatus = 'connected';
+  let pingSeq = 0;
+  /** @type {Map<number, number>} seq → wall-clock 时间戳 */
+  const recentPings = new Map();
+
+  function onTick() {
+    // missed++ 必须先于 sendCustom：发送侧抛错时 missed 已累加，下一 tick 仍能判死。
+    missed += 1;
+    const seq = ++pingSeq;
+    const now = Date.now();
+    recentPings.set(seq, now);
+    for (const [s, ts] of recentPings) {
+      if (now - ts > echoFreshnessMs) recentPings.delete(s);
+    }
+    deps.sendCustom(pingEvent, { t: seq });
+    if (missed >= missThreshold && reportedStatus !== 'disconnected') {
+      deps.postStatus('disconnected');
+      reportedStatus = 'disconnected';
+    }
+  }
+
+  deps.onCustom(pongEvent, (raw) => {
+    const data = /** @type {{ echo?: number } | undefined} */ (raw);
+    if (typeof data?.echo !== 'number' || !recentPings.has(data.echo)) return;
+    recentPings.delete(data.echo);
+    missed = 0;
+    if (reportedStatus !== 'connected') {
+      deps.postStatus('connected');
+      reportedStatus = 'connected';
+    }
+  });
+
+  deps.setInterval(onTick, intervalMs);
+}
+
+// postMessage 的 targetOrigin 必须显式指定，禁止用 '*'。
+
+const PARENT_ORIGIN_KEY = '__parentOrigin';
+
+function getParentOriginFromParams() {
+  try {
+    const origin = new URLSearchParams(window.location.search).get(PARENT_ORIGIN_KEY);
+    if (origin) {
+      try { sessionStorage.setItem(PARENT_ORIGIN_KEY, origin); } catch { /* 忽略 */ }
+      return origin;
+    }
+  } catch { /* 忽略 URL 解析失败 */ }
+  try { return sessionStorage.getItem(PARENT_ORIGIN_KEY) || undefined; }
+  catch { return undefined; }
+}
+
+function getLegacyParentOrigin() {
+  const { origin } = window.location;
+  if (origin.includes('force.feishuapp.net')) return 'https://force.feishu.cn';
+  if (origin.includes('force-pre.feishuapp.net')) return 'https://force.feishu-pre.cn';
+  if (origin.includes('force.byted.org')) return 'https://force.feishu-boe.cn';
+  if (origin.includes('feishuapp.cn') || origin.includes('miaoda.feishuapp.net')) return 'https://miaoda.feishu.cn';
+  if (origin.includes('fsapp.kundou.cn') || origin.includes('miaoda-pre.feishuapp.net')) return 'https://miaoda.feishu-pre.cn';
+  return 'https://miaoda.feishu-boe.cn';
+}
+
+function resolveParentOrigin() {
+  const paramOrigin = getParentOriginFromParams();
+  if (paramOrigin) return paramOrigin;
+  // plugin middleware 在送出脚本时把这个 token 编译期替换成字符串字面量。
+  return process.env.FORCE_FRAMEWORK_DOMAIN_MAIN || getLegacyParentOrigin();
+}
+
+function postStatus(status) {
+  try {
+    const origin = resolveParentOrigin();
+    if (!origin) return;
+    window.parent.postMessage(
+      { type: 'DevServerMessage', data: { type: 'devServer-status', status } },
+      origin,
+    );
+  } catch (e) {
+    console.error('[fullstack-ws-watchdog] postMessage error:', e);
+  }
+}
+
+// 仅在 iframe 内自启动；jsdom（vitest）下 window.parent === window 自然跳过。
+// 直出的 raw module 拿不到 import.meta.hot，所以借 createHotContext 走 HMR 通道。
+// CLIENT_BASE_PATH 由 plugin 编译期替换；缺前缀会被网关 404。
+const CLIENT_BASE_PATH = process.env.CLIENT_BASE_PATH || '';
+
+if (typeof window !== 'undefined' && window.parent !== window) {
+  (async () => {
+    try {
+      const { createHotContext } = await import(CLIENT_BASE_PATH + '/@vite/client');
+      const hot = createHotContext(CLIENT_BASE_PATH + '/@ws-watchdog.js');
+      createWatchdog({
+        sendCustom: (event, data) => {
+          // 断连时 hot.send 可能抛；吞掉即可——missed 已在 onTick 顶部累加。
+          try { hot.send(event, data); }
+          catch (e) { console.warn('[fullstack-ws-watchdog] send failed:', e); }
+        },
+        onCustom: (event, cb) => hot.on(event, cb),
+        postStatus,
+        setInterval: (handler, ms) => window.setInterval(handler, ms),
+        clearInterval: (handle) => window.clearInterval(handle),
+      });
+    } catch (e) {
+      console.warn('[fullstack-ws-watchdog] bootstrap failed:', e);
+    }
+  })();
+}