@electron-forge/plugin-vite 6.1.0 → 6.2.0

package/src/VitePlugin.ts

@@ -0,0 +1,202 @@
+import fs from 'node:fs/promises';
+import { AddressInfo } from 'node:net';
+import path from 'node:path';
+
+import { namedHookWithTaskFn, PluginBase } from '@electron-forge/plugin-base';
+import { ForgeMultiHookMap, StartResult } from '@electron-forge/shared-types';
+import debug from 'debug';
+// eslint-disable-next-line node/no-extraneous-import
+import { RollupWatcher } from 'rollup';
+import { default as vite } from 'vite';
+
+import { VitePluginConfig } from './Config';
+import ViteConfigGenerator from './ViteConfig';
+
+const d = debug('electron-forge:plugin:vite');
+
+export default class VitePlugin extends PluginBase<VitePluginConfig> {
+  private static alreadyStarted = false;
+
+  public name = 'vite';
+
+  private isProd = false;
+
+  // The root of the Electron app
+  private projectDir!: string;
+
+  // Where the Vite output is generated. Usually `${projectDir}/.vite`
+  private baseDir!: string;
+
+  private configGeneratorCache!: ViteConfigGenerator;
+
+  private watchers: RollupWatcher[] = [];
+
+  private servers: vite.ViteDevServer[] = [];
+
+  init = (dir: string): void => {
+    this.setDirectories(dir);
+
+    d('hooking process events');
+    process.on('exit', (_code) => this.exitHandler({ cleanup: true }));
+    process.on('SIGINT' as NodeJS.Signals, (_signal) => this.exitHandler({ exit: true }));
+  };
+
+  private setDirectories(dir: string): void {
+    this.projectDir = dir;
+    this.baseDir = path.join(dir, '.vite');
+  }
+
+  private get configGenerator(): ViteConfigGenerator {
+    return (this.configGeneratorCache ??= new ViteConfigGenerator(this.config, this.projectDir, this.isProd));
+  }
+
+  getHooks = (): ForgeMultiHookMap => {
+    return {
+      prePackage: [
+        namedHookWithTaskFn<'prePackage'>(async () => {
+          this.isProd = true;
+          await fs.rm(this.baseDir, { recursive: true, force: true });
+
+          await Promise.all([this.build(), this.buildRenderer()]);
+        }, 'Building vite bundles'),
+      ],
+      postStart: async (_config, child) => {
+        d('hooking electron process exit');
+        child.on('exit', () => {
+          if (child.restarted) return;
+          this.exitHandler({ cleanup: true, exit: true });
+        });
+      },
+    };
+  };
+
+  startLogic = async (): Promise<StartResult> => {
+    if (VitePlugin.alreadyStarted) return false;
+    VitePlugin.alreadyStarted = true;
+
+    await fs.rm(this.baseDir, { recursive: true, force: true });
+
+    return {
+      tasks: [
+        {
+          title: 'Launching dev servers for renderer process code',
+          task: async () => {
+            await this.launchRendererDevServers();
+          },
+          options: {
+            persistentOutput: true,
+            showTimer: true,
+          },
+        },
+        // The main process depends on the `server.port` of the renderer process, so the renderer process is run first.
+        {
+          title: 'Compiling main process code',
+          task: async () => {
+            await this.build(true);
+          },
+          options: {
+            showTimer: true,
+          },
+        },
+      ],
+      result: false,
+    };
+  };
+
+  // Main process, Preload scripts and Worker process, etc.
+  build = async (watch = false): Promise<void> => {
+    await Promise.all(
+      (
+        await this.configGenerator.getBuildConfig(watch)
+      ).map((userConfig) => {
+        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,
+              plugins: [
+                {
+                  name: '@electron-forge/plugin-vite:start',
+                  closeBundle() {
+                    resolve();
+
+                    // TODO: implement hot-restart here
+                  },
+                },
+                ...(userConfig.plugins ?? []),
+              ],
+            })
+            .then((result) => {
+              const isWatcher = (x: any): x is RollupWatcher => typeof x?.close === 'function';
+
+              if (isWatcher(result)) {
+                this.watchers.push(result);
+              }
+
+              return result;
+            })
+            .catch(reject);
+        });
+      })
+    );
+  };
+
+  // Renderer process
+  buildRenderer = async (): Promise<void> => {
+    for (const userConfig of await this.configGenerator.getRendererConfig()) {
+      await vite.build({
+        configFile: false,
+        ...userConfig,
+      });
+    }
+  };
+
+  launchRendererDevServers = async (): Promise<void> => {
+    for (const userConfig of await this.configGenerator.getRendererConfig()) {
+      const viteDevServer = await vite.createServer({
+        configFile: false,
+        ...userConfig,
+      });
+
+      await viteDevServer.listen();
+      viteDevServer.printUrls();
+
+      this.servers.push(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;
+        }
+      }
+    }
+  };
+
+  exitHandler = (options: { cleanup?: boolean; exit?: boolean }, err?: Error): void => {
+    d('handling process exit with:', options);
+    if (options.cleanup) {
+      for (const watcher of this.watchers) {
+        d('cleaning vite watcher');
+        watcher.close();
+      }
+      this.watchers = [];
+
+      for (const server of this.servers) {
+        d('cleaning http server');
+        server.close();
+      }
+      this.servers = [];
+    }
+    if (err) console.error(err.stack);
+    // Why: This is literally what the option says to do.
+    // eslint-disable-next-line no-process-exit
+    if (options.exit) process.exit();
+  };
+}
+
+export { VitePlugin };

