electrobun-preact-devtools

Purpose

electrobun-preact-devtools runs the Preact devtools UI in a standalone Electrobun window. It gives you a Bun-side host, an app-window preload bridge, and a devtools-window mount API.

Installation

pnpm add electrobun-preact-devtools

Quick Example

import { BrowserWindow } from 'electrobun/bun'
import { Electroview } from 'electrobun/view'
import { createPreactDevtoolsHost } from 'electrobun-preact-devtools/bun'
import {
  composeAppWindowViewRPC,
  installPreactDevtoolsBridge,
} from 'electrobun-preact-devtools/app-preload'
import {
  composeDevtoolsWindowViewRPC,
  mountPreactDevtoolsWindow,
} from 'electrobun-preact-devtools/devtools-view'

const host = createPreactDevtoolsHost({
  openWindow({ rpc }) {
    return new BrowserWindow({
      title: 'Preact Devtools',
      url: 'views://preact-devtools/index.html',
      rpc,
    })
  },
})

const appWindow = new BrowserWindow({
  title: 'My App',
  url: 'views://app/index.html',
  preload: 'views://app/preload.js',
  rpc: host.createAppWindowRPC({ targetId: 'main' }),
})

host.registerAppWindow({ targetId: 'main', window: appWindow })

const appElectroview = new Electroview({ rpc: composeAppWindowViewRPC({}) })
installPreactDevtoolsBridge({ electroview: appElectroview })

const devtoolsElectroview = new Electroview({
  rpc: composeDevtoolsWindowViewRPC({}),
})

mountPreactDevtoolsWindow({
  container: document.getElementById('root')!,
  electroview: devtoolsElectroview,
})

Documentation Map

• Concepts and lifecycle: docs/context.md
• Minimal example: examples/minimal.ts
• Existing RPC composition: examples/compose-existing-rpc.ts
• Exact exported signatures: generated in dist/*.d.mts after pnpm build