added an ipcRenderer usage sample to the electron-typescript example (#…

…20000)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

examples/with-electron-typescript/electron-src/index.ts

@@ -36,5 +36,6 @@ app.on('window-all-closed', app.quit)
 
 // listen the channel `message` and resend the received message to the renderer process
 ipcMain.on('message', (event: IpcMainEvent, message: any) => {
-  event.sender.send('message', message)
+  console.log(message)
+  setTimeout(() => event.sender.send('message', 'hi from electron'), 500)
 })

examples/with-electron-typescript/renderer/interfaces/index.ts

@@ -3,6 +3,17 @@
 // example, to import the interface below do:
 //
 // import User from 'path/to/interfaces';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IpcRenderer } from 'electron'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface Global {
+      ipcRenderer: IpcRenderer
+    }
+  }
+}
 
 export type User = {
   id: number

examples/with-electron-typescript/renderer/pages/index.tsx

@@ -1,10 +1,23 @@
+import { useEffect } from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
 
 const IndexPage = () => {
+  useEffect(() => {
+    // add a listener to 'message' channel
+    global.ipcRenderer.addListener('message', (_event, args) => {
+      alert(args)
+    })
+  }, [])
+
+  const onSayHiClick = () => {
+    global.ipcRenderer.send('message', 'hi from next')
+  }
+
   return (
     <Layout title="Home | Next.js + TypeScript + Electron Example">
       <h1>Hello Next.js 👋</h1>
+      <button onClick={onSayHiClick}>Say hi to electron</button>
       <p>
         <Link href="/about">
           <a>About</a>