Switch to upstream

desktop/.prettierignore

@@ -1 +0,0 @@
-thirdparty/

desktop/docs/dependencies.md

@@ -4,3 +4,11 @@ See [web/docs/dependencies.md](../../web/docs/dependencies.md) for general web
 specific dependencies. See [electron.md](electron.md) for our main dependency,
 Electron. The rest of this document describes the remaining, desktop specific
 dependencies that are used by the Photos desktop app.
+
+## Electron related
+
+### next-electron-server
+
+This spins up a server for serving files using a protocol handler inside our
+Electron process. This allows us to directly use the output produced by `next
+build` for loading into our renderer process.

desktop/package.json

@@ -32,7 +32,7 @@
         "get-folder-size": "^2.0.1",
         "html-entities": "^2.4.0",
         "jpeg-js": "^0.4.4",
-        "next-electron-server": "file:./thirdparty/next-electron-server",
+        "next-electron-server": "^1",
         "node-fetch": "^2.6.7",
         "node-stream-zip": "^1.15.0",
         "onnxruntime-node": "^1.16.3",
@@ -55,7 +55,7 @@
         "eslint": "^7.23.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^8.5.0",
-        "prettier": "2.5.1",
+        "prettier": "^3",
         "prettier-plugin-organize-imports": "^3.2",
         "prettier-plugin-packagejson": "^2.4",
         "typescript": "^4.2.3"

desktop/src/main.ts

@@ -1,4 +1,6 @@
 import { app, BrowserWindow } from "electron";
+import electronReload from "electron-reload";
+import serveNextAt from "next-electron-server";
 import { initWatcher } from "./services/chokidar";
 import { isDev } from "./utils/common";
 import { addAllowOriginHeader } from "./utils/cors";
@@ -14,9 +16,7 @@ import {
     handleUpdates,
     logSystemInfo,
     setupMacWindowOnDockIconClick,
-    setupMainHotReload,
     setupMainMenu,
-    setupNextElectronServe,
     setupTrayItem,
 } from "./utils/main";
 import { setupMainProcessStatsLogger } from "./utils/processStats";
