feat(cli): restart dev server when config file changed (#495)

.changeset/hot-pigs-confess.md

@@ -0,0 +1,6 @@
+---
+'@rsbuild/shared': patch
+'@rsbuild/core': patch
+---
+
+feat(cli): restart dev server when config file changed

e2e/cases/cli/restart/.gitignore

@@ -0,0 +1 @@
+rsbuild.config.mjs

e2e/cases/cli/restart/index.test.ts

@@ -0,0 +1,46 @@
+import path from 'path';
+import { exec } from 'child_process';
+import { test } from '@playwright/test';
+import { fse } from '@rsbuild/shared';
+import { awaitFileExists } from '@scripts/helper';
+
+test('should restart dev server and reload config when config file changed', async () => {
+  const dist1 = path.join(__dirname, 'dist');
+  const dist2 = path.join(__dirname, 'dist-2');
+  const configFile = path.join(__dirname, 'rsbuild.config.mjs');
+  await fse.remove(dist1);
+  await fse.remove(dist2);
+  await fse.remove(configFile);
+
+  fse.writeFileSync(
+    configFile,
+    `export default {
+      output: {
+        distPath: {
+          root: 'dist',
+        },
+      },
+    };`,
+  );
+
+  const process = exec('npx rsbuild dev', {
+    cwd: __dirname,
+  });
+
+  await awaitFileExists(dist1);
+
+  fse.writeFileSync(
+    configFile,
+    `export default {
+      output: {
+        distPath: {
+          root: 'dist-2',
+        },
+      },
+    };`,
+  );
+
+  await awaitFileExists(dist2);
+
+  process.kill();
+});

e2e/cases/cli/restart/src/index.js

@@ -0,0 +1 @@
+console.log('hello!');

e2e/cases/cli/restart/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@rsbuild/tsconfig/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "outDir": "./dist",
+    "paths": {
+      "@scripts/*": ["../../../scripts/*"]
+    }
+  },
+  "include": ["src", "*.test.ts"]
+}

e2e/scripts/helper.ts

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import { fse } from '@rsbuild/shared';
 import glob, { Options as GlobOptions } from 'fast-glob';
 
@@ -34,3 +34,17 @@ export const globContentJSON = async (path: string, options?: GlobOptions) => {
 
   return ret;
 };
+
+export const awaitFileExists = async (dir: string, checks = 0) => {
+  const maxChecks = 100;
+  const interval = 100;
+  if (fse.existsSync(dir)) {
+    expect(true).toBe(true);
+  } else if (checks < maxChecks) {
+    checks++;
+    await new Promise((resolve) => setTimeout(resolve, interval));
+    await awaitFileExists(dir, checks);
+  } else {
+    expect(false).toBe(true);
+  }
+};

packages/core/src/cli/config.ts

@@ -7,6 +7,7 @@ import type {
   RsbuildPlugin,
   RsbuildConfig as BaseRsbuildConfig,
 } from '@rsbuild/shared';
