Merge branch 'main' into feat_runtime_error_overlay

Author: nanianlisao

.github/workflows/test-ubuntu.yml

@@ -42,6 +42,8 @@ jobs:
             changed:
               - "!**/*.md"
               - "!**/*.mdx"
+              - "!**/_meta.json"
+              - "!**/dictionary.txt"
 
       - name: Setup Node.js ${{ matrix.node-version }}
         if: steps.changes.outputs.changed == 'true'
@@ -83,6 +85,8 @@ jobs:
             changed:
               - "!**/*.md"
               - "!**/*.mdx"
+              - "!**/_meta.json"
+              - "!**/dictionary.txt"
 
       - name: Setup Node.js ${{ matrix.node-version }}
         if: steps.changes.outputs.changed == 'true'

.github/workflows/test-windows.yml

@@ -46,6 +46,8 @@ jobs:
             changed:
               - "!**/*.md"
               - "!**/*.mdx"
+              - "!**/_meta.json"
+              - "!**/dictionary.txt"
 
       - name: Setup Node.js ${{ matrix.node-version }}
         if: steps.changes.outputs.changed == 'true'
@@ -92,6 +94,8 @@ jobs:
             changed:
               - "!**/*.md"
               - "!**/*.mdx"
+              - "!**/_meta.json"
+              - "!**/dictionary.txt"
 
       - name: Setup Node.js ${{ matrix.node-version }}
         if: steps.changes.outputs.changed == 'true'

.vscode/settings.json

