electron-bridge-ipc

electron-bridge-ipc electronelectronipcvscode

yarn add electron-bridge-ipc
npm i electron-bridge-ipc
pnpm add -D electron-bridge-ipc

// main.ts
import { createServer } from 'electron-bridge-ipc/electron-main'
import { DisposableStore, ProxyChannel } from 'electron-bridge-ipc'
app.whenReady().then(() => {
  const server = createServer()
  const disposables = new DisposableStore()
  server.registerChannel('fileSystem', ProxyChannel.fromService(new FileSystemService(), disposables))
})

preload.ts

import { createPreload } from 'electron-bridge-ipc/electron-main'

createPreload()

// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createClient } from 'electron-bridge-ipc/electron-sandbox'
import App from './App.tsx'
import './index.css'

await createClient()
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

// App.tsx
import { useService } from 'electron-bridge-ipc/electron-sandbox'
import type { IFileSystemService } from '../electron/services/FileSystemService/IFileSystemService'
const fileSystemService = useService < IFileSystemService > ('fileSystem')
useEffect(() => {
  fileSystemService?.stat('C:\\Users').then((res) => {
    console.log(res)
  })
}, [fileSystemService])

// FileSystemService.ts
import fs from 'node:fs/promises'
import type { IFileSystemService } from './IFileSystemService'

export class FileSystemService implements IFileSystemService {
  stat(source: string) {
    return fs.stat(source)
  }
}

// IFileSystemService.ts
export interface IFileSystemService {
  stat: (source: string) => Promise<any>
}