chore: demo migrate rspack to rsbuild

apps/demo-fixed-layout-simple/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -40,14 +40,12 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.54.0",
-    "less": "^4.1.2",
-    "less-loader": "^6"
+    "eslint": "^8.54.0"
   },
   "publishConfig": {
     "access": "public",

apps/demo-fixed-layout-simple/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-fixed-layout-simple',
+  },
+});

apps/demo-fixed-layout-simple/rspack.config.js

@@ -1,64 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  resolve: {
-    alias: {
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    },
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-      {
-        test: /\.(less|css)$/,
-        use: [
-          {
-            loader: 'less-loader',
-            options: {
-              // ...
-            },
-          },
-        ],
-        type: 'css',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-fixed-layout/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -43,7 +43,8 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",

apps/demo-fixed-layout/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-fixed-layout',
+  },
+});

apps/demo-fixed-layout/rspack.config.js

@@ -1,64 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  resolve: {
-    alias: {
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    },
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-      {
-        test: /\.(less|css)$/,
-        use: [
-          {
-            loader: 'less-loader',
-            options: {
-              // ...
-            },
-          },
-        ],
-        type: 'css',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-free-layout-simple/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -37,13 +37,13 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/styled-components": "^5",
-    "@typescript-eslint/parser": "^6.10.0",
     "eslint": "^8.54.0"
   },
   "publishConfig": {

apps/demo-free-layout-simple/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-free-layout-simple',
+  },
+});

apps/demo-free-layout-simple/rspack.config.js

@@ -1,46 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-free-layout/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -45,16 +45,15 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@rsbuild/plugin-less": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/styled-components": "^5",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.54.0",
-    "less": "^4.1.2",
-    "less-loader": "^6"
+    "eslint": "^8.54.0"
   },
   "publishConfig": {
     "access": "public",

apps/demo-free-layout/rsbuild.config.ts

@@ -0,0 +1,15 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginLess } from '@rsbuild/plugin-less';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginLess()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-free-layout',
+  },
+});

apps/demo-free-layout/rspack.config.js

@@ -1,64 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  resolve: {
-    alias: {
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    },
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-      {
-        test: /\.(less|css)$/,
-        use: [
-          {
-            loader: 'less-loader',
-            options: {
-              // ...
-            },
-          },
-        ],
-        type: 'css',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-node-form/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -40,7 +40,8 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",

apps/demo-node-form/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-node-form',
+  },
+});

apps/demo-node-form/rspack.config.js

@@ -1,46 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};