feat(plugin-vite): hot-restart 🔥

packages/plugin/vite/src/Config.ts

@@ -9,6 +9,30 @@ export interface VitePluginBuildConfig {
    * Vite config file path.
    */
   config?: string;
+  /**
+   * By default, when any entry in `build` is rebuilt it will restart the Electron App.
+   * If you want to customize this behavior, you can pass a function and control it with the `args.restart` provided by the function.
+   */
+  restart?:
+    | false
+    | ((args: {
+        /**
+         * Restart the entire Electron App.
+         */
+        restart: () => void;
+        /**
+         * When a Preload script is rebuilt, users can refresh the Renderer process by `ViteDevServer` instead of restart the entire Electron App.
+         *
+         * @example
+         * ```ts
+         * renderer.find(({ config }) => config.name === 'main_window').reload();
+         * ```
+         */
+        renderer: {
+          config: VitePluginRendererConfig;
+          reload: () => void;
+        }[];
+      }) => void);
 }
 
 export interface VitePluginRendererConfig {

packages/plugin/vite/src/ViteConfig.ts

@@ -3,7 +3,7 @@ import path from 'node:path';
 import debug from 'debug';
 import { ConfigEnv, loadConfigFromFile, mergeConfig, UserConfig } from 'vite';
 
-import { VitePluginConfig } from './Config';
+import { VitePluginBuildConfig, VitePluginConfig, VitePluginRendererConfig } from './Config';
 import { externalBuiltins } from './util/plugins';
 
 const d = debug('electron-forge:plugin:vite:viteconfig');
@@ -14,10 +14,20 @@ const d = debug('electron-forge:plugin:vite:viteconfig');
  */
 export type LoadResult = Awaited<ReturnType<typeof loadConfigFromFile>>;
 
+export interface BuildConfig {
+  config: VitePluginBuildConfig;
+  vite: UserConfig;
+}
+
+export interface RendererConfig {
+  config: VitePluginRendererConfig;
+  vite: UserConfig;
+}
+
 export default class ViteConfigGenerator {
   private readonly baseDir: string;
 
-  private rendererConfigCache!: Promise<UserConfig>[];
+  private rendererConfigCache!: Promise<RendererConfig>[];
 
   constructor(private readonly pluginConfig: VitePluginConfig, private readonly projectDir: string, private readonly isProd: boolean) {
     this.baseDir = path.join(projectDir, '.vite');
@@ -43,20 +53,21 @@ export default class ViteConfigGenerator {
   async getDefines(): Promise<Record<string, string>> {
     const defines: Record<string, any> = {};
     const rendererConfigs = await this.getRendererConfig();
-    for (const [index, userConfig] of rendererConfigs.entries()) {
+    for (const [index, { vite: viteConfig }] of rendererConfigs.entries()) {
       const name = this.pluginConfig.renderer[index].name;
       if (!name) {
         continue;
       }
       const NAME = name.toUpperCase().replace(/ /g, '_');
+      // 🎯-①:
       // `server.port` is set in `launchRendererDevServers` in `VitePlugin.ts`.
-      defines[`${NAME}_VITE_DEV_SERVER_URL`] = this.isProd ? undefined : JSON.stringify(`http://localhost:${userConfig?.server?.port}`);
+      defines[`${NAME}_VITE_DEV_SERVER_URL`] = this.isProd ? undefined : JSON.stringify(`http://localhost:${viteConfig?.server?.port}`);
       defines[`${NAME}_VITE_NAME`] = JSON.stringify(name);
     }
     return defines;
   }
 
-  async getBuildConfig(watch = false): Promise<UserConfig[]> {
+  async getBuildConfig(watch = false): Promise<BuildConfig[]> {
     if (!Array.isArray(this.pluginConfig.build)) {
       throw new Error('"config.build" must be an Array');
     }
@@ -65,8 +76,9 @@ export default class ViteConfigGenerator {
     const plugins = [externalBuiltins()];
     const configs = this.pluginConfig.build
       .filter(({ entry, config }) => entry || config)
-      .map<Promise<UserConfig>>(async ({ entry, config }) => {
-        const defaultConfig: UserConfig = {
+      .map<Promise<BuildConfig>>(async (buildConfig) => {
+        const { entry, config } = buildConfig;
+        let viteConfig: UserConfig = {
           // Ensure that each build config loads the .env file correctly.
           mode: this.mode,
           build: {
@@ -90,21 +102,25 @@ export default class ViteConfigGenerator {
         };
         if (config) {
           const loadResult = await this.resolveConfig(config);
-          return mergeConfig(defaultConfig, loadResult?.config ?? {});
+          viteConfig = mergeConfig(viteConfig, loadResult?.config ?? {});
         }
-        return defaultConfig;
+        return {
+          config: buildConfig,
+          vite: viteConfig,
+        };
       });
 
     return await Promise.all(configs);
   }
 
-  async getRendererConfig(): Promise<UserConfig[]> {
+  async getRendererConfig(): Promise<RendererConfig[]> {
     if (!Array.isArray(this.pluginConfig.renderer)) {
       throw new Error('"config.renderer" must be an Array');
     }
 
-    const configs = (this.rendererConfigCache ??= this.pluginConfig.renderer.map(async ({ name, config }) => {
-      const defaultConfig: UserConfig = {
+    const configs = (this.rendererConfigCache ??= this.pluginConfig.renderer.map(async (rendererConfig) => {
+      const { name, config } = rendererConfig;
+      let viteConfig: UserConfig = {
         // Ensure that each build config loads the .env file correctly.
         mode: this.mode,
         // Make sure that Electron can be loaded into the local file using `loadFile` after packaging.
@@ -115,7 +131,12 @@ export default class ViteConfigGenerator {
         clearScreen: false,
       };
       const loadResult = (await this.resolveConfig(config)) ?? { path: '', config: {}, dependencies: [] };
-      return mergeConfig(defaultConfig, loadResult.config);
+      viteConfig = mergeConfig(viteConfig, loadResult.config);
+
+      return {
+        config: rendererConfig,
+        vite: viteConfig,
+      };
     }));
 
     return await Promise.all(configs);

packages/plugin/vite/src/VitePlugin.ts

@@ -9,11 +9,20 @@ import debug from 'debug';
 import { RollupWatcher } from 'rollup';
 import { default as vite } from 'vite';
 
-import { VitePluginConfig } from './Config';
+import { VitePluginConfig, VitePluginRendererConfig } from './Config';
+import { hotRestart } from './util/plugins';
 import ViteConfigGenerator from './ViteConfig';
 
 const d = debug('electron-forge:plugin:vite');
 
+// 🎯-②:
+// Make sure the `server` is bound to the `renderer` in forge.config.ts,
+// It's used to refresh the Renderer process, which one can be determined according to `config`.
+export interface RendererConfigWithServer {
+  config: VitePluginRendererConfig;
+  server: vite.ViteDevServer;
+}
+
 export default class VitePlugin extends PluginBase<VitePluginConfig> {
   private static alreadyStarted = false;
 
@@ -31,7 +40,7 @@ export default class VitePlugin extends PluginBase<VitePluginConfig> {
 
   private watchers: RollupWatcher[] = [];
 
-  private servers: vite.ViteDevServer[] = [];
+  public renderers: RendererConfigWithServer[] = [];
 
   init = (dir: string): void => {
     this.setDirectories(dir);
@@ -105,26 +114,27 @@ export default class VitePlugin extends PluginBase<VitePluginConfig> {
 
   // Main process, Preload scripts and Worker process, etc.
   build = async (watch = false): Promise<void> => {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const that = this;
     await Promise.all(
       (
         await this.configGenerator.getBuildConfig(watch)
-      ).map((userConfig) => {
+      ).map(({ config, vite: viteConfig }) => {
         return new Promise<void>((resolve, reject) => {
           vite
             .build({
               // Avoid recursive builds caused by users configuring @electron-forge/plugin-vite in Vite config file.
               configFile: false,
-              ...userConfig,
+              ...viteConfig,
               plugins: [
                 {
                   name: '@electron-forge/plugin-vite:start',
                   closeBundle() {
                     resolve();
-
-                    // TODO: implement hot-restart here
                   },
                 },
-                ...(userConfig.plugins ?? []),
+                ...(this.isProd ? [] : [hotRestart(config, that)]),
+                ...(viteConfig.plugins ?? []),
               ],
             })
             .then((result) => {
@@ -144,34 +154,38 @@ export default class VitePlugin extends PluginBase<VitePluginConfig> {
 
   // Renderer process
   buildRenderer = async (): Promise<void> => {
-    for (const userConfig of await this.configGenerator.getRendererConfig()) {
+    for (const { vite: viteConfig } of await this.configGenerator.getRendererConfig()) {
       await vite.build({
         configFile: false,
-        ...userConfig,
+        ...viteConfig,
       });
     }
   };
 
   launchRendererDevServers = async (): Promise<void> => {
-    for (const userConfig of await this.configGenerator.getRendererConfig()) {
+    for (const { config, vite: viteConfig } of await this.configGenerator.getRendererConfig()) {
       const viteDevServer = await vite.createServer({
         configFile: false,
-        ...userConfig,
+        ...viteConfig,
       });
 
       await viteDevServer.listen();
       viteDevServer.printUrls();
 
-      this.servers.push(viteDevServer);
+      this.renderers.push({
+        config,
+        server: viteDevServer,
+      });
 
       if (viteDevServer.httpServer) {
+        // 🎯-①:
         // Make suee that `getDefines` in VitePlugin.ts gets the correct `server.port`. (#3198)
         const addressInfo = viteDevServer.httpServer.address();
         const isAddressInfo = (x: any): x is AddressInfo => x?.address;
 
         if (isAddressInfo(addressInfo)) {
-          userConfig.server ??= {};
-          userConfig.server.port = addressInfo.port;
+          viteConfig.server ??= {};
+          viteConfig.server.port = addressInfo.port;
         }
       }
     }
@@ -186,11 +200,11 @@ export default class VitePlugin extends PluginBase<VitePluginConfig> {
       }
       this.watchers = [];
 
-      for (const server of this.servers) {
+      for (const renderer of this.renderers) {
         d('cleaning http server');
-        server.close();
+        renderer.server.close();
       }
-      this.servers = [];
+      this.renderers = [];
     }
     if (err) console.error(err.stack);
     // Why: This is literally what the option says to do.

packages/plugin/vite/src/util/plugins.ts

@@ -1,5 +1,7 @@
 import { builtinModules } from 'node:module';
 
+import type { VitePluginBuildConfig } from '../Config';
+import type { RendererConfigWithServer } from '../VitePlugin';
 import type { Plugin } from 'vite';
 
 /**
@@ -33,3 +35,48 @@ export function externalBuiltins() {
     },
   };
 }
+
+/**
+ * Hot restart App during development for better DX.
+ */
+export function hotRestart(
+  config: VitePluginBuildConfig,
+  // For `VitePluginBuildConfig['restart']` callback args.
+  context: { renderers: RendererConfigWithServer[] }
+) {
+  const restart = () => {
+    // https://github.com/electron/forge/blob/v6.1.1/packages/api/core/src/api/start.ts#L204-L211
+    process.stdin.emit('data', 'rs');
+  };
+  // Avoid first start, it's stated by forge.
+  let isFirstStart: undefined | true;
+
+  return <Plugin>{
+    name: '@electron-forge/plugin-vite:hot-restart',
+    closeBundle() {
+      if (isFirstStart == null) {
+        isFirstStart = true;
+        return;
+      }
+      if (config.restart === false) {
+        return;
+      }
+      if (typeof config.restart === 'function') {
+        // Leave it to the user to decide whether to restart.
+        config.restart({
+          restart,
+          renderer: context.renderers.map((renderer) => ({
+            // 🎯-②:
+            // Users can decide which Renderer process to refresh according to `config`.
+            config: renderer.config,
+            reload() {
+              renderer.server.ws.send({ type: 'full-reload' });
+            },
+          })),
+        });
+      } else {
+        restart();
+      }
+    },
+  };
+}

packages/plugin/vite/test/ViteConfig_spec.ts

@@ -15,20 +15,23 @@ describe('ViteConfigGenerator', () => {
     const generator = new ViteConfigGenerator(config, '', false);
     const servers: ViteDevServer[] = [];
 
-    for (const userConfig of await generator.getRendererConfig()) {
+    for (const { vite: viteConfig } of await generator.getRendererConfig()) {
       const viteDevServer = await vite.createServer({
         configFile: false,
-        ...userConfig,
+        optimizeDeps: {
+          disabled: true,
+        },
+        ...viteConfig,
       });
 
       await viteDevServer.listen();
-      viteDevServer.printUrls();
+      // viteDevServer.printUrls();
       servers.push(viteDevServer);
 
       // Make suee that `getDefines` in VitePlugin.ts gets the correct `server.port`. (#3198)
       const addressInfo = viteDevServer.httpServer!.address() as AddressInfo;
-      userConfig.server ??= {};
-      userConfig.server.port = addressInfo.port;
+      viteConfig.server ??= {};
+      viteConfig.server.port = addressInfo.port;
     }
 
     const define = await generator.getDefines();
@@ -50,15 +53,15 @@ describe('ViteConfigGenerator', () => {
       renderer: [],
     } as VitePluginConfig;
     const generator = new ViteConfigGenerator(config, '', true);
-    const buildConfig = (await generator.getBuildConfig())[0];
-    expect(buildConfig).deep.equal({
+    const { vite: viteConfig } = (await generator.getBuildConfig())[0];
+    expect(viteConfig).deep.equal({
       mode: 'production',
       build: {
         lib: {
           entry: 'foo.js',
           formats: ['cjs'],
           // shims
-          fileName: (buildConfig.build?.lib as any)?.fileName,
+          fileName: (viteConfig.build?.lib as any)?.fileName,
         },
         emptyOutDir: false,
         outDir: path.join('.vite', 'build'),
@@ -67,7 +70,7 @@ describe('ViteConfigGenerator', () => {
       clearScreen: false,
       define: {},
       // shims
-      plugins: [buildConfig.plugins?.[0]],
+      plugins: viteConfig.plugins,
     } as UserConfig);
   });
 
@@ -77,8 +80,8 @@ describe('ViteConfigGenerator', () => {
     } as VitePluginConfig;
     const generator = new ViteConfigGenerator(config, '', false);
     const configs = await generator.getRendererConfig();
-    for (const [index, rendererConfig] of configs.entries()) {
-      expect(rendererConfig).deep.equal({
+    for (const [index, { vite: viteConfig }] of configs.entries()) {
+      expect(viteConfig).deep.equal({
         mode: 'development',
         base: './',
         build: {

packages/plugin/vite/test/fixture/lib-entry.ts

@@ -0,0 +1,3 @@
+export default function booststrap() {
+  console.log('App bootstrap.');
+}