Bundle with Vite.

andersk · andersk · commit d42b752ac1de · 2023-02-06T18:57:22.000-08:00
Signed-off-by: Anders Kaseorg &lt;anders@zulip.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,8 @@
 .transifexrc
 
 # Compiled binary build directory
-dist/
+/dist/
+/dist-electron/
 
 #snap generated files
 snap/parts
@@ -39,6 +40,3 @@ config.gypi
 # tests/package.json
 
 .python-version
-
-# Ignore all the typescript compiled files
-app/**/*.js
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,3 @@
-/app/**/*.js
 /dist
+/dist-electron
 /public/translations/*.json
diff --git a/app/common/paths.ts b/app/common/paths.ts
@@ -0,0 +1,15 @@
+import path from "node:path";
+import process from "node:process";
+import url from "node:url";
+
+export const bundlePath = __dirname;
+
+export const publicPath = import.meta.env.DEV
+  ? path.join(bundlePath, "../public")
+  : bundlePath;
+
+export const bundleUrl = import.meta.env.DEV
+  ? process.env.VITE_DEV_SERVER_URL
+  : url.pathToFileURL(__dirname).href + "/";
+
+export const publicUrl = bundleUrl;
diff --git a/app/common/translation-util.ts b/app/common/translation-util.ts
@@ -3,9 +3,10 @@ import path from "node:path";
 import i18n from "i18n";
 
 import * as ConfigUtil from "./config-util.js";
+import {publicPath} from "./paths.js";
 
 i18n.configure({
-  directory: path.join(__dirname, "../../public/translations/"),
+  directory: path.join(publicPath, "translations/"),
   updateFiles: false,
 });
 
diff --git a/app/main/index.ts b/app/main/index.ts
@@ -7,6 +7,7 @@ import * as remoteMain from "@electron/remote/main";
 import windowStateKeeper from "electron-window-state";
 
 import * as ConfigUtil from "../common/config-util.js";
+import {bundlePath, bundleUrl, publicPath} from "../common/paths.js";
 import type {RendererMessage} from "../common/typed-ipc.js";
 import type {MenuProps} from "../common/types.js";
 
@@ -35,13 +36,13 @@ let badgeCount: number;
 
 let isQuitting = false;
 
-// Load this url in main window
-const mainUrl = "file://" + path.join(__dirname, "../renderer", "main.html");
+// Load this file in main window
+const mainUrl = new URL("app/renderer/main.html", bundleUrl).href;
 
 const permissionCallbacks = new Map<number, (grant: boolean) => void>();
 let nextPermissionCallbackId = 0;
 
-const appIcon = path.join(__dirname, "../../public/resources", "Icon");
+const appIcon = path.join(publicPath, "resources/Icon");
 
 const iconPath = (): string =>
   appIcon + (process.platform === "win32" ? ".ico" : ".png");
@@ -74,7 +75,7 @@ function createMainWindow(): BrowserWindow {
     minWidth: 500,
     minHeight: 400,
     webPreferences: {
-      preload: require.resolve("../renderer/js/main"),
+      preload: path.join(bundlePath, "renderer.js"),
       sandbox: false,
       webviewTag: true,
     },
diff --git a/app/main/sentry.ts b/app/main/sentry.ts
@@ -1,6 +1,6 @@
 import {app} from "electron/main";
 
-import * as Sentry from "@sentry/electron";
+import * as Sentry from "@sentry/electron/main"; // eslint-disable-line n/file-extension-in-import
 
 import {getConfigItem} from "../common/config-util.js";
 
diff --git a/app/renderer/about.html b/app/renderer/about.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8" />
+<link rel="stylesheet" href="css/about.css" />
+
+<!-- Initially hidden to prevent FOUC -->
+<div class="about" hidden>
+  <img class="logo" src="../resources/zulip.png" />
+  <p class="detail" id="version"></p>
+  <div class="maintenance-info">
+    <p class="detail maintainer">
+      Maintained by
+      <a href="https://zulip.com" target="_blank" rel="noopener noreferrer"
+        >Zulip</a
+      >
+    </p>
+    <p class="detail license">
+      Available under the
+      <a
+        href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE"
+        target="_blank"
+        rel="noopener noreferrer"
+        >Apache 2.0 License</a
+      >
+    </p>
+  </div>
+</div>
diff --git a/app/renderer/js/components/webview.ts b/app/renderer/js/components/webview.ts
@@ -1,6 +1,5 @@
 import type {WebContents} from "electron/main";
 import fs from "node:fs";
-import path from "node:path";
 import process from "node:process";
 
 import * as remote from "@electron/remote";
@@ -11,6 +10,7 @@ import type {Html} from "../../../common/html.js";
 import {html} from "../../../common/html.js";
 import type {RendererMessage} from "../../../common/typed-ipc.js";
 import type {TabRole} from "../../../common/types.js";
+import preloadCss from "../../css/preload.css?raw"; // eslint-disable-line n/file-extension-in-import
 import {ipcRenderer} from "../typed-ipc-renderer.js";
 import * as SystemUtil from "../utils/system-util.js";
 
@@ -210,10 +210,7 @@ export default class WebView {
     this.focus();
     this.props.onTitleChange();
     // Injecting preload css in webview to override some css rules
-    (async () =>
-      this.getWebContents().insertCSS(
-        fs.readFileSync(path.join(__dirname, "/../../css/preload.css"), "utf8"),
-      ))();
+    (async () => this.getWebContents().insertCSS(preloadCss))();
 
     // Get customCSS again from config util to avoid warning user again
     const customCss = ConfigUtil.getConfigItem("customCSS", null);
diff --git a/app/renderer/js/main.ts b/app/renderer/js/main.ts
@@ -2,6 +2,7 @@ import {clipboard} from "electron/common";
 import fs from "node:fs";
 import path from "node:path";
 import process from "node:process";
+import url from "node:url";
 
 import {Menu, app, dialog, session} from "@electron/remote";
 import * as remote from "@electron/remote";
@@ -15,6 +16,7 @@ import * as EnterpriseUtil from "../../common/enterprise-util.js";
 import * as LinkUtil from "../../common/link-util.js";
 import Logger from "../../common/logger-util.js";
 import * as Messages from "../../common/messages.js";
+import {bundlePath, bundleUrl} from "../../common/paths.js";
 import type {NavItem, ServerConf, TabData} from "../../common/types.js";
 
 import FunctionalTab from "./components/functional-tab.js";
@@ -45,12 +47,13 @@ const logger = new Logger({
   file: "errors.log",
 });
 
-const rendererDirectory = path.resolve(__dirname, "..");
 type ServerOrFunctionalTab = ServerTab | FunctionalTab;
 
 const rootWebContents = remote.getCurrentWebContents();
 
-const dingSound = new Audio("../../public/resources/sounds/ding.ogg");
+const dingSound = new Audio(
+  new URL("resources/sounds/ding.ogg", bundleUrl).href,
+);
 
 export class ServerManagerView {
   $addServerButton: HTMLButtonElement;
@@ -401,7 +404,7 @@ export class ServerManagerView {
             await this.openNetworkTroubleshooting(index);
           },
           onTitleChange: this.updateBadge.bind(this),
-          preload: "js/preload.js",
+          preload: url.pathToFileURL(path.join(bundlePath, "preload.js")).href,
         }),
       }),
     );
@@ -628,7 +631,7 @@ export class ServerManagerView {
     reconnectUtil.pollInternetAndReload();
     await webview
       .getWebContents()
-      .loadURL(`file://${rendererDirectory}/network.html`);
+      .loadURL(new URL("app/renderer/network.html", bundleUrl).href);
   }
 
   async activateLastTab(index: number): Promise<void> {
diff --git a/app/renderer/js/pages/about.ts b/app/renderer/js/pages/about.ts
@@ -1,45 +1,21 @@
 import {app} from "@electron/remote";
 
-import {html} from "../../../common/html.js";
+import {bundleUrl} from "../../../common/paths.js";
 
 export class AboutView {
   static async create(): Promise<AboutView> {
-    return new AboutView();
+    return new AboutView(
+      await (await fetch(new URL("app/renderer/about.html", bundleUrl))).text(),
+    );
   }
 
   readonly $view: HTMLElement;
 
-  private constructor() {
+  private constructor(templateHtml: string) {
     this.$view = document.createElement("div");
     const $shadow = this.$view.attachShadow({mode: "open"});
-    $shadow.innerHTML = html`
-      <link rel="stylesheet" href="css/about.css" />
-      <!-- Initially hidden to prevent FOUC -->
-      <div class="about" hidden>
-        <img class="logo" src="../resources/zulip.png" />
-        <p class="detail" id="version">v${app.getVersion()}</p>
-        <div class="maintenance-info">
-          <p class="detail maintainer">
-            Maintained by
-            <a
-              href="https://zulip.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              >Zulip</a
-            >
-          </p>
-          <p class="detail license">
-            Available under the
-            <a
-              href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE"
-              target="_blank"
-              rel="noopener noreferrer"
-              >Apache 2.0 License</a
-            >
-          </p>
-        </div>
-      </div>
-    `.html;
+    $shadow.innerHTML = templateHtml;
+    $shadow.querySelector("#version")!.textContent = `v${app.getVersion()}`;
   }
 
   destroy() {
diff --git a/app/renderer/js/pages/preference/preference.ts b/app/renderer/js/pages/preference/preference.ts
@@ -1,7 +1,7 @@
 import process from "node:process";
 
 import type {DndSettings} from "../../../../common/dnd-util.js";
-import {html} from "../../../../common/html.js";
+import {bundleUrl} from "../../../../common/paths.js";
 import type {NavItem} from "../../../../common/types.js";
 import {ipcRenderer} from "../../typed-ipc-renderer.js";
 
@@ -14,7 +14,11 @@ import {initShortcutsSection} from "./shortcuts-section.js";
 
 export class PreferenceView {
   static async create(): Promise<PreferenceView> {
-    return new PreferenceView();
+    return new PreferenceView(
+      await (
+        await fetch(new URL("app/renderer/preference.html", bundleUrl))
+      ).text(),
+    );
   }
 
   readonly $view: HTMLElement;
@@ -23,28 +27,10 @@ export class PreferenceView {
   private readonly nav: Nav;
   private navItem: NavItem = "General";
 
-  private constructor() {
+  private constructor(templateHtml: string) {
     this.$view = document.createElement("div");
     this.$shadow = this.$view.attachShadow({mode: "open"});
-    this.$shadow.innerHTML = html`
-      <link
-        rel="stylesheet"
-        href="${require.resolve("../../../css/fonts.css")}"
-      />
-      <link
-        rel="stylesheet"
-        href="${require.resolve("../../../css/preference.css")}"
-      />
-      <link
-        rel="stylesheet"
-        href="${require.resolve("@yaireo/tagify/dist/tagify.css")}"
-      />
-      <!-- Initially hidden to prevent FOUC -->
-      <div id="content" hidden>
-        <div id="sidebar"></div>
-        <div id="settings-container"></div>
-      </div>
-    `.html;
+    this.$shadow.innerHTML = templateHtml;
 
     const $sidebarContainer = this.$shadow.querySelector("#sidebar")!;
     this.$settingsContainer = this.$shadow.querySelector(
diff --git a/app/renderer/js/preload.ts b/app/renderer/js/preload.ts
@@ -1,5 +1,8 @@
 import {contextBridge, webFrame} from "electron/renderer";
 import fs from "node:fs";
+import path from "node:path";
+
+import {bundlePath} from "../../common/paths.js";
 
 import electron_bridge, {bridgeEvents} from "./electron-bridge.js";
 import * as NetworkError from "./pages/network.js";
@@ -77,5 +80,5 @@ window.addEventListener("load", () => {
 
 (async () =>
   webFrame.executeJavaScript(
-    fs.readFileSync(require.resolve("./injected"), "utf8"),
+    fs.readFileSync(path.join(bundlePath, "injected.js"), "utf8"),
   ))();
diff --git a/app/renderer/js/tray.ts b/app/renderer/js/tray.ts
@@ -7,18 +7,15 @@ import process from "node:process";
 import {BrowserWindow, Menu, Tray} from "@electron/remote";
 
 import * as ConfigUtil from "../../common/config-util.js";
+import {publicPath} from "../../common/paths.js";
 import type {RendererMessage} from "../../common/typed-ipc.js";
 
 import type {ServerManagerView} from "./main.js";
 import {ipcRenderer} from "./typed-ipc-renderer.js";
 
 let tray: ElectronTray | null = null;
 
-const iconDir = "../../../public/resources/tray";
-
-const traySuffix = "tray";
-
-const appIcon = path.join(__dirname, iconDir, traySuffix);
+const appIcon = path.join(publicPath, "resources/tray/tray");
 
 const iconPath = (): string => {
   if (process.platform === "linux") {
diff --git a/app/renderer/main.html b/app/renderer/main.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width" />
     <title>Zulip</title>
     <link rel="stylesheet" href="css/fonts.css" />
-    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
+    <link rel="stylesheet" href="css/main.css" />
   </head>
 
   <body>
diff --git a/app/renderer/preference.html b/app/renderer/preference.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="UTF-8" />
+<link rel="stylesheet" href="css/fonts.css" />
+<link rel="stylesheet" href="css/preference.css" />
+<script type="module">
+  import "@yaireo/tagify/dist/tagify.css";
+</script>
+
+<!-- Initially hidden to prevent FOUC -->
+<div id="content" hidden>
+  <div id="sidebar"></div>
+  <div id="settings-container"></div>
+</div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/tests/package.json b/tests/package.json
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/vite.config.ts b/vite.config.ts
