@lark-apaas/fullstack-rspack-preset 1.0.38-alpha.0 → 1.0.38

package/lib/polyfills/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * iOS 兼容性 Polyfills
+ *
+ * 使用 core-js 提供 iOS 15.4 以下版本需要的 polyfill
+ * 此文件会被单独打包成 polyfills.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';

package/lib/polyfills/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * iOS 兼容性 Polyfills
+ *
+ * 使用 core-js 提供 iOS 15.4 以下版本需要的 polyfill
+ * 此文件会被单独打包成 polyfills.js，按需加载
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// ECMAScript polyfills (core-js)
+require("core-js/actual/array/at");
+require("core-js/actual/string/at");
+require("core-js/actual/array/find-last");
+require("core-js/actual/array/find-last-index");
+require("core-js/actual/object/has-own");
+require("core-js/actual/promise/any");
+require("core-js/actual/aggregate-error");
+require("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() {
+            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,
+    });
+}

package/lib/preset.js

@@ -14,6 +14,8 @@ const slardar_performance_monitor_plugin_1 = __importDefault(require("./rspack-p
 const view_context_injection_plugin_1 = __importDefault(require("./rspack-plugins/view-context-injection-plugin"));
 const og_meta_injection_plugin_1 = __importDefault(require("./rspack-plugins/og-meta-injection-plugin"));
 const runtime_injection_plugin_1 = __importDefault(require("./rspack-plugins/runtime-injection-plugin"));
+const css_legacy_plugin_1 = __importDefault(require("./rspack-plugins/css-legacy-plugin"));
+const polyfill_plugin_1 = __importDefault(require("./rspack-plugins/polyfill-plugin"));
 const dev_server_snapdom_proxy_1 = require("./utils/dev-server-snapdom-proxy");
 function sendBackendUnavailable502(_err, _req, res) {
     if (res.headersSent)
@@ -165,6 +167,8 @@ function createRecommendRspackConfig(options) {
                 'process.env.CWD': JSON.stringify(''),
                 // runtime 注入标志位，用于 client-toolkit 兼容性判断
                 'process.env.__RUNTIME_INJECTED__': JSON.stringify('true'),
+                // 构建工具标识，用于 source map 处理逻辑判断
+                'process.env.BUILD_TOOL': JSON.stringify('rspack'),
                 // 解决 window 未定义问题
                 'typeof window': JSON.stringify('object'),
                 window: 'globalThis',
@@ -193,6 +197,10 @@ function createRecommendRspackConfig(options) {
             new view_context_injection_plugin_1.default(),
             // OG Meta 标签注入插件
             new og_meta_injection_plugin_1.default(),
+            // 生产环境：生成 legacy CSS 并注入检测脚本
+            !isDev && new css_legacy_plugin_1.default(),
+            // 生产环境：为旧浏览器提供 polyfill（仅在需要时加载）
+            !isDev && new polyfill_plugin_1.default(),
             // 开发环境下，解析路由
             isDev && needRoutes &&
                 new route_parser_plugin_1.default({
@@ -217,10 +225,14 @@ function createRecommendRspackConfig(options) {
                         minimizerOptions: {
                             // 保持不压缩
                             minify: !isDev,
-                            mangle: !isDev,
+                            // mangle 配置：启用 Safari 10 兼容性
+                            mangle: !isDev ? {
+                                safari10: true, // 避免 Safari 严格模式的重复参数问题
+                            } : false,
                             format: {
                                 beautify: isDev,
                                 comments: false,
+                                safari10: true, // Safari 10/11 兼容性修复
                             },
                             compress: {
                                 keep_classnames: true,

package/lib/rspack-plugins/css-legacy-plugin.d.ts

@@ -0,0 +1,30 @@
+import type { Compiler } from '@rspack/core';
+/**
+ * CSS Legacy Plugin
+ *
+ * 在构建完成后生成一份兼容旧浏览器的 CSS 文件（.legacy.css）
+ * 并在 HTML 中注入检测脚本，根据浏览器版本加载对应的 CSS
+ */
+export declare class CssLegacyPlugin {
+    static pluginName: string;
+    apply(compiler: Compiler): void;
+    /**
+     * 预处理 CSS：移除/转换 LightningCSS 不支持降级的特性
+     */
+    private preprocessCss;
+    /**
+     * 后处理 CSS：清理可能残留的不支持特性
+     */
+    private postprocessCss;
+    /**
+     * 展开 @layer 规则，保留内部样式
+     */
+    private unwrapAtLayer;
+    /**
+     * 移除 @supports (color: color-mix(...)) 块
+     * 这些是渐进增强代码，旧浏览器可以使用 fallback
+     */
+    private removeColorMixSupports;
+    private generateDetectionScript;
+}
+export default CssLegacyPlugin;

package/lib/rspack-plugins/css-legacy-plugin.js

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CssLegacyPlugin = void 0;
+const lightningcss_1 = require("lightningcss");
+/**
+ * CSS Legacy Plugin
+ *
+ * 在构建完成后生成一份兼容旧浏览器的 CSS 文件（.legacy.css）
+ * 并在 HTML 中注入检测脚本，根据浏览器版本加载对应的 CSS
+ */
+class CssLegacyPlugin {
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap(CssLegacyPlugin.pluginName, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                name: CssLegacyPlugin.pluginName,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE + 1,
+            }, async (assets) => {
+                const cssFiles = Object.keys(assets).filter((name) => name.endsWith('.css') && !name.endsWith('.legacy.css'));
+                for (const cssFile of cssFiles) {
+                    const asset = assets[cssFile];
+                    const source = asset.source();
+                    let cssContent = typeof source === 'string' ? source : source.toString('utf-8');
+                    try {
+                        // 1. 先用正则移除/转换 LightningCSS 不支持的特性
+                        cssContent = this.preprocessCss(cssContent);
+                        // 2. 使用 LightningCSS 转换其他现代 CSS 特性
+                        const result = (0, lightningcss_1.transform)({
+                            filename: cssFile,
+                            code: Buffer.from(cssContent),
+                            minify: true,
+                            targets: {
+                                ios_saf: (12 << 16),
+                                safari: (12 << 16),
+                                chrome: (80 << 16),
+                            },
+                            include: lightningcss_1.Features.Nesting |
+                                lightningcss_1.Features.MediaQueries |
+                                lightningcss_1.Features.Colors |
+                                lightningcss_1.Features.Selectors |
+                                lightningcss_1.Features.ColorFunction |
+                                lightningcss_1.Features.OklabColors |
+                                lightningcss_1.Features.LabColors |
+                                lightningcss_1.Features.P3Colors |
+                                lightningcss_1.Features.HexAlphaColors |
+                                lightningcss_1.Features.LightDark,
+                            errorRecovery: true,
+                        });
+                        // 3. 后处理：移除可能残留的不支持特性
+                        let legacyCss = Buffer.from(result.code).toString('utf-8');
+                        legacyCss = this.postprocessCss(legacyCss);
+                        const legacyFileName = cssFile.replace('.css', '.legacy.css');
+                        compilation.emitAsset(legacyFileName, new compiler.webpack.sources.RawSource(Buffer.from(legacyCss)));
+                        console.log(`[CssLegacyPlugin] Generated ${legacyFileName} (${Math.round(legacyCss.length / 1024)}KB)`);
+                    }
+                    catch (error) {
+                        console.error(`[CssLegacyPlugin] Failed to transform ${cssFile}:`, error);
+                    }
+                }
+            });
+            // 修改 HTML，注入 CSS 版本检测脚本
+            compilation.hooks.processAssets.tapPromise({
+                name: `${CssLegacyPlugin.pluginName}-html`,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE + 1,
+            }, async (assets) => {
+                const htmlFiles = Object.keys(assets).filter((name) => name.endsWith('.html'));
+                for (const htmlFile of htmlFiles) {
+                    const asset = assets[htmlFile];
+                    const source = asset.source();
+                    let htmlContent = typeof source === 'string' ? source : source.toString('utf-8');
+                    const cssLinkRegex = /<link[^>]+href="([^"]+\.css)"[^>]*>/g;
+                    const cssLinks = [...htmlContent.matchAll(cssLinkRegex)];
+                    if (cssLinks.length === 0)
+                        continue;
+                    const detectionScript = this.generateDetectionScript(cssLinks);
+                    for (const match of cssLinks) {
+                        htmlContent = htmlContent.replace(match[0], '');
+                    }
+                    htmlContent = htmlContent.replace(/<head([^>]*)>/i, `<head$1>\n${detectionScript}`);
+                    compilation.updateAsset(htmlFile, new compiler.webpack.sources.RawSource(htmlContent));
+                    console.log(`[CssLegacyPlugin] Updated ${htmlFile} with CSS detection script`);
+                }
+            });
+        });
+    }
+    /**
+     * 预处理 CSS：移除/转换 LightningCSS 不支持降级的特性
+     */
+    preprocessCss(css) {
+        // 1. 移除所有 @property 规则（iOS 16.4+ 才支持）
+        css = css.replace(/@property\s+--[\w-]+\s*\{[^}]*\}/g, '');
+        // 2. 展开 @layer 规则（iOS 15.4+ 才支持）
+        // 简单处理：移除 @layer xxx { 和对应的 }，保留内部内容
+        css = this.unwrapAtLayer(css);
+        // 3. 移除 @supports 中的 color-mix 检测块（这些是渐进增强，旧浏览器不需要）
+        css = this.removeColorMixSupports(css);
+        return css;
+    }
+    /**
+     * 后处理 CSS：清理可能残留的不支持特性
+     */
+    postprocessCss(css) {
+        // 移除可能残留的 @layer
+        css = this.unwrapAtLayer(css);
+        // 移除残留的 @property
+        css = css.replace(/@property\s+--[\w-]+\s*\{[^}]*\}/g, '');
+        // 移除残留的 color-mix @supports 块
+        css = this.removeColorMixSupports(css);
+        // 移除空的 @supports 块
+        css = css.replace(/@supports\s*\([^)]*\)\s*\{\s*\}/g, '');
+        return css;
+    }
+    /**
+     * 展开 @layer 规则，保留内部样式
+     */
+    unwrapAtLayer(css) {
+        // 匹配 @layer name { ... } 结构
+        // 需要处理嵌套大括号
+        let result = css;
+        let changed = true;
+        while (changed) {
+            changed = false;
+            // 简单的 @layer 匹配（非嵌套情况）
+            const layerRegex = /@layer\s+[\w-]+\s*\{/g;
+            let match;
+            while ((match = layerRegex.exec(result)) !== null) {
+                const startIndex = match.index;
+                const contentStart = startIndex + match[0].length;
+                // 找到匹配的闭合大括号
+                let depth = 1;
+                let i = contentStart;
+                while (i < result.length && depth > 0) {
+                    if (result[i] === '{')
+                        depth++;
+                    else if (result[i] === '}')
+                        depth--;
+                    i++;
+                }
+                if (depth === 0) {
+                    // 提取 @layer 内部的内容
+                    const innerContent = result.slice(contentStart, i - 1);
+                    // 用内部内容替换整个 @layer 块
+                    result = result.slice(0, startIndex) + innerContent + result.slice(i);
+                    changed = true;
+                    break; // 重新开始匹配
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * 移除 @supports (color: color-mix(...)) 块
+     * 这些是渐进增强代码，旧浏览器可以使用 fallback
+     */
+    removeColorMixSupports(css) {
+        let result = css;
+        let changed = true;
+        while (changed) {
+            changed = false;
+            // 匹配 @supports (color:color-mix(...)) { ... }
+            const supportsRegex = /@supports\s*\(\s*color\s*:\s*color-mix\s*\([^)]+\)\s*\)\s*\{/g;
+            let match;
+            while ((match = supportsRegex.exec(result)) !== null) {
+                const startIndex = match.index;
+                const contentStart = startIndex + match[0].length;
+                // 找到匹配的闭合大括号
+                let depth = 1;
+                let i = contentStart;
+                while (i < result.length && depth > 0) {
+                    if (result[i] === '{')
+                        depth++;
+                    else if (result[i] === '}')
+                        depth--;
+                    i++;
+                }
+                if (depth === 0) {
+                    // 移除整个 @supports 块
+                    result = result.slice(0, startIndex) + result.slice(i);
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        return result;
+    }
+    generateDetectionScript(cssLinks) {
+        const cssUrls = cssLinks.map((match) => match[1]);
+        // 检测脚本 + document.write 直接写入正确的 CSS（在加载前完成检测）
+        return `<script>
+(function() {
+  var isModernBrowser = (function() {
+    try {
+      if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') return false;
+      if (!CSS.supports('selector(:has(*))')) return false;
+      if (!CSS.supports('color', 'color-mix(in srgb, red, blue)')) return false;
+      if (!CSS.supports('color', 'oklch(50% 0.1 0)')) return false;
+      return true;
+    } catch (e) {
+      return false;
+    }
+  })();
+
+  var cssUrls = ${JSON.stringify(cssUrls)};
+  var suffix = isModernBrowser ? '' : '.legacy';
+
+  cssUrls.forEach(function(url) {
+    var finalUrl = url.replace(/\\.css$/, suffix + '.css');
+    document.write('<link rel="stylesheet" href="' + finalUrl + '">');
+  });
+})();
+</script>
+<noscript>
+${cssUrls.map((url) => `  <link rel="stylesheet" href="${url}">`).join('\n')}
+</noscript>`;
+    }
+}
+exports.CssLegacyPlugin = CssLegacyPlugin;
+CssLegacyPlugin.pluginName = 'CssLegacyPlugin';
+exports.default = CssLegacyPlugin;

package/lib/rspack-plugins/polyfill-plugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Polyfill Plugin
+ *
+ * 使用 core-js 为旧版浏览器生成独立的 polyfill 文件
+ * 通过检测脚本按需加载，现代浏览器不会加载 polyfill
+ */
+import type { Compiler } from '@rspack/core';
+export declare class PolyfillPlugin {
+    apply(compiler: Compiler): void;
+    private generateDetectionScript;
+}
+export default PolyfillPlugin;

package/lib/rspack-plugins/polyfill-plugin.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * Polyfill Plugin
+ *
+ * 使用 core-js 为旧版浏览器生成独立的 polyfill 文件
+ * 通过检测脚本按需加载，现代浏览器不会加载 polyfill
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolyfillPlugin = void 0;
+const path_1 = __importDefault(require("path"));
+const PLUGIN_NAME = 'PolyfillPlugin';
+const POLYFILL_ENTRY = path_1.default.resolve(__dirname, '../polyfills/index');
+class PolyfillPlugin {
+    apply(compiler) {
+        // 添加 polyfills 作为单独的 entry
+        compiler.hooks.entryOption.tap(PLUGIN_NAME, (_context, entry) => {
+            if (typeof entry === 'function') {
+                return;
+            }
+            // 添加 polyfills entry，单独打包
+            entry['polyfills'] = {
+                import: [POLYFILL_ENTRY],
+                filename: 'polyfills.js',
+                // 不需要 runtime，保持文件独立
+                runtime: false,
+            };
+        });
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            // 在 HTML 中注入检测脚本
+            compilation.hooks.processAssets.tapPromise({
+                name: `${PLUGIN_NAME}-html`,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
+            }, async (assets) => {
+                const htmlFiles = Object.keys(assets).filter((name) => name.endsWith('.html'));
+                const publicPath = compilation.outputOptions.publicPath || '/';
+                for (const htmlFile of htmlFiles) {
+                    const asset = assets[htmlFile];
+                    const source = asset.source();
+                    let htmlContent = typeof source === 'string' ? source : source.toString('utf-8');
+                    const polyfillUrl = `${publicPath}polyfills.js`.replace(/\/+/g, '/').replace(':/', '://');
+                    const detectionScript = this.generateDetectionScript(polyfillUrl);
+                    // 注入到 <head> 最前面
+                    htmlContent = htmlContent.replace(/<head([^>]*)>/i, `<head$1>\n${detectionScript}`);
+                    compilation.updateAsset(htmlFile, new compiler.webpack.sources.RawSource(htmlContent));
+                    console.log(`[PolyfillPlugin] Updated ${htmlFile} with polyfill detection`);
+                }
+            });
+        });
+    }
+    generateDetectionScript(polyfillUrl) {
+        return `<script>
+(function(){
+  var needsPolyfill=(function(){
+    try{
+      if(typeof crypto==="undefined"||typeof crypto.randomUUID!=="function")return true;
+      if(typeof Object.hasOwn!=="function")return true;
+      if(typeof[].at!=="function")return true;
+      if(typeof[].findLast!=="function")return true;
+      return false;
+    }catch(e){return true}
+  })();
+  if(needsPolyfill){
+    document.write('<script src="${polyfillUrl}"><\\/script>');
+  }
+})();
+</script>`;
+    }
+}
+exports.PolyfillPlugin = PolyfillPlugin;
+exports.default = PolyfillPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-rspack-preset",
-  "version": "1.0.38-alpha.0",
+  "version": "1.0.38",
   "files": [
     "lib",
     "patches",
@@ -28,12 +28,13 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "core-js": "^3.40.0",
     "@babel/parser": "^7.28.0",
     "@babel/traverse": "^7.28.0",
     "@babel/types": "^7.28.2",
-    "@lark-apaas/devtool-kits": "1.2.17-alpha.20",
+    "@lark-apaas/devtool-kits": "^1.2.17",
     "@lark-apaas/miaoda-inspector-babel-plugin": "^1.0.0",
-    "@lark-apaas/miaoda-inspector-jsx-runtime": "^1.0.0",
+    "@lark-apaas/miaoda-inspector-jsx-runtime": "^1.0.1",
     "@lark-apaas/styled-jsx": "^1.0.1",
     "@rspack/plugin-react-refresh": "^1.5.1",
     "@swc/plugin-styled-jsx": "^11.0.0",
@@ -42,6 +43,7 @@
     "colorjs.io": "^0.5.2",
     "dotenv": "^16.4.5",
     "echarts": "^6.0.0",
+    "lightningcss": "^1.28.0",
     "patch-package": "^8.0.0",
     "postcss-import": "^16.1.1",
     "react-refresh": "^0.17.0",
@@ -55,7 +57,6 @@
     "vitest": "^2.1.8"
   },
   "peerDependencies": {
-    "@lark-apaas/client-toolkit": "^1.2.8",
     "@rspack/core": "^1.5.5",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0"