NodeJS 20 and update electron

mugen-launcher · Jan 27, 2024 · 300fa7b · 300fa7b
1 parent 415447a
commit 300fa7b
Show file tree

Hide file tree

Showing 23 changed files with 15,609 additions and 17,494 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14
+20.11.0
diff --git a/index.js b/index.js
@@ -1,8 +1,9 @@
-const { app, BrowserWindow } = require("electron");
+const { execFile } = require("node:child_process");
+const { app, BrowserWindow, ipcMain } = require("electron");
 const path = require("path");
 const fs = require("fs");
 const configYaml = require("config-yaml");
-const isDev = require("electron-is-dev");
+const isDev = true;
 
 // Enable auto-reload in development if set
 try {
@@ -77,21 +78,72 @@ function createWindow() {
     height,
     fullscreen,
     webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
       nodeIntegration: true,
       enableRemoteModule: true
     },
     webSecurity: false
   });
   window.loadFile("build/index.html");
-  // window.webContents.openDevTools();
+  //window.webContents.openDevTools();
 }
 
 app.on("window-all-closed", () => {
   app.quit();
 });
 
+
+async function executeFile (event, filePath, args, options, callback) {
+  execFile(filePath, args, options, callback);
+}
+
+function getConfigYaml(event, filePath) {
+  event.returnValue = configYaml(filePath);
+}
+
+function existsSync(event, filePath) {
+  event.returnValue = fs.existsSync(filePath);
+}
+
+function readFileSync(event, filePath) {
+  event.returnValue = fs.readFileSync(filePath, "utf-8");
+}
+
+function resolve(event, args) {
+  event.returnValue = path.resolve.apply(this, args);
+}
+
+function dirname(event, filePath) {
+  event.returnValue = path.dirname(filePath);
+}
+
+async function minimize() {
+  app.getCurrentWindow().minimize();
+}
+
+async function minimize() {
+  app.getCurrentWindow().minimize();
+}
+
+async function restore() {
+  app.getCurrentWindow().restore();
+}
+
+function getCurrentDirectoryExported(event) {
+  event.returnValue = getCurrentDirectory();
+}
+
 async function start() {
   await app.whenReady();
+  ipcMain.on("execFile", executeFile);
+  ipcMain.on("existsSync", existsSync);
+  ipcMain.on("readFileSync", readFileSync);
+  ipcMain.on("resolve", resolve);
+  ipcMain.on("dirname", dirname);
+  ipcMain.on("configYaml", getConfigYaml);
+  ipcMain.on("getCurrentDirectory", getCurrentDirectoryExported);
+  ipcMain.handle("minimize", minimize);
+  ipcMain.handle("restore", restore);
   createWindow();
 }
 start();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "mugen-quick-versus-launcher",
   "author": "neolao",
   "license": "MIT",
