Reformat and add example IPC

RobinsonZ · RobinsonZ · commit f5b2db281f43 · 2023-11-02T15:10:39.000-04:00
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,6 +1,3 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
-}
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}
diff --git a/electron-builder.yml b/electron-builder.yml
@@ -3,12 +3,12 @@ productName: slate
 directories:
   buildResources: build
 files:
-  - '!**/.vscode/*'
-  - '!src/*'
-  - '!electron.vite.config.{js,ts,mjs,cjs}'
-  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
-  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
-  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+  - "!**/.vscode/*"
+  - "!src/*"
+  - "!electron.vite.config.{js,ts,mjs,cjs}"
+  - "!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}"
+  - "!{.env,.env.*,.npmrc,pnpm-lock.yaml}"
+  - "!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}"
 asarUnpack:
   - resources/**
 win:
diff --git a/electron.vite.config.ts b/electron.vite.config.ts
@@ -1,20 +1,20 @@
-import { resolve } from 'path'
-import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
-import react from '@vitejs/plugin-react'
+import { resolve } from "path";
+import { defineConfig, externalizeDepsPlugin } from "electron-vite";
+import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   main: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   preload: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   renderer: {
     resolve: {
       alias: {
-        '@renderer': resolve('src/renderer/src')
-      }
+        "@renderer": resolve("src/renderer/src"),
+      },
     },
-    plugins: [react()]
-  }
-})
+    plugins: [react()],
+  },
+});
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -1,7 +1,7 @@
-import { app, shell, BrowserWindow } from 'electron'
-import { join } from 'path'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import icon from '../../resources/icon.png?asset'
+import { app, shell, BrowserWindow, ipcMain } from "electron";
+import { join } from "path";
+import { electronApp, optimizer, is } from "@electron-toolkit/utils";
+import icon from "../../resources/icon.png?asset";
 
 function createWindow(): void {
   // Create the browser window.
@@ -10,28 +10,28 @@ function createWindow(): void {
     height: 670,
     show: false,
     autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
+    ...(process.platform === "linux" ? { icon } : {}),
     webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
-      sandbox: false
-    }
-  })
+      preload: join(__dirname, "../preload/index.js"),
+      sandbox: false,
+    },
+  });
 
-  mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
-  })
+  mainWindow.on("ready-to-show", () => {
+    mainWindow.show();
+  });
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
+    shell.openExternal(details.url);
+    return { action: "deny" };
+  });
 
   // HMR for renderer base on electron-vite cli.
   // Load the remote URL for development or the local html file for production.
-  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+    mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
   } else {
-    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+    mainWindow.loadFile(join(__dirname, "../renderer/index.html"));
   }
 }
 
@@ -40,32 +40,37 @@ function createWindow(): void {
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
   // Set app user model id for windows
-  electronApp.setAppUserModelId('com.electron')
+  electronApp.setAppUserModelId("com.electron");
 
   // Default open or close DevTools by F12 in development
   // and ignore CommandOrControl + R in production.
   // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
-  app.on('browser-window-created', (_, window) => {
-    optimizer.watchWindowShortcuts(window)
-  })
+  app.on("browser-window-created", (_, window) => {
+    optimizer.watchWindowShortcuts(window);
+  });
 
-  createWindow()
+  createWindow();
 
-  app.on('activate', function () {
+  app.on("activate", function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
-})
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
   }
-})
+});
 
 // In this file you can include the rest of your app"s specific main process
 // code. You can also put them in separate files and require them here.
+
+// "server-side API"
+ipcMain.handle("ping", () => {
+  return "pong";
+});
diff --git a/src/preload/index.d.ts b/src/preload/index.d.ts
@@ -1,8 +1,8 @@
-import { ElectronAPI } from '@electron-toolkit/preload'
+import { ElectronAPI } from "@electron-toolkit/preload";
 
 declare global {
   interface Window {
-    electron: ElectronAPI
-    api: unknown
+    electron: ElectronAPI;
+    api: unknown;
   }
 }
diff --git a/src/preload/index.ts b/src/preload/index.ts
@@ -1,22 +1,22 @@
-import { contextBridge } from 'electron'
-import { electronAPI } from '@electron-toolkit/preload'
+import { contextBridge } from "electron";
+import { electronAPI } from "@electron-toolkit/preload";
 
 // Custom APIs for renderer
-const api = {}
+const api = {};
 
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
 // just add to the DOM global.
 if (process.contextIsolated) {
   try {
-    contextBridge.exposeInMainWorld('electron', electronAPI)
-    contextBridge.exposeInMainWorld('api', api)
+    contextBridge.exposeInMainWorld("electron", electronAPI);
+    contextBridge.exposeInMainWorld("api", api);
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 } else {
   // @ts-ignore (define in dts)
-  window.electron = electronAPI
+  window.electron = electronAPI;
   // @ts-ignore (define in dts)
-  window.api = api
+  window.api = api;
 }
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
@@ -1,7 +1,13 @@
-import Versions from './components/Versions'
-import icons from './assets/icons.svg'
+import Versions from "./components/Versions";
+import icons from "./assets/icons.svg";
+import { useEffect } from "react";
 
 function App(): JSX.Element {
+  useEffect(() => {
+    // call a "server API" (defined at bottom of main.js right now)
+    window.electron.ipcRenderer.invoke("ping", "hello").then(console.log);
+  }, []);
+
   return (
     <div className="container">
       <Versions></Versions>
@@ -10,15 +16,20 @@ function App(): JSX.Element {
         <use xlinkHref={`${icons}#electron`} />
       </svg>
       <h2 className="hero-text">
-        You{"'"}ve successfully created an Electron project with React and TypeScript
+        You{"'"}ve successfully created an Electron project with React and
+        TypeScript
       </h2>
       <p className="hero-tagline">
         Please try pressing <code>F12</code> to open the devTool
       </p>
 
       <div className="links">
         <div className="link-item">
-          <a target="_blank" href="https://electron-vite.org" rel="noopener noreferrer">
+          <a
+            target="_blank"
+            href="https://electron-vite.org"
+            rel="noopener noreferrer"
+          >
             Documentation
           </a>
         </div>
@@ -49,8 +60,12 @@ function App(): JSX.Element {
           <article>
             <h2 className="title">Configuring</h2>
             <p className="detail">
-              Config with <span>electron.vite.config.ts</span> and refer to the{' '}
-              <a target="_blank" href="https://electron-vite.org/config" rel="noopener noreferrer">
+              Config with <span>electron.vite.config.ts</span> and refer to the{" "}
+              <a
+                target="_blank"
+                href="https://electron-vite.org/config"
+                rel="noopener noreferrer"
+              >
                 config guide
               </a>
               .
@@ -61,7 +76,7 @@ function App(): JSX.Element {
           <article>
             <h2 className="title">HMR</h2>
             <p className="detail">
-              Edit <span>src/renderer</span> files to test HMR. See{' '}
+              Edit <span>src/renderer</span> files to test HMR. See{" "}
               <a
                 target="_blank"
                 href="https://electron-vite.org/guide/hmr.html"
@@ -77,11 +92,11 @@ function App(): JSX.Element {
           <article>
             <h2 className="title">Hot Reloading</h2>
             <p className="detail">
-              Run{' '}
+              Run{" "}
               <span>
                 {"'"}electron-vite dev --watch{"'"}
-              </span>{' '}
-              to enable. See{' '}
+              </span>{" "}
+              to enable. See{" "}
               <a
                 target="_blank"
                 href="https://electron-vite.org/guide/hot-reloading.html"
@@ -97,7 +112,7 @@ function App(): JSX.Element {
           <article>
             <h2 className="title">Debugging</h2>
             <p className="detail">
-              Check out <span>.vscode/launch.json</span>. See{' '}
+              Check out <span>.vscode/launch.json</span>. See{" "}
               <a
                 target="_blank"
                 href="https://electron-vite.org/guide/debugging.html"
@@ -113,7 +128,7 @@ function App(): JSX.Element {
           <article>
             <h2 className="title">Source Code Protection</h2>
             <p className="detail">
-              Supported via built-in plugin <span>bytecodePlugin</span>. See{' '}
+              Supported via built-in plugin <span>bytecodePlugin</span>. See{" "}
               <a
                 target="_blank"
                 href="https://electron-vite.org/guide/source-code-protection.html"
@@ -129,17 +144,21 @@ function App(): JSX.Element {
           <article>
             <h2 className="title">Packaging</h2>
             <p className="detail">
-              Use{' '}
-              <a target="_blank" href="https://www.electron.build" rel="noopener noreferrer">
+              Use{" "}
+              <a
+                target="_blank"
+                href="https://www.electron.build"
+                rel="noopener noreferrer"
+              >
                 electron-builder
-              </a>{' '}
+              </a>{" "}
               and pre-configured to pack your app.
             </p>
           </article>
         </div>
       </div>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/src/renderer/src/assets/index.css b/src/renderer/src/assets/index.css
@@ -5,12 +5,12 @@ body {
     Roboto,
     -apple-system,
     BlinkMacSystemFont,
-    'Helvetica Neue',
-    'Segoe UI',
-    'Oxygen',
-    'Ubuntu',
-    'Cantarell',
-    'Open Sans',
+    "Helvetica Neue",
+    "Segoe UI",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Open Sans",
     sans-serif;
   color: #86a5b1;
   background-color: #2f3241;
@@ -67,7 +67,7 @@ a:hover {
   float: none;
   clear: both;
   overflow: hidden;
-  font-family: 'Menlo', 'Lucida Console', monospace;
+  font-family: "Menlo", "Lucida Console", monospace;
   color: #c2f5ff;
   line-height: 1;
   transition: all 0.3s;
diff --git a/src/renderer/src/components/Versions.tsx b/src/renderer/src/components/Versions.tsx
@@ -1,7 +1,7 @@
-import { useState } from 'react'
+import { useState } from "react";
 
 function Versions(): JSX.Element {
-  const [versions] = useState(window.electron.process.versions)
+  const [versions] = useState(window.electron.process.versions);
 
   return (
     <ul className="versions">
@@ -10,7 +10,7 @@ function Versions(): JSX.Element {
       <li className="node-version">Node v{versions.node}</li>
       <li className="v8-version">V8 v{versions.v8}</li>
     </ul>
-  )
+  );
 }
 
-export default Versions
+export default Versions;
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './assets/index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./assets/index.css";
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
-)
+  </React.StrictMode>,
+);
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tsconfig.web.json b/tsconfig.web.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,3 @@`
`1`	`1`	`{`
`2`		`- "recommendations": [`
`3`		`- "dbaeumer.vscode-eslint",`
`4`		`- "esbenp.prettier-vscode"`
`5`		`- ]`
`6`		`-}`
	`2`	`+ "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`		`-import { ElectronAPI } from '@electron-toolkit/preload'`
	`1`	`+import { ElectronAPI } from "@electron-toolkit/preload";`
`2`	`2`
`3`	`3`	`declare global {`
`4`	`4`	`interface Window {`
`5`		`- electron: ElectronAPI`
`6`		`- api: unknown`
	`5`	`+ electron: ElectronAPI;`
	`6`	`+ api: unknown;`
`7`	`7`	`}`
`8`	`8`	`}`