refactor: upgrade to rsbuild 1.0

.changeset/beige-actors-cough.md

@@ -0,0 +1,13 @@
+---
+"@webx-kit/modernjs-plugin": patch
+"@webx-kit/rsbuild-plugin": patch
+"@webx-kit/chrome-types": patch
+"@webx-kit/core-plugin": patch
+"create-webx": patch
+"@webx-kit/test-utils": patch
+"@webx-kit/messaging": patch
+"@webx-kit/runtime": patch
+"@webx-kit/storage": patch
+---
+
+upgrade to rsbuild 1.0

.github/workflows/ci.yml

@@ -27,6 +27,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     env:
       NX_REJECT_UNKNOWN_LOCAL_CACHE: '0'
+      NX_SKIP_NX_CACHE: ${{ vars.NX_SKIP_NX_CACHE }}
 
     steps:
       - uses: actions/checkout@v4
@@ -56,7 +57,7 @@ jobs:
       - name: Install deps
         run: |
           pnpm i --frozen-lockfile
-          pnpm playwright install chromium
+          pnpm playwright install chromium --with-deps
 
       - if: ${{ matrix.os == 'ubuntu-latest' }}
         name: Replace with tarball

apps/ai-assistant/package.json

@@ -7,32 +7,32 @@
     "lint:type": "tsc --noEmit"
   },
   "dependencies": {
-    "@google/generative-ai": "^0.14.1",
-    "@trpc/client": "11.0.0-rc.461",
-    "@trpc/server": "11.0.0-rc.461",
+    "@google/generative-ai": "^0.16.0",
+    "@trpc/client": "11.0.0-rc.477",
+    "@trpc/server": "11.0.0-rc.477",
     "@webx-kit/messaging": "workspace:^",
     "@webx-kit/runtime": "workspace:^",
     "@webx-kit/storage": "workspace:^",
     "clsx": "^2.1.1",
-    "jotai": "^2.9.0",
-    "lucide-react": "^0.408.0",
+    "jotai": "^2.9.2",
+    "lucide-react": "^0.427.0",
     "react": "^18.3.1",
-    "react-aria-components": "^1.2.1",
+    "react-aria-components": "^1.3.1",
     "react-dom": "^18.3.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
-    "@types/chrome": "^0.0.268",
-    "@types/node": "^20.14.10",
+    "@modern-js/app-tools": "^2.58.0",
+    "@types/chrome": "^0.0.269",
+    "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@webx-kit/modernjs-plugin": "workspace:^",
     "tailwind-merge": "^2.4.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.9",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^1.1.3",
-    "typescript": "^5.5.3"
+    "tailwindcss-react-aria-components": "^1.1.4",
+    "typescript": "^5.5.4"
   }
 }

apps/switchy-pi/package.json

@@ -7,36 +7,36 @@
     "lint:type": "tsc --noEmit"
   },
   "dependencies": {
-    "@react-aria/interactions": "^3.21.3",
-    "@trpc/client": "11.0.0-rc.461",
-    "@trpc/server": "11.0.0-rc.461",
+    "@react-aria/interactions": "^3.22.1",
+    "@trpc/client": "11.0.0-rc.477",
+    "@trpc/server": "11.0.0-rc.477",
     "@webx-kit/messaging": "workspace:^",
     "@webx-kit/runtime": "workspace:^",
     "@webx-kit/storage": "workspace:^",
     "clsx": "^2.1.1",
-    "jotai": "^2.9.0",
+    "jotai": "^2.9.2",
     "jotai-effect": "^1.0.0",
-    "lucide-react": "^0.408.0",
+    "lucide-react": "^0.427.0",
     "react": "^18.3.1",
-    "react-aria": "^3.33.1",
-    "react-aria-components": "^1.2.1",
+    "react-aria": "^3.34.1",
+    "react-aria-components": "^1.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.52.1",
-    "react-router-dom": "^6.24.1",
+    "react-hook-form": "^7.52.2",
+    "react-router-dom": "^6.26.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
-    "@types/chrome": "^0.0.268",
-    "@types/node": "^20.14.10",
+    "@modern-js/app-tools": "^2.58.0",
+    "@types/chrome": "^0.0.269",
+    "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@webx-kit/modernjs-plugin": "workspace:^",
     "tailwind-merge": "^2.4.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.9",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^1.1.3",
-    "typescript": "^5.5.3"
+    "tailwindcss-react-aria-components": "^1.1.4",
+    "typescript": "^5.5.4"
   }
 }

