refactor: upgrade to rsbuild 1.0 (#90)

.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

apps/ai-assistant/package.json

@@ -22,7 +22,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
+    "@modern-js/app-tools": "^2.58.0",
     "@types/chrome": "^0.0.269",
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",

apps/switchy-pi/package.json

@@ -26,7 +26,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
+    "@modern-js/app-tools": "^2.58.0",
     "@types/chrome": "^0.0.269",
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",

examples/react-webpack/package.json

@@ -13,11 +13,8 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
+    "@modern-js/app-tools": "^2.58.0",
     "@playwright/test": "^1.46.0",
-    "@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",

examples/react/src/manifest.ts

@@ -2,7 +2,7 @@ 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',

packages/core-plugin/package.json

@@ -87,6 +87,9 @@
       }
     }
   },
+  "files": [
+    "dist"
+  ],
   "repository": {
     "url": "https://github.com/tmkx/webx-kit.git",
     "directory": "packages/core-plugin"
@@ -97,20 +100,19 @@
   },
   "dependencies": {
     "@types/chrome": "^0.0.269",
+    "chokidar": "^3.6.0",
     "jiti": "^1.21.6",
     "type-fest": "^4.24.0"
   },
   "devDependencies": {
     "@rsbuild/core": "catalog:",
-    "@rsbuild/shared": "catalog:",
     "tailwindcss": "^3.4.9",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
     "webpack": "^5.93.0"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^0.7.0",
-    "@rsbuild/shared": "^0.7.0",
+    "@rsbuild/core": "^1.0.0",
     "tailwindcss": "^3.0.0"
   }
 }

packages/core-plugin/src/background.ts

@@ -1,8 +1,10 @@
 import path from 'node:path';
 import querystring from 'node:querystring';
-import { type RsbuildPluginAPI, type Rspack, type RspackChain, type WebpackConfig, isDev } from '@rsbuild/shared';
+import type { RsbuildPluginAPI, Rspack, RspackChain } from '@rsbuild/core';
 import type { NormalizeContentScriptsOptions } from './content-script';
+import { isDev } from './env';
 import { registerManifestTransformer } from './manifest';
+import type { WebpackConfig } from './utils';
 
 const DEFAULT_BACKGROUND_NAME = 'background';
 

