@lark-apaas/fullstack-rspack-preset 0.1.1 → 0.1.2-alpha.1

package/lib/overlay/components.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 错误容器组件
+ * @param {*} document
+ * @param {*} root
+ * @param {object} props
+ * @param {string} props.errorMessage - 错误信息
+ * @param {function} props.onRepairClick - 修复按钮点击事件
+ * @param {function} props.onCopyClick - 复制按钮点击事件
+ */
+export function ErrorContainer(document: any, root: any, props: {
+    errorMessage: string;
+    onRepairClick: Function;
+    onCopyClick: Function;
+}): void;
+export function RootStyle(document: any, root: any): void;

package/lib/overlay/components.js

@@ -0,0 +1,169 @@
+"use strict";
+/**
+ * 错误容器组件
+ * @param {*} document
+ * @param {*} root
+ * @param {object} props
+ * @param {string} props.errorMessage - 错误信息
+ * @param {function} props.onRepairClick - 修复按钮点击事件
+ * @param {function} props.onCopyClick - 复制按钮点击事件
+ */
+function ErrorContainer(document, root, props) {
+    // 创建容器元素
+    const container = document.createElement('div');
+    container.className = 'container';
+    // 创建内容元素
+    const content = document.createElement('div');
+    content.className = 'content';
+    container.appendChild(content);
+    // 创建图片元素
+    const img = document.createElement('img');
+    img.src =
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/render_error.svg';
+    img.alt = 'render error';
+    // 图片占位
+    img.width = 120;
+    img.height = 120;
+    img.className = 'error-image';
+    content.appendChild(img);
+    // 创建标题元素
+    const title = document.createElement('p');
+    title.className = 'title';
+    title.textContent = '哎呀，写错代码了';
+    content.appendChild(title);
+    // 创建描述元素
+    const description = document.createElement('p');
+    description.className = 'description';
+    description.textContent = '可复制错误信息，或告诉妙搭进行修复。';
+    content.appendChild(description);
+    // 创建按钮组元素
+    const buttonGroup = document.createElement('div');
+    buttonGroup.className = 'button-group';
+    content.appendChild(buttonGroup);
+    // 创建复制按钮
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'button button-copy';
+    copyBtn.id = 'copyBtn';
+    copyBtn.textContent = '复制错误信息';
+    copyBtn.addEventListener('click', props.onCopyClick);
+    buttonGroup.appendChild(copyBtn);
+    // 创建修复按钮
+    const repairBtn = document.createElement('button');
+    repairBtn.className = 'button button-repair';
+    repairBtn.id = 'repairBtn';
+    repairBtn.textContent = '告诉妙搭修复';
+    repairBtn.addEventListener('click', props.onRepairClick);
+    buttonGroup.appendChild(repairBtn);
+    // 添加到根元素
+    root.appendChild(container);
+}
+function RootStyle(document, root) {
+    const style = document.createElement('style');
+    style.id = 'react-refresh-overlay-style';
+    style.textContent = `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -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;
+    }
+
+    .container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #F3F4F6; /* bg-gray-100 */
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
+    .error-image {
+      margin-bottom: 16px; /* mb-4 */
+      width: 120px; /* w-[120px] */
+      height: auto;
+    }
+
+    .title {
+      font-size: 18px; /* text-l (推测为 text-lg) */
+      line-height: 22px;
+      color: #1F2329;
+      font-weight: 500; /* font-medium */
+      margin-bottom: 8px; /* mb-2 */
+    }
+
+    .description {
+      font-size: 14px; /* text-sm */
+      line-height: 22px;
+      color: #646A73;
+      font-weight: 400; /* font-normal */
+      margin-bottom: 8px; /* mb-2 */
+    }
+
+    .button-group {
+      display: flex;
+      gap: 16px; /* space-x-4 */
+    }
+
+    .button {
+      height: 32px; /* h-[32px] */
+      padding: 0 16px;
+      border-radius: 6px; /* rounded-[6px] */
+      font-size: 14px; /* text-sm */
+      font-weight: 400; /* font-[400] */
+      cursor: pointer;
+      transition: all 0.2s;
+      outline: none; /* focus:outline-hidden */
+      border: 1px solid;
+    }
+
+    .button-copy {
+      background-color: white; /* bg-white */
+      color: #4B5563; /* text-gray-600 */
+      border-color: #D0D3D6; /* border-[#D0D3D6] */
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
+    }
+
+    .button-copy:hover {
+      background-color: #F3F4F6; /* hover:bg-gray-100 */
+    }
+
+    .button-copy:active {
+      background-color: #E5E7EB; /* active:bg-gray-200 */
+    }
+
+    .button-repair {
+      background-color: #2563EB; /* bg-blue-600 */
+      color: white; /* text-white */
+      border-color: transparent; /* border-transparent */
+      font-weight: 500; /* font-medium */
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
+    }
+
+    .button-repair:hover {
+      background-color: #2563EB; /* hover:bg-blue-600 (保持不变) */
+    }
+
+    .button-repair:active {
+      background-color: #1E40AF; /* active:bg-blue-700 */
+    }
+  `;
+    root.appendChild(style);
+}
+module.exports = {
+    ErrorContainer,
+    RootStyle,
+};

