Example of unplugin-auto-expose main-to-renderer pattern?

[TheAutomaTom]

Do we have an example pattern for main-to-renderer using cawa-93/unplugin-auto-expose? This is where I'm at with a File Open... feature, which results in a __dirname is not defined console error...

// The app menu command that originates this ipc event...
{
    label: "File",
    submenu:[{
      label: "Open File...",
      click: async function() {
        const _filePath = await pickFile();
        if (_filePath === null) return;

        fs.readFile(_filePath, "utf8", (err: unknown, data: unknown) => {
          console.dir(data);
          project = JSON.parse(data as string);
        });
        browserWindow!.webContents.send("load-project-file", project);
      }
    }]
  }

// preload/index.ts
import { ipcRenderer } from "electron";
const onLoadProjectFile = (callback: any) => ipcRenderer.on("load-project-file", callback);
export { onLoadProjectFile };

// I believe this is the equivalent without unplugin-auto-expose...
// contextBridge.exposeInMainWorld("electronAPI", {
//   onLoadProjectFile: (callback: any) => ipcRenderer.on("load-project-file", callback)
// });

// App.vue
import type { Project } from "./../../ipc-models/Takeoff/Takeoff";
const project = ref({ projectName: "Unloaded Project", projectClient: "Unloaded Client" } as Project);
onMounted( async () => {
  window.addEventListener("DOMContentLoaded", () => {
    ipcRenderer.on("load-project-file", (_, value) => {
      project.value = value;
    });
  });
});

Thanks for help, this template has been really interesting to work with!

[cawa-93]

I feel you kind a missed up in renderer part. You export onLoadProjectFile from preload but don't import it in renderer. (BTW I also don't see reasons to listen DOMContentLoaded in onMounted hook) Perhaps you means:

// App.vue
import { onLoadProjectFile } from '#preload' // <-- 

import type { Project } from "./../../ipc-models/Takeoff/Takeoff";
const project = ref({ projectName: "Unloaded Project", projectClient: "Unloaded Client" } as Project);
onMounted( async () => {
  window.addEventListener("DOMContentLoaded", () => {
    onLoadProjectFile((_, value) => { // <--
      project.value = value;
    });
  });
});

[TheAutomaTom]

Thanks, I couldn't tell how to make the ends meet!