Upgrade to Electron 14

main.js

@@ -98,6 +98,8 @@ function createMainWindow() {
     open(url);
   });
 
+  require('@electron/remote/main').enable(mainWindow.webContents);
+
   mainWindow.menuBarVisible = false;
   mainWindow.loadURL(indexPath);
 

package.json

@@ -55,8 +55,8 @@
     "core-js": "^3.18.0",
     "dayjs": "^1.10.7",
     "del": "^6.0.0",
-    "electron-json-config": "^1.5.3",
-    "electron-react-titlebar": "^0.8.2",
+    "@msfs/electron-json-config": "^1.0.0",
+    "@msfs/electron-react-titlebar": "^1.0.0",
     "electron-squirrel-startup": "^1.0.0",
     "mdi-react": "^7.5.0",
     "node-fetch": "^2.6.5",
@@ -90,7 +90,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
     "dotenv": "^8.6.0",
-    "electron": "^13.4.0",
+    "electron": "^14.0.1",
     "electron-installer-windows": "^3.0.0",
     "electron-packager": "^15.4.0",
     "eslint": "^7.32.0",

src/components/App.js

@@ -10,7 +10,6 @@ import { CssBaseline } from '@material-ui/core';
 import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
 import { TitleBar } from 'electron-react-titlebar';
 
-import Config from 'electron-json-config';
 import ConfigKeys from '../data/config-keys.json';
 
 import Theme from '../data/Theme';
@@ -23,6 +22,7 @@ import 'electron-react-titlebar/assets/style.css';
 import { SnackbarProvider } from 'notistack';
 import { LocaleProvider } from '../locales/LocaleContext';
 import MainAppErrorBoundary from './ErrorBoundaries/MainAppErrorBoundary';
