@esmx/rspack 3.0.0-rc.54 → 3.0.0-rc.56

package/src/rspack-html/index.ts

@@ -12,44 +12,47 @@ import {
     type RspackAppOptions,
     createRspackApp
 } from '../rspack';
+import { getTargetSetting } from './target-setting';
+import type { TargetSetting } from './target-setting';
 
+export type { TargetSetting };
 export interface RspackHtmlAppOptions extends RspackAppOptions {
     /**
-     * CSS 输出模式配置
+     * CSS output mode configuration
      *
-     * @default 根据环境自动选择：
-     * - 生产环境: 'css'，将CSS输出到独立文件中，有利于缓存和并行加载
-     * - 开发环境: 'js'，将CSS打包到JS中以支持热更新(HMR)，实现样式的即时更新
+     * @default Automatically selected based on environment:
+     * - Production: 'css', outputs CSS to separate files for better caching and parallel loading
+     * - Development: 'js', bundles CSS into JS to support hot module replacement (HMR) for instant style updates
      *
-     * - 'css': 将 CSS 输出到独立的 CSS 文件中
-     * - 'js': 将 CSS 打包到 JS 文件中，运行时动态插入样式
-     * - false: 关闭默认的 CSS 处理配置，需要手动配置 loader 规则
+     * - 'css': Output CSS to separate CSS files
+     * - 'js': Bundle CSS into JS files and dynamically inject styles at runtime
+     * - false: Disable default CSS processing configuration, requires manual loader rule configuration
      *
      * @example
      * ```ts
-     * // 使用环境默认配置
+     * // Use environment default configuration
      * css: undefined
      *
-     * // 强制输出到独立的 CSS 文件
+     * // Force output to separate CSS files
      * css: 'css'
      *
-     * // 强制打包到 JS 中
+     * // Force bundle into JS
      * css: 'js'
      *
-     * // 自定义 CSS 处理
+     * // Custom CSS processing
      * css: false
      * ```
      */
     css?: 'css' | 'js' | false;
 
     /**
-     * 自定义 loader 配置
+     * Custom loader configuration
      *
-     * 允许替换默认的 loader 实现，可用于切换到特定框架的 loader
+     * Allows replacing default loader implementations, useful for switching to framework-specific loaders
      *
      * @example
      * ```ts
-     * // 使用 Vue 的 style-loader
+     * // Use Vue's style-loader
      * loaders: {
      *   styleLoader: 'vue-style-loader'
      * }
@@ -58,9 +61,7 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
     loaders?: Partial<Record<keyof typeof RSPACK_LOADER, string>>;
 
     /**
-     * style-loader 配置项
-     *
-     * 用于配置样式注入方式，完整选项参考:
+     * Configure style injection method. For complete options, see:
      * https://github.com/webpack-contrib/style-loader
      *
      * @example
@@ -74,9 +75,7 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
     styleLoader?: Record<string, any>;
 
     /**
-     * css-loader 配置项
-     *
-     * 用于配置 CSS 模块化、URL 解析等，完整选项参考:
+     * Configure CSS modules, URL resolution, etc. For complete options, see:
      * https://github.com/webpack-contrib/css-loader
      *
      * @example
@@ -90,9 +89,7 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
     cssLoader?: Record<string, any>;
 
     /**
-     * less-loader 配置项
-     *
-     * 用于配置 Less 编译选项，完整选项参考:
+     * Configure Less compilation options. For complete options, see:
      * https://github.com/webpack-contrib/less-loader
      *
      * @example
@@ -108,9 +105,7 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
     lessLoader?: Record<string, any>;
 
     /**
-     * style-resources-loader 配置项
-     *
-     * 用于自动注入全局的样式资源，完整选项参考:
+     * Automatically inject global style resources. For complete options, see:
      * https://github.com/yenshih/style-resources-loader
      *
      * @example
@@ -126,9 +121,7 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
     styleResourcesLoader?: Record<string, any>;
 
     /**
-     * SWC loader 配置项
-     *
-     * 用于配置 TypeScript/JavaScript 编译选项，完整选项参考:
+     * Configure TypeScript/JavaScript compilation options. For complete options, see:
      * https://rspack.dev/guide/features/builtin-swc-loader
      *
      * @example
@@ -149,19 +142,17 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
     swcLoader?: SwcLoaderOptions;
 
     /**
-     * DefinePlugin 配置项
-     *
-     * 用于定义编译时的全局常量，支持针对不同构建目标设置不同的值
-     * 完整说明参考: https://rspack.dev/plugins/webpack/define-plugin
+     * Define compile-time global constants, supports setting different values for different build targets
+     * For complete documentation, see: https://rspack.dev/plugins/webpack/define-plugin
      *
      * @example
      * ```ts
-     * // 统一的值
+     * // Unified value
      * definePlugin: {
      *   'process.env.APP_ENV': JSON.stringify('production')
      * }
      *
-     * // 针对不同构建目标的值
+     * // Values for different build targets
      * definePlugin: {
      *   'process.env.IS_SERVER': {
      *     server: 'true',
@@ -176,35 +167,27 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
     >;
 
     /**
-     * 构建目标配置
-     *
-     * 用于设置代码的目标运行环境，影响代码的编译降级和 polyfill 注入
+     * Set the target runtime environment for the code, affecting code compilation downgrading and polyfill injection
      *
      * @example
      * ```ts
+     * // Global compatible mode
+     * target: 'compatible'
+     *
+     * // Global modern mode
+     * target: 'modern'
+     *
+     * // Global custom targets
+     * target: ['chrome>=89', 'edge>=89', 'firefox>=108', 'safari>=16.4', 'node>=24']
+     *
+     * // Per-build-target configuration
      * target: {
-     *   // 浏览器构建目标
-     *   web: ['chrome>=87', 'firefox>=78', 'safari>=14'],
-     *   // Node.js 构建目标
-     *   node: ['node>=16']
+     *   client: 'modern',
+     *   server: ['node>=18']
      * }
      * ```
      */
-    target?: {
-        /**
-         * 浏览器构建目标
-         *
-         * @default ['chrome>=64', 'edge>=79', 'firefox>=67', 'safari>=11.1']
-         */
-        web?: string[];
-
-        /**
-         * Node.js 构建目标
-         *
-         * @default ['node>=24']
-         */
-        node?: string[];
-    };
+    target?: TargetSetting;
 }
 
 export async function createRspackHtmlApp(
@@ -213,11 +196,6 @@ export async function createRspackHtmlApp(
 ) {
     options = {
         ...options,
-        target: {
-            web: ['chrome>=64', 'edge>=79', 'firefox>=67', 'safari>=11.1'],
-            node: ['node>=24'],
-            ...options?.target
-        },
         css: options?.css ? options.css : esmx.isProd ? 'css' : 'js'
     };
     return createRspackApp(esmx, {
@@ -258,7 +236,9 @@ export async function createRspackHtmlApp(
 function configureAssetRules(chain: RspackChain, esmx: Esmx): void {
     chain.module
         .rule('images')
-        .test(/\.(jpe?g|png|gif|bmp|webp|svg)$/i)
+        .test(
+            /\.(png|jpg|jpeg|gif|svg|bmp|webp|ico|apng|avif|tif|tiff|jfif|pjpeg|pjp|cur)$/i
+        )
         .type('asset/resource')
         .set('generator', {
             filename: filename(esmx, 'images')
@@ -266,15 +246,23 @@ function configureAssetRules(chain: RspackChain, esmx: Esmx): void {
 
     chain.module
         .rule('media')
-        .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i)
+        .test(/\.(mp4|webm|ogg|mov)$/i)
         .type('asset/resource')
         .set('generator', {
             filename: filename(esmx, 'media')
         });
 
+    chain.module
+        .rule('audio')
+        .test(/\.(mp3|wav|flac|aac|m4a|opus)$/i)
+        .type('asset/resource')
+        .set('generator', {
+            filename: filename(esmx, 'audio')
+        });
+
     chain.module
         .rule('fonts')
-        .test(/\.(woff|woff2|eot|ttf|otf)(\?.*)?$/i)
+        .test(/\.(woff|woff2|eot|ttf|otf|ttc)(\?.*)?$/i)
         .type('asset/resource')
         .set('generator', {
             filename: filename(esmx, 'fonts')
@@ -314,10 +302,7 @@ function configureTypeScriptRule(
         )
         .options({
             env: {
-                targets:
-                    buildTarget === 'client'
-                        ? options?.target?.web
-                        : options?.target?.node,
+                targets: getTargetSetting(options?.target, buildTarget),
                 ...options?.swcLoader?.env
             },
             jsc: {
@@ -354,7 +339,7 @@ function configureOptimization(
         .use(rspack.LightningCssMinimizerRspackPlugin, [
             {
                 minimizerOptions: {
-                    targets: options.target?.web,
+                    targets: getTargetSetting(options?.target, 'client'),
                     errorRecovery: false
                 }
             }
@@ -410,11 +395,11 @@ function configureCssInJS(
         .test(/\.css$/)
         .use('style-loader')
         .loader(options.loaders?.styleLoader ?? RSPACK_LOADER.styleLoader)
-        .options(options.styleLoader || {})
+        .options(options.styleLoader ?? {})
         .end()
         .use('css-loader')
         .loader(options.loaders?.cssLoader ?? RSPACK_LOADER.cssLoader)
-        .options(options.cssLoader || {})
+        .options(options.cssLoader ?? {})
         .end()
         .use('lightning-css-loader')
         .loader(
@@ -422,7 +407,7 @@ function configureCssInJS(
                 RSPACK_LOADER.lightningcssLoader
         )
         .options({
-            targets: options.target?.web ?? [],
+            targets: getTargetSetting(options?.target, 'client'),
             minify: esmx.isProd
         } as LightningcssLoaderOptions)
         .end()
@@ -433,11 +418,11 @@ function configureCssInJS(
         .test(/\.less$/)
         .use('style-loader')
         .loader(options.loaders?.styleLoader ?? RSPACK_LOADER.styleLoader)
-        .options(options.styleLoader || {})
+        .options(options.styleLoader ?? {})
         .end()
         .use('css-loader')
         .loader(options.loaders?.cssLoader ?? RSPACK_LOADER.cssLoader)
-        .options(options.cssLoader || {})
+        .options(options.cssLoader ?? {})
         .end()
         .use('lightning-css-loader')
         .loader(
@@ -445,13 +430,13 @@ function configureCssInJS(
                 RSPACK_LOADER.lightningcssLoader
         )
         .options({
-            targets: options.target?.web ?? [],
+            targets: getTargetSetting(options?.target, 'client'),
             minify: esmx.isProd
         } as LightningcssLoaderOptions)
         .end()
         .use('less-loader')
         .loader(options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader)
-        .options(options.lessLoader || {})
+        .options(options.lessLoader ?? {})
         .end();
 
     if (options.styleResourcesLoader) {
@@ -473,7 +458,7 @@ function configureCssExtract(
     options: RspackHtmlAppOptions
 ): void {
     chain.set('experiments', {
-        ...(chain.get('experiments') || {}),
+        ...(chain.get('experiments') ?? {}),
         css: true
     });
 
@@ -487,7 +472,7 @@ function configureCssExtract(
         .test(/\.less$/)
         .use('less-loader')
         .loader(options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader)
-        .options(options.lessLoader || {})
+        .options(options.lessLoader ?? {})
         .end();
 
     if (options.styleResourcesLoader) {

package/src/rspack-html/target-setting.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest';
+import type { BuildTarget } from '../rspack';
+import { PRESET_TARGETS, getTargetSetting } from './target-setting';
+import type { TargetSetting } from './target-setting';
+
+describe('getTargetSetting', () => {
+    const buildTargets: BuildTarget[] = ['client', 'server', 'node'];
+
+    describe('when setting is undefined', () => {
+        it('should return compatible preset for all build targets', () => {
+            buildTargets.forEach((buildTarget) => {
+                const result = getTargetSetting(undefined, buildTarget);
+                expect(result).toEqual(PRESET_TARGETS.compatible[buildTarget]);
+            });
+        });
+    });
+
+    describe('when setting is a string preset', () => {
+        it('should return compatible preset for all build targets', () => {
+            buildTargets.forEach((buildTarget) => {
+                const result = getTargetSetting('compatible', buildTarget);
+                expect(result).toEqual(PRESET_TARGETS.compatible[buildTarget]);
+            });
+        });
+
+        it('should return modern preset for all build targets', () => {
+            buildTargets.forEach((buildTarget) => {
+                const result = getTargetSetting('modern', buildTarget);
+                expect(result).toEqual(PRESET_TARGETS.modern[buildTarget]);
+            });
+        });
+    });
+
+    describe('when setting is a custom array', () => {
+        const customTargets = ['chrome>=90', 'firefox>=80', 'safari>=14'];
+
+        it('should return the custom array for all build targets', () => {
+            buildTargets.forEach((buildTarget) => {
+                const result = getTargetSetting(customTargets, buildTarget);
+                expect(result).toEqual(customTargets);
+            });
+        });
+    });
+
+    describe('when setting is an object with specific build targets', () => {
+        it('should return specified preset for configured build targets', () => {
+            const setting: TargetSetting = {
+                client: 'modern',
+                server: 'compatible'
+            };
+
+            expect(getTargetSetting(setting, 'client')).toEqual(
+                PRESET_TARGETS.modern.client
+            );
+            expect(getTargetSetting(setting, 'server')).toEqual(
+                PRESET_TARGETS.compatible.server
+            );
+        });
+
+        it('should return compatible preset for unconfigured build targets', () => {
+            const setting: TargetSetting = {
+                client: 'modern'
+            };
+
+            expect(getTargetSetting(setting, 'client')).toEqual(
+                PRESET_TARGETS.modern.client
+            );
+            expect(getTargetSetting(setting, 'server')).toEqual(
+                PRESET_TARGETS.compatible.server
+            );
+            expect(getTargetSetting(setting, 'node')).toEqual(
+                PRESET_TARGETS.compatible.node
+            );
+        });
+
+        it('should return custom array for configured build targets', () => {
+            const customClientTargets = ['chrome>=90', 'firefox>=80'];
+            const customServerTargets = ['node>=18'];
+            const setting: TargetSetting = {
+                client: customClientTargets,
+                server: customServerTargets
+            };
+
+            expect(getTargetSetting(setting, 'client')).toEqual(
+                customClientTargets
+            );
+            expect(getTargetSetting(setting, 'server')).toEqual(
+                customServerTargets
+            );
+            expect(getTargetSetting(setting, 'node')).toEqual(
+                PRESET_TARGETS.compatible.node
+            );
+        });
+
+        it('should handle mixed preset and custom configurations', () => {
+            const setting: TargetSetting = {
+                client: 'modern',
+                server: ['node>=18'],
+                node: 'compatible'
+            };
+
+            expect(getTargetSetting(setting, 'client')).toEqual(
+                PRESET_TARGETS.modern.client
+            );
+            expect(getTargetSetting(setting, 'server')).toEqual(['node>=18']);
+            expect(getTargetSetting(setting, 'node')).toEqual(
+                PRESET_TARGETS.compatible.node
+            );
+        });
+    });
+
+    describe('edge cases', () => {
+        it('should handle empty custom array', () => {
+            const result = getTargetSetting([], 'client');
+            expect(result).toEqual([]);
+        });
+
+        it('should handle single item custom array', () => {
+            const result = getTargetSetting(['chrome>=90'], 'client');
+            expect(result).toEqual(['chrome>=90']);
+        });
+    });
+});

package/src/rspack-html/target-setting.ts

@@ -0,0 +1,52 @@
+import type { BuildTarget } from '../rspack/build-target';
+
+export type TargetPreset = 'compatible' | 'modern';
+
+export type TargetSpec = TargetPreset | string[];
+
+export type TargetSetting =
+    | TargetSpec
+    | Partial<Record<BuildTarget, TargetSpec>>;
+
+export const PRESET_TARGETS = {
+    compatible: {
+        client: ['chrome>=64', 'edge>=79', 'firefox>=67', 'safari>=11.1'],
+        server: ['node>=24'],
+        node: ['node>=24']
+    },
+    modern: {
+        client: ['chrome>=89', 'edge>=89', 'firefox>=108', 'safari>=16.4'],
+        server: ['node>=24'],
+        node: ['node>=24']
+    }
+} as const;
+
+function resolveTargetSpec(
+    spec: TargetSpec,
+    buildTarget: BuildTarget
+): string[] {
+    if (typeof spec === 'string') {
+        return [...PRESET_TARGETS[spec][buildTarget]];
+    }
+    return spec;
+}
+
+export function getTargetSetting(
+    setting: TargetSetting | undefined,
+    buildTarget: BuildTarget
+): string[] {
+    if (!setting) {
+        return [...PRESET_TARGETS.compatible[buildTarget]];
+    }
+
+    if (typeof setting === 'string' || Array.isArray(setting)) {
+        return resolveTargetSpec(setting, buildTarget);
+    }
+
+    const targetSpec = setting[buildTarget];
+    if (!targetSpec) {
+        return [...PRESET_TARGETS.compatible[buildTarget]];
+    }
+
+    return resolveTargetSpec(targetSpec, buildTarget);
+}