Merge branch 'migration/electron-preload' into develop

Author: iamWing

src/main/main.ts

@@ -5,18 +5,19 @@ import * as path from 'path';
 import * as url from 'url';
 import * as nodeEnv from '_utils/node-env';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { BrowserWindow, app } from 'electron';
+import { BrowserWindow, app, ipcMain } from 'electron';
 
-let mainWindow: Electron.BrowserWindow | null = null;
+let mainWindow: Electron.BrowserWindow | undefined;
 
 function createWindow(): void {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     height: 600,
     width: 800,
     webPreferences: {
-      webSecurity: false,
       devTools: nodeEnv.dev,
+      preload: path.join(__dirname, './preload.bundle.js'),
+      webSecurity: false,
     },
   });
 
@@ -34,7 +35,7 @@ function createWindow(): void {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
-    mainWindow = null;
+    mainWindow = undefined;
   });
 }
 
@@ -55,11 +56,16 @@ app.on('window-all-closed', () => {
 app.on('activate', () => {
   // On OS X 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 (mainWindow === null) {
+  if (mainWindow === undefined) {
     createWindow();
   }
 });
 
+ipcMain.on('renderer-ready', () => {
+  // eslint-disable-next-line no-console
+  console.log('Renderer is ready.');
+});
+
 // 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.
 

src/preload/ipc-api.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ipcRenderer } from 'electron';
+
+/** Notify main the renderer is ready. */
+function rendererReady() {
+  ipcRenderer.send('renderer-ready');
+}
+
+export default { rendererReady };

src/preload/preload.ts

@@ -0,0 +1,5 @@
+import ipcAPI from '_preload/ipc-api';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { contextBridge } from 'electron';
+
+contextBridge.exposeInMainWorld('ipcAPI', ipcAPI);

src/renderer/App.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+function App(): JSX.Element {
+  React.useEffect(() => {
+    window.ipcAPI?.rendererReady();
+  }, []);
+
+  return (
+    <div className="app">
+      <h4>Welcome to React, Electron and TypeScript</h4>
+      <p>Hello</p>
+    </div>
+  );
+}
+
+export default App;

src/renderer/renderer.tsx

@@ -4,13 +4,11 @@
 // Import the styles here to process them with webpack
 import '_public/style.css';
 
+import App from '_renderer/App';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 ReactDOM.render(
-  <div className="app">
-    <h4>Welcome to React, Electron and Typescript</h4>
-    <p>Hello</p>
-  </div>,
+  <App />,
   document.getElementById('app'),
 );

src/types/global.d.ts

@@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    /** APIs for Electron IPC */
+    ipcAPI?: typeof import('_preload/ipc-api').default
+  }
+}
+
+// Makes TS sees this as an external modules so we can extend the global scope.
+export { };

tests/main/main.spec.ts

@@ -2,6 +2,7 @@ import { exportedForTests } from '_main/main';
 
 jest.mock('electron', () => ({
   app: { on: jest.fn() },
+  ipcMain: { on: jest.fn() },
 }));
 
 test('Private props exported for unit tests', () => {

tsconfig.json

@@ -8,10 +8,16 @@
       "_public/*": ["public/*"],
       "_main/*": ["src/main/*"],
       "_models/*": ["src/models/*"],
+      "_preload/*": ["src/preload/*"],
       "_renderer/*": ["src/renderer/*"],
+      "_types/*": ["src/types/*"],
       "_utils/*": ["src/utils/*"],
       "_tests/*": ["tests/*"]
     },
+    "typeRoots": [
+      "./node_modules/@types",
+      "./src/types"
+    ],
     "module": "commonjs",
     "moduleResolution": "node",
     "noImplicitAny": true,
@@ -20,5 +26,5 @@
     "sourceMap": true,
     "target": "esnext"
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*", "tests/**/*"]
 }

webpack.config.js

@@ -75,6 +75,11 @@ mainConfig.plugins = [
   }),
 ];
 
+const preloadConfig = lodash.cloneDeep(commonConfig);
+preloadConfig.entry = './src/preload/preload.ts';
+preloadConfig.target = 'electron-preload';
+preloadConfig.output.filename = 'preload.bundle.js';
+
 const rendererConfig = lodash.cloneDeep(commonConfig);
 rendererConfig.entry = './src/renderer/renderer.tsx';
 rendererConfig.target = 'electron-renderer';
@@ -85,4 +90,4 @@ rendererConfig.plugins = [
   }),
 ];
 
-module.exports = [mainConfig, rendererConfig];
+module.exports = [mainConfig, preloadConfig, rendererConfig];