Build: Migration to VIteJS (#83)

Author: egor-xyz

.stylelintignore

@@ -1,11 +1,11 @@
 import type { ForgeConfig } from '@electron-forge/shared-types';
-import { WebpackPlugin } from '@electron-forge/plugin-webpack';
 import { MakerZIP } from '@electron-forge/maker-zip';
 import { PublisherGithub } from '@electron-forge/publisher-github';
+import { VitePlugin } from '@electron-forge/plugin-vite';
+import { FusesPlugin } from '@electron-forge/plugin-fuses';
+import { FuseV1Options, FuseVersion } from '@electron/fuses';
 import { config } from 'dotenv';
 
-import { mainConfig } from './webpack.main.config';
-import { rendererConfig } from './webpack.renderer.config';
 import { version } from './package.json';
 
 config();
@@ -15,12 +15,12 @@ const isDev = process.env.IS_DEV === 'true';
 const forgeConfig: ForgeConfig = {
   makers: [new MakerZIP({}, ['darwin'])],
   packagerConfig: {
+    asar: true,
     appBundleId: 'app.devkitty',
     appCategoryType: 'public.app-category.developer-tools',
-    appCopyright: 'Copyright © 2023 Devkitty',
+    appCopyright: 'Copyright © 2024 Devkitty',
     appVersion: version,
     executableName: 'Devkitty',
-    // extendInfo: './extend.plist',
     icon: './icons/icon',
     name: 'Devkitty',
     osxNotarize: !isDev
@@ -40,21 +40,37 @@ const forgeConfig: ForgeConfig = {
     overwrite: true
   },
   plugins: [
-    new WebpackPlugin({
-      mainConfig,
-      renderer: {
-        config: rendererConfig,
-        entryPoints: [
-          {
-            html: './src/rendered/index.html',
-            js: './src/rendered/index.tsx',
-            name: 'main_window',
-            preload: {
-              js: './src/main/ipcs/preload.ts'
-            }
-          }
-        ]
-      }
+    new VitePlugin({
+      // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
+      // If you are familiar with Vite configuration, it will look really familiar.
+      build: [
+        {
+          config: 'vite.main.config.ts',
+          // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
+          entry: 'src/main/app.ts'
+        },
+        {
+          config: 'vite.preload.config.ts',
+          entry: 'src/main/ipcs/preload.ts'
+        }
+      ],
+      renderer: [
+        {
+          config: 'vite.renderer.config.ts',
+          name: 'main_window'
+        }
+      ]
+    }),
+    // Fuses are used to enable/disable various Electron functionality
+    // at package time, before code signing the application
+    new FusesPlugin({
+      version: FuseVersion.V1,
+      [FuseV1Options.RunAsNode]: false,
+      [FuseV1Options.EnableCookieEncryption]: true,
+      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
+      [FuseV1Options.EnableNodeCliInspectArguments]: false,
+      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
+      [FuseV1Options.OnlyLoadAppFromAsar]: true
     })
   ],
   publishers: [

.stylelintrc.yml

@@ -0,0 +1,31 @@
+export {}; // Make this a module
+
+declare global {
+  // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Vite
+  // plugin that tells the Electron app where to look for the Vite-bundled app code (depending on
+  // whether you're running in development or production).
+  const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
+  const MAIN_WINDOW_VITE_NAME: string;
+
+  namespace NodeJS {
+    interface Process {
+      // Used for hot reload after preload scripts.
+      viteDevServers: Record<string, import('vite').ViteDevServer>;
+    }
+  }
+
+  type VitePluginConfig = ConstructorParameters<typeof import('@electron-forge/plugin-vite').VitePlugin>[0];
+
+  interface VitePluginRuntimeKeys {
+    VITE_DEV_SERVER_URL: `${string}_VITE_DEV_SERVER_URL`;
+    VITE_NAME: `${string}_VITE_NAME`;
+  }
+}
+
+declare module 'vite' {
+  interface ConfigEnv<K extends keyof VitePluginConfig = keyof VitePluginConfig> {
+    root: string;
+    forgeConfig: VitePluginConfig;
+    forgeConfigSelf: VitePluginConfig[K][number];
+  }
+}

forge.config.ts

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Devkitty</title>
+  </head>
+  <body>
+    <div id="app" />
+    <script
+      type="module"
+      src="/src/rendered/index.tsx"
+    ></script>
+  </body>
+</html>