[BDGR-103] Convert desktop codebase and builds to ES Modules

desktop/.eslintrc.cjs

@@ -37,6 +37,10 @@ module.exports = {
             group: [`badger-server/lib/db`],
             message: "You probably wanted '@badger/prisma'.",
           },
+          {
+            group: [`^@badger/prisma/client`],
+            message: "Use @badger/prisma/types instead",
+          },
           {
             group: ["@"],
             message:

desktop/electron.vite.config.mjs

@@ -5,111 +5,167 @@ import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { mergeConfig, defineConfig } from "vite";
 import { visualizer } from "rollup-plugin-visualizer";
 import ignore from "rollup-plugin-ignore";
+import { electronToChromium } from "electron-to-chromium";
 
-const packageJSON = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
-const gitCommit =
-  process.env.GIT_REV ??
-  execFileSync("git", ["rev-parse", "HEAD"]).toString().trim();
-const sentryRelease =
-  "badger-desktop@" + packageJSON.version + "-" + gitCommit.slice(0, 7);
+export default defineConfig(({ mode }) => {
+  const packageJSON = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
+  const gitCommit =
+    process.env.GIT_REV ??
+    execFileSync("git", ["rev-parse", "HEAD"]).toString().trim();
+  const sentryRelease =
+    "badger-desktop@" + packageJSON.version + "-" + gitCommit.slice(0, 7);
 
-const prod = process.env.ENVIRONMENT === "prod";
+  const prod = mode === "production";
 
-const visualizeBundle = process.argv.includes("--visualize-bundle");
+  const visualizeBundle = process.argv.includes("--visualize-bundle");
 
-const base = defineConfig({
-  define: {
-    "global.__APP_VERSION__": JSON.stringify(packageJSON.version),
-    "global.__BUILD_TIME__": JSON.stringify(new Date().toISOString()),
-    "global.__GIT_COMMIT__": JSON.stringify(gitCommit),
-    "global.__SENTRY_RELEASE__": JSON.stringify(sentryRelease),
-    "global.__ENVIRONMENT__": JSON.stringify(process.env.ENVIRONMENT),
-  },
-  plugins: [
-    // Fix Prisma runtime trying to get bundled
-    ignore(["../../client"]),
-    sentryVitePlugin({
-      org: "ystv",
-      project: "badger-desktop",
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      release: {
-        name: sentryRelease,
-      },
-    }),
-  ],
-  build: {
-    minify: prod ? "esbuild" : false,
-    rollupOptions: {
-      onwarn(warning, warn) {
-        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
-          return;
-        }
-        warn(warning);
-      },
-      onLog(level, log, handler) {
-        if (
-          log.cause &&
-          log.cause.message === `Can't resolve original location of error.`
-        ) {
-          return;
-        }
-        if (
-          log.cause &&
-          log.cause.message.startsWith(
-            `Use of eval in "../utility/prisma/client/runtime/library.js" is strongly discouraged`,
-          )
-        ) {
-          return;
-        }
-        handler(level, log);
-      },
-    },
-  },
-});
+  const electronVersion = packageJSON.devDependencies.electron.replace("^", "");
+  const chromeVersion = electronToChromium(electronVersion);
+  let chromeMajor;
+  if (chromeVersion) {
+    chromeMajor = parseInt(chromeVersion.split(".")[0]);
+  } else {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Failed to find Chrome version for Electron ${electronVersion}.`,
+    );
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Please update the electron-to-chromium package to get the latest mappings.`,
+    );
+    // eslint-disable-next-line no-console
+    console.warn(`Assuming Chromium 126 for Electron v31.1.0`);
+    chromeMajor = 126;
+  }
 
-/**
- * @type {import('electron-vite').UserConfig}
- */
-const config = {
-  main: mergeConfig(base, {
-    plugins: [
-      commonjs(),
-      visualizeBundle &&
-        visualizer({
-          filename: "bundle-main.html",
-        }),
-    ].filter(Boolean),
-    resolve: {
-      conditions: ["node"],
-      browserField: false,
+  const base = defineConfig({
+    define: {
+      "global.__APP_VERSION__": JSON.stringify(packageJSON.version),
+      "global.__BUILD_TIME__": JSON.stringify(new Date().toISOString()),
+      "global.__GIT_COMMIT__": JSON.stringify(gitCommit),
+      "global.__SENTRY_RELEASE__": JSON.stringify(sentryRelease),
+      "global.__ENVIRONMENT__": JSON.stringify(
+        process.env.ENVIRONMENT ?? "(no ENVIRONMENT set)",
+      ),
+      // write-file-atomic uses __filename which doesn't work in ESM, so we hack it
+      __filename: JSON.stringify("__filename"),
     },
-  }),
-  renderer: mergeConfig(base, {
     plugins: [
-      visualizeBundle &&
-        visualizer({
-          filename: "bundle-renderer.html",
-        }),
-    ].filter(Boolean),
+      // Fix Prisma runtime trying to get bundled
+      ignore(["../../client", "@prisma/engines"]),
+      sentryVitePlugin({
+        org: "ystv",
+        project: "badger-desktop",
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        release: {
+          name: sentryRelease,
+        },
+      }),
+    ],
     build: {
+      minify: mode === "development" ? false : "esbuild",
+      manifest: true,
       rollupOptions: {
-        input: "./src/renderer/index.html",
+        output: {
+          format: "es",
+        },
+        onwarn(warning, warn) {
+          // Suppress module level directive warnings - these are all "use client" which is fine
+          if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+            return;
+          }
+          // Suppress eval warning from Prisma
+          if (
+            warning.message.includes(
+              `Use of eval in "../utility/prisma/client/runtime/library.js" is strongly discouraged`,
+            )
+          ) {
+            return;
+          }
+          warn(warning);
+        },
+        onLog(level, log, handler) {
+          // Something odd about Prisma triggers this
+          if (
+            log.cause &&
+            log.cause.message === `Can't resolve original location of error.`
+          ) {
+            return;
+          }
+          handler(level, log);
+        },
       },
     },
-  }),
-  preload: mergeConfig(base, {
-    plugins: [
-      visualizeBundle &&
-        visualizer({
-          filename: "bundle-preload.html",
-        }),
-    ].filter(Boolean),
-    build: {
-      lib: {
-        entry: "./src/common/preload.ts",
-      },
-    },
-  }),
-};
+  });
+
+  /**
+   * @type {import('electron-vite').UserConfig}
+   */
+  const config = {
+    main: mergeConfig(
+      base,
+      defineConfig({
+        plugins: [
+          commonjs(),
+          visualizeBundle &&
+            visualizer({
+              filename: "bundle-main.html",
+            }),
+        ].filter(Boolean),
+        resolve: {
+          conditions: ["node"],
+          browserField: false,
+        },
+        build: {
+          target: "node20", // Electron 31
+          sourcemap: true,
+          rollupOptions: {
+            logLevel: "debug",
+          },
+        },
+      }),
+    ),
+    renderer: mergeConfig(
+      base,
+      defineConfig({
+        plugins: [
+          visualizeBundle &&
+            visualizer({
+              filename: "bundle-renderer.html",
+            }),
+        ].filter(Boolean),
+        build: {
+          target: `chrome${chromeMajor}`,
+          rollupOptions: {
+            input: "./src/renderer/index.html",
+          },
+        },
+      }),
+    ),
+    preload: mergeConfig(
+      base,
+      defineConfig({
+        plugins: [
+          visualizeBundle &&
+            visualizer({
+              filename: "bundle-preload.html",
+            }),
+        ].filter(Boolean),
+        build: {
+          target: `node20`,
+          lib: {
+            entry: "./src/common/preload.ts",
+          },
+          rollupOptions: {
+            output: {
+              // Sandboxed preload script don't support ESM yet
+              format: "cjs",
+            },
+          },
+        },
+      }),
+    ),
+  };
 
