@lark-apaas/coding-preset-vite-react 0.1.1-alpha.0

package/src/overlay/vite-client.js

@@ -0,0 +1,555 @@
+/* eslint-disable */
+/**
+ * Vite Error Overlay Client
+ *
+ * 自定义错误 overlay，替换 Vite 原生 overlay，与 rspack-preset 功能对齐。
+ *
+ * 功能：
+ * - 编译错误展示：监听 vite:error 事件，显示编译错误 overlay
+ * - 运行时错误展示：监听 window.error 和 unhandledrejection 事件
+ * - 错误修复检测：监听 vite:afterUpdate 事件，修复后自动刷新页面
+ * - PostMessage 通信：向父窗口发送 PreviewReady、RenderError 等消息
+ * - 错误上报：通过 __RUNTIME_LOGGER__ 或 postMessage 上报错误日志
+ *
+ * 实现原理：
+ * - 使用 iframe 隔离样式，避免影响应用样式
+ * - 通过 createHotContext 创建 HMR context 监听 Vite 事件
+ * - 使用 debounce 防止运行时错误频繁触发渲染
+ *
+ * 暴露的全局 API (window.__VITE_ERROR_OVERLAY__)：
+ * - showCompileError(message: string): 显示编译错误
+ * - clearCompileError(shouldReload?: boolean): 清除编译错误
+ * - showRuntimeErrors(errors: Error[]): 显示运行时错误
+ * - clearRuntimeErrors(dismissOverlay?: boolean): 清除运行时错误
+ * - handleRuntimeError(error: Error): 处理单个运行时错误
+ *
+ * @see https://vite.dev/guide/api-hmr.html
+ */
+
+// 防止重复初始化
+if (!window.__VITE_ERROR_OVERLAY_INITIALIZED__) {
+  window.__VITE_ERROR_OVERLAY_INITIALIZED__ = true;
+
+  /* ===== Overlay Core (iframe) ===== */
+
+  let iframeRoot = null;
+  let rootDocument = null;
+  let root = null;
+  let scheduledRenderFn = null;
+
+  // Overlay State
+  let currentCompileErrorMessage = '';
+  let currentRuntimeErrors = [];
+  let currentMode = null;
+
+  // ===== HMR API State (用于 toolkit 的统一 HMR API) =====
+  let hasErrorInCurrentUpdate = false;
+  const hmrBeforeApplyCallbacks = new Set();
+  const hmrSuccessCallbacks = new Set();
+  const hmrErrorCallbacks = new Set();
+
+  // ===== Components =====
+  function ErrorContainer(doc, parentRoot, errorTitle) {
+    const container = doc.createElement('div');
+    container.className = 'overlay-container';
+
+    const content = doc.createElement('div');
+    content.className = 'overlay-content';
+    container.appendChild(content);
+
+    const img = doc.createElement('img');
+    img.src =
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_negative_error.svg';
+    img.alt = 'Error';
+    img.width = 100;
+    img.height = 100;
+    img.className = 'overlay-error-image';
+    content.appendChild(img);
+
+    const title = doc.createElement('p');
+    title.className = 'overlay-title';
+    title.textContent = errorTitle;
+    content.appendChild(title);
+
+    parentRoot.appendChild(container);
+  }
+
+  function RootStyle(doc, parentRoot) {
+    const style = doc.createElement('style');
+    style.id = 'vite-error-overlay-style';
+    style.textContent = `
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+          'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+          sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      .overlay-container {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+      }
+      .overlay-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .overlay-error-image {
+        margin-bottom: 12px;
+        width: 100px;
+        height: auto;
+      }
+      .overlay-title {
+        color: #1F2329;
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 22px;
+      }
+    `;
+    parentRoot.appendChild(style);
+  }
+
+  // ===== PostMessage 通信 (与 rspack 对齐) =====
+  function getParentOriginFromParams() {
+    try {
+      var params = new URLSearchParams(window.location.search);
+      var origin = params.get('__parentOrigin');
+      if (origin) {
+        sessionStorage.setItem('__parentOrigin', origin);
+        return origin;
+      }
+    } catch (e) {
+      // ignore
+    }
+    try {
+      return sessionStorage.getItem('__parentOrigin') || '';
+    } catch (e) {
+      return '';
+    }
+  }
+
+  function getLegacyParentOrigin() {
+    const currentOrigin = window.location?.origin || '';
+    if (currentOrigin.includes('force.feishuapp.net')) {
+      return 'https://force.feishu.cn';
+    }
+    if (currentOrigin.includes('force-pre.feishuapp.net')) {
+      return 'https://force.feishu-pre.cn';
+    }
+    if (currentOrigin.includes('force.byted.org')) {
+      return 'https://force.feishu-boe.cn';
+    }
+    if (currentOrigin.includes('feishuapp.cn') || currentOrigin.includes('miaoda.feishuapp.net')) {
+      return 'https://miaoda.feishu.cn';
+    }
+    if (currentOrigin.includes('fsapp.kundou.cn') || currentOrigin.includes('miaoda-pre.feishuapp.net')) {
+      return 'https://miaoda.feishu-pre.cn';
+    }
+    return 'https://miaoda.feishu-boe.cn';
+  }
+
+  function sendPostMessage(message, targetOrigin) {
+    try {
+      const parentOrigin = getParentOriginFromParams() || process.env.FORCE_FRAMEWORK_DOMAIN_MAIN || getLegacyParentOrigin();
+      const origin = targetOrigin || parentOrigin;
+      window.parent.postMessage(message, origin);
+    } catch (error) {
+      // ignore postMessage errors
+    }
+  }
+
+  // ===== 错误上报 (与 rspack 对齐) =====
+  function logError(messages, mode) {
+    const logMeta = {
+      noStacktrace: mode === 'compileError',
+      stacktrace: mode === 'compileError' ? [] : undefined,
+      type: mode === 'compileError' ? 'compile-error' : 'uncaught-render-error',
+    };
+    try {
+      // 优先使用暴露的 __RUNTIME_LOGGER__ 上报错误
+      if (window.__RUNTIME_LOGGER__) {
+        window.__RUNTIME_LOGGER__.get().log({
+          level: 'error',
+          args: messages,
+          meta: logMeta,
+        });
+        return;
+      }
+      // 首次执行编译报错会走此处逻辑
+      const parts = [];
+      for (const m of messages) {
+        if (m instanceof Error) {
+          parts.push(m.message, m);
+        } else {
+          parts.push(m);
+        }
+      }
+      const logJSON = {
+        id: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+          const r = Math.random() * 16 | 0;
+          const v = c === 'x' ? r : (r & 0x3 | 0x8);
+          return v.toString(16);
+        }),
+        type: 'typedLogV2',
+        level: 'error',
+        args: parts,
+        meta: logMeta,
+      };
+      sendPostMessage({ type: 'SELECTED_LOG', payload: JSON.stringify(logJSON) });
+    } catch (e) {
+      // ignore log errors
+    }
+  }
+
+  // ===== Iframe Management =====
+  function IframeRoot(doc, parent, props) {
+    const iframe = doc.createElement('iframe');
+    iframe.id = 'vite-error-overlay';
+    iframe.src = 'about:blank';
+
+    iframe.style.border = 'none';
+    iframe.style.height = '100%';
+    iframe.style.left = '0';
+    iframe.style.minHeight = '100vh';
+    iframe.style.minHeight = '-webkit-fill-available';
+    iframe.style.position = 'fixed';
+    iframe.style.top = '0';
+    iframe.style.width = '100vw';
+    iframe.style.zIndex = '2147483647';
+
+    iframe.addEventListener('load', function onLoad() {
+      try {
+        iframe.contentDocument.body.style.margin = '0';
+        props.onIframeLoad();
+      } catch (error) {
+        // ignore
+      }
+    });
+
+    return iframe;
+  }
+
+  function OverlayRoot(doc, parent) {
+    const div = doc.createElement('div');
+    div.id = 'container';
+    parent.appendChild(div);
+    return div;
+  }
+
+  function ensureRootExists(renderFn) {
+    if (root) {
+      renderFn();
+      return;
+    }
+
+    scheduledRenderFn = renderFn;
+
+    if (iframeRoot) {
+      return;
+    }
+
+    iframeRoot = IframeRoot(document, document.body, {
+      onIframeLoad: function onIframeLoad() {
+        rootDocument = iframeRoot.contentDocument;
+        RootStyle(rootDocument, rootDocument.head);
+        root = OverlayRoot(rootDocument, rootDocument.body);
+        scheduledRenderFn();
+      },
+    });
+
+    document.body.appendChild(iframeRoot);
+  }
+
+  function removeAllChildren(element) {
+    const childList = Array.prototype.slice.call(element.childNodes, 0);
+    for (let i = 0; i < childList.length; i += 1) {
+      element.removeChild(childList[i]);
+    }
+  }
+
+  // ===== Render =====
+  function render() {
+    ensureRootExists(function () {
+      removeAllChildren(root);
+
+      // 通知前端，渲染错误页面已准备就绪
+      sendPostMessage({ type: 'PreviewReady' });
+
+      // 通知主应用存在自定义 overlay
+      sendPostMessage({
+        type: 'app-features',
+        payload: [{ feature: 'error-overlay', enable: true }],
+      });
+
+      if (currentCompileErrorMessage) {
+        currentMode = 'compileError';
+
+        // 通知主应用，当前出现渲染报错
+        sendPostMessage({ type: 'RenderError', data: currentMode });
+
+        // 发送编译错误
+        logError(['Compile Error', currentCompileErrorMessage], currentMode);
+        ErrorContainer(rootDocument, root, '编译出错');
+      } else if (currentRuntimeErrors.length) {
+        currentMode = 'runtimeError';
+
+        // 通知主应用，当前出现渲染报错
+        sendPostMessage({ type: 'RenderError', data: currentMode });
+
+        // 发送运行错误
+        logError(['Uncaught Render Error', ...currentRuntimeErrors], currentMode);
+        ErrorContainer(rootDocument, root, '页面出错了');
+      }
+    });
+  }
+
+  function cleanup() {
+    try {
+      if (iframeRoot && iframeRoot.parentNode) {
+        iframeRoot.parentNode.removeChild(iframeRoot);
+      }
+    } catch (e) {
+      // ignore
+    }
+    scheduledRenderFn = null;
+    root = null;
+    iframeRoot = null;
+    rootDocument = null;
+  }
+
+  // ===== Debounce (与 rspack 对齐) =====
+  function debounce(fn, wait) {
+    let timer;
+    function debounced() {
+      const context = this;
+      const args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        return fn.apply(context, args);
+      }, wait);
+    }
+    return debounced;
+  }
+
+  // ===== Public API =====
+  function clearCompileError(shouldReload) {
+    if (!root || currentMode !== 'compileError') {
+      return;
+    }
+    currentCompileErrorMessage = '';
+    currentMode = null;
+    cleanup();
+
+    // 编译错误修复后需要刷新页面，因为错误期间模块可能没有正确加载
+    if (shouldReload) {
+      window.location.reload();
+    }
+  }
+
+  function clearRuntimeErrors(dismissOverlay) {
+    if (!root || currentMode !== 'runtimeError') {
+      return;
+    }
+    currentRuntimeErrors = [];
+    if (typeof dismissOverlay === 'undefined' || dismissOverlay) {
+      currentMode = null;
+      cleanup();
+    }
+  }
+
+  function showCompileError(message) {
+    if (!message) {
+      return;
+    }
+    currentCompileErrorMessage = message;
+    render();
+  }
+
+  function showRuntimeErrors(errors) {
+    if (!errors || !errors.length) {
+      return;
+    }
+    currentRuntimeErrors = errors;
+    render();
+  }
+
+  // Debounced version to prevent frequent renders
+  const debouncedShowRuntimeErrors = debounce(showRuntimeErrors, 30);
+
+  // 检测是否为编译/模块加载错误（适配 Vite 错误格式）
+  function isCompileError(error) {
+    const message = error.message || '';
+    return (
+      // Vite 模块加载错误
+      /Failed to fetch dynamically imported module/.test(message) ||
+      /Failed to load module script/.test(message) ||
+      /Unable to preload CSS/.test(message) ||
+      // 通用模块错误
+      /Cannot find module/.test(message) ||
+      /Module not found/.test(message) ||
+      // Webpack 格式（兼容）
+      /Module [A-z ]+\(from/.test(message)
+    );
+  }
+
+  // 处理运行时错误（与 rspack 对齐）
+  function handleRuntimeError(error) {
+    // 如果是编译相关的错误，忽略它（会由 vite:error 事件处理）
+    if (!error || isCompileError(error)) {
+      return;
+    }
+
+    if (currentRuntimeErrors.indexOf(error) === -1) {
+      currentRuntimeErrors = currentRuntimeErrors.concat(error);
+    }
+    debouncedShowRuntimeErrors(currentRuntimeErrors);
+  }
+
+  // ===== Vite HMR Integration (using createHotContext) =====
+  const CLIENT_BASE_PATH = process.env.CLIENT_BASE_PATH || '';
+
+  async function setupViteHMRListener() {
+    try {
+      const { createHotContext } = await import(CLIENT_BASE_PATH + '/@vite/client');
+      const hot = createHotContext(CLIENT_BASE_PATH + '/@error-overlay.js');
+
+      // ===== HMR API: beforeUpdate - 通知 onBeforeApply 回调 + 重置错误标志 =====
+      hot.on('vite:beforeUpdate', () => {
+        hmrBeforeApplyCallbacks.forEach((cb) => {
+          try {
+            cb();
+          } catch (e) {
+            console.warn('[VITE_HMR] onBeforeApply callback error:', e);
+          }
+        });
+        hasErrorInCurrentUpdate = false;
+      });
+
+      // ===== HMR API: error - 设置错误标志并通知回调 =====
+      hot.on('vite:error', (payload) => {
+        hasErrorInCurrentUpdate = true;
+
+        // 通知 HMR 错误回调
+        hmrErrorCallbacks.forEach((cb) => {
+          try {
+            cb(payload.err);
+          } catch (e) {
+            // ignore callback errors
+          }
+        });
+
+        // 显示错误 overlay
+        if (payload.err) {
+          const msg = payload.err.message + (payload.err.frame ? '\n\n' + payload.err.frame : '');
+          showCompileError(msg);
+        }
+      });
+
+      // ===== HMR API: afterUpdate - 使用 queueMicrotask 等待 error 事件 =====
+      hot.on('vite:afterUpdate', () => {
+        // 使用 queueMicrotask 延迟执行，确保 vite:error 事件先处理
+        // Vite 事件顺序: beforeUpdate -> afterUpdate -> error
+        // microtask 会在所有同步事件处理完后执行
+        queueMicrotask(() => {
+          if (!hasErrorInCurrentUpdate) {
+            // 没有错误，通知成功回调
+            hmrSuccessCallbacks.forEach((cb) => {
+              try {
+                cb();
+              } catch (e) {
+                // ignore callback errors
+              }
+            });
+          }
+        });
+
+        // 清除编译错误 overlay（如果之前有的话）
+        clearCompileError(true);
+      });
+
+      // 自定义事件
+      hot.on('fullstack:error', (data) => {
+        showCompileError(data?.message || 'Unknown error');
+      });
+    } catch (e) {
+      // Failed to setup HMR listener
+    }
+  }
+
+  // ===== Global Error Listeners =====
+  function setupGlobalErrorListeners() {
+    window.addEventListener('error', (event) => {
+      // 忽略编译错误模式下的运行时错误
+      if (currentMode === 'compileError') return;
+
+      if (event.error) {
+        handleRuntimeError(event.error);
+      }
+    });
+
+    window.addEventListener('unhandledrejection', (event) => {
+      if (currentMode === 'compileError') return;
+
+      if (event.reason instanceof Error) {
+        handleRuntimeError(event.reason);
+      }
+    });
+  }
+
+  // ===== Expose Error Overlay API =====
+  window.__VITE_ERROR_OVERLAY__ = {
+    showCompileError,
+    clearCompileError,
+    showRuntimeErrors,
+    clearRuntimeErrors,
+    handleRuntimeError,
+  };
+
+  // ===== Expose HMR API (用于 toolkit 的统一 HMR API) =====
+  // @see docs/RFC_HMR_API.md
+  window.__VITE_HMR__ = {
+    /**
+     * 注册 HMR 更新前回调（vite:beforeUpdate 阶段，模块替换之前）
+     * @param {Function} callback 回调函数
+     * @returns {Function} cleanup 函数
+     */
+    onBeforeApply(callback) {
+      hmrBeforeApplyCallbacks.add(callback);
+      return () => hmrBeforeApplyCallbacks.delete(callback);
+    },
+    /**
+     * 注册 HMR 成功回调
+     * @param {Function} callback 成功回调函数
+     * @returns {Function} cleanup 函数
+     */
+    onSuccess(callback) {
+      hmrSuccessCallbacks.add(callback);
+      return () => hmrSuccessCallbacks.delete(callback);
+    },
+    /**
+     * 注册 HMR 失败回调
+     * @param {Function} callback 失败回调函数
+     * @returns {Function} cleanup 函数
+     */
+    onError(callback) {
+      hmrErrorCallbacks.add(callback);
+      return () => hmrErrorCallbacks.delete(callback);
+    },
+  };
+
+  // ===== Initialize =====
+  setupViteHMRListener();
+  setupGlobalErrorListeners();
+}

