@lark-apaas/miaoda-presets 1.0.2 → 1.0.4

package/lib/overlay/index.js

@@ -167,6 +167,14 @@ function render() {
             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, {

package/lib/recommend/rspack.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRecommendRspackConfig = createRecommendRspackConfig;
 const path_1 = __importDefault(require("path"));
 const core_1 = __importDefault(require("@rspack/core"));
+const dev_server_listener_1 = require("../utils/dev-server-listener");
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const RouteParserPlugin = require('../rspack-plugins/route-parser-plugin');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -123,7 +124,9 @@ function createRecommendRspackConfig(options) {
                 maxChunks: 1,
             }),
             // 全栈模式下，增加性能监控上报脚本注入
-            runtimeMode === 'fullstack' ? new SlardarPerformanceMonitorPlugin() : undefined,
+            runtimeMode === 'fullstack'
+                ? new SlardarPerformanceMonitorPlugin()
+                : undefined,
             // 开发环境下，解析路由
             isDev &&
                 needRoutes &&
@@ -177,7 +180,7 @@ function createRecommendRspackConfig(options) {
             },
         devtool: isDev ? 'source-map' : false, // 对应vite的sourcemap配置
         devServer: {
-            headers: (req) => {
+            headers: req => {
                 // 获取请求的Origin头
                 const requestOrigin = req.headers.origin ?? '';
                 // 定义允许的域名白名单
@@ -194,12 +197,17 @@ function createRecommendRspackConfig(options) {
                     'Access-Control-Allow-Origin': allowedOrigin,
                 };
             },
+            onListening(server) {
+                if (runtimeMode === 'fullstack') {
+                    (0, dev_server_listener_1.listenHmrTiming)(server);
+                }
+            },
             client: {
                 overlay: {
                     errors: false,
                     warnings: false,
-                }
-            }
+                },
+            },
         },
     };
 }

package/lib/rspack-plugins/hmr-timing-plugin.js

