Migrate to native Node.js file access and improve UI

packages/web/src/electron/index.ts

@@ -2,6 +2,7 @@
 // Modules to control application life and create native browser window
 import { join } from "path"
 import { app, BrowserWindow, Menu } from "electron"
+import "./ipc"
 
 function createWindow() {
   // Create the browser window.
@@ -13,7 +14,7 @@ function createWindow() {
     icon: join(__dirname, "../512x512.png"),
     webPreferences: {
       contextIsolation: true,
-      // preload: join(__dirname, "preload.js"),
+      preload: join(__dirname, "preload.js"),
     },
   })
 

packages/web/src/electron/ipc-types.d.ts

@@ -0,0 +1,9 @@
+export interface IPC {
+  showDirectoryPicker(): Promise<string | undefined>
+  pathExists(path: string): Promise<boolean>
+  readdir(path: string): Promise<string[]>
+  readBuffer(path: string): Promise<Uint8Array>
+  readFile(path: string): Promise<string>
+  writeFile(path: string, data: string): Promise<void>
+  isDirectory(path: string): Promise<boolean>
+}

packages/web/src/electron/ipc.ts

@@ -0,0 +1,53 @@
+import fs, { promises } from "fs"
+import { ipcMain, dialog } from "electron"
+import type { IPC } from "./ipc-types"
+
+registerService({
+  async showDirectoryPicker() {
+    const result = await dialog.showOpenDialog({
+      properties: ["openDirectory", "treatPackageAsDirectory"],
+    })
+    if (result.canceled || !result.filePaths.length) return
+    return result.filePaths[0]
+  },
+
+  async pathExists(_, path) {
+    return fs.existsSync(path)
+  },
+
+  async readBuffer(_, path) {
+    return promises.readFile(path)
+  },
+
+  async readFile(_, path) {
+    return promises.readFile(path, "utf-8")
+  },
+
+  async writeFile(_, path, content) {
+    await promises.writeFile(path, content)
+  },
+
+  async readdir(_, path) {
+    return promises.readdir(path)
+  },
+
+  async isDirectory(_, path) {
+    const stats = await promises.stat(path)
+    return stats.isDirectory()
+  },
+})
+
+/**
+ * Listens to `channel`, when a new message arrives `listener` would be called
+ * with `listener(event, ...args)`
+ */
+function registerService(listeners: {
+  [K in keyof IPC]: (
+    event: Electron.IpcMainEvent,
+    ...args: Parameters<IPC[K]>
+  ) => ReturnType<IPC[K]>
+}) {
+  for (const [key, value] of Object.entries(listeners)) {
+    ipcMain.handle(`service-${key}`, value as any)
+  }
+}

packages/web/src/electron/preload.ts

@@ -1,4 +1,5 @@
-import { contextBridge } from "electron"
-import { nodeAdapter } from "opvault.js/src/adapters/node"
+import { contextBridge, ipcRenderer } from "electron"
 
-contextBridge.exposeInMainWorld("nodeAdapter", nodeAdapter)
+contextBridge.exposeInMainWorld("ipcRenderer", {
+  invoke: ipcRenderer.invoke,
+})