From 45bb8d1dcdf13c60e335512f4e3114448aa7b6ac Mon Sep 17 00:00:00 2001
From: Dalton Menezes <daltonmenezes@outlook.com>
Date: Sun, 20 Nov 2022 20:14:26 -0300
Subject: [PATCH] chore: update docs

---
 README.md                                     | 62 ++++++++---------
 apps/web/docs/code-splitting/combineIpcs.mdx  | 19 ++---
 .../docs/code-splitting/createIpcSlice.mdx    |  3 +-
 .../exposeApiToGlobalWindow.mdx               | 30 ++++----
 .../docs/createInterprocess/introduction.mdx  | 44 +++++-------
 apps/web/docs/createInterprocess/ipcMain.mdx  | 19 ++---
 .../docs/createInterprocess/ipcRenderer.mdx   |  6 +-
 .../getting-started/create-a-interprocess.mdx | 69 ++++++++++---------
 packages/interprocess/README.md               | 62 ++++++++---------
 9 files changed, 158 insertions(+), 156 deletions(-)

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`!
+<br />
+
+`combineIpcs` replaces the `createInterprocess` function!
+
+<br />
 
 ### 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
 
 <br />
 
@@ -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
 ```
@@ -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
 
 <br />
 
@@ -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:
 <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
+  })
 ```
-
-
-
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.
 
 <br />
 
@@ -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 />
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.
 
 <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.
@@ -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
 
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
+  })
 ```
 
 <br />
 
-On the main process:
+On the **main process**:
 
 <br />
 
 ```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')
   })
 })
 ```
 
 <br />
 
-In the preload script:
+In the **preload script**:
 
 <br />
 
 ```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,
-})
 ```
 
 <br />
 
-On the renderer process:
+On the **renderer process**:
 
 <br />
 
@@ -117,4 +115,11 @@ This is a simple way to work with interprocess, but there's a lot of more cool f
 
 <br />
 
-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**:
+
+<br />
+
+- [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