feat: Add --browser-mode, --browser-mode-host, --browser-mode-port and --browser-mode-url startup arguments

refactor: Replaced bespoke argument parsing with node:util's parseArgs

fix: Properly set isDev value in renderer

refactor: Minify renderer in production

refactor: Only use perf plugin in development

Author: colin969

package-lock.json

@@ -52,6 +52,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/dns-packet": "^5.6.5",
     "@types/eslint__js": "^8.42.3",
+    "@types/express": "^5.0.5",
     "@types/follow-redirects": "1.8.0",
     "@types/fs-extra": "8.1.0",
     "@types/lodash": "^4.14.192",
@@ -85,6 +86,7 @@
     "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "^7.0.0",
+    "express": "^5.1.0",
     "fast-xml-parser": "3.21.1",
     "fs-extra": "8.1.0",
     "global-jsdom": "^27.0.0",

package.json

@@ -28,7 +28,7 @@ export default defineConfig({
   output: {
     target: 'web',
     assetPrefix: 'auto',
-    minify: false,
+    minify: process.env.NODE_ENV === 'production',
     distPath: {
       root: './build/window',
     },

rsbuild.config.ts

@@ -3,17 +3,18 @@ import { createErrorProxy } from '@shared/Util';
 import { SocketClient } from '@shared/back/SocketClient';
 import { BackIn, BackOut } from '@shared/back/types';
 import { APP_TITLE } from '@shared/constants';
+import { num } from '@shared/utils/Coerce';
 import { ChildProcess, fork } from 'child_process';
 import * as electron from 'electron';
 import { BrowserWindow, IpcMainEvent, app, dialog, ipcMain, session, shell } from 'electron';
-import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';
 import { AppConfigData, AppPreferencesData } from 'flashpoint-launcher';
 import * as fs from 'fs-extra';
 import * as path from 'node:path';
 import { argv } from 'process';
 import { WebSocket } from 'ws';
 import * as Util from './Util';
 import { CustomIPC, WindowIPC } from './constants';
+import { createHeadlessServer } from './headless';
 import { Init } from './types';
 
 const TIMEOUT_DELAY = 60_000;
@@ -29,11 +30,6 @@ const ALLOWED_HOSTS = [
   'cdn.discordapp.com',
 ];
 
-type LaunchOptions = {
-  backend: boolean;
-  frontend: boolean;
-}
-
 type MainState = {
   window?: BrowserWindow;
   _installed?: boolean;
@@ -53,6 +49,12 @@ type MainState = {
   output: string;
 }
 
+type LaunchComponents = {
+  backend: boolean;
+  browserFrontend: boolean;
+  electronWindow: boolean;
+}
+
 export function main(init: Init): void {
   const state: MainState = {
     window: undefined,
@@ -70,10 +72,19 @@ export function main(init: Init): void {
     output: '',
   };
 
-  startup({
+  const launchComponents: LaunchComponents = {
     backend: !init.args['host-remote'],
-    frontend: !init.args['back-only'],
-  })
+    browserFrontend: !!init.args['browser-mode'] && !init.args['back-only'],
+    electronWindow: !init.args['browser-mode'] && !init.args['back-only'],
+  };
+
+  if (!launchComponents.backend && !launchComponents.browserFrontend && !launchComponents.electronWindow) {
+    console.log('Arguments for startup mean no components would run, exiting...');
+    process.exit();
+    return;
+  }
+
+  startup(launchComponents)
   .catch((error) => {
     console.error(error);
     if (!Util.isDev) {
@@ -87,24 +98,9 @@ export function main(init: Init): void {
     app.quit();
   });
 
-  // Needed for modern Electron?
-  // This is a workaround to ensure that the extension background workers are started
-  // If you are updating Electron, confirm if this is still needed
-  // https://github.com/electron/electron/issues/41613
-  // function launchExtensionBackgroundWorkers( appSession = session.defaultSession ) {
-  //   return Promise.all(
-  //     appSession.getAllExtensions().map( async ( extension ) => {
-  //       const manifest = extension.manifest;
-  //       if ( manifest.manifest_version === 3 && manifest?.background?.service_worker ) {
-  //         await appSession.serviceWorkers.startWorkerForScope( extension.url );
-  //       }
-  //     } )
-  //   );
-  // }
-
-  // -- Functions --
-
-  async function startup(opts: LaunchOptions) {
+  async function startup(opts: LaunchComponents) {
+    console.log(JSON.stringify(opts, undefined, 2));
+    state.mainFolderPath = Util.getMainFolderPath();
     // app.disableHardwareAcceleration();
 
     // Single process
@@ -114,14 +110,16 @@ export function main(init: Init): void {
       return;
     }
 
-    // Add app event listener(s)
-    app.once('ready', onAppReady);
-    app.once('window-all-closed', onAppWindowAllClosed);
     app.once('will-quit', onAppWillQuit);
+    app.once('ready', onAppReady);
     app.on('web-contents-created', onAppWebContentsCreated);
-    app.on('activate', onAppActivate);
     app.on('second-instance', onAppSecondInstance);
     app.on('open-url', onAppOpenUrl);
+    app.on('activate', onAppActivate);
+    app.commandLine.appendSwitch('ignore-connections-limit', 'localhost');
+
+    // Prevent closure on Mac after window closes
+    app.once('window-all-closed', onAppWindowAllClosed);
 
     // Add IPC event listener(s)
     ipcMain.on(InitRendererChannel, onInit);
@@ -202,29 +200,17 @@ export function main(init: Init): void {
       }
     });
 
-    // Add Socket event listener(s)
-    state.socket.register(BackOut.QUIT, () => {
-      state.isQuitting = true;
-      state.socket.allowDeath();
-      app.quit();
-    });
-
-    app.commandLine.appendSwitch('ignore-connections-limit', 'localhost');
-
-    state.mainFolderPath = Util.getMainFolderPath();
-
     // ---- Initialize ----
-    // Load custom version text file
-    await fs.promises.readFile(path.join(state.mainFolderPath, '.version'))
-    .then((data) => {
-      state._version = (data)
-        ? parseInt(data.toString().replace(/[^\d]/g, ''), 10) // (Remove all non-numerical characters, then parse it as a string)
-        : -1; // (Version not found error code)
-    })
-    .catch(() => { /** No file, ignore */ });
 
     // Start backend
     if (opts.backend) {
+      // Exit Electron app if the backend quits
+      state.socket.register(BackOut.QUIT, () => {
+        state.isQuitting = true;
+        state.socket.allowDeath();
+        app.quit();
+      });
+
       await new Promise<void>((resolve, reject) => {
         // Fork backend, init.rest will contain possible flashpoint:// message
         // Increase memory limit in dev instance (mostly for developer page functions)
@@ -310,49 +296,47 @@ export function main(init: Init): void {
         // Update flashpoint:// protocol registration state
         setProtocolRegistrationState(state.preferences.registerProtocol);
       });
-    }
 
-    // Open websocket to backend, for communication between front and back
-    const ws = await timeout<WebSocket>(new Promise((resolve, reject) => {
-      const sock = new WebSocket(state.backHost.href);
-      sock.onclose = () => { reject(new Error('Failed to authenticate connection to back.')); };
-      sock.onerror = (event) => { reject(event.error); };
-      sock.onopen  = () => {
-        sock.onmessage = () => {
-          sock.onclose = noop;
-          sock.onerror = noop;
-          resolve(sock);
+      // Open websocket to backend, so we can get QUIT events
+      const ws = await timeout<WebSocket>(new Promise((resolve, reject) => {
+        const sock = new WebSocket(state.backHost.href);
+        sock.onclose = () => { reject(new Error('Failed to authenticate connection to back.')); };
+        sock.onerror = (event) => { reject(event.error); };
+        sock.onopen  = () => {
+          sock.onmessage = () => {
+            sock.onclose = noop;
+            sock.onerror = noop;
+            resolve(sock);
+          };
+          sock.send('flashpoint-launcher');
         };
-        sock.send('flashpoint-launcher');
-      };
-    }), TIMEOUT_DELAY);
-    state.socket.setSocket(ws);
-    state.socket.killOnDisconnect = true;
+      }), TIMEOUT_DELAY);
+      state.socket.setSocket(ws);
+      state.socket.killOnDisconnect = true;
+    }
+
+    // Start appropriate frontend
+    if (opts.browserFrontend) {
+      await app.whenReady();
+
+      // Create headless server
+      const hostname = init.args['browser-mode-host'] || 'localhost';
+      const port = init.args['browser-mode-port'] || 9000;
+      const url = init.args['browser-mode-url'] || `http://${hostname}:${port}/`;
+      createHeadlessServer(hostname, num(port), url);
+    }
 
-    // Start frontend
-    if (opts.frontend) {
+    if (opts.electronWindow) {
       await app.whenReady();
-      // Create main window
+
       if (!state.window) {
         state.window = createMainWindow();
       }
-    } else {
-      // Frontend not running, give Backend init message from Main
-      state.socket.send(BackIn.INIT_LISTEN);
     }
   }
 
   async function onAppReady() {
     // Enable DoH
-    // app.configureHostResolver({
-    //   secureDnsMode: 'secure',
-    //   secureDnsServers: ['https://cloudflare-dns.com/dns-query', 'https://dns.google/dns-query']
-    // });
-
-    if (Util.isDev) {
-      await installExtension( REACT_DEVELOPER_TOOLS );
-      await installExtension( REDUX_DEVTOOLS );
-    }
 
     // Send locale code (if it has no been sent already)
     if (process.platform === 'win32' && !state._sentLocaleCode && state.socket.client.socket) {
@@ -518,22 +502,24 @@ export function main(init: Init): void {
       height: height,
       minWidth: 200,
       minHeight: 200,
-      frame: !state.preferences.useCustomTitlebar,
+      frame: true,
+      // frame: !state.preferences.useCustomTitlebar,
       icon: path.join(__dirname, '../window/images/icon.png'),
       webPreferences: {
         preload: path.resolve(__dirname, 'preload.js'),
         nodeIntegration: false,
         contextIsolation: true,
       },
     });
+
     // Add protocol report func
     ipcMain.on(WindowIPC.PROTOCOL, () => {
       if (init.protocol) {
         window.webContents.send(WindowIPC.PROTOCOL, init.protocol);
       }
     });
     // Remove the menu bar
-    window.setMenu(null);
+    // window.setMenu(null);
     // and load the index.html of the app.
     window.loadFile(path.join(__dirname, '../window/renderer.html'));
     // Open the DevTools. Don't open if using a remote debugger (like vscode)

src/main/Main.ts

@@ -0,0 +1,46 @@
+import { app, Menu, shell, Tray } from 'electron';
+import express from 'express';
+import path from 'node:path';
+
+export async function createHeadlessServer(hostname: string, port: number, url: string) {
+  const expressApp = express();
+  console.log(__dirname);
+
+  // Static files
+  expressApp.use(express.static(path.join(__dirname, '../window')));
+
+  // React renderer
+  expressApp.get('/{*splat}', (req, res) => {
+    res.sendFile(path.join(__dirname, '../window/renderer.html'));
+  });
+
+  // Start the HTTP server
+  const server = expressApp.listen(port, hostname, () => {
+    console.log(`Headless server listening on ${hostname}:${port}`);
+    console.log(`Starting in headless mode. Opening your browser to: ${url}`);
+    shell.openExternal(url);
+  });
+
+  const icon = process.platform === 'win32' ? '../window/images/icon.ico' : '../window/images/icon.png';
+  const tray = new Tray(path.join(__dirname, icon));
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Open in Browser',
+      click: () => {
+        shell.openExternal(url);
+      }
+    },
+    {
+      label: 'Exit',
+      click: () => {
+        server.close(() => {
+          app.quit();
+        });
+        // Give server 3 seconds to close
+        setTimeout(() => app.quit(), 3000);
+      }
+    }
+  ]);
+  tray.setToolTip('Flashpoint Launcher');
+  tray.setContextMenu(contextMenu);
+}