feat: support watch rslib.config to rebuild (#489)

Author: 9aoy

packages/core/package.json

@@ -44,6 +44,7 @@
   "devDependencies": {
     "@rslib/tsconfig": "workspace:*",
     "@types/fs-extra": "^11.0.4",
+    "chokidar": "^4.0.1",
     "commander": "^12.1.0",
     "fs-extra": "^11.2.0",
     "memfs": "^4.14.0",

packages/core/prebundle.config.mjs

@@ -13,6 +13,11 @@ export default {
   },
   dependencies: [
     'commander',
+    {
+      name: 'chokidar',
+      // strip sourcemap comment
+      prettier: true,
+    },
     {
       name: 'rslog',
       afterBundle(task) {

packages/core/rslib.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
     externals: {
       picocolors: '../compiled/picocolors/index.js',
       commander: '../compiled/commander/index.js',
+      chokidar: '../compiled/chokidar/index.js',
       rslog: '../compiled/rslog/index.js',
     },
   },

packages/core/src/cli/build.ts

@@ -2,6 +2,7 @@ import { type RsbuildInstance, createRsbuild } from '@rsbuild/core';
 import { composeRsbuildEnvironments, pruneEnvironments } from '../config';
 import type { RslibConfig } from '../types/config';
 import type { BuildOptions } from './commands';
+import { onBeforeRestart } from './restart';
 
 export async function build(
   config: RslibConfig,
@@ -14,9 +15,15 @@ export async function build(
     },
   });
 
-  await rsbuildInstance.build({
+  const buildInstance = await rsbuildInstance.build({
     watch: options.watch,
   });
 
+  if (options.watch) {
+    onBeforeRestart(buildInstance.close);
+  } else {
+    await buildInstance.close();
+  }
+
   return rsbuildInstance;
 }

packages/core/src/cli/commands.ts

@@ -5,6 +5,7 @@ import { build } from './build';
 import { loadRslibConfig } from './init';
 import { inspect } from './inspect';
 import { startMFDevServer } from './mf';
+import { watchFilesForRestart } from './restart';
 
 export type CommonOptions = {
   root?: string;
@@ -62,11 +63,20 @@ export function runCli(): void {
     .description('build the library for production')
     .action(async (options: BuildOptions) => {
       try {
-        const rslibConfig = await loadRslibConfig(options);
-        await build(rslibConfig, {
-          lib: options.lib,
-          watch: options.watch,
-        });
+        const cliBuild = async () => {
+          const { content: rslibConfig, filePath } =
+            await loadRslibConfig(options);
+
+          await build(rslibConfig, options);
+
+          if (options.watch) {
+            watchFilesForRestart([filePath], async () => {
+              await cliBuild();
+            });
+          }
+        };
+
+        await cliBuild();
       } catch (err) {
         logger.error('Failed to build.');
         logger.error(err);
@@ -90,7 +100,7 @@ export function runCli(): void {
     .action(async (options: InspectOptions) => {
       try {
         // TODO: inspect should output Rslib's config
-        const rslibConfig = await loadRslibConfig(options);
+        const { content: rslibConfig } = await loadRslibConfig(options);
         await inspect(rslibConfig, {
           lib: options.lib,
           mode: options.mode,
@@ -108,9 +118,18 @@ export function runCli(): void {
     .description('start Rsbuild dev server of Module Federation format')
     .action(async (options: CommonOptions) => {
       try {
-        const rslibConfig = await loadRslibConfig(options);
-        // TODO: support lib option in mf dev server
-        await startMFDevServer(rslibConfig);
+        const cliMfDev = async () => {
+          const { content: rslibConfig, filePath } =
+            await loadRslibConfig(options);
+          // TODO: support lib option in mf dev server
+          await startMFDevServer(rslibConfig);
+
+          watchFilesForRestart([filePath], async () => {
+            await cliMfDev();
+          });
+        };
+
+        await cliMfDev();
       } catch (err) {
         logger.error('Failed to start mf dev.');
         logger.error(err);

packages/core/src/cli/init.ts

@@ -3,17 +3,16 @@ import type { RslibConfig } from '../types';
 import { getAbsolutePath } from '../utils/helper';
 import type { CommonOptions } from './commands';
 
-export async function loadRslibConfig(
-  options: CommonOptions,
-): Promise<RslibConfig> {
+export async function loadRslibConfig(options: CommonOptions): Promise<{
+  content: RslibConfig;
+  filePath: string;
+}> {
   const cwd = process.cwd();
   const root = options.root ? getAbsolutePath(cwd, options.root) : cwd;
 
-  const rslibConfig = await loadConfig({
+  return loadConfig({
     cwd: root,
     path: options.config,
     envMode: options.envMode,
   });
-
-  return rslibConfig;
 }

packages/core/src/cli/mf.ts

@@ -2,6 +2,7 @@ import { createRsbuild, mergeRsbuildConfig } from '@rsbuild/core';
 import type { RsbuildConfig, RsbuildInstance } from '@rsbuild/core';
 import { composeCreateRsbuildConfig } from '../config';
 import type { RslibConfig } from '../types';
+import { onBeforeRestart } from './restart';
 
 export async function startMFDevServer(
   config: RslibConfig,
@@ -27,7 +28,9 @@ async function initMFRsbuild(
   const rsbuildInstance = await createRsbuild({
     rsbuildConfig: mfRsbuildConfig.config,
   });
-  await rsbuildInstance.startDevServer();
+  const devServer = await rsbuildInstance.startDevServer();
+
+  onBeforeRestart(devServer.server.close);
   return rsbuildInstance;
 }
 

packages/core/src/cli/restart.ts

@@ -0,0 +1,76 @@
+import path from 'node:path';
+import chokidar from 'chokidar';
+import { color, debounce, isTTY } from '../utils/helper';
+import { logger } from '../utils/logger';
+
+export async function watchFilesForRestart(
+  files: string[],
+  restart: () => Promise<void>,
+): Promise<void> {
+  if (!files.length) {
+    return;
+  }
+
+  const watcher = chokidar.watch(files, {
+    ignoreInitial: true,
+    // If watching fails due to read permissions, the errors will be suppressed silently.
+    ignorePermissionErrors: true,
+    ignored: ['**/node_modules/**', '**/.git/**', '**/.DS_Store/**'],
+  });
+
+  const callback = debounce(
+    async (filePath) => {
+      watcher.close();
+
+      await beforeRestart({ filePath });
+      await restart();
+    },
+    // set 300ms debounce to avoid restart frequently
+    300,
+  );
+
+  watcher.on('add', callback);
+  watcher.on('change', callback);
+  watcher.on('unlink', callback);
+}
+
+type Cleaner = () => Promise<unknown> | unknown;
+
+let cleaners: Cleaner[] = [];
+
+/**
+ * Add a cleaner to handle side effects
+ */
+export const onBeforeRestart = (cleaner: Cleaner): void => {
+  cleaners.push(cleaner);
+};
+
+const clearConsole = () => {
+  if (isTTY() && !process.env.DEBUG) {
+    process.stdout.write('\x1B[H\x1B[2J');
+  }
+};
+
+const beforeRestart = async ({
+  filePath,
+  clear = true,
+}: {
+  filePath?: string;
+  clear?: boolean;
+} = {}): Promise<void> => {
+  if (clear) {
+    clearConsole();
+  }
+
+  if (filePath) {
+    const filename = path.basename(filePath);
+    logger.info(`Restart because ${color.yellow(filename)} is changed.\n`);
+  } else {
+    logger.info('Restarting...\n');
+  }
+
+  for (const cleaner of cleaners) {
+    await cleaner();
+  }
+  cleaners = [];
+};

packages/core/src/config.ts

@@ -117,15 +117,18 @@ export async function loadConfig({
   cwd?: string;
   path?: string;
   envMode?: string;
-}): Promise<RslibConfig> {
+}): Promise<{
+  content: RslibConfig;
+  filePath: string;
+}> {
   const configFilePath = resolveConfigPath(cwd, path);
   const { content } = await loadRsbuildConfig({
     cwd: dirname(configFilePath),
     path: configFilePath,
     envMode,
   });
 
-  return content as RslibConfig;
+  return { content: content as RslibConfig, filePath: configFilePath };
 }
 
 const composeExternalsWarnConfig = (

packages/core/src/utils/helper.ts

@@ -205,4 +205,31 @@ export function checkMFPlugin(config: LibConfig): boolean {
   return added;
 }
 
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
+
+/**
+ * Check if running in a TTY context
+ */
+export const isTTY = (type: 'stdin' | 'stdout' = 'stdout'): boolean => {
+  return (
+    (type === 'stdin' ? process.stdin.isTTY : process.stdout.isTTY) &&
+    !process.env.CI
+  );
+};
+
 export { color };

packages/core/tests/config.test.ts

@@ -13,7 +13,7 @@ describe('Should load config file correctly', () => {
   test('Load config.js in cjs project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/cjs');
     const configFilePath = join(fixtureDir, 'rslib.config.js');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toEqual({
       lib: [],
       source: {
@@ -30,7 +30,7 @@ describe('Should load config file correctly', () => {
   test('Load config.mjs in cjs project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/cjs');
     const configFilePath = join(fixtureDir, 'rslib.config.mjs');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toEqual({
       lib: [],
       source: {
@@ -47,7 +47,7 @@ describe('Should load config file correctly', () => {
   test('Load config.ts in cjs project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/cjs');
     const configFilePath = join(fixtureDir, 'rslib.config.ts');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toEqual({
       lib: [],
       source: {
@@ -64,7 +64,7 @@ describe('Should load config file correctly', () => {
   test('Load config.cjs with defineConfig in cjs project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/cjs');
     const configFilePath = join(fixtureDir, 'rslib.config.cjs');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toEqual({
       lib: [],
       source: {
@@ -81,7 +81,7 @@ describe('Should load config file correctly', () => {
   test('Load config.js in esm project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/esm');
     const configFilePath = join(fixtureDir, 'rslib.config.js');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toEqual({
       lib: [],
       source: {
@@ -98,7 +98,7 @@ describe('Should load config file correctly', () => {
   test('Load config.cjs in esm project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/esm');
     const configFilePath = join(fixtureDir, 'rslib.config.cjs');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toEqual({
       lib: [],
       source: {
@@ -115,7 +115,7 @@ describe('Should load config file correctly', () => {
   test('Load config.ts in esm project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/esm');
     const configFilePath = join(fixtureDir, 'rslib.config.ts');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toEqual({
       lib: [],
       source: {
@@ -132,7 +132,7 @@ describe('Should load config file correctly', () => {
   test('Load config.mjs with defineConfig in esm project', async () => {
     const fixtureDir = join(__dirname, 'fixtures/config/esm');
     const configFilePath = join(fixtureDir, 'rslib.config.mjs');
-    const config = await loadConfig({ path: configFilePath });
+    const { content: config } = await loadConfig({ path: configFilePath });
     expect(config).toMatchObject({
       lib: [],
       source: {

packages/core/tsconfig.json

@@ -12,6 +12,7 @@
     "moduleResolution": "Bundler",
     "paths": {
       "commander": ["./compiled/commander"],
+      "chokidar": ["./compiled/chokidar"],
       "picocolors": ["./compiled/picocolors"],
       "rslog": ["./compiled/rslog"]
     }