Dev: Electron migration

.eslintrc.json

@@ -1,4 +1,4 @@
-{ 
+{
   "extends": [
     "airbnb",
     "airbnb-typescript"
@@ -17,6 +17,7 @@
     "no-bitwise": 0,
     "no-await-in-loop": 0,
     "no-use-before-define": 0,
-    "no-param-reassign": 0
+    "no-param-reassign": 0,
+    "react/function-component-definition": 0
   }
-}
+}

.yarnrc

@@ -1,4 +1,4 @@
 runtime "electron"
-target "13.6.9"
+target "19.0.15"
 target_arch "x64"
-disturl "https://atom.io/download/atom-shell"
+disturl "https://electronjs.org/headers"

package.json

@@ -44,7 +44,7 @@
     "colors": "^1.4.0",
     "cross-env": "^7.0.2",
     "css-loader": "^5.2.6",
-    "electron": "13.6.9",
+    "electron": "19.0.15",
     "eslint": "^8.15.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -92,6 +92,7 @@
     "pvtsutils": "^1.3.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^6.3.0",
     "reflect-metadata": "^0.1.13",
     "request": "^2.88.2",
     "semver": "^6.3.0",

scripts/webpack.renderer.config.js

@@ -5,10 +5,8 @@ const baseConfig = require('./webpack.base.config');
 module.exports = merge.smart(baseConfig, {
   target: 'electron-renderer',
   entry: {
-    message: path.join(__dirname, '../src/renderer/containers/message/index.tsx'),
-    'key-pin': path.join(__dirname, '../src/renderer/containers/key_pin/index.tsx'),
-    'p11-pin': path.join(__dirname, '../src/renderer/containers/p11_pin/index.tsx'),
-    preferences: path.join(__dirname, '../src/renderer/containers/preferences/index.tsx'),
+    index: path.join(__dirname, '../src/renderer/index.tsx'),
+    preload: path.join(__dirname, '../src/preload/index.ts'),
   },
   optimization: {
     splitChunks: {

src/main/application.ts

@@ -73,7 +73,7 @@ export class Application {
       app.dock.hide();
     }
 
-    app.allowRendererProcessReuse = true;
+    // app.allowRendererProcessReuse = true;
 
     /**
      * Don't quit when all windows are closed.

src/main/constants/files.ts

@@ -21,6 +21,7 @@ export const SRC_DIR = path.join(APP_DIR, 'src');
 export const RESOURCES_DIR = path.join(SRC_DIR, 'resources');
 export const STATIC_DIR = path.join(SRC_DIR, 'static');
 export const HTML_PATH = path.join(STATIC_DIR, 'index.html');
+export const PRELOAD_PATH = path.join(APP_DIR, 'out/preload.js');
 export const ICON_DIR = path.join(STATIC_DIR, 'icons');
 
 export const APP_LOG_FILE = path.join(APP_USER_DIR, 'fortify.log');

src/main/ipc_messages.ts

@@ -138,6 +138,13 @@ const initEvents = () => {
     .on('ipc-update-check', () => {
       autoUpdater.checkForUpdates();
     })
+    .on('window-close', (event) => {
+      const window = BrowserWindow.fromWebContents(event.sender);
+
+      if (window) {
+        window.close();
+      }
+    })
     .on('error', (event: IpcMainEvent) => {
       logger.error('ipc-messages', 'Event error', {
         event: event.toString(),

src/main/windows/browser_window.ts

@@ -59,9 +59,8 @@ export class BrowserWindow {
     });
 
     this.window.loadFile(constants.HTML_PATH, {
-      query: {
-        app: options.app,
-      },
+      hash: `/${options.app}`,
+      query: options.params || {},
     });
 
     this.window.lang = l10n.lang;
@@ -81,7 +80,7 @@ export class BrowserWindow {
     });
 
     // Show page only after `lfinish-load` event and prevent show index page
-    if (this.window.app !== 'index') {
+    if (options.app !== 'index') {
       this.window.webContents.once('did-finish-load', () => {
         this.window.show();
       });
@@ -121,13 +120,14 @@ export class BrowserWindow {
       show: false,
       ...this.getWindowSize(),
       webPreferences: {
-        nodeIntegration: true,
+        // nodeIntegration: true,
         // Prevent open DevTools on production
         devTools: constants.isDevelopment,
-        enableRemoteModule: true,
+        // enableRemoteModule: true,
         // https://github.com/PeculiarVentures/fortify/issues/453
         backgroundThrottling: false,
-        contextIsolation: false,
+        // contextIsolation: false,
+        preload: constants.PRELOAD_PATH,
       },
     };
   }

src/preload/index.ts

@@ -0,0 +1,49 @@
+import { contextBridge, ipcRenderer } from 'electron';
+import { version } from '../../package.json';
+import type {
+  IElectronAPI,
+  ThemeChangeListenerType,
+  TelemetryStatusChangeListenerType,
+  LoggingStatusChangeListenerType,
+  IdentitiesChangeListenerType,
+  UpdateAvailableListenerType,
+  UpdateNotAvailableListenerType,
+  UpdateErrorListenerType,
+  UpdateCheckingListenerType,
+  WindowParamsChangeListenerType,
+  LanguageChangeListenerType,
+} from '../renderer/renderer';
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  version,
+  // Language.
+  getLanguage: () => ipcRenderer.sendSync('ipc-language-get'),
+  updateLanguage: (lang: string) => ipcRenderer.send('ipc-language-set', lang),
+  onLanguageChange: (listener: LanguageChangeListenerType) => ipcRenderer.on('ipc-language-changed', listener),
+  // Logging.
+  openLoggingFile: () => ipcRenderer.send('ipc-logging-open'),
+  toggleLoggingStatus: () => ipcRenderer.send('ipc-logging-status-change'),
+  getLoggingStatus: () => ipcRenderer.sendSync('ipc-logging-status-get'),
+  onLoggingStatusChange: (listener: LoggingStatusChangeListenerType) => ipcRenderer.on('ipc-logging-status-changed', listener),
+  // Telementry.
+  getTelemetryStatus: () => ipcRenderer.sendSync('ipc-telemetry-status-get'),
+  toggleTelemetryStatus: () => ipcRenderer.send('ipc-telemetry-status-change'),
+  onTelemetryStatusChange: (listener: TelemetryStatusChangeListenerType) => ipcRenderer.on('ipc-telemetry-status-changed', listener),
+  // Theme.
+  getTheme: () => ipcRenderer.sendSync('ipc-theme-get'),
+  updateTheme: (theme: ThemeType) => ipcRenderer.send('ipc-theme-set', theme),
+  onThemeChange: (listener: ThemeChangeListenerType) => ipcRenderer.on('ipc-theme-changed', listener),
+  // Identities.
+  removeIdentities: (origin: string) => ipcRenderer.send('ipc-2key-remove', origin),
+  getIdentities: () => ipcRenderer.sendSync('ipc-2key-list-get'),
+  onIdentitiesChange: (listener: IdentitiesChangeListenerType) => ipcRenderer.on('ipc-2key-changed', listener),
+  // Updates.s
+  checkUpdates: () => ipcRenderer.send('ipc-update-check'),
+  onUpdateAvailable: (listener: UpdateAvailableListenerType) => ipcRenderer.on('ipc-update-available', listener),
+  onUpdateNotAvailable: (listener: UpdateNotAvailableListenerType) => ipcRenderer.on('ipc-update-not-available', listener),
+  onUpdateError: (listener: UpdateErrorListenerType) => ipcRenderer.on('ipc-update-error', listener),
+  onUpdateChecking: (listener: UpdateCheckingListenerType) => ipcRenderer.on('ipc-checking-for-update', listener),
+  // Window params.
+  onWindowParamsChange: (listener: WindowParamsChangeListenerType) => ipcRenderer.on('window-params-changed', listener),
+  closeWindow: () => ipcRenderer.sendSync('window-close'),
+} as IElectronAPI);

src/renderer/app.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+  HashRouter,
+  Routes,
+  Route,
+} from 'react-router-dom';
+import {
+  Preferences,
+  Message,
+  KeyPin,
+  P11Pin,
+} from './containers';
+
+export const App: React.FC = () => (
+  <HashRouter>
+    <Routes>
+      <Route
+        path="/preferences"
+        element={<Preferences />}
+      />
+      <Route
+        path="/message"
+        element={<Message />}
+      />
+      <Route
+        path="/key-pin"
+        element={<KeyPin />}
+      />
+      <Route
+        path="/p11-pin"
+        element={<P11Pin />}
+      />
+    </Routes>
+  </HashRouter>
+);

src/renderer/components/intl/intl_provider.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
-import { ipcRenderer } from 'electron';
 import { IntlContext, IIntlContext } from './intl_context';
-import { printf } from '../../../main/utils';
+import { printf } from '../../../main/utils/printf';
 
 interface IIntlProviderProps {
   children: React.ReactNode;
 }
 
 export default class IntlProvider extends React.Component<IIntlProviderProps, IIntlContext> {
   UNSAFE_componentWillMount() {
-    ipcRenderer.on('ipc-language-changed', this.onLanguageListener);
+    window.electronAPI.onLanguageChange(this.onLanguageListener);
 
     this.onLanguageListener();
   }
 
   onLanguageListener = () => {
-    const l10n = ipcRenderer.sendSync('ipc-language-get');
+    const l10n = window.electronAPI.getLanguage();
 
     this.setState({
       lang: l10n.lang,

src/renderer/components/window_provider.tsx

@@ -1,18 +1,15 @@
-import { remote } from 'electron';
 import * as React from 'react';
-import * as winston from 'winston';
 import { IntlProvider } from './intl';
 import DocumentTitle from './document_title';
 
-winston.add(new winston.transports.Console());
-
 export default abstract class WindowProvider<P, S> extends React.Component<P, S> {
   public params: Record<string, any>;
 
   constructor(props: P) {
     super(props);
 
-    this.params = (remote.getCurrentWindow() as any).params || {};
+    const searchParams = new URLSearchParams(window.location.search);
+    this.params = Object.fromEntries(searchParams);
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -23,7 +20,7 @@ export default abstract class WindowProvider<P, S> extends React.Component<P, S>
   close = (...args: any[]) => {
     this.onClose(...args);
 
-    remote.getCurrentWindow().close();
+    window.electronAPI.closeWindow();
   };
 
   abstract renderChildrens(): JSX.Element;

src/renderer/containers/index.ts

@@ -0,0 +1,4 @@
+export * from './key_pin';
+export * from './message';
+export * from './p11_pin';
+export * from './preferences';

src/renderer/containers/key_pin/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import WindowProvider from '../../components/window_provider';
 import Container from './container';
 
-class Root extends WindowProvider<{}, {}> {
+export class KeyPin extends WindowProvider<{}, {}> {
   onReject = () => {
     this.params.accept = false;
     this.close();
@@ -25,8 +24,3 @@ class Root extends WindowProvider<{}, {}> {
     );
   }
 }
-
-ReactDOM.render(
-  <Root />,
-  document.getElementById('root'),
-);

src/renderer/containers/message/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import WindowProvider from '../../components/window_provider';
 import Container from './container';
 
-class Root extends WindowProvider<{}, {}> {
+export class Message extends WindowProvider<{}, {}> {
   onApprove = (showAgain?: boolean) => {
     this.params.result = 1;
     this.close(showAgain);
@@ -30,8 +29,3 @@ class Root extends WindowProvider<{}, {}> {
     );
   }
 }
-
-ReactDOM.render(
-  <Root />,
-  document.getElementById('root'),
-);

src/renderer/containers/p11_pin/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import WindowProvider from '../../components/window_provider';
 import Container from './container';
 
-class Root extends WindowProvider<{}, {}> {
+export class P11Pin extends WindowProvider<{}, {}> {
   onApprove = (password: string) => {
     this.params.pin = password;
     this.close();
@@ -24,8 +23,3 @@ class Root extends WindowProvider<{}, {}> {
     );
   }
 }
-
-ReactDOM.render(
-  <Root />,
-  document.getElementById('root'),
-);