package/src/util/plugins.ts

@@ -0,0 +1,35 @@
+import { builtinModules } from 'node:module';
+
+import type { Plugin } from 'vite';
+
+/**
+ * `electron` and Node.js built-in modules should always be externalize.
+ */
+export function externalBuiltins() {
+  return <Plugin>{
+    name: '@electron-forge/plugin-vite:external-builtins',
+    config(config) {
+      const nativeModules = builtinModules.filter((e) => !e.startsWith('_'));
+      const builtins = ['electron', ...nativeModules, ...nativeModules.map((m) => `node:${m}`)];
+
+      config.build ??= {};
+      config.build.rollupOptions ??= {};
+
+      let external = config.build.rollupOptions.external;
+      if (Array.isArray(external) || typeof external === 'string' || external instanceof RegExp) {
+        external = builtins.concat(external as string[]);
+      } else if (typeof external === 'function') {
+        const original = external;
+        external = function (source, importer, isResolved) {
+          if (builtins.includes(source)) {
+            return true;
+          }
+          return original(source, importer, isResolved);
+        };
+      } else {
+        external = builtins;
+      }
+      config.build.rollupOptions.external = external;
+    },
+  };
+}

package/test/ViteConfig_spec.ts

@@ -0,0 +1,91 @@
+import { AddressInfo } from 'node:net';
+import path from 'node:path';
+
+import { expect } from 'chai';
+import { UserConfig, default as vite, ViteDevServer } from 'vite';
+
+import { VitePluginConfig } from '../src/Config';
+import ViteConfigGenerator from '../src/ViteConfig';
+
+describe('ViteConfigGenerator', () => {
+  it('is `getDefines` will be gets auto-updated `server.port`', async () => {
+    const config = {
+      renderer: [{ name: 'foo_window' }, { name: 'bar_window' }],
+    } as VitePluginConfig;
+    const generator = new ViteConfigGenerator(config, '', false);
+    const servers: ViteDevServer[] = [];
+
+    for (const userConfig of await generator.getRendererConfig()) {
+      const viteDevServer = await vite.createServer({
+        configFile: false,
+        ...userConfig,
+      });
+
+      await viteDevServer.listen();
+      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;
+    }
+
+    const define = await generator.getDefines();
+
+    for (const server of servers) {
+      server.close();
+    }
+    servers.length = 0;
+
+    expect(define.FOO_WINDOW_VITE_DEV_SERVER_URL).equal('"http://localhost:5173"');
+    expect(define.FOO_WINDOW_VITE_NAME).equal('"foo_window"');
+    expect(define.BAR_WINDOW_VITE_DEV_SERVER_URL).equal('"http://localhost:5174"');
+    expect(define.BAR_WINDOW_VITE_NAME).equal('"bar_window"');
+  });
+
+  it('getBuildConfig', async () => {
+    const config = {
+      build: [{ entry: 'foo.js' }],
+      renderer: [],
+    } as VitePluginConfig;
+    const generator = new ViteConfigGenerator(config, '', true);
+    const buildConfig = (await generator.getBuildConfig())[0];
+    expect(buildConfig).deep.equal({
+      mode: 'production',
+      build: {
+        lib: {
+          entry: 'foo.js',
+          formats: ['cjs'],
+          // shims
+          fileName: (buildConfig.build?.lib as any)?.fileName,
+        },
+        emptyOutDir: false,
+        outDir: path.join('.vite', 'build'),
+        watch: undefined,
+      },
+      clearScreen: false,
+      define: {},
+      // shims
+      plugins: [buildConfig.plugins?.[0]],
+    } as UserConfig);
+  });
+
+  it('getRendererConfig', async () => {
+    const config = {
+      renderer: [{ name: 'foo_window' }, { name: 'bar_window' }],
+    } as VitePluginConfig;
+    const generator = new ViteConfigGenerator(config, '', false);
+    const configs = await generator.getRendererConfig();
+    for (const [index, rendererConfig] of configs.entries()) {
+      expect(rendererConfig).deep.equal({
+        mode: 'development',
+        base: './',
+        build: {
+          outDir: path.join('.vite', 'renderer', config.renderer[index].name),
+        },
+        clearScreen: false,
+      } as UserConfig);
+    }
+  });
+});

