Electron app loading improvements + Windows paths fix (#429)

- Electron no longer allows Windows paths in URLs
(https://www.electronjs.org/docs/latest/breaking-changes#behavior-changed-custom-protocol-url-handling-on-windows),
fixes with help of wabac.js to replace `C:\path\to\file` with
`C//path/to/file`
- Electron app cleanup: replace deprecated protocol handlers with new
protocol.handle() method, update types
- Electron app: ensure just filename is displayed on index page,
consistent with other platforms
- Update to wabac.js 2.23.2
- Update to Electron 36.3.2
- Fixes #427
- bump to 2.3.12

Author: ikreymer

CHANGES.md

@@ -2,13 +2,22 @@
 
 ## CHANGES
 
+v2.3.12
+
+- App: Cleanup Electron app code and add typing
+- App: fix loading files from disk on Windows, existing files should continue to load
+- Fidelity: Fix meta refresh rewriting (via wabac.js 2.23.2)
+
 v2.3.11
+
 - Fidelity: Fix to importmaps (via wabac.js 2.23.1)
 
 v2.3.10
+
 - Dependencies: Update Electron dependencies
 
 v2.3.9
+
 - Loading: Avoid unnecessary reloads of multiWACZ JSON, prune expired (via wabac.js 2.23.0)
 - Fidelity: Fix CSP issue with iframes in Firefox (via wabac.js 2.23.0)
 - Testing: Add testing for CSP handling and embeds in Firefox and Webkit

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "2.3.11",
+  "version": "2.3.12",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -22,20 +22,19 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@shoelace-style/shoelace": "~2.15.1",
-    "@webrecorder/wabac": "^2.23.1",
+    "@webrecorder/wabac": "^2.23.2",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",
-    "electron-updater": "^6.3.9",
+    "electron-updater": "^6.6.2",
     "fetch-ndjson": "^1.1.6",
     "flexsearch": "^0.7.31",
     "keyword-mark-element": "^0.2.0",
     "lit": "3.1.1",
     "marked": "^4.0.10",
     "micromark": "^4.0.1",
     "micromark-extension-gfm-strikethrough": "^2.1.0",
-    "mime-types": "^2.1.32",
+    "mime-types": "^3.0.1",
     "minimist": "^1.2.5",
-    "node-fetch": "^3.3.0",
     "pretty-bytes": "^5.6.0",
     "process": "^0.11.10",
     "register-service-worker": "^1.7.2",
@@ -47,11 +46,14 @@
     "@playwright/test": "^1.52.0",
     "@types/flexsearch": "^0.7.3",
     "@types/lodash": "^4.17.5",
+    "@types/mime-types": "^2.1.4",
+    "@types/minimist": "^1.2.5",
+    "@types/node": "^22.15.18",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
-    "electron": "^36.2.1",
+    "electron": "^36.3.2",
     "electron-builder": "^26.0.12",
     "electron-notarize": "^1.2.2",
     "eslint": "^8.56.0",

playwright.config.js

@@ -6,15 +6,15 @@ export default defineConfig({
   projects: [
     {
       name: "chrome",
-      use: { ...devices['Desktop Chrome'], channel: "chrome" },
+      use: { ...devices["Desktop Chrome"], channel: "chrome" },
     },
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
   ],
   webServer: [

src/appmain.ts

@@ -639,13 +639,6 @@ export class ReplayWebApp extends LitElement {
     if (this.pageParams.get("swName")) {
       this.swName = this.pageParams.get("swName") || undefined;
     }
-
-    if (IS_APP && this.sourceUrl.startsWith("file://")) {
-      this.loadInfo = {
-        sourceUrl: this.sourceUrl,
-        loadUrl: this.sourceUrl.replace("file://", "file2://"),
-      };
-    }
   }
 
   // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type.

src/chooser.ts

@@ -5,12 +5,15 @@ import fasUpload from "@fortawesome/fontawesome-free/svgs/solid/upload.svg";
 import { customElement, property } from "lit/decorators.js";
 
 export interface FileWithPath extends File {
-  path: string;
+  path?: string;
 }
 
 declare let window: Window & {
   electron?: {
-    getPath: (file: File) => string;
+    getPaths: (file: File) => {
+      loadUrl: string;
+      sourceUrl: string;
+    };
   };
 };
 
@@ -94,12 +97,13 @@ export class Chooser extends LitElement {
 
   setFile(file: FileWithPath) {
     this.file = file;
-    // file.path only available in electron app
-    if (IS_APP && window.electron?.getPath) {
-      this.file.path = window.electron.getPath(this.file);
+    if (IS_APP && window.electron?.getPaths) {
+      const { loadUrl, sourceUrl } = window.electron.getPaths(this.file);
+      this.file.path = loadUrl;
+      this.fileDisplayName = sourceUrl;
+    } else {
+      this.fileDisplayName = "file://" + file.name;
     }
-
-    this.fileDisplayName = "file://" + (file.path || file.name);
   }
 
   async onChooseNativeFile() {
@@ -149,9 +153,11 @@ export class Chooser extends LitElement {
 
     if (this.file) {
       loadInfo.isFile = true;
-      // file.path only available in electron app
+      // should only be set in Electron app
       if (this.file.path) {
-        loadInfo.loadUrl = "file2://" + this.file.path;
+        loadInfo.loadUrl = this.file.path;
+        loadInfo.sourceUrl = this.fileDisplayName;
+        loadInfo.name = this.file.name;
         loadInfo.noCache = true;
       } else if (this.fileHandle) {
         loadInfo.loadUrl = this.fileDisplayName;
@@ -163,7 +169,9 @@ export class Chooser extends LitElement {
         loadInfo.noCache = false;
       }
       loadInfo.size = this.file.size;
-      loadInfo.name = this.fileDisplayName;
+      if (!loadInfo.name) {
+        loadInfo.name = this.fileDisplayName;
+      }
     }
 
     this.dispatchEvent(

src/electron-preload.ts

@@ -3,12 +3,34 @@
 import { CollectionLoader } from "@webrecorder/wabac/swlib";
 import { type IpcRendererEvent } from "electron";
 
-const { ipcRenderer, contextBridge, webUtils } = require("electron");
+import { sep as pathSep } from "node:path";
+
+import { ipcRenderer, contextBridge, webUtils } from "electron";
+
+const FILE_SCHEME = "file://";
+const CUSTOM_FILE_SCHEME = "file2://";
+
+function rewriteLoadUrl(loadUrl: string) {
+  if (pathSep !== "/") {
+    // for windows, will replace such that C:\path\to\file becomes C//path/to/file
+    loadUrl = loadUrl.replaceAll(pathSep, "/").replace(":", "/");
+  }
+  return CUSTOM_FILE_SCHEME + loadUrl;
+}
 
 contextBridge.exposeInMainWorld("electron", {
   IS_APP: true,
-  getPath(file: File) {
-    return webUtils.getPathForFile(file);
+  getPaths(file: File) {
+    const url = webUtils.getPathForFile(file);
+    const sourceUrl = FILE_SCHEME + url;
+    const loadUrl = rewriteLoadUrl(url);
+    return { loadUrl, sourceUrl };
+  },
+  getFileLoadUrl(sourceUrl: string) {
+    if (!sourceUrl.startsWith(FILE_SCHEME)) {
+      return sourceUrl;
+    }
+    return rewriteLoadUrl(sourceUrl.slice(FILE_SCHEME.length));
   },
 });