+import getConfigInstance from '../helpers/getConfigInstance';
 
 const useStyles = makeStyles({
   titlebar: {
@@ -39,7 +39,7 @@ const useStyles = makeStyles({
 
 function App() {
   const classes = useStyles();
-  const [language, setLanguage] = React.useState(Config.get(ConfigKeys.settings.locale, 'en-GB'));
+  const [language, setLanguage] = React.useState(getConfigInstance().get(ConfigKeys.settings.locale, 'en-GB'));
 
   return (
     <>

src/components/HomeTabs/AvailableLiveries/AvailableLiveries.js

@@ -21,8 +21,8 @@ import NoImage from '../../../images/no-image-available.png';
 
 // support libraries
 import { useSnackbar } from 'notistack';
-import Config from 'electron-json-config';
 import LocaleContext from '../../../locales/LocaleContext';
+import getConfigInstance from '../../../helpers/getConfigInstance';
 
 export default function AvailableLiveries(props) {
   const CurrentLocale = React.useContext(LocaleContext);
@@ -130,7 +130,7 @@ export default function AvailableLiveries(props) {
           }
           suggestions={[
             CurrentLocale.translate('manager.pages.available_liveries.errors.installed_addons_fail.suggestion1', {
-              path: Config.get(ConfigKeys.settings.package_directory),
+              path: getConfigInstance().get(ConfigKeys.settings.package_directory),
             }),
             CurrentLocale.translate('manager.pages.available_liveries.errors.installed_addons_fail.suggestion2'),
           ]}

src/components/HomeTabs/InstalledLiveries/ListRow.js

@@ -219,7 +219,7 @@ export default function ListRow(props) {
                 <CircularProgress
                   className={classes.deleteButtonProgress}
                   size={48}
-                  variant={beingDeleted ? 'indeterminate' : 'static'}
+                  variant={beingDeleted ? 'indeterminate' : 'determinate'}
                   value={((HoldToRemoveTime - (timeRemaining <= 0 ? 0 : timeRemaining)) / HoldToRemoveTime) * 100}
                 />
                 <BinIcon

src/components/HomeTabs/Settings.js

@@ -33,9 +33,9 @@ import packageJson from '../../../package.json';
 import AdvancedSettingsToggleImage from '../../images/manager_text_advanced_settings.png';
 
 import { useSnackbar } from 'notistack';
-import Config from 'electron-json-config';
 import LocaleContext from '../../locales/LocaleContext';
 import { GetAllLocales } from '../../locales/LocaleHelpers';
+import getConfigInstance from '../../helpers/getConfigInstance';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -132,7 +132,7 @@ export default function Settings() {
     function toggleAdvanced(e) {
       if (e.detail === 5) {
         if (IsAdvancedUser()) {
-          Config.set(CONFIG_KEYS.settings.show_advanced_settings, false);
+          getConfigInstance().set(CONFIG_KEYS.settings.show_advanced_settings, false);
           enqueueSnackbar(CurrentLocale.translate('manager.pages.settings.advanced_settings.disabled_notification'), {
             variant: 'info',
           });
@@ -146,7 +146,7 @@ export default function Settings() {
           );
 
           if (d === 0) {
-            Config.set(CONFIG_KEYS.settings.show_advanced_settings, true);
+            getConfigInstance().set(CONFIG_KEYS.settings.show_advanced_settings, true);
             enqueueSnackbar(CurrentLocale.translate('manager.pages.settings.advanced_settings.enabled_notification'), {
               variant: 'warning',
             });
@@ -174,7 +174,7 @@ export default function Settings() {
 
     if (isValid) {
       setError(null);
-      if (d[0] !== Config.get(CONFIG_KEYS.settings.package_directory)) {
+      if (d[0] !== getConfigInstance().get(CONFIG_KEYS.settings.package_directory)) {
         setSaveButtonEnabled(true);
       }
     } else {
@@ -213,13 +213,13 @@ export default function Settings() {
             inputRef={PackagesDirTB}
             variant="filled"
             label={CurrentLocale.translate('manager.pages.settings.user_settings.community_folder.input_label')}
-            defaultValue={Config.get(CONFIG_KEYS.settings.package_directory)}
+            defaultValue={getConfigInstance().get(CONFIG_KEYS.settings.package_directory)}
             onChange={e => {
               const [isValid, errorMsg] = ValidateFSDirectory(e.currentTarget.value, CurrentLocale);
 
               if (isValid) {
                 setError(null);
-                if (e.currentTarget.value !== Config.get(CONFIG_KEYS.settings.package_directory)) {
+                if (e.currentTarget.value !== getConfigInstance().get(CONFIG_KEYS.settings.package_directory)) {
                   setSaveButtonEnabled(true);
                 }
               } else {
@@ -233,7 +233,7 @@ export default function Settings() {
             color="textSecondary"
             className={classes.resetLink}
             onClick={() => {
-              PackagesDirTB.current.value = Config.get(CONFIG_KEYS.settings.package_directory);
+              PackagesDirTB.current.value = getConfigInstance().get(CONFIG_KEYS.settings.package_directory);
 
               const [isValid, errorMsg] = ValidateFSDirectory(PackagesDirTB.current.value, CurrentLocale);
 
@@ -258,7 +258,7 @@ export default function Settings() {
                 target.innerText = CurrentLocale.translate('manager.pages.settings.user_settings.community_folder.open_in_explorer');
               }, 2500);
 
-              ElectronRemote.shell.showItemInFolder(Config.get(CONFIG_KEYS.settings.package_directory));
+              ElectronRemote.shell.showItemInFolder(getConfigInstance().get(CONFIG_KEYS.settings.package_directory));
             }}
           >
             {CurrentLocale.translate('manager.pages.settings.user_settings.community_folder.open_in_explorer')}
@@ -396,7 +396,7 @@ export default function Settings() {
             onClick={() => {
               setSaveButtonEnabled(false);
 
-              Config.setBulk({
+              getConfigInstance().setBulk({
                 [CONFIG_KEYS.settings.package_directory]: PackagesDirTB.current.value,
               });
             }}

src/data/IsAdvancedUser.js

@@ -1,4 +1,4 @@
-import Config from 'electron-json-config';
+import getConfigInstance from '../helpers/getConfigInstance';
 import CONFIG_KEYS from './config-keys.json';
 
-export default () => Config.get(CONFIG_KEYS.settings.show_advanced_settings) || false;
+export default () => getConfigInstance().get(CONFIG_KEYS.settings.show_advanced_settings) || false;

src/data/Theme.js

@@ -1,6 +1,6 @@
-import { createMuiTheme, colors } from '@material-ui/core';
+import { createTheme, colors } from '@material-ui/core';
 
-export default createMuiTheme({
+export default createTheme({
   typography: {
     fontFamily: 'Poppins',
     fontSize: 18,

src/helpers/AddonInstaller/InstallAddon.js

@@ -5,13 +5,13 @@ import * as ElectronRemote from '@electron/remote';
 import admzip from 'adm-zip';
 import request from 'request';
 import progress from 'request-progress';
-import Config from 'electron-json-config';
 
 import ThrowError from '../ThrowError';
 import addLiveryInstallAnalytic from './addLiveryInstallAnalytic';
 
 import Constants from '../../data/Constants.json';
 import ConfigKeys from '../../data/config-keys.json';
+import getConfigInstance from '../getConfigInstance';
 /**
  * Download and install an addon
  *
@@ -23,7 +23,7 @@ import ConfigKeys from '../../data/config-keys.json';
  * @param {"fresh"|"update"} installType Type of install (update, fresh install, etc)
  */
 export default async function InstallAddon(PlaneObject, index, total, CurrentLocale, updateProgress, installType) {
-  const Directory = Config.get(ConfigKeys.settings.package_directory);
+  const Directory = getConfigInstance().get(ConfigKeys.settings.package_directory);
   const downloadURL = `${Constants.urls.cdnEndpoint}/${PlaneObject.fileName}?hash=${PlaneObject.checkSum}`;
   const zipName = PlaneObject.fileName.substr(PlaneObject.fileName.lastIndexOf('/') + 1);
   const tempPath = Path.join(ElectronRemote.app.getPath('temp'), Constants.appName, Constants.dirs.downloadCache);

src/helpers/AddonInstaller/getInstalledAddons.js

@@ -1,11 +1,11 @@
 import { readdirSync, existsSync, lstatSync, readFileSync } from 'fs';
 import Path from 'path';
 
-import Config from 'electron-json-config';
 import ConfigKeys from '../../data/config-keys.json';
 import Constants from '../../data/Constants.json';
 
 import AsyncForEach from '../AsyncForEach';
+import getConfigInstance from '../getConfigInstance';
 import ThrowError from '../ThrowError';
 
 /**
@@ -42,7 +42,7 @@ export default async function GetInstalledAddons() {
     integrations: [new RewriteFrames()],
   });
   let installedAddons = [];
-  const Directory = Path.normalize(Config.get(ConfigKeys.settings.package_directory));
+  const Directory = Path.normalize(getConfigInstance().get(ConfigKeys.settings.package_directory));
 
   if (!existsSync(Directory)) return ThrowError('E101', `Community path does not exist:\n${Directory}`);
 

src/helpers/ResetConfig.js

@@ -1,7 +1,8 @@
-import Config from 'electron-json-config';
 import defaultConfig from '../data/default-config';
 
 export default function ResetConfig() {
-  Config.purge();
-  Config.setBulk(defaultConfig);
+  const config = getConfigInstance();
+
+  config.purge();
+  config.setBulk(defaultConfig);
 }

src/helpers/getConfigInstance.js

@@ -0,0 +1,5 @@
+import { factory } from '@msfs/electron-json-config';
+
+export default function getConfigInstance() {
+  return factory();
+}

src/index.js

@@ -9,10 +9,10 @@ import 'overlayscrollbars/css/OverlayScrollbars.css';
 
 import Navigate from './helpers/Navigate';
 import Routes from './data/Routes';
-import Config from 'electron-json-config';
 import IsDev from './data/IsDev';
-import defaultConfig from './data/default-config';
 import GetInstalledAddons from './helpers/AddonInstaller/getInstalledAddons';
+import ResetConfig from './helpers/ResetConfig';
+import getConfigInstance from './helpers/getConfigInstance';
 
 // Since we are using HtmlWebpackPlugin WITHOUT a template, we should create our own root node in the body element before rendering into it
 let root = document.createElement('div');
@@ -28,10 +28,7 @@ if (IsDev) InitialiseDeveloperFunctions();
 function InitialiseDeveloperFunctions() {
   window.__navigate = Navigate;
   window.__routes = Routes;
-  window.__config = Config;
-  window.__resetConfig = () => {
-    Config.purge();
-    Config.setBulk(defaultConfig);
-  };
+  window.__config = getConfigInstance();
+  window.__resetConfig = ResetConfig;
   window.__getInstalledAddons = GetInstalledAddons;
 }

src/locales/Locale.js

@@ -1,5 +1,5 @@
-import Config from 'electron-json-config';
 import ConfigKeys from '../data/config-keys.json';
+import getConfigInstance from '../helpers/getConfigInstance';
 
 /**
  * @typedef {{ info: { name: string, localeId: string }, strings: object, setLocale: function, dayJsLocale: any }} LocaleData
@@ -93,7 +93,7 @@ export default class Locale {
   }
 
   updateLocale(newLocaleId) {
-    Config.set(ConfigKeys.settings.locale, newLocaleId);
+    getConfigInstance().set(ConfigKeys.settings.locale, newLocaleId);
     this._setLocale(newLocaleId);
   }
 

src/pages/Setup.js

@@ -23,12 +23,11 @@ import FolderSearchOutlineIcon from 'mdi-react/FolderSearchOutlineIcon';
 
 import Navigate from '../helpers/Navigate';
 
-import Electron from 'electron';
-import Config from 'electron-json-config';
 import ConfigKeys from '../data/config-keys.json';
 import PackageJson from '../../package.json';
 import LocaleContext from '../locales/LocaleContext';
 import { GetAllLocales } from '../locales/LocaleHelpers';
+import getConfigInstance from '../helpers/getConfigInstance';
 
 export default function Setup() {
   const [page, setPage] = useState(1);
@@ -81,7 +80,7 @@ export default function Setup() {
             if (page !== Pages.length) {
               setPage(page + 1);
             } else {
-              Config.setBulk({
+              getConfigInstance().setBulk({
                 [ConfigKeys.state.setup_completed]: true,
                 [ConfigKeys.settings.package_directory]: data.packageDir,
               });

src/pages/SplashScreen.js

@@ -4,19 +4,19 @@ import { Box, CircularProgress, Typography, makeStyles } from '@material-ui/core
 
 import Navigate from '../helpers/Navigate';
 
-import Config from 'electron-json-config';
 import ConfigKeys from '../data/config-keys.json';
 import defaultConfig from '../data/default-config';
 import LocaleContext from '../locales/LocaleContext';
+import getConfigInstance from '../helpers/getConfigInstance';
 
 const useStyles = makeStyles(theme => ({ loadingHeading: { marginTop: theme.spacing(3) } }));
 
 function CheckConfig() {
-  const CurrentKeys = Config.keys();
+  const CurrentKeys = getConfigInstance().keys();
 
   Object.keys(defaultConfig).forEach(key => {
     if (!CurrentKeys.includes(key)) {
-      Config.set(key, defaultConfig[key]);
+      getConfigInstance().set(key, defaultConfig[key]);
     }
   });
 }
@@ -27,7 +27,7 @@ export default function SplashScreen() {
 
   const styles = useStyles();
 
-  if (Config.get(ConfigKeys.state.setup_completed, false)) {
+  if (getConfigInstance().get(ConfigKeys.state.setup_completed, false)) {
     console.log('Setup complete');
     setTimeout(() => {
       Navigate('/home');