+import { restartDevServer } from '../server/restart';
 
 export type RsbuildConfig = BaseRsbuildConfig & {
   source?: {
@@ -44,14 +45,34 @@ const resolveConfigPath = () => {
   return null;
 };
 
+async function watchConfig(configFile: string) {
+  const chokidar = await import('@rsbuild/shared/chokidar');
+  const watcher = chokidar.watch(configFile, {});
+  const callback = async () => {
+    watcher.close();
+    await restartDevServer({ filePath: configFile });
+  };
+
+  watcher.on('change', callback);
+  watcher.on('unlink', callback);
+}
+
 export async function loadConfig(): Promise<ReturnType<typeof defineConfig>> {
   const configFile = resolveConfigPath();
 
   if (configFile) {
     const loadConfig = jiti(__filename, {
       esmResolve: true,
+      // disable require cache to support restart CLI and read the new config
+      requireCache: false,
       interopDefault: true,
     });
+
+    const command = process.argv[2];
+    if (command === 'dev') {
+      watchConfig(configFile);
+    }
+
     return loadConfig(configFile);
   }
 

packages/core/src/cli/index.ts

@@ -1,28 +1,2 @@
-import { RsbuildPlugin, createRsbuild } from '..';
-import { setupProgram } from './commands';
-import { getDefaultEntries, loadConfig } from './config';
-
 export { defineConfig } from './config';
-
-type RunCliOptions = {
-  defaultPlugins?: RsbuildPlugin[];
-};
-
-export async function runCli(options: RunCliOptions = {}) {
-  const config = await loadConfig();
-  const rsbuild = await createRsbuild({
-    rsbuildConfig: config,
-    entry: config.source?.entries || getDefaultEntries(),
-    provider: config.provider,
-  });
-
-  if (options.defaultPlugins) {
-    rsbuild.addPlugins(options.defaultPlugins);
-  }
-
-  if (config.plugins) {
-    rsbuild.addPlugins(config.plugins);
-  }
-
-  setupProgram(rsbuild);
-}
+export { runCli } from './run';

packages/core/src/cli/run.ts

@@ -0,0 +1,32 @@
+import { RsbuildPlugin, createRsbuild } from '..';
+import { setupProgram } from './commands';
+import { getDefaultEntries, loadConfig } from './config';
+
+type RunCliOptions = {
+  isRestart?: boolean;
+  defaultPlugins?: RsbuildPlugin[];
+};
+
+export async function runCli(options: RunCliOptions = {}) {
+  const config = await loadConfig();
+
+  const rsbuild = await createRsbuild({
+    rsbuildConfig: config,
+    entry: config.source?.entries || getDefaultEntries(),
+    provider: config.provider,
+  });
+
+  if (options.defaultPlugins) {
+    rsbuild.addPlugins(options.defaultPlugins);
+  }
+
+  if (config.plugins) {
+    rsbuild.addPlugins(config.plugins);
+  }
+
+  if (!options.isRestart) {
+    setupProgram(rsbuild);
+  }
+
+  return rsbuild;
+}

packages/core/src/server/devServer.ts

@@ -30,6 +30,7 @@ import {
   notFoundMiddleware,
 } from './middlewares';
 import { join } from 'path';
+import { registerCleaner } from './restart';
 
 export class RsbuildDevServer {
   private readonly dev: DevConfig;
@@ -305,6 +306,8 @@ export async function startDevServer<
           routes,
         });
 
+        registerCleaner(() => server.close());
+
         resolve({
           port,
           urls: urls.map((item) => item.url),

packages/core/src/server/restart.ts

@@ -0,0 +1,37 @@
+import path from 'path';
+import { color, logger } from '@rsbuild/shared';
+import { runCli } from '../cli/run';
+
+type Cleaner = () => Promise<unknown> | unknown;
+
+const cleaners: Cleaner[] = [];
+
+/**
+ * Add a cleaner to handle side effects
+ */
+export const registerCleaner = (cleaner: Cleaner) => {
+  cleaners.push(cleaner);
+};
+
+const clearConsole = () => {
+  if (process.stdout.isTTY && !process.env.DEBUG) {
+    process.stdout.write('\x1B[H\x1B[2J');
+  }
+};
+
+export const restartDevServer = async ({ filePath }: { filePath: string }) => {
+  clearConsole();
+
+  const filename = path.basename(filePath);
+  logger.info(`Restart because ${color.yellow(filename)} is changed.\n`);
+
+  for (const cleaner of cleaners) {
+    await cleaner();
+  }
+
+  const rsbuild = await runCli({
+    isRestart: true,
+  });
+
+  await rsbuild.startDevServer();
+};

packages/shared/compiled/chokidar/anymatch/index.d.ts

@@ -0,0 +1,20 @@
+type AnymatchFn = (testString: string) => boolean;
+type AnymatchPattern = string|RegExp|AnymatchFn;
+type AnymatchMatcher = AnymatchPattern|AnymatchPattern[]
+type AnymatchTester = {
+  (testString: string|any[], returnIndex: true): number;
+  (testString: string|any[]): boolean;
+}
+
+type PicomatchOptions = {dot: boolean};
+
+declare const anymatch: {
+  (matchers: AnymatchMatcher): AnymatchTester;
+  (matchers: AnymatchMatcher, testString: null, returnIndex: true | PicomatchOptions): AnymatchTester;
+  (matchers: AnymatchMatcher, testString: string|any[], returnIndex: true | PicomatchOptions): number;
+  (matchers: AnymatchMatcher, testString: string|any[]): boolean;
+}
+
+export {AnymatchMatcher as Matcher}
+export {AnymatchTester as Tester}
+export default anymatch

packages/shared/compiled/chokidar/license

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2012-2019 Paul Miller (https://paulmillr.com), Elan Shanker
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/shared/compiled/chokidar/package.json

@@ -0,0 +1 @@
+{"name":"chokidar","author":"Paul Miller (https://paulmillr.com)","version":"3.5.3","funding":[{"type":"individual","url":"https://paulmillr.com/funding/"}],"license":"MIT","types":"./types/index.d.ts"}