package/lib/overlay/index.d.ts

@@ -0,0 +1,44 @@
+declare namespace _exports {
+    export { IframeProps };
+}
+declare namespace _exports {
+    export { clearCompileError };
+    export { clearRuntimeErrors };
+    export { handleRuntimeError };
+    export { showCompileError };
+    export { showRuntimeErrors };
+}
+export = _exports;
+type IframeProps = {
+    onIframeLoad: () => void;
+};
+/**
+ * Clears Webpack compilation errors and dismisses the compile error overlay.
+ * @returns {void}
+ */
+declare function clearCompileError(): void;
+/**
+ * Clears runtime error records and dismisses the runtime error overlay.
+ * @param {boolean} [dismissOverlay] Whether to dismiss the overlay or not.
+ * @returns {void}
+ */
+declare function clearRuntimeErrors(dismissOverlay?: boolean): void;
+/**
+ * Handles runtime error contexts captured with EventListeners.
+ * Integrates with a runtime error overlay.
+ * @param {Error} error A valid error object.
+ * @returns {void}
+ */
+declare function handleRuntimeError(error: Error): void;
+/**
+ * Shows the compile error overlay with the specific Webpack error message.
+ * @param {string} message
+ * @returns {void}
+ */
+declare function showCompileError(message: string): void;
+/**
+ * Shows the runtime error overlay with the specific error records.
+ * @param {Error[]} errors
+ * @returns {void}
+ */
+declare function showRuntimeErrors(errors: Error[]): void;

package/lib/overlay/index.js