package/src/polyfills/index.ts

@@ -0,0 +1,35 @@
+/**
+ * iOS 兼容性 Polyfills
+ *
+ * 使用 core-js 提供 iOS 15.4 以下版本需要的 polyfill
+ * 此文件会被单独打包成 polyfills.js，按需加载
+ */
+
+// ECMAScript polyfills (core-js)
+import 'core-js/actual/array/at';
+import 'core-js/actual/string/at';
+import 'core-js/actual/array/find-last';
+import 'core-js/actual/array/find-last-index';
+import 'core-js/actual/object/has-own';
+import 'core-js/actual/promise/any';
+import 'core-js/actual/aggregate-error';
+import 'core-js/actual/structured-clone';
+
+// Web Crypto API polyfill (不在 core-js 范围内)
+if (typeof crypto !== 'undefined' && typeof crypto.randomUUID !== 'function') {
+  Object.defineProperty(crypto, 'randomUUID', {
+    value: function randomUUID(): string {
+      const bytes = new Uint8Array(16);
+      crypto.getRandomValues(bytes);
+      bytes[6] = (bytes[6] & 0x0f) | 0x40;
+      bytes[8] = (bytes[8] & 0x3f) | 0x80;
+      let hex = '';
+      for (let i = 0; i < 16; i++) {
+        hex += (bytes[i] < 16 ? '0' : '') + bytes[i].toString(16);
+      }
+      return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+    },
+    writable: true,
+    configurable: true,
+  });
+}