Attempt to setup vite in electron

Author: RobbieTheWagner

electron-app/.gitignore

@@ -89,6 +89,7 @@ typings/
 dist/
 
 # Electron-Forge
+.vite/
 out/
 
 # Ember build

electron-app/forge.config.js electron-app/forge.config.tselectron-app/forge.config.js renamed to electron-app/forge.config.ts

@@ -1,7 +1,15 @@
-module.exports = {
+import { MakerDeb } from '@electron-forge/maker-deb';
+import { MakerSquirrel } from '@electron-forge/maker-squirrel';
+import { MakerZIP } from '@electron-forge/maker-zip';
+import { FusesPlugin } from '@electron-forge/plugin-fuses';
+import { VitePlugin } from '@electron-forge/plugin-vite';
+import type { ForgeConfig } from '@electron-forge/shared-types';
+import { FuseV1Options, FuseVersion } from '@electron/fuses';
+
+const config: ForgeConfig = {
   packagerConfig: {
     asar: true,
-    darwinDarkModeSupport: 'true',
+    darwinDarkModeSupport: true,
     icon: 'electron-app/resources/icon',
     name: 'Swach',
     packageManager: 'pnpm',
@@ -24,8 +32,8 @@ module.exports = {
     },
     osxNotarize: {
       tool: 'notarytool',
-      appleId: process.env['APPLE_ID'],
-      appleIdPassword: process.env['APPLE_ID_PASSWORD'],
+      appleId: process.env['APPLE_ID'] as string,
+      appleIdPassword: process.env['APPLE_ID_PASSWORD'] as string,
       teamId: '779MXKT6B5',
     },
     protocols: [
@@ -112,6 +120,42 @@ module.exports = {
       platforms: ['darwin'],
     },
   ],
+  plugins: [
+    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: [
+        {
+          // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
+          entry: 'src/main.ts',
+          config: 'vite.main.config.ts',
+          target: 'main',
+        },
+        {
+          entry: 'electron-app/src/preload.ts',
+          config: 'vite.preload.config.ts',
+          target: 'preload',
+        },
+      ],
+      renderer: [
+        {
+          name: 'main_window',
+          config: 'vite.renderer.config.ts',
+        },
+      ],
+    }),
+    // 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: [
   //   {
   //     name: '@electron-forge/publisher-snapcraft',
@@ -122,3 +166,5 @@ module.exports = {
   //   },
   // ],
 };
+
+export default config;

electron-app/forge.env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@electron-forge/plugin-vite/forge-vite-env" />

electron-app/package.json

@@ -3,13 +3,14 @@
   "productName": "swach",
   "version": "1.2.15",
   "description": "A robust color management tool for the modern age.",
-  "main": "src/index.js",
+  "main": ".vite/build/main.js",
+  "type": "module",
   "scripts": {
     "start": "electron-forge start",
     "package": "electron-forge package",
     "make": "electron-forge make",
     "publish": "electron-forge publish",
-    "lint": "echo \"No linting configured\""
+    "lint": "eslint --ext .ts,.tsx ."
   },
   "keywords": [],
   "author": {
@@ -39,11 +40,20 @@
     "@electron-forge/maker-snap": "^7.8.3",
     "@electron-forge/maker-squirrel": "^7.8.3",
     "@electron-forge/maker-zip": "^7.8.3",
+    "@electron-forge/plugin-auto-unpack-natives": "^7.8.3",
+    "@electron-forge/plugin-fuses": "^7.8.3",
+    "@electron-forge/plugin-vite": "^7.8.3",
+    "@electron/fuses": "^1.8.0",
     "@electron-forge/publisher-snapcraft": "^7.8.3",
     "@sentry/cli": "^2.51.1",
+    "@types/electron-squirrel-startup": "^1.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "electron": "^33.4.11",
     "electron-debug": "^3.2.0",
-    "electron-download": "^4.1.1"
+    "electron-download": "^4.1.1",
+    "typescript": "~4.5.4",
+    "vite": "^5.4.19"
   },
   "packageManager": "pnpm@10.11.0",
   "engines": {

electron-app/src/auto-update.js electron-app/src/auto-update.tselectron-app/src/auto-update.js renamed to electron-app/src/auto-update.ts

@@ -1,6 +1,6 @@
-const { autoUpdater, dialog } = require('electron');
+import { autoUpdater, dialog } from 'electron';
 
-const setupUpdateServer = (app) => {
+export const setupUpdateServer = (app) => {
   const server = 'https://download.swach.io';
   const feed = `${server}/update/${process.platform}/${app.getVersion()}`;
 
@@ -39,7 +39,3 @@ const setupUpdateServer = (app) => {
 
   return autoUpdater;
 };
-
-module.exports = {
-  setupUpdateServer,
-};

electron-app/src/browsers/index.js

@@ -1,5 +1,5 @@
-'use strict';
+import windowFactory from './window.js';
 
-module.exports = (dirname) => ({
-  settings: require('./window')(dirname, 'settings', 'Settings'),
+export default (dirname) => ({
+  settings: windowFactory(dirname, 'settings', 'Settings'),
 });

electron-app/src/browsers/window.js

@@ -1,30 +1,18 @@
-'use strict';
+// window.js (ESM)
+import { BrowserWindow } from 'electron';
 
-const { BrowserWindow } = require('electron');
-
-module.exports = (dirname, route, title) => {
+export default (dirname, route, title) => {
+  /** @type {import('electron').BrowserWindow | undefined} */
   let win;
 
-  /**
-   * [init]
-   * @param {boolean} force [force launching new window]
-   * @return {void} [new Colorpicker]
-   */
-  let init = () => {
-    if (win === null || win === undefined) createWindow();
+  const init = () => {
+    if (win == null) createWindow();
     else win.show();
-
-    // win.openDevTools();
+    // win.webContents.openDevTools();
   };
 
-  /**
-   * [createWindow - create new Window]
-   * @param  {int} width  [width of the window]
-   * @param  {int} height [height of the window]
-   * @return {void}
-   */
-  let createWindow = () => {
-    let options = {
+  const createWindow = () => {
+    const options = {
       width: 700,
       height: 500,
       minWidth: 460,
@@ -39,22 +27,20 @@ module.exports = (dirname, route, title) => {
     };
 
     win = new BrowserWindow(options);
+
     const windowRoute = `serve://dist#/${route}`;
     win.loadURL(windowRoute);
 
     win.on('closed', () => {
       win = undefined;
     });
 
-    win.on('page-title-updated', function (e) {
+    win.on('page-title-updated', (e) => {
       e.preventDefault();
     });
   };
 
-  let getWindow = () => win;
+  const getWindow = () => win;
 
-  return {
-    init: init,
-    getWindow: getWindow,
-  };
+  return { init, getWindow };
 };

electron-app/src/color-picker.js electron-app/src/color-picker.tselectron-app/src/color-picker.js renamed to electron-app/src/color-picker.ts

@@ -1,4 +1,4 @@
-async function launchPicker(mb, type = 'global') {
+export async function launchPicker(mb, type = 'global') {
   mb.hideWindow();
 
   const color = await mb.window.webContents.executeJavaScript(

electron-app/src/dialogs.js electron-app/src/dialogs.tselectron-app/src/dialogs.js renamed to electron-app/src/dialogs.ts

@@ -1,6 +1,6 @@
-const { app, dialog } = require('electron');
+import { app, dialog } from 'electron';
 
-function noUpdatesAvailableDialog() {
+export function noUpdatesAvailableDialog() {
   const dialogOpts = {
     type: 'info',
     title: 'Already up to date',
@@ -11,7 +11,7 @@ function noUpdatesAvailableDialog() {
   return dialog.showMessageBox(dialogOpts);
 }
 
-function restartDialog() {
+export function restartDialog() {
   const dialogOpts = {
     type: 'question',
     buttons: ['Restart', 'Later'],
@@ -28,8 +28,3 @@ function restartDialog() {
     }
   });
 }
-
-module.exports = {
-  noUpdatesAvailableDialog,
-  restartDialog,
-};

electron-app/src/handle-file-urls.js electron-app/src/handle-file-urls.tselectron-app/src/handle-file-urls.js renamed to electron-app/src/handle-file-urls.ts

@@ -1,28 +1,27 @@
-const fs = require('fs');
-const path = require('path');
-const { fileURLToPath, pathToFileURL } = require('url');
-const { promisify } = require('util');
-
-const access = promisify(fs.access);
+import { access } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { net, protocol } from 'electron';
 
 //
 // Patch asset loading -- Ember apps use absolute paths to reference their
 // assets, e.g. `<img src="/images/foo.jpg">`. When the current URL is a `file:`
 // URL, that ends up resolving to the absolute filesystem path `/images/foo.jpg`
 // rather than being relative to the root of the Ember app. So, we intercept
-// `file:` URL request and look to see if they point to an asset when
+// `file:` URL requests and look to see if they point to an asset when
 // interpreted as being relative to the root of the Ember app. If so, we return
 // that path, and if not we leave them as-is, as their absolute path.
 //
-async function getAssetPath(emberAppDir, url) {
-  let urlPath = fileURLToPath(url);
+export async function getAssetPath(emberAppDir: string, url: string) {
+  const urlPath = fileURLToPath(url);
   // Get the root of the path -- should be '/' on MacOS or something like
-  // 'C:\' on Windows
-  let { root } = path.parse(urlPath);
+  // 'C:\\' on Windows
+  const { root } = path.parse(urlPath);
   // Get the relative path from the root to the full path
-  let relPath = path.relative(root, urlPath);
+  const relPath = path.relative(root, urlPath);
   // Join the relative path with the Ember app directory
-  let appPath = path.join(emberAppDir, relPath);
+  const appPath = path.join(emberAppDir, relPath);
+
   try {
     await access(appPath);
     return appPath;
@@ -31,14 +30,12 @@ async function getAssetPath(emberAppDir, url) {
   }
 }
 
-module.exports = function handleFileURLs(emberAppDir) {
-  const { protocol, net } = require('electron');
-
+export default function handleFileURLs(emberAppDir: string) {
   if (protocol.handle) {
     // Electron >= 25
     protocol.handle('file', async ({ url }) => {
-      let path = await getAssetPath(emberAppDir, url);
-      return net.fetch(pathToFileURL(path), {
+      const assetPath = await getAssetPath(emberAppDir, url);
+      return net.fetch(pathToFileURL(assetPath), {
         bypassCustomProtocolHandlers: true,
       });
     });
@@ -48,6 +45,4 @@ module.exports = function handleFileURLs(emberAppDir) {
       callback(await getAssetPath(emberAppDir, url));
     });
   }
-};
-
-module.exports.getAssetPath = getAssetPath;
+}