{"id":21155265,"url":"https://github.com/nlfmt/electron-bridge","last_synced_at":"2025-03-14T15:15:38.942Z","repository":{"id":220616738,"uuid":"748117115","full_name":"nlfmt/electron-bridge","owner":"nlfmt","description":"Easily define and use IPC functions and events in your Electron app. Fully typesafe.","archived":false,"fork":false,"pushed_at":"2024-02-09T19:16:14.000Z","size":81,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-07T17:05:09.016Z","etag":null,"topics":["electron","router","rpc","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nlfmt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-25T10:05:28.000Z","updated_at":"2024-08-15T03:37:15.000Z","dependencies_parsed_at":"2024-02-09T18:27:54.420Z","dependency_job_id":"aaeaa18f-d64b-43c9-9f8f-8dc8601009f5","html_url":"https://github.com/nlfmt/electron-bridge","commit_stats":null,"previous_names":["nlfmt/electron-bridge"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nlfmt%2Felectron-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nlfmt%2Felectron-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nlfmt%2Felectron-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nlfmt%2Felectron-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nlfmt","download_url":"https://codeload.github.com/nlfmt/electron-bridge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243597833,"owners_count":20316844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","router","rpc","typescript"],"created_at":"2024-11-20T11:16:56.167Z","updated_at":"2025-03-14T15:15:38.890Z","avatar_url":"https://github.com/nlfmt.png","language":"TypeScript","readme":"# Electron Bridge\n\nEasily define and use IPC functions and events in your Electron app. Fully typesafe. \\\nInspired by [tRPC's architecture](https://trpc.io/).\n \n## Installation\n```bash\nnpm install @nlfmt/electron-bridge\n```\n\n```bash\npnpm add @nlfmt/electron-bridge\n```\n\n```bash\nyarn add @nlfmt/electron-bridge\n```\n\n## Usage\n\nThis library is designed to be used with electron apps that enable `contextIsolation`, `sandbox` and disable `nodeIntegration`.\n\n### Create bridge\n\n```ts\n// bridge.ts\nimport { createBridge, createBridgeRouter } from '@nlfmt/electron-bridge'\n  \n// You can place routers in separate files and import them here\nconst exampleRouter = createBridgeRouter({\n  log: (e, message: string) =\u003e {\n    console.log(\"Message from IPC:\", message)\n  },\n})\n\nexport const bridge = createBridge({\n  example: exampleRouter,\n})\n```\n\n### Register bridge\n\n```ts\n// main.ts\nimport { bridge } from './bridge'\n\n// This will call ipcMain.handle() under-the-hood and set up all listeners\n// Don't forget to call this before you send any IPC messages\nbridge.register()\n```\n\n### Register preload script\nIf you have `sandbox` enabled, you wont be able to import `registerBridgePreload`,\nunless you are using a bundler, such as `vite` with the `vite-plugin-electron` plugin.\nFor a workaround, see the [Issues](#issues) section.\n\n```ts\n// preload.ts\nimport { registerBridgePreload } from '@nlfmt/electron-bridge/preload'\n\nregisterBridgePreload()\n```\n\n### Use bridge\n\n```tsx\n// App.tsx\nimport { createRendererBridge } from '@nlfmt/electron-bridge/renderer'\n\n// Usually would be defined in a separate file like `bridge.ts`\nexport const bridge = createRendererBridge()\n\nfunction App() {\n  return (\n    \u003cbutton onClick={() =\u003e bridge.example.log(\"Hello from App.tsx\")}\u003e\n      Send message\n    \u003c/button\u003e\n  )\n}\n\nexport default App\n```\n\n### Set up Events\n\nRegister Events using the `withEvents` method on the bridge.\n```ts\n// bridge.ts\n\ntype RendererEvents = {\n  userClickedButton: { message: string }\n}\ntype MainEvents = {\n  ping: { data: number }\n}\n\nexport const bridge = createBridge({\n  example: exampleRouter,\n}).withEvents\u003cRendererEvents, MainEvents\u003e()\n\n// send events every second\nsetInterval(() =\u003e {\n  bridge.emit(\"ping\", { data: Math.random() })\n}, 1000)\n\nbridge.on()\n```\nThen, use the events api in the renderer:\n```tsx\n// App.tsx\nimport { createRendererBridge } from '@nlfmt/electron-bridge/renderer'\nimport { useEffect } from 'react'\n\nexport const bridge = createRendererBridge()\n\nfunction App() {\n\n  useEffect(() =\u003e {\n    // methods like `on` and `once` return a function that can be used to unsubscribe\n    return bridge.events.on(\"ping\", (e, data) =\u003e {\n      console.log(\"Ping from main:\", data)\n    })\n  }, [])\n  \n  return (\n    \u003cbutton onClick={() =\u003e bridge.example.log(\"Hello from App.tsx\")}\u003e\n      Send message\n    \u003c/button\u003e\n  )\n}\n```\n\n## Issues\n### Preload scripts without a bundler\n\nIf you are not using a bundler, you can use the following workaround to register everything needed by the bridge:\n```ts\nimport { contextBridge, ipcRenderer } from \"electron\"\n\ncontextBridge.exposeInMainWorld(\"__bridge\", {\n  invoke: ipcRenderer.invoke,\n  emit: ipcRenderer.send,\n  on: (...args: Parameters\u003ctypeof ipcRenderer.on\u003e) =\u003e {\n    ipcRenderer.on(...args)\n    return () =\u003e ipcRenderer.off(...args)\n  },\n  once: (...args: Parameters\u003ctypeof ipcRenderer.once\u003e) =\u003e {\n    ipcRenderer.once(...args)\n    return () =\u003e ipcRenderer.off(...args)\n  },\n  off: ipcRenderer.off,\n})\n```\n\n## License\n\nSee [LICENSE](LICENSE) for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnlfmt%2Felectron-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnlfmt%2Felectron-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnlfmt%2Felectron-bridge/lists"}