@lark-apaas/miaoda-presets 1.0.6 → 1.0.8

package/lib/overlay/index.js

@@ -170,22 +170,6 @@ async function copyToClipboard(text) {
         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}
@@ -193,11 +177,40 @@ function getPreviewParentOrigin() {
 function render() {
     ensureRootExists(function () {
         removeAllChildren(root);
+        const getEnvOrigin = () => {
+            return typeof process !== 'undefined' && process.env
+                ? process.env.FORCE_FRAMEWORK_DOMAIN_MAIN
+                : undefined;
+        };
+        const 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';
+        };
         // 发送 postMessage
         const sendPostMessage = (message, targetOrigin) => {
-            const origin = targetOrigin || getPreviewParentOrigin();
+            const parentOrigin = getEnvOrigin() || getLegacyParentOrigin();
+            const origin = targetOrigin || parentOrigin;
             window.parent.postMessage(message, origin);
         };
+        // 通知前端，渲染错误页面已准备就绪
+        sendPostMessage({
+            type: 'PreviewReady'
+        });
         // 通知主应用存在自定义 overlay
         sendPostMessage({
             type: 'app-features',

package/lib/recommend/rspack.js

@@ -119,6 +119,7 @@ function createRecommendRspackConfig(options) {
                 'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
                 'process.env.CWD': JSON.stringify(process.cwd()),
                 'process.env.runtimeMode': JSON.stringify(runtimeMode),
+                'process.env.FORCE_FRAMEWORK_DOMAIN_MAIN': JSON.stringify(process.env.FORCE_FRAMEWORK_DOMAIN_MAIN ?? ''),
             }),
             new core_1.default.optimize.LimitChunkCountPlugin({
                 maxChunks: 1,
@@ -180,22 +181,13 @@ function createRecommendRspackConfig(options) {
             },
         devtool: isDev ? 'source-map' : false, // 对应vite的sourcemap配置
         devServer: {
-            headers: req => {
-                // 获取请求的Origin头
-                const requestOrigin = req.headers.origin ?? '';
-                // 定义允许的域名白名单
-                const allowedOrigins = [
-                    'https://miaoda.feishu.cn',
-                    'https://miaoda.feishu-boe.cn',
-                    'https://miaoda.feishu-pre.cn',
-                ];
-                // 检查请求的Origin是否在允许的列表中
-                const allowedOrigin = allowedOrigins.includes(requestOrigin)
-                    ? requestOrigin
-                    : allowedOrigins[0]; // 默认返回第一个允许的域名
-                return {
-                    'Access-Control-Allow-Origin': allowedOrigin,
-                };
+            headers: _req => {
+                const headers = {};
+                const allowedOrigin = process.env.FORCE_FRAMEWORK_DOMAIN_MAIN;
+                if (!allowedOrigin)
+                    return headers;
+                headers['Access-Control-Allow-Origin'] = allowedOrigin;
+                return headers;
             },
             onListening(server) {
                 if (runtimeMode === 'fullstack') {

package/lib/recommend/tailwind.js

@@ -50,7 +50,8 @@ function createRecommendTailwindConfig(options) {
         }
     }
     return {
-        darkMode: 'class',
+        // 从当前 妙搭 场景来看: 禁用掉 darkMode 保持一套主题
+        darkMode: false,
         content: [
             pkgPath,
         ].filter(Boolean),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/miaoda-presets",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "files": [
     "lib"
   ],
@@ -61,5 +61,6 @@
   "peerDependencies": {
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0"
-  }
+  },
+  "gitHead": "68657b650e5f2343843850323db2b3beae697ace"
 }

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
- * - 简化文件路径显示
- */