@@ -0,0 +1,262 @@
+"use strict";
+/**
+ * Webpack HMR 耗时计算插件 JavaScript 版本
+ * 在浏览器 Console 打印热更文件和耗时信息
+ */
+class HMRTimingPlugin {
+    constructor(options = {}) {
+        this.options = {
+            threshold: options.threshold || 1000
+        };
+        this.hmrStartTime = null;
+        this.changedFiles = new Set();
+        this.devServer = null;
+    }
+    apply(compiler) {
+        const pluginName = 'HMRTimingPlugin';
+        // 在 devServer 启动后保存引用
+        if (compiler.options.devServer) {
+            const originalSetupMiddlewares = compiler.options.devServer.setupMiddlewares;
+            const self = this;
+            compiler.options.devServer.setupMiddlewares = function (middlewares, devServer) {
+                // 保存 devServer 实例的引用
+                self.devServer = devServer;
+                global.__webpack_dev_server__ = devServer;
+                if (originalSetupMiddlewares) {
+                    return originalSetupMiddlewares(middlewares, devServer);
+                }
+                return middlewares;
+            };
+        }
+        // 监听文件变化
+        compiler.hooks.invalid.tap(pluginName, (fileName) => {
+            this.hmrStartTime = Date.now();
+            this.changedFiles.clear();
+            if (fileName) {
+                this.changedFiles.add(fileName);
+            }
+        });
+        // 监听 watch 运行开始
+        compiler.hooks.watchRun.tapAsync(pluginName, (compiler, callback) => {
+            if (!this.hmrStartTime) {
+                this.hmrStartTime = Date.now();
+            }
+            // 收集变化的文件
+            if (compiler.modifiedFiles) {
+                compiler.modifiedFiles.forEach(file => this.changedFiles.add(file));
+            }
+            if (compiler.removedFiles) {
+                compiler.removedFiles.forEach(file => this.changedFiles.add(file));
+            }
+            callback();
+        });
+        // 监听编译完成
+        compiler.hooks.done.tap(pluginName, (stats) => {
+            if (this.hmrStartTime === null)
+                return;
+            const totalTime = Date.now() - this.hmrStartTime;
+            // 获取实际更新的模块
+            const updatedModules = new Set();
+            stats.compilation.modules.forEach(module => {
+                const identifier = module.resource || module.identifier?.();
+                if (identifier && typeof identifier === 'string') {
+                    // 过滤掉 node_modules 中的模块
+                    if (!identifier.includes('node_modules')) {
+                        updatedModules.add(identifier);
+                    }
+                }
+            });
+            // 合并文件列表
+            const allChangedFiles = new Set([
+                ...Array.from(this.changedFiles),
+                ...Array.from(updatedModules)
+            ]);
+            // 简化文件路径
+            const simplifiedFiles = Array.from(allChangedFiles)
+                .map(file => {
+                // 移除项目根路径
+                const relativePath = file.replace(compiler.context || '', '');
+                // 移除开头的斜杠
+                return relativePath.replace(/^[\/\\]/, '');
+            })
+                .filter(file => file && file.length > 0)
+                .slice(0, 10); // 最多显示10个文件
+            const timingInfo = {
+                totalTime,
+                changedFiles: simplifiedFiles,
+                modules: stats.compilation.modules.size,
+                isOverThreshold: totalTime > this.options.threshold,
+                threshold: this.options.threshold
+            };
+            // 通过 WebSocket 发送到浏览器
+            this.sendToBrowser(compiler, timingInfo);
+            // 重置
+            this.changedFiles.clear();
+        });
+        // 注入客户端代码
+        this.injectClientScript(compiler);
+    }
+    sendToBrowser(compiler, timingInfo) {
+        // 使用 done hook 确保在编译完成后发送
+        const server = this.getDevServer(compiler);
+        if (server) {
+            if (server.sockWrite) {
+                // webpack-dev-server 3.x
+                server.sockWrite(server.sockets, 'hmr-timing', timingInfo);
+            }
+            else if (server.sendMessage) {
+                // webpack-dev-server 4.x/5.x
+                const clients = server.webSocketServer?.clients || server.clients;
+                server.sendMessage(clients, 'hmr-timing', timingInfo);
+            }
+        }
+    }
+    getDevServer(compiler) {
+        // 尝试多种方式获取 devServer 实例
+        // 方式1: 从 compiler.options.devServer 存储的引用
+        if (compiler.options.devServer && compiler.options.devServer.__instance) {
+            return compiler.options.devServer.__instance;
+        }
+        // 方式2: 从全局变量
+        if (global.__webpack_dev_server__) {
+            return global.__webpack_dev_server__;
+        }
+        // 方式3: 从 compiler 上挂载的引用
+        if (compiler.__webpack_dev_server__) {
+            return compiler.__webpack_dev_server__;
+        }
+        // 方式4: 在 infrastructure 日志中查找
+        if (compiler.infrastructureLogger) {
+            const logger = compiler.infrastructureLogger;
+            if (logger.__devServer) {
+                return logger.__devServer;
+            }
+        }
+        return null;
+    }
+    injectClientScript(compiler) {
+        const clientScript = `
+;(function() {
+  if (typeof window === 'undefined' || !module.hot) return;
+
+  const threshold = ${this.options.threshold};
+
+  // 显示 HMR 耗时和变化文件
+  function logHMRTiming(data) {
+    const color = data.isOverThreshold ? '#ff9800' : '#4caf50';
+    
+    // 主要信息
+    console.log(
+      '%c🔥 HMR 更新完成 - 耗时: %c' + data.totalTime + 'ms',
+      'color: ' + color + '; font-weight: bold; font-size: 14px;',
+      'color: ' + color + '; font-weight: bold; font-size: 16px;'
+    );
+    
+    // 热更文件列表
+    if (data.changedFiles && data.changedFiles.length > 0) {
+      console.group('📝 热更文件 (' + data.changedFiles.length + ')');
+      data.changedFiles.forEach(function(file) {
+        console.log('  •', file);
+      });
+      console.groupEnd();
+    }
+    
+    // 超过阈值警告
+    if (data.isOverThreshold) {
+      console.warn('⚠️ HMR 耗时超过阈值 ' + threshold + 'ms');
+    }
+    
+    console.log(''); // 空行分隔
+  }
+
+  // 监听 webpack-dev-server 的 WebSocket 消息
+  if (typeof __webpack_dev_server_client__ !== 'undefined') {
+    // webpack-dev-server 4.x/5.x
+    const originalOnMessage = __webpack_dev_server_client__.onMessage;
+    __webpack_dev_server_client__.onMessage = function(message) {
+      if (message.type === 'hmr-timing') {
+        logHMRTiming(message.data);
+      }
+      if (originalOnMessage) {
+        return originalOnMessage.apply(this, arguments);
+      }
+    };
+  } else {
+    // 备用方案：监听 WebSocket
+    setTimeout(function() {
+      const ws = window.__webpack_dev_server_ws__;
+      if (ws && ws.addEventListener) {
+        ws.addEventListener('message', function(event) {
+          try {
+            const message = JSON.parse(event.data);
+            if (message.type === 'hmr-timing') {
+              logHMRTiming(message.data);
+            }
+          } catch (e) {}
+        });
+      }
+    }, 1000);
+  }
+})();
+`;
+        compiler.hooks.compilation.tap('HMRTimingPlugin', (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: 'HMRTimingPlugin',
+                stage: compilation.constructor.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            }, () => {
+                // 注入到主入口文件
+                const mainAssets = Object.keys(compilation.assets).filter(name => name.match(/^(main|index|app|bundle).*\.js$/) && !name.includes('hot-update'));
+                if (mainAssets.length > 0) {
+                    const assetName = mainAssets[0];
+                    const asset = compilation.assets[assetName];
+                    const source = asset.source();
+                    const newSource = clientScript + '\n' + source;
+                    compilation.assets[assetName] = {
+                        source: () => newSource,
+                        size: () => newSource.length,
+                        map: () => asset.map ? asset.map() : null
+                    };
+                }
+            });
+        });
+    }
+}
+module.exports = HMRTimingPlugin;
+/**
+ * 使用示例:
+ *
+ * // webpack.config.js
+ * const HMRTimingPlugin = require('./HMRTimingPlugin');
+ *
+ * module.exports = {
+ *   mode: 'development',
+ *   devServer: {
+ *     hot: true,
+ *   },
+ *   plugins: [
+ *     new HMRTimingPlugin({
+ *       threshold: 1000  // 超过1秒会显示警告
+ *     })
+ *   ]
+ * };
+ *
+ * 浏览器控制台输出示例:
+ *
+ * 🔥 HMR 更新完成 - 耗时: 523ms
+ * 📝 热更文件 (2)
+ *   • src/components/App.jsx
+ *   • src/styles/main.css
+ *
+ * 🔥 HMR 更新完成 - 耗时: 1250ms
+ * 📝 热更文件 (1)
+ *   • src/utils/helper.js
+ * ⚠️ HMR 耗时超过阈值 1000ms
+ *
+ * 功能特性:
+ * - 显示 HMR 耗时（带颜色提示）
+ * - 显示热更新的文件列表（可折叠）
+ * - 超过阈值时显示警告
+ * - 通过 DevServer WebSocket 通信
+ * - 自动过滤 node_modules
+ * - 简化文件路径显示
+ */ 

