feat: restart dev server on config changes

Author: chenjiahan

packages/rstack/src/config.ts

@@ -1,4 +1,4 @@
-import { loadConfig } from '@rstackjs/load-config';
+import { loadConfig, type LoadConfigResult } from '@rstackjs/load-config';
 import type { RsbuildConfigDefinition } from '@rsbuild/core';
 import type { RslibConfigDefinition } from '@rslib/core';
 import type { RslintConfig } from '@rslint/core';
@@ -18,6 +18,10 @@ export type Configs = {
   staged?: StagedConfig;
 };
 
+type LoadedRstackConfig = Pick<LoadConfigResult, 'filePath' | 'dependencies'> & {
+  configs: Configs;
+};
+
 type ConfigState = {
   configs: Configs;
   configPath?: string;
@@ -101,12 +105,12 @@ export const define: Define = {
   staged: (config) => setConfig('staged', config),
 };
 
-export const loadRstackConfig = async (): Promise<Configs> => {
+export const loadRstackConfigWithMeta = async (): Promise<LoadedRstackConfig> => {
   const state = getConfigState();
   state.configs = {};
 
   try {
-    await loadConfig({
+    const { filePath, dependencies } = await loadConfig({
       loader: 'native',
       exportName: false,
       fresh: true,
@@ -122,8 +126,17 @@ export const loadRstackConfig = async (): Promise<Configs> => {
           }),
     });
 
-    return state.configs;
+    return {
+      configs: state.configs,
+      filePath,
+      dependencies,
+    };
   } finally {
     state.configs = {};
   }
 };
+
+export const loadRstackConfig = async (): Promise<Configs> => {
+  const { configs } = await loadRstackConfigWithMeta();
+  return configs;
+};

packages/rstack/src/rsbuildConfig.ts

@@ -1,5 +1,5 @@
-import type { RsbuildConfigDefinition, ConfigParams } from '@rsbuild/core';
-import { loadRstackConfig, type Configs } from './config.js';
+import { mergeRsbuildConfig, type RsbuildConfigDefinition, type ConfigParams } from '@rsbuild/core';
+import { loadRstackConfigWithMeta, type Configs } from './config.js';
 
 const resolveRsbuildConfig = async (configs: Configs, params: ConfigParams) => {
   const appConfig = configs.app;
@@ -13,8 +13,21 @@ const resolveRsbuildConfig = async (configs: Configs, params: ConfigParams) => {
 };
 
 const loadRsbuildConfig: RsbuildConfigDefinition = async (params) => {
-  const configs = await loadRstackConfig();
-  return resolveRsbuildConfig(configs, params);
+  const { configs, filePath, dependencies } = await loadRstackConfigWithMeta();
+  const config = await resolveRsbuildConfig(configs, params);
+
+  if (!filePath) {
+    return config;
+  }
+
+  return mergeRsbuildConfig(config, {
+    dev: {
+      watchFiles: {
+        paths: [filePath, ...dependencies],
+        type: 'reload-server',
+      },
+    },
+  });
 };
 
 export default loadRsbuildConfig;

packages/rstack/test/config/reload-app-config/index.test.ts

@@ -0,0 +1,133 @@
+import { type ChildProcess, spawn } from 'node:child_process';
+import { mkdtemp, mkdir, rm, writeFile } from 'node:fs/promises';
+import { createServer } from 'node:net';
+import path from 'node:path';
+import { setTimeout as delay } from 'node:timers/promises';
+import { test } from 'rstack/test';
+
+const RSTACK_BIN_PATH = path.join(import.meta.dirname, '../../../bin/rs.js');
+
+const getRandomPort = (): Promise<number> =>
+  new Promise((resolve, reject) => {
+    const server = createServer();
+    server.once('error', reject);
+    server.listen(0, '127.0.0.1', () => {
+      const address = server.address();
+      if (!address || typeof address === 'string') {
+        server.close();
+        reject(new Error('Failed to allocate a port.'));
+        return;
+      }
+      server.close((error) => {
+        if (error) {
+          reject(error);
+        } else {
+          resolve(address.port);
+        }
+      });
+    });
+  });
+
+const closeChild = async (child: ChildProcess): Promise<void> => {
+  if (child.exitCode !== null) {
+    return;
+  }
+
+  child.kill();
+  await Promise.race([
+    new Promise<void>((resolve) => child.once('exit', () => resolve())),
+    delay(5_000),
+  ]);
+
+  if (child.exitCode === null) {
+    child.kill('SIGKILL');
+  }
+};
+
+const waitForOutput = async (
+  child: ChildProcess,
+  getOutput: () => string,
+  predicate: (output: string) => boolean,
+): Promise<void> => {
+  const deadline = Date.now() + 15_000;
+
+  while (Date.now() < deadline) {
+    const output = getOutput();
+    if (predicate(output)) {
+      return;
+    }
+    if (child.exitCode !== null) {
+      throw new Error(`Rstack exited unexpectedly.\n${output}`);
+    }
+    await delay(100);
+  }
+
+  throw new Error(`Timed out waiting for Rstack output.\n${getOutput()}`);
+};
+
+const createConfig = (value: string) => `import { define } from 'rstack';
+
+console.log('RSTACK_CONFIG_VALUE:${value}');
+
+define.app({
+  server: {
+    port: Number(process.env.PORT),
+  },
+});
+`;
+
+test('should restart the dev server when Rstack config changes', async () => {
+  const cwd = await mkdtemp(path.join(import.meta.dirname, 'temp-'));
+  const configPath = path.join(cwd, 'rstack.config.ts');
+  await mkdir(path.join(cwd, 'src'));
+  await writeFile(path.join(cwd, 'src/index.js'), 'console.log("hello");\n');
+  await writeFile(configPath, createConfig('initial'));
+
+  const child = spawn(process.execPath, [RSTACK_BIN_PATH, 'dev'], {
+    cwd,
+    env: {
+      ...process.env,
+      NO_COLOR: '1',
+      PORT: String(await getRandomPort()),
+    },
+    stdio: ['ignore', 'pipe', 'pipe'],
+    windowsHide: true,
+  });
+  let output = '';
+  child.stdout?.on('data', (data) => {
+    output += data.toString();
+  });
+  child.stderr?.on('data', (data) => {
+    output += data.toString();
+  });
+  child.on('error', (error) => {
+    output += error.stack ?? error.message;
+  });
+
+  try {
+    await waitForOutput(
+      child,
+      () => output,
+      (logs) => logs.includes('built in'),
+    );
+    await writeFile(configPath, createConfig('updated'));
+    await waitForOutput(
+      child,
+      () => output,
+      (logs) => logs.includes('restarting server as rstack.config.ts changed'),
+    );
+    await waitForOutput(
+      child,
+      () => output,
+      (logs) => logs.includes('RSTACK_CONFIG_VALUE:updated'),
+    );
+    await waitForOutput(
+      child,
+      () => output,
+      (logs) => (logs.match(/built in/g) ?? []).length >= 2,
+    );
+  } finally {
+    await closeChild(child);
+    await rm(cwd, { recursive: true, force: true });
+  }
+}, 30_000);

packages/rstack/test/config/watch-app-config/appConfig.ts

@@ -0,0 +1,7 @@
+export const appConfig = {
+  dev: {
+    watchFiles: {
+      paths: 'extra.config.ts',
+    },
+  },
+};

packages/rstack/test/config/watch-app-config/index.test.ts

@@ -0,0 +1,35 @@
+import path from 'node:path';
+import { expect, test } from 'rstack/test';
+import { getConfigState } from '../../../src/config.ts';
+import loadRsbuildConfig from '../../../src/rsbuildConfig.ts';
+
+test('should watch the Rstack config and its dependencies', async () => {
+  const state = getConfigState();
+  const configPath = path.join(import.meta.dirname, 'rstack.config.ts');
+  const dependencyPath = path.join(import.meta.dirname, 'appConfig.ts');
+  state.configPath = configPath;
+
+  try {
+    if (typeof loadRsbuildConfig !== 'function') {
+      throw new Error('Expected the Rsbuild config to be a function.');
+    }
+
+    const config = await loadRsbuildConfig({
+      env: 'development',
+      command: 'dev',
+    });
+
+    expect(config.dev?.watchFiles).toEqual([
+      {
+        paths: 'extra.config.ts',
+      },
+      {
+        paths: [configPath, dependencyPath],
+        type: 'reload-server',
+      },
+    ]);
+  } finally {
+    state.configs = {};
+    delete state.configPath;
+  }
+});

packages/rstack/test/config/watch-app-config/rstack.config.ts

@@ -0,0 +1,4 @@
+import { define } from 'rstack';
+import { appConfig } from './appConfig.ts';
+
+define.app(appConfig);