Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/el3um4s/ipc-for-electron
A package to simplify the communication between renderer and node js in Electron applications
https://github.com/el3um4s/ipc-for-electron
electron electronjs inter-process-communication ipc node nodejs npm renderer typescript
Last synced: 5 days ago
JSON representation
A package to simplify the communication between renderer and node js in Electron applications
- Host: GitHub
- URL: https://github.com/el3um4s/ipc-for-electron
- Owner: el3um4s
- License: mit
- Created: 2022-08-10T10:33:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-04T15:30:04.000Z (almost 2 years ago)
- Last Synced: 2024-12-07T11:59:53.728Z (15 days ago)
- Topics: electron, electronjs, inter-process-communication, ipc, node, nodejs, npm, renderer, typescript
- Language: TypeScript
- Homepage:
- Size: 1.54 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# IPC for Electron
A package to simplify the communication between renderer and node js in Electron applications
NPM link: [@el3um4s/ipc-for-electron](https://www.npmjs.com/package/@el3um4s/ipc-for-electron)
### Install and use the package
To use the package in a project:
```bash
npm i @el3um4s/ipc-for-electron
```
and then in a file:
```ts
import { IPC, generateContextBridge } from "@el3um4s/ipc-for-electron";
```
### How to add a new API
Use IPC to create a new API for the renderer process:
```ts
import { IPC, SendChannels } from "@el3um4s/ipc-for-electron";
import { BrowserWindow } from "electron";
const nameAPI = "helloWorld";
// to Main
const validSendChannel: SendChannels = {
requestHello: requestHello,
};
// from Main
const validReceiveChannel: string[] = ["getHello"];
const systemInfo = new IPC({
nameAPI,
validSendChannel,
validReceiveChannel,
});
export default helloWorld;
// Enter here the functions for ElectronJS
function requestHello(
mainWindow: BrowserWindow,
event: Electron.IpcMainEvent,
message: any
) {
const result = {
name: "John",
message: "Hello",
};
mainWindow.webContents.send("getHello", result);
}
```
### Add the API to the context bridge
Add the api to the context bridge to use it in the renderer process. In the `preload.ts` file:
```ts
import { generateContextBridge } from "@el3um4s/ipc-for-electron";
import helloWorld from "./helloWorld";
const listAPI = [helloWorld];
generateContextBridge(listAPI, "ipc");
```
### Use the API from the renderer
In the renderer process, use the API:
```ts
globalThis.ipc.helloWorld.send("requestHello", null);
globalThis.ipc.helloWorld.receive("getHello", async (data) => {
const { name, message } = data;
console.log(message, name);
// Hello John
});
```
### API Prebuilt
**System Info**: _Allow the renderer to get information about the version of Electron, Chrome and NodeJS_
- GitHub: [el3um4s/ipc-for-electron-system-info](https://github.com/el3um4s/ipc-for-electron-system-info) - [el3um4s/renderer-for-electron-system-info](https://github.com/el3um4s/renderer-for-electron-system-info)
- NPM: [@el3um4s/ipc-for-electron-system-info](https://www.npmjs.com/package/@el3um4s/ipc-for-electron-system-info) - [@el3um4s/renderer-for-electron-system-info](https://www.npmjs.com/package/@el3um4s/renderer-for-electron-system-info)
**Window Controls**: _Allow the renderer to close, minimize and maximize the window_
- GitHub: [el3um4s/ipc-for-electron-window-controls](https://github.com/el3um4s/ipc-for-electron-window-controls) - [el3um4s/renderer-for-electron-window-controls](https://github.com/el3um4s/renderer-for-electron-window-controls)
- NPM: [@el3um4s/ipc-for-electron-window-controls](https://www.npmjs.com/package/@el3um4s/ipc-for-electron-window-controls) - [@el3um4s/renderer-for-electron-window-controls](https://www.npmjs.com/package/@el3um4s/renderer-for-electron-window-controls)
**Chokidar**: _Allow the renderer to use [chokidar](https://www.npmjs.com/package/chokidar) (Minimal and efficient cross-platform file watching library)_
- GitHub: [el3um4s/ipc-for-electron-chokidar](https://github.com/el3um4s/ipc-for-electron-chokidar) - [el3um4s/renderer-for-electron-chokidar](https://github.com/el3um4s/renderer-for-electron-chokidar)
- NPM: [@el3um4s/ipc-for-electron-chokidar](https://www.npmjs.com/package/@el3um4s/ipc-for-electron-chokidar) - [@el3um4s/renderer-for-electron-chokidar](https://www.npmjs.com/package/@el3um4s/renderer-for-electron-chokidar)
**Auto Updater**: _Allow the renderer to update electron apps via [electron-updater](https://www.npmjs.com/package/electron-updater)_
- GitHub: [el3um4s/ipc-for-electron-auto-updater](https://github.com/el3um4s/ipc-for-electron-auto-updater) - [el3um4s/renderer-for-electron-auto-updater](https://github.com/el3um4s/renderer-for-electron-auto-updater)
- NPM: [@el3um4s/ipc-for-electron-auto-updater](https://www.npmjs.com/package/@el3um4s/ipc-for-electron-auto-updater) - [@el3um4s/renderer-for-electron-auto-updater](https://www.npmjs.com/package/@el3um4s/renderer-for-electron-auto-updater)
**Auto Updater**: _Allow the renderer to update electron apps via [electron-updater](https://www.npmjs.com/package/electron-updater)_
**Electron Window**: _Create a window with optional autoupdater and browserview_
- GitHub: [el3um4s/electron-window](https://github.com/el3um4s/electron-window) - [el3um4s/renderer-electron-window-browser-view](https://github.com/el3um4s/renderer-electron-window-browser-view)
- NPM: [@el3um4s/electron-window](https://www.npmjs.com/package/@el3um4s/electron-window) - [@el3um4s/renderer-electron-window-browser-view](https://www.npmjs.com/package/@el3um4s/renderer-electron-window-browser-view)