package/lib/utils/dev-server-listener.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listenHmrTiming = listenHmrTiming;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const fs = __importStar(require("fs"));
+/**
+ * 监听 HMR 编译时间
+ * @param server
+ */
+function listenHmrTiming(server) {
+    const compiler = server.compiler;
+    const ws = server.webSocketServer;
+    let start = 0;
+    let changedFiles = new Set();
+    // 监听文件变更
+    compiler.hooks.watchRun.tap('HmrTiming', (comp) => {
+        const modifiedFiles = comp.modifiedFiles;
+        if (modifiedFiles && modifiedFiles.size > 0) {
+            changedFiles = new Set(modifiedFiles);
+        }
+        else {
+            changedFiles.clear();
+        }
+        start = Date.now();
+    });
+    // 编译完成
+    compiler.hooks.done.tap('HmrTiming', () => {
+        const duration = Date.now() - start;
+        // 过滤有效文件 - 只保留实际的项目文件
+        const validFiles = [...changedFiles]
+            .map(f => f.replace(process.cwd(), '').replace(/\\/g, '/'))
+            .filter(filePath => {
+            // 过滤无效文件
+            if (!filePath || filePath.length === 0)
+                return false;
+            // 过滤 node_modules 中的文件
+            if (filePath.includes('/node_modules/'))
+                return false;
+            // 只保留支持的文件类型
+            const validExtensions = ['.js', '.jsx', '.ts', '.tsx', '.svelte', '.css', '.json', '.html'];
+            const hasValidExtension = validExtensions.some(ext => filePath.toLowerCase().endsWith(ext));
+            if (!hasValidExtension)
+                return false;
+            return true;
+        });
+        // 获取文件统计信息
+        const fileStats = validFiles.map(filePath => {
+            const fullPath = process.cwd() + filePath;
+            try {
+                const stats = fs.statSync(fullPath);
+                return {
+                    path: filePath,
+                    size: stats.size,
+                };
+            }
+            catch (error) {
+                return {
+                    path: filePath,
+                    size: 0,
+                };
+            }
+        });
+        // 计算总文件大小(B)
+        const totalSize = fileStats.reduce((sum, file) => sum + file.size, 0);
+        const payload = {
+            duration,
+            fileCount: validFiles.length,
+            fileTotalSize: totalSize,
+        };
+        // 推送到浏览器端
+        for (const client of ws.clients) {
+            if (client.readyState === 1) {
+                client.send(JSON.stringify({
+                    type: 'hmr-timing',
+                    data: payload,
+                }));
+            }
+        }
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/miaoda-presets",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "files": [
     "lib"
   ],