Figure out structuring the node-browser boundary

src/lib/desktop.ts

@@ -8,10 +8,6 @@ import { ProjectRoute } from 'wasm-lib/kcl/bindings/ProjectRoute'
 import { components } from './machine-api'
 import { isDesktop } from './isDesktop'
 
-// All these functions call into lib/electron since many require filesystem
-// access, and the second half is the original tauri code also stored app
-// state on the "desktop" side.
-
 // Get the app state from desktop.
 export async function getState(): Promise<ProjectState | undefined> {
   if (!isDesktop()) {
@@ -45,7 +41,7 @@ export async function renameProjectDirectory(
   projectPath: string,
   newName: string
 ): Promise<string> {
-  return invoke<string>('rename_project_directory', { projectPath, newName })
+  return window.electron.ipcRenderer.invoke<string>('rename_project_directory', { projectPath, newName })
 }
 
 // Get the initial default dir for holding all projects.

src/lib/electron.ts

@@ -1,8 +1,19 @@
-import { app, ipcMain } from 'electron'
+import { contextBridge } from 'electron'
+import path from 'path'
+import fs from 'node:fs'
+
+// All these functions call into lib/electron since many require filesystem
+// access, and the second half is the original tauri code also stored app
+// state on the "desktop" side.
 
 const DEFAULT_HOST = "https://api.zoo.dev"
 const SETTINGS_FILE_NAME = "settings.toml"
 const PROJECT_SETTINGS_FILE_NAME = "project.toml"
 const PROJECT_FOLDER = "zoo-modeling-app-projects"
 
-
+contextBridge.exposeInMainWorld("fs", {
+  readFile(p: string) { return fs.readFile(p, 'utf-8') },
+  readdir(p: string) { return fs.readdir(p, 'utf-8') },
+  join() { return path.join(...arguments) },
+  exists(p: string) { fs.exists(p) },
+})

src/lib/fs.ts

@@ -1,18 +0,0 @@
-const { app, ipcMain } = require('electron')
-const path = require('node:path')
-const fs = require('node:fs')
-
-app.whenReady().then(() => {
-  ipcMain.handle('readFile', async (event) => {
-    return fs.readFile(event.data[0], 'utf-8')
-  })
-  ipcMain.handle('readdir', async (event) => {
-    return fs.readdir(event.data[0], 'utf-8')
-  })
-  ipcMain.handle('join', async (event) => {
-    return path.join(event.data[0])
-  })
-  ipcMain.handle('exists', async (event) => {
-    return fs.exists(event.data[0])
-  })
-})

src/main.ts

@@ -3,7 +3,6 @@
 
 import { app, BrowserWindow } from 'electron'
 import path from 'path'
-import 'lib/fs'
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) {
@@ -14,6 +13,12 @@ const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
+    webPreferences: {
+      nodeIntegration: false, // do not give the application implicit system access
+      contextIsolation: true, // expose system functions in preload
+      sandbox: false, // expose nodejs in preload
+      preload: path.join(__dirname, "./preload.js")
+    }
   })
 
   // and load the index.html of the app.

src/preload.ts

@@ -0,0 +1 @@
+import 'lib/electron'

vite.preload.config.ts

@@ -1,6 +1,7 @@
 import type { ConfigEnv, UserConfig } from 'vite'
 import { defineConfig, mergeConfig } from 'vite'
 import { getBuildConfig, external, pluginHotRestart } from './vite.base.config'
+import viteTsconfigPaths from 'vite-tsconfig-paths'
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
@@ -22,7 +23,7 @@ export default defineConfig((env) => {
         },
       },
     },
-    plugins: [pluginHotRestart('reload')],
+    plugins: [pluginHotRestart('reload'), viteTsconfigPaths()],
   }
 
   return mergeConfig(getBuildConfig(forgeEnv), config)