apps/switchy-pi/src/components/table/index.tsx

@@ -82,13 +82,17 @@ export function Column(props: ColumnProps) {
 export function TableHeader<T extends object>(props: TableHeaderProps<T>) {
   let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
 
+  const headerClassnames =
+    'sticky top-0 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas] rounded-t-lg border-b dark:border-b-zinc-700';
+  const className = props.className;
   return (
     <AriaTableHeader
       {...props}
-      className={twMerge(
-        'sticky top-0 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas] rounded-t-lg border-b dark:border-b-zinc-700',
-        props.className
-      )}
+      className={
+        typeof className === 'function'
+          ? (values) => twMerge(headerClassnames, className(values))
+          : twMerge(headerClassnames, className)
+      }
     >
       {/* Add extra columns for drag and drop and selection. */}
       {allowsDragging && <Column />}

docs/package.json

@@ -7,6 +7,6 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "vitepress": "^1.3.1"
+    "vitepress": "^1.3.2"
   }
 }

examples/react-rsbuild/.gitignore → examples/react-webpack/.gitignore

@@ -19,4 +19,6 @@ release/
 output/
 log/
 
+modern.config.local.*
+
 .env

examples/react-rsbuild/package.json → examples/react-webpack/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@webx-kit/example-react-rsbuild",
+  "name": "@webx-kit/example-react-webpack",
   "private": true,
   "scripts": {
-    "dev": "rsbuild dev",
-    "build": "rsbuild build",
+    "dev": "modern dev",
+    "build": "modern build",
     "test": "playwright test",
     "lint:type": "tsc --noEmit"
   },
@@ -13,17 +13,15 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@modern-js/app-tools": "^2.58.0",
     "@playwright/test": "^1.45.1",
-    "@rsbuild/core": "catalog:",
-    "@rsbuild/plugin-less": "catalog:",
-    "@rsbuild/plugin-react": "catalog:",
-    "@types/chrome": "^0.0.268",
-    "@types/node": "^20.14.10",
+    "@types/chrome": "^0.0.269",
+    "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@webx-kit/rsbuild-plugin": "workspace:^",
+    "@webx-kit/modernjs-plugin": "workspace:^",
     "@webx-kit/test-utils": "workspace:^",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.5.3"
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4"
   }
 }

examples/react-rsbuild/src/manifest.ts → examples/react-webpack/src/manifest.ts