-export default config;
+  return config;
+});

desktop/package.json

@@ -4,8 +4,10 @@
   "version": "1.0.3-canary.6",
   "description": "My Electron application description",
   "main": "./out/main/index.js",
+  "type": "module",
   "scripts": {
     "start": "electron-vite dev",
+    "dev": "electron-vite dev",
     "build": "rimraf out && electron-vite build",
     "package": "rimraf dist && yarn build && electron-builder build -c electron-builder.config.cjs",
     "lint": "eslint src/",

desktop/src/main/base/serverApiClient.ts

@@ -50,7 +50,7 @@ async function newAPIClient(endpoint: string, password: string) {
   const pingResponse = await client.ping.query();
   if (pingResponse.version !== global.__APP_VERSION__) {
     logger.warn(
-      `Warning: version skew detected: server is running ${pingResponse.version}, but client is running ${global.__APP_VERSION__}`,
+      `Warning: version skew detected: server ${endpoint} is running ${pingResponse.version}, but client is running ${global.__APP_VERSION__}`,
     );
   }
   return client;

desktop/src/main/index.ts

@@ -21,6 +21,9 @@ if (isSquirrel) {
   app.quit();
 }
 
+// ESM shim
+const __dirname = import.meta.dirname;
+
 const logger = getLogger("main");
 
 /* eslint-disable no-console */
@@ -64,7 +67,7 @@ const createWindow = async () => {
     height: 720,
     icon: Icon,
     webPreferences: {
-      preload: path.join(__dirname, "..", "preload", "preload.js"),
+      preload: path.join(__dirname, "..", "preload", "preload.cjs"),
     },
   });
 

desktop/src/main/obs/obsHelpers.ts

@@ -5,7 +5,7 @@ import {
   SceneItem,
 } from "./obs";
 import invariant from "../../common/invariant";
-import type { Media, ContinuityItem } from "@badger/prisma/client";
+import type { Media, ContinuityItem } from "@badger/prisma/types";
 import { getLogger } from "../base/logging";
 import { selectedShow } from "../base/selectedShow";
 import { getLocalMedia } from "../media/mediaManagement";

desktop/src/main/vmix/vmixHelpers.ts

@@ -2,7 +2,7 @@ import invariant from "../../common/invariant";
 import { getLocalMedia } from "../media/mediaManagement";
 import { getVMixConnection } from "./vmix";
 import { InputType, ListInput, ListItem } from "./vmixTypes";
-import type { Asset, Media } from "@badger/prisma/client";
+import type { Asset, Media } from "@badger/prisma/types";
 
 export async function reconcileList(listName: string, elements: string[]) {
   const conn = getVMixConnection();

package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "chalk": "^5.3.0",
     "danger": "^12.0.0",
+    "electron-to-chromium": "^1.4.820",
     "husky": "^9.0.0",
     "inquirer": "^9.2.10",
     "lint-staged": "^14.0.1",

utility/prisma/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@badger/prisma",
   "private": true,
+  "sideEffects": false,
   "devDependencies": {
     "dotenv-cli": "^7.2.1",
     "prisma": "5.16.2",

yarn.lock

@@ -8648,6 +8648,7 @@ __metadata:
   dependencies:
     chalk: "npm:^5.3.0"
     danger: "npm:^12.0.0"
+    electron-to-chromium: "npm:^1.4.820"
     husky: "npm:^9.0.0"
     inquirer: "npm:^9.2.10"
     lint-staged: "npm:^14.0.1"
@@ -10531,10 +10532,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.4.668":
-  version: 1.4.774
-  resolution: "electron-to-chromium@npm:1.4.774"
-  checksum: 10/1424a1d4c89b498eaa02146ed89d79b3d9536b8c745753433b1f8b9ed12cc701aa3528e87a86c6c07ac4e35490dc1c44a3955408274a32d1446fbb56a0cffc2d
+"electron-to-chromium@npm:^1.4.668, electron-to-chromium@npm:^1.4.820":
+  version: 1.4.820
+  resolution: "electron-to-chromium@npm:1.4.820"
+  checksum: 10/6f283fdb22da8b18a071ffce49a181a98b68dca92b46d465026b325593bb1b49acad8926d9274fbe464f1d90006a762b3b83a71d8f1f5df4b334e2b9bd41c040
   languageName: node
   linkType: hard