feat: restart

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,7 @@ export default {
   },
   dependencies: [
     'commander',
+    'chokidar',
     {
       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/build.ts

@@ -1,22 +1,41 @@
 import { type RsbuildInstance, createRsbuild } from '@rsbuild/core';
 import type { BuildOptions } from './cli/commands';
-import { composeRsbuildEnvironments, pruneEnvironments } from './config';
-import type { RslibConfig } from './types/config';
+import {
+  composeRsbuildEnvironments,
+  loadConfig,
+  pruneEnvironments,
+} from './config';
+import { onBeforeRestartServer, watchFilesForRestart } from './restart';
+
+export async function build(options?: BuildOptions): Promise<RsbuildInstance> {
+  const { content: config, filePath: configFilePath } = await loadConfig({
+    path: options?.config,
+    envMode: options?.envMode,
+  });
 
-export async function build(
-  config: RslibConfig,
-  options?: BuildOptions,
-): Promise<RsbuildInstance> {
   const environments = await composeRsbuildEnvironments(config);
   const rsbuildInstance = await createRsbuild({
     rsbuildConfig: {
       environments: pruneEnvironments(environments, options?.lib),
     },
   });
 
-  await rsbuildInstance.build({
+  const buildInstance = await rsbuildInstance.build({
     watch: options?.watch,
   });
 
+  if (options?.watch) {
+    const files: string[] = [];
+    files.push(configFilePath);
+
+    onBeforeRestartServer(buildInstance.close);
+
+    watchFilesForRestart(files, async () => {
+      await build(options);
+    });
+  } else {
+    await buildInstance.close();
+  }
+
   return rsbuildInstance;
 }

packages/core/src/cli/commands.ts

@@ -60,11 +60,7 @@ export function runCli(): void {
     .description('build the library for production')
     .action(async (options: BuildOptions) => {
       try {
-        const rslibConfig = await loadConfig({
-          path: options.config,
-          envMode: options.envMode,
-        });
-        await build(rslibConfig, options);
+        await build(options);
       } catch (err) {
         logger.error('Failed to build.');
         logger.error(err);
@@ -88,7 +84,7 @@ export function runCli(): void {
     .action(async (options: InspectOptions) => {
       try {
         // TODO: inspect should output Rslib's config
-        const rslibConfig = await loadConfig({
+        const { content: rslibConfig } = await loadConfig({
           path: options.config,
           envMode: options.envMode,
         });
@@ -115,7 +111,7 @@ export function runCli(): void {
     .description('start Rsbuild dev server of Module Federation format')
     .action(async (options: CommonOptions) => {
       try {
-        const rslibConfig = await loadConfig({
+        const { content: rslibConfig } = await loadConfig({
           path: options.config,
           envMode: options.envMode,
         });

packages/core/src/config.ts

@@ -112,15 +112,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/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 onBeforeRestartServer = (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/utils/helper.ts

@@ -201,4 +201,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

@@ -9,7 +9,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: {
@@ -26,7 +26,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: {
@@ -43,7 +43,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: {
@@ -60,7 +60,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: {
@@ -77,7 +77,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: {
@@ -94,7 +94,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: {
@@ -111,7 +111,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: {
@@ -128,7 +128,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"]
     }