packages/core-plugin/src/build-http/index.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import type { RsbuildPluginAPI, Rspack } from '@rsbuild/shared';
+import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
 
 const buildHttpLoader = (function () {
   const devLoader = path.resolve(__dirname, 'build-http-loader-dev.js');

packages/core-plugin/src/content-script.ts

@@ -1,7 +1,8 @@
-import { type RsbuildPluginAPI, type Rspack, type RspackChain, type WebpackConfig, isProd } from '@rsbuild/shared';
+import type { RsbuildPluginAPI, Rspack, RspackChain } from '@rsbuild/core';
 import type { SetRequired } from 'type-fest';
+import { isProd } from './env';
 import { registerManifestTransformer } from './manifest';
-import { type Override, castArray } from './utils';
+import { type Override, type WebpackConfig, castArray } from './utils';
 
 type ContentScriptItem = NonNullable<chrome.runtime.ManifestV3['content_scripts']>[number];
 

packages/core-plugin/src/cors.ts

@@ -1,4 +1,4 @@
-import type { RequestHandler, RsbuildPluginAPI } from '@rsbuild/shared';
+import type { RequestHandler, RsbuildPluginAPI } from '@rsbuild/core';
 
 export function applyCorsSupport(api: RsbuildPluginAPI) {
   if (api.modifyRsbuildConfig) {

packages/core-plugin/src/env.ts

@@ -1,10 +1,17 @@
-import { loadEnv } from '@rsbuild/core';
-import { type RsbuildPluginAPI, getNodeEnv } from '@rsbuild/shared';
+import { env } from 'node:process';
+import { type NodeEnv, type RsbuildPluginAPI, loadEnv } from '@rsbuild/core';
 
 export const ENV_PREFIX = 'WEBX_PUBLIC_';
 
 const envMode = process.argv.find((_value, index, args) => index > 0 && args[index - 1] === '--env-mode');
 
+// DO NOT use `process.env.NODE_ENV` here, otherwise it will be overridden by tsup
+const getNodeEnv = () => env['NODE_ENV'] as NodeEnv;
+
+export const isDev = () => getNodeEnv() === 'development';
+
+export const isProd = () => getNodeEnv() === 'production';
+
 export const { publicVars } = loadEnv({
   prefixes: [ENV_PREFIX],
   mode: envMode || process.env.MODERN_ENV || getNodeEnv(),

packages/core-plugin/src/manifest.ts

@@ -1,9 +1,10 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { type RsbuildPluginAPI, fse, isDev } from '@rsbuild/shared';
-import { type FSWatcher, watch } from '@rsbuild/shared/chokidar';
+import type { RsbuildPluginAPI } from '@rsbuild/core';
+import { FSWatcher, watch } from 'chokidar';
 import createJITI from 'jiti';
 import type { PackageJson, SetOptional } from 'type-fest';
+import { isDev } from './env';
 
 const DEFAULT_MANIFEST_SRC = './src/manifest.ts';
 
@@ -61,7 +62,9 @@ function createManifestGenerator({
     }
     await transformManifest?.(manifest, context);
 
-    context.outputPath && (await fse.writeJson(context.outputPath, manifest, { spaces: context.isDev ? 2 : 0 }));
+    if (context.outputPath) {
+      fs.writeFileSync(context.outputPath, JSON.stringify(manifest, null, context.isDev ? 2 : 0));
+    }
     return manifest;
   }
 
@@ -93,7 +96,7 @@ async function applyDefaultValuePlugin(manifest: Manifest, context: ManifestTran
   const packageJsonPath = path.resolve(context.rootPath, 'package.json');
   if (!fs.existsSync(packageJsonPath)) return;
   try {
-    const packageJson: PackageJson = await fse.readJson(packageJsonPath, { encoding: 'utf8' });
+    const packageJson: PackageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf8' }));
     manifest.name ??= String(packageJson.displayName || '') || packageJson.name || 'WebX';
     try {
       manifest.version ??= packageJson.version?.replace(/-.+$/, ''); // '0.0.1-alpha' -> '0.0.1'
@@ -134,12 +137,20 @@ export const applyManifestSupport = (api: RsbuildPluginAPI, options: ManifestOpt
 
   api.onBeforeCreateCompiler(async () => {
     context.outputPath = path.join(api.context.distPath, 'manifest.json');
-    await fse.ensureDir(api.context.distPath);
+    if (!fs.existsSync(api.context.distPath)) {
+      fs.mkdirSync(api.context.distPath, { recursive: true });
+    }
   });
 
-  api.onAfterStartDevServer(async ({ port }) => {
-    context.port = port;
-    watch();
+  // FIXME: modern.js doesn't trigger `onAfterBuild`
+  api.onAfterCreateCompiler(async () => {
+    const {
+      server: { port },
+    } = api.getNormalizedConfig();
+    if (isDev()) {
+      context.port = port;
+      watch();
+    }
     await generate();
   });
 

packages/core-plugin/src/shadow-root/index.ts

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import type { Rspack } from '@rsbuild/shared';
+import type { Rspack } from '@rsbuild/core';
 import { ROOT_NAME, STYLE_ROOT_NAME } from '../constants';
 
 export const PLUGIN_NAME = 'webx:content-script-shadow-root';

packages/core-plugin/src/utils.ts

@@ -1,8 +1,11 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import type { ModifyWebpackChainUtils } from '@rsbuild/core';
 
 export type Override<T, U> = Omit<T, keyof U> & U;
 
+export type WebpackConfig = Parameters<ModifyWebpackChainUtils['webpack']['config']['getNormalizedWebpackOptions']>[0];
+
 export function titleCase(str: string) {
   return str
     .split(/[-_ ]/)

packages/create-webx/package.json

@@ -17,7 +17,7 @@
     "lint:type": "tsc --noEmit"
   },
   "devDependencies": {
-    "@modern-js/utils": "^2.55.0",
+    "@modern-js/utils": "^2.58.0",
     "@types/debug": "^4.1.12",
     "@types/prompts": "^2.4.9",
     "debug": "^4.3.6",

packages/messaging/package.json

@@ -62,8 +62,8 @@
     "type-fest": "^4.24.0"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
-    "@modern-js/utils": "^2.55.0",
+    "@modern-js/app-tools": "^2.58.0",
+    "@modern-js/utils": "^2.58.0",
     "@playwright/test": "^1.46.0",
     "@trpc/client": "11.0.0-rc.477",
     "@trpc/server": "11.0.0-rc.477",

packages/modernjs-plugin/package.json

@@ -49,15 +49,15 @@
     "@webx-kit/core-plugin": "workspace:^"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.55.0",
-    "@modern-js/utils": "^2.55.0",
-    "@rsbuild/shared": "catalog:",
+    "@modern-js/app-tools": "^2.58.0",
+    "@modern-js/utils": "^2.58.0",
+    "@rsbuild/core": "catalog:",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "@modern-js/app-tools": "^2.40.0",
     "@modern-js/utils": "^2.40.0",
-    "@rsbuild/shared": "^0.7.0"
+    "@rsbuild/core": "^1.0.0"
   }
 }

packages/modernjs-plugin/src/index.ts

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import { type AppTools, type CliPlugin, type UserConfig, mergeConfig } from '@modern-js/app-tools';
 import { pkgUp, lodash } from '@modern-js/utils';
-import { type RsbuildPlugin, isDev } from '@rsbuild/shared';
+import type { RsbuildPlugin } from '@rsbuild/core';
 import {
   type BackgroundOptions,
   applyBackgroundSupport,
@@ -16,7 +16,7 @@ import {
   normalizeContentScriptsOptions,
 } from '@webx-kit/core-plugin/content-script';
 import { applyCorsSupport } from '@webx-kit/core-plugin/cors';
-import { applyEnvSupport } from '@webx-kit/core-plugin/env';
+import { applyEnvSupport, isDev } from '@webx-kit/core-plugin/env';
 import { type ManifestOptions, applyManifestSupport } from '@webx-kit/core-plugin/manifest';
 import { findUp, titleCase } from '@webx-kit/core-plugin/utils';
 import { BackgroundReloadPlugin } from './plugins/background/live-reload-plugin';
@@ -25,7 +25,7 @@ import { ContentScriptHMRPlugin } from './plugins/content-scripts/hmr-plugin';
 import { ContentScriptPublicPathPlugin } from './plugins/content-scripts/public-path-plugin';
 import { ContentScriptShadowRootPlugin } from './plugins/content-scripts/shadow-root-plugin';
 
-export { isDev, isProd } from '@rsbuild/shared';
+export { isDev, isProd } from '@webx-kit/core-plugin/env';
 
 export type { BackgroundEntry } from '@webx-kit/core-plugin/background';
 export type { ContentScriptEntry } from '@webx-kit/core-plugin/content-script';

packages/modernjs-plugin/src/plugins/clean.ts

@@ -1,5 +1,6 @@
+import fs from 'node:fs';
 import path from 'node:path';
-import { type RsbuildPluginAPI, fse } from '@rsbuild/shared';
+import type { RsbuildPluginAPI } from '@rsbuild/core';
 
 export type CleanOptions = {
   /**
@@ -18,7 +19,7 @@ export function applyCleanSupport(api: RsbuildPluginAPI, { clean = DEFAULT_CLEAN
   api.onAfterBuild(async () => {
     for (const file of clean) {
       const filePath = path.resolve(distPath, file);
-      if (fse.existsSync(filePath)) await fse.unlink(filePath);
+      if (fs.existsSync(filePath)) await fs.unlinkSync(filePath);
     }
   });
 }

packages/rsbuild-plugin/package.json

@@ -50,7 +50,6 @@
   },
   "devDependencies": {
     "@rsbuild/core": "catalog:",
-    "@rsbuild/shared": "catalog:",
     "@rspack/core": "catalog:",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4"

packages/rsbuild-plugin/src/index.ts

@@ -1,5 +1,4 @@
 import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core';
-import { isDev } from '@rsbuild/shared';
 import {
   type BackgroundOptions,
   applyBackgroundSupport,
@@ -13,7 +12,7 @@ import {
   normalizeContentScriptsOptions,
 } from '@webx-kit/core-plugin/content-script';
 import { applyCorsSupport } from '@webx-kit/core-plugin/cors';
-import { applyEnvSupport } from '@webx-kit/core-plugin/env';
+import { applyEnvSupport, isDev } from '@webx-kit/core-plugin/env';
 import { type ManifestOptions, applyManifestSupport } from '@webx-kit/core-plugin/manifest';
 import { titleCase } from '@webx-kit/core-plugin/utils';
 import { BackgroundReloadPlugin } from './plugins/background/live-reload-plugin';
@@ -23,7 +22,16 @@ import { ContentScriptShadowRootPlugin } from './plugins/content-script/shadow-r
 
 export interface WebxPluginOptions extends BackgroundOptions, ContentScriptsOptions, ManifestOptions {}
 
-function getDefaultConfig({ allInOneEntries }: { allInOneEntries: Set<string> }): RsbuildConfig {
+function getDefaultConfig({
+  allInOneEntries,
+  defaultConfig,
+  originalConfig,
+}: {
+  allInOneEntries: Set<string>;
+  defaultConfig: Readonly<RsbuildConfig>;
+  originalConfig: Readonly<RsbuildConfig>;
+}): RsbuildConfig {
+  const port = process.env.PORT ? Number(process.env.PORT) : originalConfig.server?.port || defaultConfig.server?.port;
   return {
     source: {
       define: {
@@ -35,6 +43,7 @@ function getDefaultConfig({ allInOneEntries }: { allInOneEntries: Set<string> })
       client: {
         protocol: 'ws',
         host: 'localhost',
+        port,
       },
       writeToDisk: (filename) => !filename.includes('.hot-update.'),
     },
@@ -49,14 +58,14 @@ function getDefaultConfig({ allInOneEntries }: { allInOneEntries: Set<string> })
     },
     server: {
       publicDir: false,
-      port: process.env.PORT ? Number(process.env.PORT) : undefined,
+      port,
       printUrls: false,
     },
     tools: {
       bundlerChain(chain) {
         // DO NOT split chunks when the entry is background/content-scripts
         chain.optimization.runtimeChunk(false).splitChunks({
-          chunks: (chunk) => chunk.runtime.every((runtime) => !allInOneEntries.has(runtime)),
+          chunks: (chunk) => [...chunk.runtime].every((runtime) => !allInOneEntries.has(runtime)),
         });
       },
     },
@@ -73,8 +82,13 @@ export const webxPlugin = (options: WebxPluginOptions = {}): RsbuildPlugin => {
         ...getContentScriptEntryNames(normalizedOptions),
       ]);
       api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
+        const defaultConfig = api.getRsbuildConfig('current');
         const originalConfig = api.getRsbuildConfig('original');
-        return mergeRsbuildConfig(config, getDefaultConfig({ allInOneEntries }), originalConfig);
+        return mergeRsbuildConfig(
+          config,
+          getDefaultConfig({ allInOneEntries, defaultConfig, originalConfig }),
+          originalConfig
+        );
       });
       applyBackgroundSupport(api, normalizedOptions, ({ entryName, backgroundLiveReload }) =>
         isDev() ? [new BackgroundReloadPlugin(entryName, backgroundLiveReload)] : []

packages/rsbuild-plugin/src/plugins/background/live-reload-plugin.ts

@@ -13,7 +13,7 @@ export class BackgroundReloadPlugin {
     const autoReload = this.autoReload;
 
     compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-      const isEnabledForChunk = (chunk: Rspack.Chunk) => chunk.chunkReasons.includes('Entrypoint(background)');
+      const isEnabledForChunk = (chunk: Rspack.Chunk) => chunk.name === this.backgroundEntryName;
 
       compilation.hooks.runtimeModule.tap(PLUGIN_NAME, (module, chunk) => {
         if (!isEnabledForChunk(chunk)) return;