Skip to content

Commit

Permalink
chore: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
daltonmenezes committed Nov 20, 2022
1 parent b044337 commit 45bb8d1
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 156 deletions.
62 changes: 31 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -124,7 +122,9 @@ declare global {
}
}
```
On the renderer process:

On the **renderer process**:

```ts
const { invoke, handle } = window.api

Expand Down
19 changes: 11 additions & 8 deletions apps/web/docs/code-splitting/combineIpcs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`!
<br />

`combineIpcs` replaces the `createInterprocess` function!

<br />

### Example
```ts
Expand All @@ -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
)
```
3 changes: 2 additions & 1 deletion apps/web/docs/code-splitting/createIpcSlice.mdx
Original file line number Diff line number Diff line change
@@ -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`
Expand Down
30 changes: 15 additions & 15 deletions apps/web/docs/createInterprocess/exposeApiToGlobalWindow.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

<br />

Expand All @@ -14,16 +14,16 @@ It takes a single object as a parameter with the following properties:
<br />

- **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)**

<br />

## Default
```ts
apiKey: 'api'
exposeAll: false // only invoke handlers is exposed
exposeAll: false // only invokers are exposed
append: {}
override: null
```
Expand All @@ -32,21 +32,15 @@ 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

<br />

## Example
```ts
import { exposeApiToGlobalWindow } from 'shared/ipcs'

declare global {
interface Window {
[key]: typeof api
}
}

const { key, api } = exposeApiToGlobalWindow({
override(ipcs) {
return {
Expand All @@ -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
}
}
```
44 changes: 18 additions & 26 deletions apps/web/docs/createInterprocess/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,42 +29,34 @@ It returns an object with the following properties and methods:
<br />

- **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
})
```



19 changes: 10 additions & 9 deletions apps/web/docs/createInterprocess/ipcMain.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<br />

Expand All @@ -24,24 +24,25 @@ ipcMain.handle.getPing()

<br />

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.

<br />

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:

<br />

```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'
})
```

<br />
Expand Down
6 changes: 3 additions & 3 deletions apps/web/docs/createInterprocess/ipcRenderer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<br />


### 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.
Expand All @@ -26,13 +25,14 @@ handle.getPing()

<br />

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.

<br />

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:

<br />

```ts
const { handle, remove, invoke } = window.api

Expand Down
Loading

0 comments on commit 45bb8d1

Please sign in to comment.