@@ -38,14 +38,43 @@ export const setIsAppQuitting = (value: boolean): void => {
 export const isUpdateAvailable = (): boolean => {
     return updateIsAvailable;
 };
+
 export const setIsUpdateAvailable = (value: boolean): void => {
     updateIsAvailable = value;
 };
 
+/**
+ * Hot reload the main process if anything changes in the source directory that
+ * we're running from.
+ *
+ * In particular, this gets triggered when the `tsc -w` rebuilds JS files in the
+ * `app/` directory when we change the TS files in the `src/` directory.
+ */
+const setupMainHotReload = () => {
+    if (isDev) {
+        electronReload(__dirname, {});
+    }
+};
+
+/**
+ * next-electron-server allows up to directly use the output of `next build` in
+ * production mode and `next dev` in development mode, whilst keeping the rest
+ * of our code the same.
+ *
+ * It uses protocol handlers to serve files from the "next://app" protocol
+ *
+ * - In development this is proxied to http://localhost:3000
+ * - In production it serves files from the `/out` directory
+ *
+ * For more details, see this comparison:
+ * https://github.com/HaNdTriX/next-electron-server/issues/5
+ */
+const setupRendererServer = () => {
+    serveNextAt("next://app");
+};
+
 setupMainHotReload();
-
-setupNextElectronServe();
-
+setupRendererServer();
 setupLogging(isDev);
 
 const gotTheLock = app.requestSingleInstanceLock();

desktop/src/preload.ts

@@ -59,13 +59,11 @@ import {
     updateWatchMappingSyncedFiles,
 } from "./api/watch";
 import { setupLogging } from "./utils/logging";
-import { fixHotReloadNext12 } from "./utils/preload";
 import {
     logRendererProcessMemoryUsage,
     setupRendererProcessStatsLogger,
 } from "./utils/processStats";
 
-fixHotReloadNext12();
 setupLogging();
 setupRendererProcessStatsLogger();
 

desktop/src/utils/main.ts

@@ -1,7 +1,5 @@
 import { app, BrowserWindow, Menu, nativeImage, Tray } from "electron";
 import ElectronLog from "electron-log";
-import electronReload from "electron-reload";
-import serveNextAt from "next-electron-server";
 import os from "os";
 import path from "path";
 import { existsSync } from "promise-fs";
@@ -14,9 +12,6 @@ import { isPlatform } from "./common/platform";
 import { buildContextMenu, buildMenuBar } from "./menu";
 const execAsync = util.promisify(require("child_process").exec);
 
-export const PROD_HOST_URL: string = "ente://app";
-const RENDERER_OUTPUT_DIR: string = "./out";
-
 export async function handleUpdates(mainWindow: BrowserWindow) {
     const isInstalledViaBrew = await checkIfInstalledViaBrew();
     if (!isDev && !isInstalledViaBrew) {
@@ -46,6 +41,17 @@ export function handleDownloads(mainWindow: BrowserWindow) {
     });
 }
 
+export function handleExternalLinks(mainWindow: BrowserWindow) {
+    mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+        if (!url.startsWith("next://app")) {
+            require("electron").shell.openExternal(url);
+            return { action: "deny" };
+        } else {
+            return { action: "allow" };
+        }
+    });
+}
+
 export function getUniqueSavePath(filename: string, directory: string): string {
     let uniqueFileSavePath = path.join(directory, filename);
     const { name: filenameWithoutExtension, ext: extension } =
@@ -78,22 +84,6 @@ export async function setupMainMenu(mainWindow: BrowserWindow) {
     Menu.setApplicationMenu(await buildMenuBar(mainWindow));
 }
 
-export function setupMainHotReload() {
-    // Hot reload the main process if anything changes in the source directory
-    // that we're running from. In particular, this gets triggered when `yarn
-    // watch` rebuilds JS files in the `app/` directory when we change the TS
-    // files in the `src/` directory.
-    if (isDev) {
-        electronReload(__dirname, {});
-    }
-}
-
-export function setupNextElectronServe() {
-    serveNextAt(PROD_HOST_URL, {
-        outputDir: RENDERER_OUTPUT_DIR,
-    });
-}
-
 export async function handleDockIconHideOnAutoLaunch() {
     const shouldHideDockIcon = getHideDockIconPreference();
     const wasAutoLaunched = await autoLauncher.wasAutoLaunched();
@@ -116,17 +106,6 @@ export function logSystemInfo() {
     ElectronLog.info({ appVersion });
 }
 
-export function handleExternalLinks(mainWindow: BrowserWindow) {
-    mainWindow.webContents.setWindowOpenHandler(({ url }) => {
-        if (!url.startsWith(PROD_HOST_URL)) {
-            require("electron").shell.openExternal(url);
-            return { action: "deny" };
-        } else {
-            return { action: "allow" };
-        }
-    });
-}
-
 export async function checkIfInstalledViaBrew() {
     if (!isPlatform("mac")) {
         return false;

desktop/src/utils/preload.ts

@@ -1,16 +0,0 @@
-import { webFrame } from "electron";
-
-export const fixHotReloadNext12 = () => {
-    webFrame.executeJavaScript(`Object.defineProperty(globalThis, 'WebSocket', {
-    value: new Proxy(WebSocket, {
-      construct: (Target, [url, protocols]) => {
-        if (url.endsWith('/_next/webpack-hmr')) {
-          // Fix the Next.js hmr client url
-          return new Target("ws://localhost:3000/_next/webpack-hmr", protocols)
-        } else {
-          return new Target(url, protocols)
-        }
-      }
-    })
-  });`);
-};

desktop/yarn.lock

@@ -2441,8 +2441,10 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-"next-electron-server@file:./thirdparty/next-electron-server":
-  version "0.0.8"
+next-electron-server@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-electron-server/-/next-electron-server-1.0.0.tgz#03e133ed64a5ef671b6c6409f908c4901b1828cb"
+  integrity sha512-fTUaHwT0Jry2fbdUSIkAiIqgDAInI5BJFF4/j90/okvZCYlyx6yxpXB30KpzmOG6TN/ESwyvsFJVvS2WHT8PAA==
 
 node-addon-api@^1.6.3:
   version "1.7.2"
@@ -2697,10 +2699,10 @@ prettier-plugin-packagejson@^2.4:
     sort-package-json "2.8.0"
     synckit "0.9.0"
 
-prettier@2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
-  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+prettier@^3:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
 pretty-bytes@^4.0.2:
   version "4.0.2"