Dts-for-context-bridge NPM

dts-cb

This utility is designed to analyze context bridges in Electron application and create .d.ts files.

Problem

In one part of your application, you describe some API and expose it into the global context of the renderer.

contextBridge.exposeInMainWorld(
  'electron',
  {
    doThing: () => ipcRenderer.send('do-a-thing')
  }
)

However, for the TypeScript in the renderer knows nothing about the new global api.

// Property 'electron' does not exist on type 'Window & typeof globalThis'.
window.electron.doThing()

Therefore, you must somehow register these apps.

Decision

This utility scans the source code and finds all exposeInMainWorld calls. Then it generates a .d.ts file with an interface that can later be connected in the renderer.

contextBridge.exposeInMainWorld(
  'electron',
  {
    doThing: () => ipcRenderer.send('do-a-thing')
  }
)

// generated.d.ts
interface Window {
    readonly electron: {doThing: () => void}
}

See more examples.

Installation

# global
npm i -g dts-for-context-bridge

# for project 
npm i dts-for-context-bridge

Usage

# You can use glob pattern as input
dts-cb --input="preload/src/**/*.ts" --output="preload/exposed.d.ts"

# You can use tsconfig.json as input
dts-cb --input="preload/tsconfig.json" --output="preload/exposed.d.ts"

See all options by

dts-cb --help

Programmatic usage

import {generate} from 'dts-for-context-bridge'

generate({
    input: 'preload/src/**/*.ts', // Or path to tsconfig.json
    output: 'preload/exposed.d.ts',
})