@@ -3,6 +3,7 @@
   "search.exclude": {
     "**/.git": true,
     "**/dist": true,
+    "**/dist-types": true,
     "**/coverage": true,
     "**/compiled": true,
     "**/doc_build": true,

README.md

@@ -94,6 +94,7 @@ To get started with Rsbuild, see the [Quick Start](https://rsbuild.dev/guide/sta
 - [Modern.js](https://github.com/web-infra-dev/modern.js): A progressive React framework based on Rsbuild.
 - [awesome-rspack](https://github.com/web-infra-dev/awesome-rspack): A curated list of awesome things related to Rspack and Rsbuild.
 - [rspack-examples](https://github.com/rspack-contrib/rspack-examples): Examples for Rspack, Rsbuild, Rspress and Rsdoctor.
+- [storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild): Storybook builder powered by Rsbuild.
 - [rsbuild-plugin-template](https://github.com/rspack-contrib/rsbuild-plugin-template)：Use this template to create your own Rsbuild plugin.
 - [rsfamily-design-resources](https://github.com/rspack-contrib/rsfamily-design-resources)：Design resources for Rspack, Rsbuild, Rspress and Rsdoctor.
 

README.zh-CN.md

@@ -94,6 +94,7 @@ Rsbuild 具备以下特性：
 - [Modern.js](https://github.com/web-infra-dev/modern.js)：基于 Rsbuild 的渐进式 React 框架。
 - [awesome-rspack](https://github.com/web-infra-dev/awesome-rspack)：与 Rspack 和 Rsbuild 相关的精彩内容列表。
 - [rspack-examples](https://github.com/rspack-contrib/rspack-examples)：Rspack、Rsbuild、Rspress 和 Rsdoctor 的示例项目。
+- [storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild): 基于 Rsbuild 构建的 Storybook。
 - [rsbuild-plugin-template](https://github.com/rspack-contrib/rsbuild-plugin-template)：使用此模板创建你的 Rsbuild 插件。
 - [rsfamily-design-resources](https://github.com/rspack-contrib/rsfamily-design-resources)：Rspack、Rsbuild、Rspress 和 Rsdoctor 的设计资源。
 

e2e/cases/babel/preset-node/index.test.ts

@@ -0,0 +1,15 @@
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should run babel with @rsbuild/babel-preset/node correctly',
+  async () => {
+    await build({
+      cwd: __dirname,
+      runServer: true,
+    });
+
+    const { foo } = await import('./dist/server/index.js');
+    expect(foo).toEqual(1);
+  },
+);

e2e/cases/babel/preset/rsbuild.config.ts renamed to e2e/cases/babel/preset-node/rsbuild.config.ts

@@ -1,6 +1,9 @@
 import { pluginBabel } from '@rsbuild/plugin-babel';
 
 export default {
+  output: {
+    targets: ['node'],
+  },
   plugins: [
     pluginBabel({
       babelLoaderOptions: (_, { addPresets }) => {

e2e/cases/babel/preset-node/src/index.js

@@ -0,0 +1,3 @@
+console.log('hello');
+
+export const foo = 1;

e2e/cases/babel/preset/index.test.ts renamed to e2e/cases/babel/preset-web/index.test.ts

@@ -2,7 +2,7 @@ import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
 import { expect } from '@playwright/test';
 
 rspackOnlyTest(
-  'should run babel with @rsbuild/babel-preset correctly',
+  'should run babel with @rsbuild/babel-preset/web correctly',
   async ({ page }) => {
     const rsbuild = await build({
       cwd: __dirname,

e2e/cases/babel/preset-web/rsbuild.config.ts

@@ -0,0 +1,11 @@
+import { pluginBabel } from '@rsbuild/plugin-babel';
+
+export default {
+  plugins: [
+    pluginBabel({
+      babelLoaderOptions: (_, { addPresets }) => {
+        addPresets([require.resolve('@rsbuild/babel-preset/node')]);
+      },
+    }),
+  ],
+};

e2e/cases/babel/preset/src/index.js renamed to e2e/cases/babel/preset-web/src/index.js

@@ -0,0 +1,22 @@
+import path from 'node:path';
+import { build } from '@e2e/helper';
+import { globContentJSON } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+test('should build CSS assets correctly', async () => {
+  await expect(
+    build({
+      cwd: __dirname,
+      rsbuildConfig: {},
+    }),
+  ).resolves.toBeDefined();
+
+  const outputs = await globContentJSON(path.join(__dirname, 'dist'));
+  const outputFiles = Object.keys(outputs);
+
+  expect(
+    outputFiles.find(
+      (item) => item.includes('static/image/image') && item.endsWith('.jpeg'),
+    ),
+  ).toBeTruthy();
+});

e2e/cases/css/css-assets/index.test.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  output: {}
+});

e2e/cases/css/css-assets/rsbuild.config.ts

@@ -0,0 +1,7 @@
+function load(key: string)  {
+  import(`./test/${key}`).then(res => {
+    console.log('res', res);  
+  })
+}
+
+load('a');

e2e/cases/css/css-assets/src/index.tsx

@@ -0,0 +1,5 @@
+import styles from './index.module.less';
+
+console.log('s', styles);
+
+export const a = 1;

e2e/cases/css/css-assets/src/test/a.ts

@@ -0,0 +1,3 @@
+.header {
+  background: url('@assets/image.jpeg') no-repeat;
+}

e2e/cases/css/css-assets/src/test/index.module.less

@@ -2,22 +2,18 @@ import { join, resolve } from 'node:path';
 import { build, gotoPage } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 import { fse } from '@rsbuild/shared';
 
 const fixtures = resolve(__dirname);
 
-test('enableCssModuleTSDeclaration', async () => {
+test('plugin-typed-css-modules', async () => {
   fse.removeSync(join(fixtures, 'src/App.module.less.d.ts'));
   fse.removeSync(join(fixtures, 'src/App.module.scss.d.ts'));
 
   await build({
     cwd: fixtures,
-    plugins: [pluginReact()],
-    rsbuildConfig: {
-      output: {
-        enableCssModuleTSDeclaration: true,
-      },
-    },
+    plugins: [pluginReact(), pluginTypedCSSModules()],
   });
 
   expect(

e2e/cases/css/css-modules-dom/index.test.ts

@@ -7,6 +7,16 @@ rspackOnlyTest(
     const rsbuild = await build({
       cwd: __dirname,
       runServer: true,
+      rsbuildConfig: {
+        tools: {
+          cssLoader: {
+            modules: {
+              // TODO: css-loader need support named export when namedExports: false.
+              namedExport: true
+            }
+          }
+        }
+      }
     });
     const files = await rsbuild.unwrapOutputJSON();
 

e2e/cases/css/css-modules-named-export/index.test.ts

@@ -1,6 +1,7 @@
 import { join, resolve } from 'node:path';
 import { build } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 import { fse } from '@rsbuild/shared';
 
 const fixtures = __dirname;
@@ -18,13 +19,11 @@ test('should generator ts declaration correctly for css modules auto true', asyn
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
-      output: {
-        enableCssModuleTSDeclaration: true,
-      },
     },
   });
 
@@ -51,12 +50,12 @@ test('should generator ts declaration correctly for css modules auto function',
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
       output: {
-        enableCssModuleTSDeclaration: true,
         cssModules: {
           auto: (path) => {
             return path.endsWith('.less');
@@ -80,12 +79,12 @@ test('should generator ts declaration correctly for css modules auto Regexp', as
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
       output: {
-        enableCssModuleTSDeclaration: true,
         cssModules: {
           auto: /\.module\./i,
         },
@@ -107,12 +106,12 @@ test('should generator ts declaration correctly for custom exportLocalsConventio
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
       output: {
-        enableCssModuleTSDeclaration: true,
         cssModules: {
           auto: /\.module\./i,
           exportLocalsConvention: 'asIs',

e2e/cases/css/css-modules-ts-declaration/index.test.ts

@@ -37,3 +37,45 @@ test('should compile CSS Modules follow by output.cssModules', async () => {
     /.the-a-class{color:red}.the-b-class-\w{6}{color:blue}.the-c-class{color:yellow}.the-d-class{color:green}/,
   );
 });
+
+test('should compile CSS Modules follow by output.cssModules custom localIdentName', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    rsbuildConfig: {
+      output: {
+        cssModules: {
+          localIdentName: '[hash:base64:8]',
+        },
+      },
+    },
+  });
+  const files = await rsbuild.unwrapOutputJSON();
+
+  const content =
+    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+
+  expect(content).toMatch(
+    /\.the-a-class{color:red}\.\w{8}{color:blue}\.\w{8}{color:yellow}\.the-d-class{color:green}/,
+  );
+});
+
+test('should compile CSS Modules follow by output.cssModules custom localIdentName - hashDigest', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    rsbuildConfig: {
+      output: {
+        cssModules: {
+          localIdentName: '[hash:hex:4]',
+        },
+      },
+    },
+  });
+  const files = await rsbuild.unwrapOutputJSON();
+
+  const content =
+    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+
+  expect(content).toMatch(
+    /\.the-a-class{color:red}\.\w{4}{color:blue}\.\w{4}{color:yellow}\.the-d-class{color:green}/,
+  );
+});

e2e/cases/css/css-modules/index.test.ts

@@ -1,20 +1,16 @@
 import { build } from '@e2e/helper';
-import { webpackOnlyTest } from '@e2e/helper';
-import { expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-webpackOnlyTest(
-  'should compile CSS Modules which depends on importLoaders correctly',
-  async () => {
-    const rsbuild = await build({
-      cwd: __dirname,
-    });
-    const files = await rsbuild.unwrapOutputJSON();
+test('should compile CSS Modules which depends on importLoaders correctly', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+  const files = await rsbuild.unwrapOutputJSON();
 
-    const content =
-      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+  const content =
+    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
-    expect(content).toEqual(
-      '.class-foo-yQ8Tl7+.hello-class-foo{background-color:red}.class-bar-TVH2T6 .hello-class-bar{background-color:blue}',
-    );
-  },
-);
+  expect(content).toEqual(
+    '.class-foo-yQ8Tl7+.hello-class-foo{background-color:red}.class-bar-TVH2T6 .hello-class-bar{background-color:blue}',
+  );
+});

e2e/cases/css/import-loaders/index.test.ts

@@ -0,0 +1,17 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+test('should load postcss.config.ts correctly', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+
+  const files = await rsbuild.unwrapOutputJSON();
+  const indexCssFile = Object.keys(files).find(
+    (file) => file.includes('index.') && file.endsWith('.css'),
+  )!;
+
+  expect(files[indexCssFile]).toEqual(
+    '.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-bold{font-weight:700}.underline{text-decoration-line:underline}',
+  );
+});

e2e/cases/css/postcss-config-ts/index.test.ts

@@ -0,0 +1,9 @@
+const path = require('node:path');
+
+export default {
+  plugins: {
+    tailwindcss: {
+      config: path.join(__dirname, './tailwind.config.cjs'),
+    },
+  },
+};

e2e/cases/css/postcss-config-ts/postcss.config.ts

@@ -0,0 +1,5 @@
+export default {
+  html: {
+    template: './src/index.html',
+  },
+};

e2e/cases/css/postcss-config-ts/rsbuild.config.ts

@@ -0,0 +1 @@
+@tailwind utilities;

e2e/cases/css/postcss-config-ts/src/index.css

@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head></head>
+  <body>
+    <h1 class="text-3xl font-bold underline">Hello world!</h1>
+  </body>
+</html>

e2e/cases/css/postcss-config-ts/src/index.html

@@ -0,0 +1 @@
+import './index.css';