Electron Integration

[MentalGear]

Thank you, wxt really helps greatly with developing crossbrowser apps - I was wondering if you could also provide some details on how to best extend wxt to also be able to deply as an electron app? (monorepo maybe)

[aklinker1]

You'll need a monorepo and you'll need to create abstractions that your UI and background logic can depend on. For example, to store settings, you'll probably want to create a storage interface and pass in two different implementations when creating your UI/background logic from each app:

// packages/shared/app-storage.ts
export interface AppStorage {
  getValue<T>(key: string): Promise<T>;
  setValue<T>(key: string, newValue: T): Promise<void>;
}

// apps/extension/extension-app-storage.ts
export function createExtensionAppStorage(): AppStorage {
  // Implement storage using browser.storage or @wxt-dev/storage or any other extension storage library
}

// apps/desktop/desktop-app-storage.ts
export function createDesktopAppStorage(): AppStorage {
  // Implement storage using better-sqlite3
}

Here's an example monorepo that abstracts things to reuse a UI across a webapp and an extension - basically the same thing as an electron app.

[MentalGear]

thank you very much for the explications and the repo example! 👌

Indeed this is similar to how I planned it as well: pnpm workspace and a core package that can be imported by the apps extension and desktop-app.

Anything else regarding pnpm or wxt worth noting?
Otherwise I think this would also be quite helpful information for the docs 🙂

[aklinker1]

Nothing PNPM related. But for monorepos + typescript, make sure you have a TSconfig for each package. And with WXT, make sure your extension's tsconfig extends the one inside the .wxt directory, as described here: https://wxt.dev/guide/essentials/config/typescript.html

[MentalGear]

thanks again, much appreciated! I'll try it out and report back 🙂