@@ -0,0 +1,339 @@
+"use strict";
+/* eslint-disable no-undef */
+const { ErrorContainer, RootStyle } = require('./components');
+/* ===== Cached elements for DOM manipulations ===== */
+/**
+ * The iframe that contains the overlay.
+ * @type {HTMLIFrameElement}
+ */
+let iframeRoot = null;
+/**
+ * The document object from the iframe root, used to create and render elements.
+ * @type {Document}
+ */
+let rootDocument = null;
+/**
+ * The root div elements will attach to.
+ * @type {HTMLDivElement}
+ */
+let root = null;
+/**
+ * A Cached function to allow deferred render.
+ * @type {RenderFn | null}
+ */
+let scheduledRenderFn = null;
+/* ===== Overlay State ===== */
+/**
+ * The latest error message from Webpack compilation.
+ * @type {string}
+ */
+let currentCompileErrorMessage = '';
+/**
+ * The latest runtime error objects.
+ * @type {Error[]}
+ */
+let currentRuntimeErrors = [];
+/**
+ * The render mode the overlay is currently in.
+ * @type {'compileError' | 'runtimeError' | null}
+ */
+let currentMode = null;
+/**
+ * @typedef {Object} IframeProps
+ * @property {function(): void} onIframeLoad
+ */
+/**
+ * Creates the main `iframe` the overlay will attach to.
+ * Accepts a callback to be ran after iframe is initialized.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @param {IframeProps} props
+ * @returns {HTMLIFrameElement}
+ */
+function IframeRoot(document, root, props) {
+    const iframe = document.createElement('iframe');
+    iframe.id = 'react-refresh-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() {
+        // Reset margin of iframe body
+        iframe.contentDocument.body.style.margin = '0';
+        props.onIframeLoad();
+    });
+    // We skip mounting and returns as we need to ensure
+    // the load event is fired after we setup the global variable
+    return iframe;
+}
+/**
+ * Creates the main `div` element for the overlay to render.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @returns {HTMLDivElement}
+ */
+function OverlayRoot(document, root) {
+    const div = document.createElement('div');
+    div.id = 'container';
+    root.appendChild(div);
+    return div;
+}
+/**
+ * Ensures the iframe root and the overlay root are both initialized before render.
+ * If check fails, render will be deferred until both roots are initialized.
+ * @param {RenderFn} renderFn A function that triggers a DOM render.
+ * @returns {void}
+ */
+function ensureRootExists(renderFn) {
+    if (root) {
+        // Overlay root is ready, we can render right away.
+        renderFn();
+        return;
+    }
+    // Creating an iframe may be asynchronous so we'll defer render.
+    // In case of multiple calls, function from the last call will be used.
+    scheduledRenderFn = renderFn;
+    if (iframeRoot) {
+        // Iframe is already ready, it will fire the load event.
+        return;
+    }
+    // Create the iframe root, and, the overlay root inside it when it is ready.
+    iframeRoot = IframeRoot(document, document.body, {
+        onIframeLoad: function onIframeLoad() {
+            rootDocument = iframeRoot.contentDocument;
+            RootStyle(rootDocument, rootDocument.head);
+            root = OverlayRoot(rootDocument, rootDocument.body);
+            scheduledRenderFn();
+        },
+    });
+    // We have to mount here to ensure `iframeRoot` is set when `onIframeLoad` fires.
+    // This is because onIframeLoad() will be called synchronously
+    // or asynchronously depending on the browser.
+    document.body.appendChild(iframeRoot);
+}
+function removeAllChildren(element, skip) {
+    /** @type {Node[]} */
+    const childList = Array.prototype.slice.call(element.childNodes, typeof skip !== 'undefined' ? skip : 0);
+    for (let i = 0; i < childList.length; i += 1) {
+        element.removeChild(childList[i]);
+    }
+}
+async function copyToClipboard(text) {
+    // 优先使用现代的 Clipboard API
+    if (navigator.clipboard && window.isSecureContext) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        catch (error) {
+            // 权限被拒绝或其他错误，降级到 execCommand
+            console.warn('Clipboard API 失败，降级到 execCommand:', error);
+            return fallbackCopyToClipboard(text);
+        }
+    }
+    // 降级方案：使用传统的 execCommand 方法
+    return fallbackCopyToClipboard(text);
+}
+// 获取父窗口 origin
+function getPreviewParentOrigin() {
+    const { origin } = window.location;
+    // 线上环境
+    if (origin.includes('feishuapp.cn') ||
+        origin.includes('miaoda.feishuapp.net')) {
+        return 'https://miaoda.feishu.cn';
+    }
+    // PRE 环境
+    if (origin.includes('fsapp.kundou.cn') ||
+        origin.includes('miaoda-pre.feishuapp.net')) {
+        return 'https://miaoda.feishu-pre.cn';
+    }
+    // BOE 环境
+    return 'https://miaoda.feishu-boe.cn';
+}
+/**
+ * Creates the main `div` element for the overlay to render.
+ * @returns {void}
+ */
+function render() {
+    ensureRootExists(function () {
+        removeAllChildren(root);
+        // 发送 postMessage
+        const sendPostMessage = (message, targetOrigin) => {
+            const origin = targetOrigin || getPreviewParentOrigin();
+            window.parent.postMessage(message, origin);
+        };
+        // 通知主应用存在自定义 overlay
+        sendPostMessage({
+            type: 'app-features',
+            payload: [{
+                    feature: 'error-overlay',
+                    enable: true,
+                }],
+        });
+        if (currentCompileErrorMessage) {
+            currentMode = 'compileError';
+            ErrorContainer(rootDocument, root, {
+                errorMessage: currentCompileErrorMessage,
+                onRepairClick: function onRepairClick() {
+                    sendPostMessage({
+                        type: 'RenderErrorRepair',
+                        data: currentCompileErrorMessage,
+                    });
+                },
+                onCopyClick: function onCopyClick() {
+                    copyToClipboard(currentCompileErrorMessage);
+                },
+            });
+        }
+        else if (currentRuntimeErrors.length) {
+            currentMode = 'runtimeError';
+            let errors = '';
+            currentRuntimeErrors.forEach(error => {
+                errors += `${error.message}\n${error.stack}\n`;
+            });
+            // 叠加全部报错，将报错信息发送到妙搭
+            ErrorContainer(rootDocument, root, {
+                errorMessage: errors,
+                onRepairClick: function onRepairClick() {
+                    sendPostMessage({
+                        type: 'RenderErrorRepair',
+                        data: errors,
+                    });
+                },
+                onCopyClick: function onCopyClick() {
+                    copyToClipboard(errors);
+                },
+            });
+        }
+    });
+}
+/**
+ * Destroys the state of the overlay.
+ * @returns {void}
+ */
+function cleanup() {
+    // Clean up and reset all internal state.
+    try {
+        document.body.removeChild(iframeRoot);
+    }
+    catch (e) {
+        // In case user render react app directly to body， will trigger `NotFoundError` when recovery from an Error
+        // https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild#exceptions
+    }
+    scheduledRenderFn = null;
+    root = null;
+    iframeRoot = null;
+}
+/**
+ * Clears Webpack compilation errors and dismisses the compile error overlay.
+ * @returns {void}
+ */
+function clearCompileError() {
+    if (!root || currentMode !== 'compileError') {
+        return;
+    }
+    currentCompileErrorMessage = '';
+    currentMode = null;
+    cleanup();
+}
+/**
+ * Clears runtime error records and dismisses the runtime error overlay.
+ * @param {boolean} [dismissOverlay] Whether to dismiss the overlay or not.
+ * @returns {void}
+ */
+function clearRuntimeErrors(dismissOverlay) {
+    if (!root || currentMode !== 'runtimeError') {
+        return;
+    }
+    currentRuntimeErrors = [];
+    if (typeof dismissOverlay === 'undefined' || dismissOverlay) {
+        currentMode = null;
+        cleanup();
+    }
+}
+/**
+ * Shows the compile error overlay with the specific Webpack error message.
+ * @param {string} message
+ * @returns {void}
+ */
+function showCompileError(message) {
+    if (!message) {
+        return;
+    }
+    currentCompileErrorMessage = message;
+    render();
+}
+/**
+ * Shows the runtime error overlay with the specific error records.
+ * @param {Error[]} errors
+ * @returns {void}
+ */
+function showRuntimeErrors(errors) {
+    if (!errors || !errors.length) {
+        return;
+    }
+    currentRuntimeErrors = errors;
+    render();
+}
+function debounce(fn, wait) {
+    /**
+     * A cached setTimeout handler.
+     * @type {number | undefined}
+     */
+    let timer;
+    /**
+     * @returns {void}
+     */
+    function debounced() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            return fn.apply(context, args);
+        }, wait);
+    }
+    return debounced;
+}
+/**
+ * The debounced version of `showRuntimeErrors` to prevent frequent renders
+ * due to rapid firing listeners.
+ * @param {Error[]} errors
+ * @returns {void}
+ */
+const debouncedShowRuntimeErrors = debounce(showRuntimeErrors, 30);
+/**
+ * Detects if an error is a Webpack compilation error.
+ * @param {Error} error The error of interest.
+ * @returns {boolean} If the error is a Webpack compilation error.
+ */
+function isWebpackCompileError(error) {
+    return (/Module [A-z ]+\(from/.test(error.message) ||
+        /Cannot find module/.test(error.message));
+}
+/**
+ * Handles runtime error contexts captured with EventListeners.
+ * Integrates with a runtime error overlay.
+ * @param {Error} error A valid error object.
+ * @returns {void}
+ */
+function handleRuntimeError(error) {
+    if (error &&
+        !isWebpackCompileError(error) &&
+        currentRuntimeErrors.indexOf(error) === -1) {
+        currentRuntimeErrors = currentRuntimeErrors.concat(error);
+    }
+    debouncedShowRuntimeErrors(currentRuntimeErrors);
+}
+module.exports = Object.freeze({
+    clearCompileError: clearCompileError,
+    clearRuntimeErrors: clearRuntimeErrors,
+    handleRuntimeError: handleRuntimeError,
+    showCompileError: showCompileError,
+    showRuntimeErrors: showRuntimeErrors,
+});

package/lib/preset.js

@@ -7,11 +7,12 @@ exports.createRecommendRspackConfig = createRecommendRspackConfig;
 const path_1 = __importDefault(require("path"));
 const core_1 = __importDefault(require("@rspack/core"));
 const devtool_kits_1 = require("@lark-apaas/devtool-kits");
+const plugin_react_refresh_1 = __importDefault(require("@rspack/plugin-react-refresh"));
 const dev_server_listener_1 = require("./utils/dev-server-listener");
 const route_parser_plugin_1 = __importDefault(require("./rspack-plugins/route-parser-plugin"));
 const slardar_performance_monitor_plugin_1 = __importDefault(require("./rspack-plugins/slardar-performance-monitor-plugin"));
 function createRecommendRspackConfig(options) {
-    const { isDev = true, enableReactRefresh = false, needRoutes = true, clientBasePath = '', publicPath = '', // 静态资源路径
+    const { isDev = true, enableReactRefresh = isDev, needRoutes = true, clientBasePath = '', publicPath = '', // 静态资源路径
      } = options;
     const rootDir = process.cwd();
     const serverPort = process.env.SERVER_PORT || '3000';
@@ -124,7 +125,7 @@ function createRecommendRspackConfig(options) {
             }),
             new core_1.default.DefinePlugin({
                 'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
-                'process.env.runtimeMode': 'fullstack',
+                'process.env.runtimeMode': JSON.stringify('fullstack'),
                 'process.env.CLIENT_BASE_PATH': JSON.stringify(clientBasePath),
                 // FIXME:安全漏洞，会读取到服务路径，不应该在客户端代码中使用
                 'process.env.CWD': JSON.stringify(process.cwd()),
@@ -157,6 +158,12 @@ function createRecommendRspackConfig(options) {
                     appPath: './client/src/app.tsx',
                     outputPath: path_1.default.resolve(rootDir, 'dist/client/routes.json'),
                 }),
+            // 热更新
+            enableReactRefresh && new plugin_react_refresh_1.default({
+                overlay: {
+                    module: path_1.default.resolve(__dirname, 'overlay/index.js'),
+                },
+            }),
         ],
         optimization: isDev
             ? {}

package/lib/react-refresh-plugin.d.ts

@@ -0,0 +1,3 @@
+export = createReactRefreshPlugin;
+declare function createReactRefreshPlugin(): ReactRefreshPlugin;
+import ReactRefreshPlugin = require("@rspack/plugin-react-refresh/dist");

package/lib/react-refresh-plugin.js

@@ -0,0 +1,11 @@
+"use strict";
+const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const path = require('path');
+function createReactRefreshPlugin() {
+    return new ReactRefreshPlugin({
+        overlay: {
+            module: path.resolve(__dirname, 'overlay/index.js'),
+        },
+    });
+}
+module.exports = createReactRefreshPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-rspack-preset",
-  "version": "0.1.1",
+  "version": "0.1.2-alpha.1",
   "files": [
     "lib"
   ],
@@ -23,11 +23,16 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@babel/parser": "^7.28.0",
+    "@babel/traverse": "^7.28.0",
+    "@babel/types": "^7.28.2",
     "@lark-apaas/miaoda-inspector-babel-plugin": "^1.0.0",
     "@lark-apaas/miaoda-inspector-jsx-runtime": "^1.0.0",
+    "@rspack/plugin-react-refresh": "^1.5.1",
     "clsx": "^2.1.1",
     "echarts": "^6.0.0",
     "postcss-import": "^16.1.1",
+    "react-refresh": "^0.17.0",
     "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {