@lark-apaas/miaoda-presets 1.0.6 → 1.0.7

package/lib/overlay/index.js

@@ -198,6 +198,10 @@ function render() {
             const origin = targetOrigin || getPreviewParentOrigin();
             window.parent.postMessage(message, origin);
         };
+        // 通知前端，渲染错误页面已准备就绪
+        sendPostMessage({
+            type: 'PreviewReady'
+        });
         // 通知主应用存在自定义 overlay
         sendPostMessage({
             type: 'app-features',

package/lib/tsconfig/tsconfig.app.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "noFallthroughCasesInSwitch": false,
+
+    "sourceMap": true,
+    "allowJs": true,
+    "strictNullChecks": false,
+
+    "incremental": false,
+  },
+  "include": [
+    "client/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "public"
+  ]
+}

package/lib/tsconfig/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+
+    "module": "commonjs",
+    "moduleResolution": "node",
+
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "importHelpers": true,
+    "incremental": true,
+
+    "strict": false,
+    "composite": true,
+    "declaration": true,
+    "removeComments": false,
+    "noEmit": false,
+
+    "types": ["node"]
+  },
+  "ts-node": { "require": ["tsconfig-paths/register"] }
+}

package/package.json

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

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

@@ -1,262 +0,0 @@
-"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
- * - 简化文件路径显示
- */