diff --git a/README.md b/README.md
index be71546..d33d1c8 100644
--- a/README.md
+++ b/README.md
@@ -58,64 +58,62 @@ Then, create a file named as `index.ts` in the `ipcs` folder with the following
```ts
import { createInterprocess } from 'interprocess'
-const ipcs = createInterprocess({
- main: {
- async getPing(_, data: 'ping') {
- const message = `from renderer: ${data} on main process`
-
- console.log(message)
-
- return message
+export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
+ createInterprocess({
+ main: {
+ async getPing(_, data: 'ping') {
+ const message = `from renderer: ${data} on main process`
+
+ console.log(message)
+
+ return message
+ },
},
- },
- renderer: {
- async getPong(_, data: 'pong') {
- const message = `from main: ${data} on renderer process`
-
- console.log(message)
+ renderer: {
+ async getPong(_, data: 'pong') {
+ const message = `from main: ${data} on renderer process`
+
+ console.log(message)
- return message
+ return message
+ },
},
- },
-})
-
-export const {
- ipcMain,
- ipcRenderer,
- exposeApiToGlobalWindow
-} = ipcs
+ })
```
-On the main process:
+On the **main process**:
```ts
import { BrowserWindow, app } from 'electron'
+
import { ipcMain } from 'shared/ipcs'
+const { handle, invoke } = ipcMain
+
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, '../preload/index.js'),
- sandbox: false,
+ sandbox: false, // sandbox must be false
},
})
- ipcMain.handle.getPing()
+ handle.getPing()
- mainWindow.on('ready-to-show', () => {
- ipcMain.invoke.getPong(mainWindow, 'pong')
+ mainWindow.webContents.on('dom-ready', () => {
+ invoke.getPong(mainWindow, 'pong')
})
})
```
-In the preload script:
+In the **preload script**:
```ts
import { exposeApiToGlobalWindow } from 'shared/ipcs'
const { key, api } = exposeApiToGlobalWindow({
- exposeAll: true, // expose handlers, invokers and removers,
+ exposeAll: true, // expose handlers, invokers and removers
})
declare global {
@@ -124,7 +122,9 @@ declare global {
}
}
```
-On the renderer process:
+
+On the **renderer process**:
+
```ts
const { invoke, handle } = window.api
diff --git a/apps/web/docs/code-splitting/combineIpcs.mdx b/apps/web/docs/code-splitting/combineIpcs.mdx
index 3cd81e0..ae893db 100644
--- a/apps/web/docs/code-splitting/combineIpcs.mdx
+++ b/apps/web/docs/code-splitting/combineIpcs.mdx
@@ -3,9 +3,13 @@ title: combineIpcs
---
# combineIpcs
-A function to combine IPCs from different sources created using `createIpcSlice`.
+A function to combine IPCs from different sources created using `createIpcSlice` function.
-This function replaces the `createInterprocess`!
+
+
+`combineIpcs` replaces the `createInterprocess` function!
+
+
### Example
```ts
@@ -14,10 +18,9 @@ import { combineIpcs } from 'interprocess'
import { getPongIpcSlice } from './renderer'
import { getPingIpcSlice } from './main'
-const combinedIpcs = combineIpcs(
- getPongIpcSlice,
- getPingIpcSlice
-)
-
-export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } = combinedIpcs
+export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
+ combineIpcs(
+ getPongIpcSlice,
+ getPingIpcSlice
+ )
```
diff --git a/apps/web/docs/code-splitting/createIpcSlice.mdx b/apps/web/docs/code-splitting/createIpcSlice.mdx
index 8dd7170..efcb11c 100644
--- a/apps/web/docs/code-splitting/createIpcSlice.mdx
+++ b/apps/web/docs/code-splitting/createIpcSlice.mdx
@@ -1,9 +1,10 @@
---
title: createIpcSlice
+order: 1
---
# createIpcSlice
-A function that creates a slice of IPCs to be used by `combineIpcs`.
+A function that creates a slice of IPCs to be used by `combineIpcs` function.
### Example
`shared/ipcs/main/index.ts`
diff --git a/apps/web/docs/createInterprocess/exposeApiToGlobalWindow.mdx b/apps/web/docs/createInterprocess/exposeApiToGlobalWindow.mdx
index 8872160..190e757 100644
--- a/apps/web/docs/createInterprocess/exposeApiToGlobalWindow.mdx
+++ b/apps/web/docs/createInterprocess/exposeApiToGlobalWindow.mdx
@@ -3,7 +3,7 @@ title: exposeApiToGlobalWindow
---
# exposeApiToGlobalWindow
-A function that exposes the IPC handlers to the global window object from the preload script
+A function that exposes the IPCs to the global window object from the preload script
@@ -14,16 +14,16 @@ It takes a single object as a parameter with the following properties:
- **apiKey** - the api key that will be used to access the IPC handlers from the global window object **(optional)**
-- **exposeAll** - a boolean that determines whether all the IPC handlers will be exposed to the global window object **(optional)**. When set to true, invoke, handle and remove handlers will be exposed!
-- **append** - an object that take any property and value that will be appended to the global window object **(optional)**
-- **override** - a method that will override all the initial exposed IPC handler entries and lets you manage what will be exposed manually **(optional)**
+- **exposeAll** - a boolean that determines whether all the IPC methods will be exposed to the global window object **(optional)**. When set to true, invoke, handle and remove methods will be exposed!
+- **append** - an object that take any properties and values that will be appended to the global window object **(optional)**
+- **override** - a method that will override all - **except appended data** - the initial entries of exposed IPCs methods (invoke, handle and remove) and let's you manage what and how it will be exposed manually **(optional)**
## Default
```ts
apiKey: 'api'
-exposeAll: false // only invoke handlers is exposed
+exposeAll: false // only invokers are exposed
append: {}
override: null
```
@@ -32,8 +32,8 @@ override: null
## Return
-- **key** - the api key that will be used to access the IPC handlers from the global window object
-- **api** - an object that contains all the exposed IPC handlers
+- **key** - the api key that will be used to access the IPCs from the global window object
+- **api** - an object that contains all the exposed IPCs
@@ -41,12 +41,6 @@ override: null
```ts
import { exposeApiToGlobalWindow } from 'shared/ipcs'
-declare global {
- interface Window {
- [key]: typeof api
- }
-}
-
const { key, api } = exposeApiToGlobalWindow({
override(ipcs) {
return {
@@ -59,9 +53,15 @@ const { key, api } = exposeApiToGlobalWindow({
append: {
appName: 'Electron App',
- sayHello() {
- return 'Hello World'
+ sayHello(data: 'World') {
+ return `Hello ${data}`
},
} as const,
})
+
+declare global {
+ interface Window {
+ [key]: typeof api
+ }
+}
```
diff --git a/apps/web/docs/createInterprocess/introduction.mdx b/apps/web/docs/createInterprocess/introduction.mdx
index 7df4bb7..af99978 100644
--- a/apps/web/docs/createInterprocess/introduction.mdx
+++ b/apps/web/docs/createInterprocess/introduction.mdx
@@ -29,42 +29,34 @@ It returns an object with the following properties and methods:
- **ipcs** - an object containing the IPC handlers
-- **ipcMain** - the main process IPC manager
-- **ipcRenderer** - the renderer process IPC manager
-- **exposeApiToGlobalWindow** - a function that exposes the IPC handlers to the global window object from the preload script
+- **ipcMain** - the main process IPC manager containing **handle**, **invoke** and **remove** methods
+- **ipcRenderer** - the renderer process IPC manager containing **handle**, **invoke** and **remove** methods
+- **exposeApiToGlobalWindow** - a function that exposes the IPCs to the global window object from the preload script
## Example
```ts
import { createInterprocess } from 'interprocess'
-const ipcs = createInterprocess({
- main: {
- async getPing(_, data: 'ping') {
- const message = `from renderer: ${data} on main process`
+export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
+ createInterprocess({
+ main: {
+ async getPing(_, data: 'ping') {
+ const message = `from renderer: ${data} on main process`
- console.log(message)
+ console.log(message)
- return message
+ return message
+ },
},
- },
- renderer: {
- async getPong(_, data: 'pong') {
- const message = `from main: ${data} on renderer process`
+ renderer: {
+ async getPong(_, data: 'pong') {
+ const message = `from main: ${data} on renderer process`
- console.log(message)
+ console.log(message)
- return message
+ return message
+ },
},
- },
-})
-
-export const {
- ipcMain,
- ipcRenderer,
- exposeApiToGlobalWindow
-} = ipcs
+ })
```
-
-
-
diff --git a/apps/web/docs/createInterprocess/ipcMain.mdx b/apps/web/docs/createInterprocess/ipcMain.mdx
index 7a6bf5a..ae57c88 100644
--- a/apps/web/docs/createInterprocess/ipcMain.mdx
+++ b/apps/web/docs/createInterprocess/ipcMain.mdx
@@ -3,7 +3,7 @@ title: ipcMain
---
# ipcMain
-An object that carries `handle`, `invoke` and `remove` methods to manage the asynchronous communication from the main process to renderer processes.
+An object that carries `handle`, `invoke` and `remove` methods to manage the asynchronous communication from the main to renderer processes.
@@ -24,24 +24,25 @@ ipcMain.handle.getPing()
-Where `getPing` is the name of the channel (handler) registered in the `createInterprocess` or `createIpcSlice` function.
+Where `getPing` is the name of the channel (handler) registered in the `createInterprocess` or `createIpcSlice` functions.
Also, you can pass a callback function to handle the request from the renderer process if you need to do something before sending the response:
+
```ts
- ipcMain.handle.getPing(async (_, { getPing, data }) => {
- // call the registered handler if needed
- const response = await getPing(_, data)
+ipcMain.handle.getPing(async (_, { getPing, data }) => {
+ // call the registered handler if needed
+ const response = await getPing(_, data)
- await ipcMain.invoke.getPong(mainWindow, 'pong')
+ await ipcMain.invoke.getPong(mainWindow, 'pong')
- ipcMain.remove.getPing()
+ ipcMain.remove.getPing()
- return 'The getPong ipc was removed'
- })
+ return 'The getPong ipc was removed'
+})
```
diff --git a/apps/web/docs/createInterprocess/ipcRenderer.mdx b/apps/web/docs/createInterprocess/ipcRenderer.mdx
index a3fa166..6a1e81f 100644
--- a/apps/web/docs/createInterprocess/ipcRenderer.mdx
+++ b/apps/web/docs/createInterprocess/ipcRenderer.mdx
@@ -3,11 +3,10 @@ title: ipcRenderer
---
# ipcRenderer
-An object that carries `handle`, `invoke` and `remove` methods to manage the asynchronous communication from the renderer process to main processes.
+An object that carries `handle`, `invoke` and `remove` methods to manage the asynchronous communication from the renderer to main process.
-
### ipcRenderer.handle[channel / handler name]
Register the IPC handler for the given channel. The handler will be called whenever the `ipcMain.invoke` method is called with the same channel.
@@ -26,13 +25,14 @@ handle.getPing()
-Where `getPing` is the name of the channel (handler) registered in the `createInterprocess` or `createIpcSlice` function.
+Where `getPing` is the name of the channel (handler) registered in the `createInterprocess` or `createIpcSlice` functions.
Also, you can pass a callback function to handle the request from the main process if you need to do something before sending the response:
+
```ts
const { handle, remove, invoke } = window.api
diff --git a/apps/web/docs/getting-started/create-a-interprocess.mdx b/apps/web/docs/getting-started/create-a-interprocess.mdx
index 183d53c..603db7c 100644
--- a/apps/web/docs/getting-started/create-a-interprocess.mdx
+++ b/apps/web/docs/getting-started/create-a-interprocess.mdx
@@ -24,84 +24,82 @@ Then, create a file named as `index.ts` in the `ipcs` folder with the following
```ts
import { createInterprocess } from 'interprocess'
-const ipcs = createInterprocess({
- main: {
- async getPing(_, data: 'ping') {
- const message = `from renderer: ${data} on main process`
+export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
+ createInterprocess({
+ main: {
+ async getPing(_, data: 'ping') {
+ const message = `from renderer: ${data} on main process`
- console.log(message)
+ console.log(message)
- return message
+ return message
+ },
},
- },
- renderer: {
- async getPong(_, data: 'pong') {
- const message = `from main: ${data} on renderer process`
+ renderer: {
+ async getPong(_, data: 'pong') {
+ const message = `from main: ${data} on renderer process`
- console.log(message)
+ console.log(message)
- return message
+ return message
+ },
},
- },
-})
-
-export const {
- ipcMain,
- ipcRenderer,
- exposeApiToGlobalWindow
-} = ipcs
+ })
```
-On the main process:
+On the **main process**:
```ts
import { BrowserWindow, app } from 'electron'
+
import { ipcMain } from 'shared/ipcs'
+const { handle, invoke } = ipcMain
+
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, '../preload/index.js'),
- sandbox: false,
+ sandbox: false, // sandbox must be false
},
})
- ipcMain.handle.getPing()
+ handle.getPing()
- mainWindow.on('ready-to-show', () => {
- ipcMain.invoke.getPong(mainWindow, 'pong')
+ mainWindow.webContents.on('dom-ready', () => {
+ invoke.getPong(mainWindow, 'pong')
})
})
```
-In the preload script:
+In the **preload script**:
```ts
import { exposeApiToGlobalWindow } from 'shared/ipcs'
+const { key, api } = exposeApiToGlobalWindow({
+ exposeAll: true, // expose handlers, invokers and removers
+})
+
declare global {
interface Window {
[key]: typeof api
}
}
-
-const { key, api } = exposeApiToGlobalWindow({
- exposeAll: true, // expose handlers and invokers,
-})
```
-On the renderer process:
+On the **renderer process**:
@@ -117,4 +115,11 @@ This is a simple way to work with interprocess, but there's a lot of more cool f
-Also, you can take a look [this example](https://github.com/daltonmenezes/interprocess/tree/main/apps/desktop)
+Also, **you can take a look the following examples**:
+
+
+
+- [Executable](https://github.com/daltonmenezes/interprocess/tree/main/apps/desktop)
+- [CodeSandbox (simple)](https://codesandbox.io/s/simple-607b6h?file=/src/ipcs.ts)
+- [CodeSandbox (advanced)](https://codesandbox.io/s/advanced-4qh0xb?file=/src/ipcs/index.ts)
+
diff --git a/packages/interprocess/README.md b/packages/interprocess/README.md
index be71546..d33d1c8 100644
--- a/packages/interprocess/README.md
+++ b/packages/interprocess/README.md
@@ -58,64 +58,62 @@ Then, create a file named as `index.ts` in the `ipcs` folder with the following
```ts
import { createInterprocess } from 'interprocess'
-const ipcs = createInterprocess({
- main: {
- async getPing(_, data: 'ping') {
- const message = `from renderer: ${data} on main process`
-
- console.log(message)
-
- return message
+export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
+ createInterprocess({
+ main: {
+ async getPing(_, data: 'ping') {
+ const message = `from renderer: ${data} on main process`
+
+ console.log(message)
+
+ return message
+ },
},
- },
- renderer: {
- async getPong(_, data: 'pong') {
- const message = `from main: ${data} on renderer process`
-
- console.log(message)
+ renderer: {
+ async getPong(_, data: 'pong') {
+ const message = `from main: ${data} on renderer process`
+
+ console.log(message)
- return message
+ return message
+ },
},
- },
-})
-
-export const {
- ipcMain,
- ipcRenderer,
- exposeApiToGlobalWindow
-} = ipcs
+ })
```
-On the main process:
+On the **main process**:
```ts
import { BrowserWindow, app } from 'electron'
+
import { ipcMain } from 'shared/ipcs'
+const { handle, invoke } = ipcMain
+
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, '../preload/index.js'),
- sandbox: false,
+ sandbox: false, // sandbox must be false
},
})
- ipcMain.handle.getPing()
+ handle.getPing()
- mainWindow.on('ready-to-show', () => {
- ipcMain.invoke.getPong(mainWindow, 'pong')
+ mainWindow.webContents.on('dom-ready', () => {
+ invoke.getPong(mainWindow, 'pong')
})
})
```
-In the preload script:
+In the **preload script**:
```ts
import { exposeApiToGlobalWindow } from 'shared/ipcs'
const { key, api } = exposeApiToGlobalWindow({
- exposeAll: true, // expose handlers, invokers and removers,
+ exposeAll: true, // expose handlers, invokers and removers
})
declare global {
@@ -124,7 +122,9 @@ declare global {
}
}
```
-On the renderer process:
+
+On the **renderer process**:
+
```ts
const { invoke, handle } = window.api