fix: Fix vite build configurations

.prettierrc.js

@@ -2,7 +2,7 @@
  * This file defines specific rules for Prettier. It adjusts their default settings.
  * We recommend these settings if your lab does not have specific style standards.
  */
-export default {
+module.exports = {
   printWidth: 100, // Sets the maximum line size to 100 (default is 80)
   quoteProps: "as-needed", // Add quotes around props as needed
   trailingComma: "es5", // Add a trailing comma to all es5 modules

forge.config.js → forge.config.mjs

@@ -5,7 +5,9 @@ export default {
   packagerConfig: {
     asar: true,
     icon: "assets/icons/icon",
+    osxSign: {}, // TODO: From @eldu, confirm it's needed?
   },
+  rebuildConfig: {},
   makers: [
     {
       // Windows Distribution
@@ -32,10 +34,6 @@ export default {
         },
       },
     },
-    {
-      // zip files
-      name: "@electron-forge/maker-zip",
-    },
   ],
   plugins: [
     { name: "@electron-forge/plugin-auto-unpack-natives", config: {} },
@@ -44,16 +42,11 @@ export default {
       config: {
         build: [
           // Build files that use the main config
-          { entry: "src/Electron/main.js", config: "vite.main.config.js" },
+          { entry: "src/Electron/main.js", config: "vite.main.config.mjs" },
           // Build files that use the preload config
-          { entry: "src/Electron/preload.js", config: "vite.preload.config.js" },
+          { entry: "src/Electron/preload.js", config: "vite.preload.config.mjs" },
         ],
-        renderer: [{ name: "main_window", config: "vite.renderer.config.js" }],
-        define: {
-          // Add the package name and version to import.meta.env
-          "import.meta.env.PACKAGE_NAME": JSON.stringify(process.env.npm_package_name),
-          "import.meta.env.PACKAGE_VERSION": JSON.stringify(process.env.npm_package_version),
-        },
+        renderer: [{ name: "main_window", config: "vite.renderer.config.mjs" }],
       },
     },
     {
@@ -62,12 +55,11 @@ export default {
         version: FuseVersion.V1,
         [FuseV1Options.RunAsNode]: false, // Disables ELECTRON_RUN_AS_NODE
         [FuseV1Options.GrantFileProtocolExtraPrivileges]: true, // Grants the file protocol extra privileges (for the built application)
-        [FuseV1Options.EnableCookieEncryption]: false, // Disables cookie encryption
+        [FuseV1Options.EnableCookieEncryption]: true, // Enables cookie encryption
         [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false, // Disables the NODE_OPTIONS environment variable
         [FuseV1Options.EnableNodeCliInspectArguments]: false, // Disables the --inspect and --inspect-brk family of CLI options
         [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true, // Enforces validation of the app.asar archive on macOS
         [FuseV1Options.OnlyLoadAppFromAsar]: true, // Enforces that Electron will only load your app from "app.asar" instead of its normal search paths
-        [FuseV1Options.LoadBrowserProcessSpecificV8Snapshot]: true, // Loads V8 Snapshot from `browser_v8_context_snapshot.bin` for the browser process
       },
     },
   ],

package.json

@@ -18,8 +18,7 @@
   "repository": "https://github.com/brown-ccv/honeycomb",
   "license": "MIT",
   "private": true,
-  "type": "module",
-  "main": ".vite/build/main.cjs",
+  "main": ".vite/build/main.js",
   "homepage": ".",
   "dependencies": {
     "@electron-forge/plugin-fuses": "^7.4.0",
@@ -50,7 +49,6 @@
     "@electron-forge/maker-deb": "^7.4.0",
     "@electron-forge/maker-dmg": "^7.4.0",
     "@electron-forge/maker-squirrel": "^7.4.0",
-    "@electron-forge/maker-zip": "^7.4.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
     "@electron-forge/plugin-vite": "^7.4.0",
     "@inquirer/prompts": "^5.3.6",
@@ -70,7 +68,7 @@
     "vite": "^5.2.11"
   },
   "scripts": {
-    "start:browser": "vite --port 3000",
+    "start:browser": "vite -c vite.browser.config.js",
     "start:electron": "electron-forge start",
     "dev:home": "dotenv -e env/.env.home npm run start:electron",
     "dev:home:video": "dotenv -e env/.env.home dotenv -e env/.env.video npm run start:electron",
@@ -96,7 +94,7 @@
     "format": "prettier --write .",
     "lint": "eslint .",
     "prepare": "husky",
-    "postinstall": "node version.js"
+    "postinstall": "node version.mjs"
   },
   "browserslist": {
     "production": [

src/App/App.jsx

@@ -52,6 +52,13 @@ export default function App() {
         "Task Settings": SETTINGS,
       });
 
+      console.log(
+        "ENVIRONMENT",
+        import.meta.env.PACKAGE_NAME,
+        import.meta.env.PACKAGE_VERSION,
+        import.meta.env
+      );
+
       // If on desktop
       if (config.USE_ELECTRON) {
         // TODO @brown-ccv #443 : Pass NODE_ENV here as well

src/App/components/JsPsychExperiment.jsx

@@ -51,7 +51,9 @@ export default function JsPsychExperiment({
       tempJsPsych.data.addProperties({
         app_name: import.meta.env.PACKAGE_NAME,
         app_version: import.meta.env.PACKAGE_VERSION,
-        app_commit: await window.electronAPI.getCommit(),
+        // TODO: This does NOT work when using Firebase as electronAPI isn't set up
+        // TODO: Can I just get the file from here anyways?
+        // app_commit: await window.electronAPI.getCommit(),
         study_id: studyID,
         participant_id: participantID,
         start_date: startDate,

src/Electron/main.js

@@ -10,6 +10,7 @@ import _ from "lodash";
 import { getPort, sendToPort } from "./lib/serialport";
 
 /* global MAIN_WINDOW_VITE_DEV_SERVER_URL MAIN_WINDOW_VITE_NAME */
+// TODO: If we can get eslint to play nice we can remove this
 
 // TODO @RobertGemmaJr: Do more testing with the environment variables - are home/clinic being built correctly?
 // TODO @brown-ccv #192: Handle data writing to desktop in a utility process
@@ -296,7 +297,7 @@ function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
     icon: "./favicon.ico",
-    webPreferences: { preload: path.join(__dirname, "preload.cjs") },
+    webPreferences: { preload: path.join(__dirname, "preload.js") },
     width: 1500,
     height: 900,
     // TODO @brown-ccv: Settings for preventing the menu bar from ever showing up

vite.base.config.mjs

@@ -0,0 +1,82 @@
+import { builtinModules } from "node:module";
+import { defineConfig } from "vite";
+import pkg from "./package.json";
+
+/** Base vite config shared between electron-forge and the browser */
+export default defineConfig({
+  base: "./",
+  define: {
+    // TODO: Rename as __APP_NAME__ and __APP_VERSION__
+    "import.meta.env.PACKAGE_NAME": JSON.stringify(process.env.npm_package_name),
+    "import.meta.env.PACKAGE_VERSION": JSON.stringify(process.env.npm_package_version),
+  },
+  server: { port: 3000 },
+  resolve: { preserveSymlinks: true },
+  clearScreen: false,
+});
+
+/** The complete list of dependencies used in the project */
+export const external = [
+  // Builtin dependencies
+  ...["electron", ...builtinModules.map((m) => [m, `node:${m}`]).flat()],
+  // External dependencies
+  ...Object.keys(pkg.dependencies || {}),
+];
+
+/**
+ * Helper function for building the Vite config shared across the electron-forge processes
+ * @type {(env: import('vite').ConfigEnv<'build'>) => import('vite').UserConfig}
+ */
+export const getBuildConfig = ({ root, mode, command }) => {
+  return {
+    root,
+    mode,
+    build: {
+      // 🚧 Prevent multiple builds from interfering with each other.
+      emptyOutDir: false,
+      outDir: ".vite/build",
+      watch: command === "serve" ? {} : null,
+      minify: command === "build",
+    },
+    clearScreen: false,
+  };
+};
+
+/**
+ * Helper function for generating the keys used to build the "define" configuration
+ * @type {(names: string[]) => { [name: string]: VitePluginRuntimeKeys } }
+ */
+export const getDefineKeys = (names) => {
+  /** @type {{ [name: string]: VitePluginRuntimeKeys }} */
+  const define = {};
+  return names.reduce((acc, name) => {
+    const NAME = name.toUpperCase();
+    /** @type {VitePluginRuntimeKeys} */
+    const keys = {
+      VITE_DEV_SERVER_URL: `${NAME}_VITE_DEV_SERVER_URL`,
+      VITE_NAME: `${NAME}_VITE_NAME`,
+    };
+    return { ...acc, [name]: keys };
+  }, define);
+};
+
+/**
+ * Plugin that enables hot reloading and hot restarting in the electron-forge processes
+ * @type {(command: 'reload' | 'restart') => import('vite').Plugin}
+ */
+export const pluginHotRestart = (command) => {
+  return {
+    name: "@electron-forge/plugin-vite:hot-restart",
+    closeBundle() {
+      if (command === "reload") {
+        for (const server of Object.values(process.viteDevServers)) {
+          // Preload scripts hot reload.
+          server.ws.send({ type: "full-reload" });
+        }
+      } else {
+        // Main process hot restart: https://github.com/electron/forge/blob/v7.2.0/packages/api/core/src/api/start.ts#L216-L223
+        process.stdin.emit("data", "rs");
+      }
+    },
+  };
+};

vite.browser.config.js

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig, mergeConfig } from "vite";
+
+import baseConfig from "./vite.base.config.mjs";
+
+/** Vite configuration used when running in the browser */
+export default defineConfig(mergeConfig(baseConfig, defineConfig({ plugins: [react()] })));

vite.main.config.js → vite.main.config.mjs

@@ -1,34 +1,13 @@
 import { defineConfig, mergeConfig } from "vite";
+import { external, getBuildConfig, getDefineKeys, pluginHotRestart } from "./vite.base.config.mjs";
 
-import { getBuildConfig, getDefineKeys, external, pluginHotRestart } from "./vite.base.config.js";
-
-/** @type {(env: import('vite').ConfigEnv<'build'>) => Record<string, any>} */
-const getBuildDefine = (env) => {
-  const { command, forgeConfig } = env;
-
-  const names = forgeConfig.renderer.filter(({ name }) => name != null).map(({ name }) => name);
-  const defineKeys = getDefineKeys(names);
-  const define = Object.entries(defineKeys).reduce((acc, [name, keys]) => {
-    const { VITE_DEV_SERVER_URL, VITE_NAME } = keys;
-    const def = {
-      [VITE_DEV_SERVER_URL]:
-        command === "serve" ? JSON.stringify(process.env[VITE_DEV_SERVER_URL]) : undefined,
-      [VITE_NAME]: JSON.stringify(name),
-    };
-    return { ...acc, ...def };
-  }, {});
-
-  return define;
-};
-
-export default defineConfig((env) => {
-  return mergeConfig(getBuildConfig(env), {
+/** Vite configuration for the main process */
+export default defineConfig((env) =>
+  mergeConfig(getBuildConfig(env), {
     build: {
       lib: {
-        // Pulls the entries from forge.config.js
         entry: env.forgeConfigSelf.entry,
-        // The files are built in CJS format, update the extensions
-        fileName: () => "[name].cjs",
+        fileName: () => "[name].js",
         formats: ["cjs"],
       },
       rollupOptions: { external },
@@ -39,5 +18,21 @@ export default defineConfig((env) => {
       // Load the Node.js entry.
       mainFields: ["module", "jsnext:main", "jsnext"],
     },
-  });
-});
+  })
+);
+
+/** @type {(env: import('vite').ConfigEnv<'build'>) => Record<string, any>} */
+export const getBuildDefine = ({ command, forgeConfig }) => {
+  const names = forgeConfig.renderer.filter(({ name }) => name != null).map(({ name }) => name);
+  const defineKeys = getDefineKeys(names);
+
+  return Object.entries(defineKeys).reduce((acc, [name, keys]) => {
+    const { VITE_DEV_SERVER_URL, VITE_NAME } = keys;
+    const def = {
+      [VITE_DEV_SERVER_URL]:
+        command === "serve" ? JSON.stringify(process.env[VITE_DEV_SERVER_URL]) : undefined,
+      [VITE_NAME]: JSON.stringify(name),
+    };
+    return { ...acc, ...def };
+  }, {});
+};