-  "version": "0.32.9",
+  "version": "1.0.0",
   "description": "Mugen launcher for Quick Versus",
   "keywords": [
     "mugen",
@@ -31,45 +31,45 @@
     "url": "git+https://github.com/mugen-launcher/quick-versus.git"
   },
   "engines": {
-    "node": ">=13"
+    "node": ">=20"
   },
   "dependencies": {
-    "config-yaml": "^1.1.6",
-    "electron-is-dev": "^1.2.0"
+    "@electron/remote": "^2.1.2",
+    "config-yaml": "^1.1.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/react-hooks": "^3.7.0",
-    "babel-jest": "^25.5.1",
-    "babel-loader": "^8.3.0",
-    "concurrently": "^5.3.0",
-    "copy-webpack-plugin": "^5.1.2",
-    "css-loader": "^3.6.0",
-    "electron": "^9.4.4",
-    "electron-builder": "^22.14.13",
-    "electron-reloader": "^1.2.3",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "eslint-plugin-solfegejs": "^1.0.17",
-    "eslint-watch": "^6.0.1",
-    "file-loader": "^5.1.0",
-    "ini": "^1.3.8",
-    "jest": "^25.5.4",
-    "mini-css-extract-plugin": "^0.9.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.2.3",
-    "prettier": "^1.19.1",
+    "@babel/core": ">=7.23.9",
+    "@babel/preset-env": ">=7.23.9",
+    "@babel/preset-react": ">=7.23.3",
+    "@svgr/webpack": ">=5.5.0",
+    "@testing-library/react-hooks": ">=3.7.0",
+    "babel-jest": ">=25.5.1",
+    "babel-loader": ">=8.3.0",
+    "concurrently": ">=5.3.0",
+    "copy-webpack-plugin": ">=5.1.2",
+    "css-loader": ">=3.6.0",
+    "electron": "^28.2.0",
+    "electron-builder": ">=22.14.13",
+    "electron-reloader": ">=1.2.3",
+    "eslint": ">=6.8.0",
+    "eslint-plugin-react-hooks": ">=2.5.1",
+    "eslint-plugin-solfegejs": "^1.0.14",
+    "eslint-watch": ">=6.0.1",
+    "file-loader": ">=5.1.0",
+    "ini": ">=1.3.8",
+    "jest": ">=25.5.4",
+    "mini-css-extract-plugin": ">=2.7.7",
+    "postcss-import": ">=12.0.1",
+    "postcss-loader": ">=3.0.0",
+    "postcss-nested": ">=4.2.3",
+    "prettier": ">=1.19.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-test-renderer": "^16.14.0",
     "styled-components": "^5.3.11",
-    "url-loader": "^3.0.0",
-    "webpack": "^4.47.0",
-    "webpack-cli": "^3.3.12"
+    "url-loader": ">=4.1.1",
+    "webpack": ">=5.90.0",
+    "webpack-cli": ">=5.1.4"
   },
   "eslintConfig": {
     "env": {

diff --git a/preload.js b/preload.js
@@ -0,0 +1,13 @@
+const { contextBridge, ipcRenderer } = require("electron/renderer");
+
+contextBridge.exposeInMainWorld("mainAPI", {
+  execFile: (filePath, args, options, callback) => ipcRenderer.invoke("execFile", filePath, args, options, callback),
+  existsSync: (filePath) => ipcRenderer.sendSync("existsSync", filePath),
+  readFileSync: (filePath) => ipcRenderer.sendSync("readFileSync", filePath),
+  resolve: (...args) => ipcRenderer.sendSync("resolve", args),
+  dirname: (filePath) => ipcRenderer.sendSync("dirname", filePath),
+  configYaml: (filePath) => ipcRenderer.sendSync("configYaml", filePath),
+  getCurrentDirectory: () => { return ipcRenderer.sendSync("getCurrentDirectory"); },
+  minimize: () => ipcRenderer.invoke("minimize"),
+  restore: () => ipcRenderer.invoke("restore")
+});
diff --git a/src/app.jsx b/src/app.jsx
@@ -1,8 +1,5 @@
 import React from "react";
-import { remote } from "electron";
 import styled from "styled-components";
-import isDev from "electron-is-dev";
-import configYaml from "config-yaml";
 import ConfigurationContext from "./configuration/configuration.context";
 import EnvironmentContext from "./configuration/environment.context";
 import NavigationProvider from "./navigation/navigation.provider";
@@ -14,13 +11,10 @@ import ErrorBoundary from "./error/errorBoundary.view";
 import FatalError from "./error/fatalError.view";
 import Requirement from "./error/requirement.view";
 import versusImagePath from "./assets/versus.png";
-import getCurrentDirectory from "./getCurrentDirectory";
 import HelpBar from "./help/bar.presenter";
 
-const app = remote.app;
-const fs = remote.require("fs");
-const path = remote.require("path");
-const currentDirectory = getCurrentDirectory();
+const isDev = true;
+const currentDirectory = mainAPI.getCurrentDirectory();
 
 const Wrapper = styled.main`
   flex: 1;
@@ -59,9 +53,9 @@ export default function App() {
     );
   }
 
-  const jsonFilePath = path.resolve(currentDirectory, "quick-versus.json");
-  const yamlFilePath = path.resolve(currentDirectory, "quick-versus.yml");
-  if (!fs.existsSync(jsonFilePath) && !fs.existsSync(yamlFilePath)) {
+  const jsonFilePath = mainAPI.resolve(currentDirectory, "quick-versus.json");
+  const yamlFilePath = mainAPI.resolve(currentDirectory, "quick-versus.yml");
+  if (!mainAPI.existsSync(jsonFilePath) && !mainAPI.existsSync(yamlFilePath)) {
     return (
       <Requirement>
         <p>
@@ -72,8 +66,9 @@ export default function App() {
     );
   }
 
-  const mugenPath = path.resolve(currentDirectory, "mugen.exe");
-  if (!fs.existsSync(mugenPath)) {
+
+  const mugenPath = mainAPI.resolve(currentDirectory, "mugen.exe");
+  if (!mainAPI.existsSync(mugenPath)) {
     return (
       <Requirement>
         <p>
@@ -86,8 +81,8 @@ export default function App() {
 
   let configuration;
   let configurationFilePath;
-  if (fs.existsSync(jsonFilePath)) {
-    const jsonContent = fs.readFileSync(jsonFilePath);
+  if (mainAPI.existsSync(jsonFilePath)) {
+    const jsonContent = mainAPI.readFileSync(jsonFilePath);
     try {
       configuration = JSON.parse(jsonContent);
       configurationFilePath = jsonFilePath;
@@ -100,9 +95,9 @@ export default function App() {
         </FatalError>
       );
     }
-  } else if (fs.existsSync(yamlFilePath)) {
+  } else if (mainAPI.existsSync(yamlFilePath)) {
     try {
-      configuration = configYaml(yamlFilePath);
+      configuration = mainAPI.configYaml(yamlFilePath);
       configurationFilePath = yamlFilePath;
     } catch (error) {
       return (
@@ -116,7 +111,6 @@ export default function App() {
   }
 
   const environment = {
-    app,
     currentDirectory,
     mugenPath,
     configurationFilePath,
@@ -125,8 +119,8 @@ export default function App() {
 
   let customBackground;
   if (configuration.background) {
-    const imagePath = path.resolve(environment.currentDirectory, configuration.background);
-    if (fs.existsSync(imagePath)) {
+    const imagePath = mainAPI.resolve(environment.currentDirectory, configuration.background);
+    if (mainAPI.existsSync(imagePath)) {
       customBackground = <CustomBackground src={imagePath} />;
     }
   }
@@ -137,8 +131,8 @@ export default function App() {
       volume = configuration.sound.volume;
     }
 
-    const soundPath = path.resolve(environment.currentDirectory, configuration.sound.background);
-    if (fs.existsSync(soundPath)) {
+    const soundPath = mainAPI.resolve(environment.currentDirectory, configuration.sound.background);
+    if (mainAPI.existsSync(soundPath)) {
       const audio = new Audio(soundPath);
       audio.volume = volume / 100;
       audio.loop = true;

diff --git a/src/category/categorySelector.view.jsx b/src/category/categorySelector.view.jsx
@@ -1,11 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { remote } from "electron";
 import useEnvironment from "../configuration/useEnvironment.hook";
 
-const fs = remote.require("fs");
-const path = remote.require("path");
-
 const Selector = styled.div`
   z-index: 2;
   position: relative;
@@ -28,8 +24,8 @@ export default function CategorySelector({ category }) {
 
   let imagePath;
   if (category && category.image) {
-    const categoryImagePath = path.resolve(environment.currentDirectory, "chars", category.image);
-    if (fs.existsSync(categoryImagePath)) {
+    const categoryImagePath = mainAPI.resolve(environment.currentDirectory, "chars", category.image);
+    if (mainAPI.existsSync(categoryImagePath)) {
       imagePath = categoryImagePath;
     }
   }

diff --git a/src/character/useCharacterPortrait.hook.js b/src/character/useCharacterPortrait.hook.js
@@ -1,9 +1,5 @@
-import { remote } from "electron";
 import useEnvironment from "../configuration/useEnvironment.hook";
 
-const fs = remote.require("fs");
-const path = remote.require("path");
-
 export default function useCharacterPortrait(character) {
   const environment = useEnvironment();
 
@@ -15,17 +11,17 @@ export default function useCharacterPortrait(character) {
     return null;
   }
 
-  const definitionPath = path.resolve(environment.currentDirectory, "chars", character.definition);
-  const directoryPath = path.dirname(definitionPath);
-  const imagePathsByPriority = [path.resolve(directoryPath, "portrait.png")];
+  const definitionPath = mainAPI.resolve(environment.currentDirectory, "chars", character.definition);
+  const directoryPath = mainAPI.dirname(definitionPath);
+  const imagePathsByPriority = [mainAPI.resolve(directoryPath, "portrait.png")];
   if (character.portrait) {
-    imagePathsByPriority.push(path.resolve(directoryPath, character.portrait));
-    imagePathsByPriority.push(path.resolve(environment.currentDirectory, character.portrait));
-    imagePathsByPriority.push(path.resolve(environment.currentDirectory, "chars", character.portrait));
+    imagePathsByPriority.push(mainAPI.resolve(directoryPath, character.portrait));
+    imagePathsByPriority.push(mainAPI.resolve(environment.currentDirectory, character.portrait));
+    imagePathsByPriority.push(mainAPI.resolve(environment.currentDirectory, "chars", character.portrait));
   }
 
   for (const imagePath of imagePathsByPriority) {
-    if (fs.existsSync(imagePath)) {
+    if (mainAPI.existsSync(imagePath)) {
       return imagePath;
     }
   }

diff --git a/src/character/useCharacterSizeScale.hook.js b/src/character/useCharacterSizeScale.hook.js
@@ -1,12 +1,8 @@
 import ini from "ini";
-import { remote } from "electron";
 import useEnvironment from "../configuration/useEnvironment.hook";
 import useCharacterDefinition from "./useCharacterDefinition.hook";
 import getObjectPropertyValueCaseInsensitive from "../util/getObjectPropertyValueCaseInsensitive";
 
-const fs = remote.require("fs");
-const path = remote.require("path");
-
 const cache = new WeakMap();
 
 export default function useCharacterSizeScale(character) {
@@ -20,8 +16,8 @@ export default function useCharacterSizeScale(character) {
     return { x: 1, y: 1 };
   }
 
-  const definitionPath = path.resolve(environment.currentDirectory, "chars", character.definition);
-  const directoryPath = path.dirname(definitionPath);
+  const definitionPath = mainAPI.resolve(environment.currentDirectory, "chars", character.definition);
+  const directoryPath = mainAPI.dirname(definitionPath);
 
   const definitionFiles = getObjectPropertyValueCaseInsensitive(definition, "files");
   if (!definitionFiles) {
@@ -34,10 +30,10 @@ export default function useCharacterSizeScale(character) {
   }
   let constantsFilename = ini.unsafe(cns);
   constantsFilename = constantsFilename.replace(/\\/g, "/");
-  const constantsPath = path.resolve(directoryPath, constantsFilename);
+  const constantsPath = mainAPI.resolve(directoryPath, constantsFilename);
 
   try {
-    const fileContent = fs.readFileSync(constantsPath, "utf-8");
+    const fileContent = mainAPI.readFileSync(constantsPath);
     const constants = ini.parse(fileContent);
 
     let x = 1;