@@ -1,8 +1,8 @@
-import { defineManifest } from '@webx-kit/rsbuild-plugin/manifest';
+import { defineManifest } from '@webx-kit/modernjs-plugin/manifest';
 
 export default defineManifest(() => ({
   manifest_version: 3,
-  name: 'WebX Kit React Rsbuild Demo',
+  name: 'WebX Kit React Demo',
   version: '0.0.0',
   icons: {
     512: 'public/logo.png',

examples/react-rsbuild/tailwind.config.ts → examples/react-webpack/tailwind.config.ts

@@ -1,4 +1,4 @@
-import { getPixelUnitDefaultTheme } from '@webx-kit/rsbuild-plugin/tailwind';
+import { getPixelUnitDefaultTheme } from '@webx-kit/modernjs-plugin/tailwind';
 import type { Config } from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';
 

examples/react/.gitignore

@@ -19,6 +19,4 @@ release/
 output/
 log/
 
-modern.config.local.*
-
 .env

examples/react/package.json

@@ -2,8 +2,8 @@
   "name": "@webx-kit/example-react",
   "private": true,
   "scripts": {
-    "dev": "modern dev",
-    "build": "modern build",
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
     "test": "playwright test",
     "lint:type": "tsc --noEmit"
   },
@@ -13,15 +13,17 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
     "@playwright/test": "^1.45.1",
-    "@types/chrome": "^0.0.268",
-    "@types/node": "^20.14.10",
+    "@rsbuild/core": "catalog:",
+    "@rsbuild/plugin-less": "catalog:",
+    "@rsbuild/plugin-react": "catalog:",
+    "@types/chrome": "^0.0.269",
+    "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@webx-kit/modernjs-plugin": "workspace:^",
+    "@webx-kit/rsbuild-plugin": "workspace:^",
     "@webx-kit/test-utils": "workspace:^",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.5.3"
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4"
   }
 }

examples/react/src/manifest.ts

@@ -1,8 +1,8 @@
-import { defineManifest } from '@webx-kit/modernjs-plugin/manifest';
+import { defineManifest } from '@webx-kit/rsbuild-plugin/manifest';
 
 export default defineManifest(() => ({
   manifest_version: 3,
-  name: 'WebX Kit React Demo',
+  name: 'WebX Kit React Rsbuild Demo',
   version: '0.0.0',
   icons: {
     512: 'public/logo.png',

examples/react-rsbuild/src/modern-app-env.d.ts → examples/react/src/webx-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="@rsbuild/core/types" />
+
+declare module '*.svg';

examples/react/tailwind.config.ts

@@ -1,4 +1,4 @@
-import { getPixelUnitDefaultTheme } from '@webx-kit/modernjs-plugin/tailwind';
+import { getPixelUnitDefaultTheme } from '@webx-kit/rsbuild-plugin/tailwind';
 import type { Config } from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';
 

examples/solid/package.json

@@ -2,24 +2,26 @@
   "name": "@webx-kit/example-solid",
   "private": true,
   "scripts": {
-    "dev": "modern dev",
-    "build": "modern build",
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
     "test": "playwright test",
     "lint:type": "tsc --noEmit"
   },
   "dependencies": {
     "@webx-kit/runtime": "workspace:^",
-    "solid-js": "^1.8.18"
+    "solid-js": "^1.8.20"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
     "@playwright/test": "^1.45.1",
+    "@rsbuild/core": "catalog:",
+    "@rsbuild/plugin-babel": "catalog:",
+    "@rsbuild/plugin-less": "catalog:",
     "@rsbuild/plugin-solid": "catalog:",
-    "@types/chrome": "^0.0.268",
-    "@types/node": "^20.14.10",
-    "@webx-kit/modernjs-plugin": "workspace:^",
+    "@types/chrome": "^0.0.269",
+    "@types/node": "^22.2.0",
+    "@webx-kit/rsbuild-plugin": "workspace:^",
     "@webx-kit/test-utils": "workspace:^",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.5.3"
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4"
   }
 }

examples/solid/modern.config.ts → examples/solid/rsbuild.config.ts

@@ -1,11 +1,16 @@
-import { appTools, defineConfig } from '@modern-js/app-tools';
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginLess } from '@rsbuild/plugin-less';
 import { pluginSolid } from '@rsbuild/plugin-solid';
-import { webxPlugin } from '@webx-kit/modernjs-plugin';
+import { webxPlugin } from '@webx-kit/rsbuild-plugin';
 
-// https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   plugins: [
-    appTools(),
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginLess(),
+    pluginSolid(),
     webxPlugin({
       background: './src/background/index.ts',
       contentScripts: {
@@ -14,9 +19,13 @@ export default defineConfig({
       },
     }),
   ],
-  builderPlugins: [pluginSolid()],
+  source: {
+    entry: {
+      options: './src/pages/options/index.tsx',
+      popup: './src/pages/popup/index.tsx',
+    },
+  },
   output: {
-    disableSvgr: true,
     copy: [
       {
         from: './public',

examples/solid/src/manifest.ts

@@ -1,4 +1,4 @@
-import { defineManifest } from '@webx-kit/modernjs-plugin/manifest';
+import { defineManifest } from '@webx-kit/rsbuild-plugin/manifest';
 
 export default defineManifest(() => ({
   manifest_version: 3,

examples/solid/src/webx-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@rsbuild/core/types" />
+
+declare module '*.svg';

examples/solid/tailwind.config.ts

@@ -1,4 +1,4 @@
-import { getPixelUnitDefaultTheme } from '@webx-kit/modernjs-plugin/tailwind';
+import { getPixelUnitDefaultTheme } from '@webx-kit/rsbuild-plugin/tailwind';
 import type { Config } from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';