package/test/util/plugins_spec.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { builtinModules } from 'module';
+
+import { expect } from 'chai';
+// eslint-disable-next-line node/no-extraneous-import
+import { ExternalOption } from 'rollup';
+import { resolveConfig } from 'vite';
+
+import { externalBuiltins } from '../../src/util/plugins';
+
+describe('plugins', () => {
+  it('externalBuiltins', async () => {
+    const nativeModules = builtinModules.filter((e) => !e.startsWith('_'));
+    const builtins: any[] = ['electron', ...nativeModules, ...nativeModules.map((m) => `node:${m}`)];
+    const getConfig = (external: ExternalOption) =>
+      resolveConfig(
+        {
+          configFile: false,
+          build: {
+            rollupOptions: {
+              external,
+            },
+          },
+          plugins: [externalBuiltins()],
+        },
+        'build'
+      );
+
+    const external_string: ExternalOption = 'electron';
+    const external_string2 = (await getConfig(external_string))!.build!.rollupOptions!.external;
+    expect(external_string2).deep.equal(builtins.concat(external_string));
+
+    const external_array: ExternalOption = ['electron'];
+    const external_array2 = (await getConfig(external_array))!.build!.rollupOptions!.external;
+    expect(external_array2).deep.equal(builtins.concat(external_array));
+
+    const external_regexp: ExternalOption = /electron/;
+    const external_regexp2 = (await getConfig(external_regexp))!.build!.rollupOptions!.external;
+    expect(external_regexp2).deep.equal(builtins.concat(external_regexp));
+
+    const external_function: ExternalOption = (source) => ['electron'].includes(source);
+    const external_function2 = (await getConfig(external_function))!.build!.rollupOptions!.external;
+    expect((external_function2 as (source: string) => boolean)('electron')).true;
+  });
+});