chore: convert various files from JS to TS (#1959)

31 files changed, 259 insertions, 234 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 21b2e3d3b..8f24775be 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -33,7 +33,7 @@ const getTargetEnv = isDevBuild ? 'development' : 'production';
 const tsProject = ts.createProject('tsconfig.json');
 
 const styleConfig = Object.keys(rawStyleConfig).map(key => {
-  const isHex = /^#[0-9A-F]{6}$/i.test(rawStyleConfig[key]);
+  const isHex = /^#[\da-f]{6}$/i.test(rawStyleConfig[key]);
   return {
     [`$raw_${kebabCase(key)}`]: isHex
       ? hexRgb(rawStyleConfig[key], { format: 'array' }).splice(0, 3).join(',')
@@ -151,7 +151,7 @@ export function mvLernaPackages() {
 
 export function mvPostinstallScript() {
   return gulp
-    .src(['./scripts/postinstall.js'])
+    .src(['./scripts/postinstall.ts'])
     .pipe(gulp.dest(`${paths.dest}/scripts`));
 }
 
diff --git a/package-lock.json b/package-lock.json
index 19077d24c..a1b5a25d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2319,6 +2319,21 @@
         }
       }
     },
+    "@cspotcode/source-map-consumer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
+      "integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==",
+      "dev": true
+    },
+    "@cspotcode/source-map-support": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.6.1.tgz",
+      "integrity": "sha512-DX3Z+T5dt1ockmPdobJS/FAsQPW4V4SrWEhD2iYQT2Cb2tQsiMnYxrcUH9By/Z3B+v0S5LMBkQtV/XOBbpLEOg==",
+      "dev": true,
+      "requires": {
+        "@cspotcode/source-map-consumer": "0.8.0"
+      }
+    },
     "@dabh/diagnostics": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz",
@@ -6613,6 +6628,30 @@
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
+    "@tsconfig/node10": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
+      "integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==",
+      "dev": true
+    },
+    "@tsconfig/node12": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
+      "integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw==",
+      "dev": true
+    },
+    "@tsconfig/node14": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
+      "integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==",
+      "dev": true
+    },
+    "@tsconfig/node16": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
+      "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==",
+      "dev": true
+    },
     "@types/babel__core": {
       "version": "7.1.15",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.15.tgz",
@@ -8403,6 +8442,12 @@
         }
       }
     },
+    "arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -11943,6 +11988,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true
+    },
     "cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -28832,28 +28883,74 @@
       "requires": {
         "ts-node": "7.0.1",
         "tsconfig-paths": "^3.5.0"
+      },
+      "dependencies": {
+        "diff": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+          "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+          "dev": true
+        },
+        "ts-node": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz",
+          "integrity": "sha512-BVwVbPJRspzNh2yfslyT1PSbl5uIk03EZlb493RKHN4qej/D06n1cEhjlOJG69oFsE7OT8XjpTUcYf6pKTLMhw==",
+          "dev": true,
+          "requires": {
+            "arrify": "^1.0.0",
+            "buffer-from": "^1.1.0",
+            "diff": "^3.1.0",
+            "make-error": "^1.1.1",
+            "minimist": "^1.2.0",
+            "mkdirp": "^0.5.1",
+            "source-map-support": "^0.5.6",
+            "yn": "^2.0.0"
+          }
+        },
+        "yn": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
+          "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=",
+          "dev": true
+        }
       }
     },
     "ts-node": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz",
-      "integrity": "sha512-BVwVbPJRspzNh2yfslyT1PSbl5uIk03EZlb493RKHN4qej/D06n1cEhjlOJG69oFsE7OT8XjpTUcYf6pKTLMhw==",
-      "dev": true,
-      "requires": {
-        "arrify": "^1.0.0",
-        "buffer-from": "^1.1.0",
-        "diff": "^3.1.0",
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.2.1.tgz",
+      "integrity": "sha512-hCnyOyuGmD5wHleOQX6NIjJtYVIO8bPP8F2acWkB4W06wdlkgyvJtubO/I9NkI88hCFECbsEgoLc0VNkYmcSfw==",
+      "dev": true,
+      "requires": {
+        "@cspotcode/source-map-support": "0.6.1",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
         "make-error": "^1.1.1",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
-        "source-map-support": "^0.5.6",
-        "yn": "^2.0.0"
+        "yn": "3.1.1"
       },
       "dependencies": {
+        "acorn": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
+          "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "8.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+          "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+          "dev": true
+        },
         "diff": {
-          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-          "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+          "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
           "dev": true
         }
       }
@@ -31146,9 +31243,9 @@
       }
     },
     "yn": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
-      "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
       "dev": true
     },
     "yocto-queue": {
diff --git a/package.json b/package.json
index 8a75cc230..4c88ce472 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   },
   "engine-strict": true,
   "scripts": {
-    "prepare": "node scripts/prepare.js",
+    "prepare": "ts-node scripts/prepare.ts",
     "start": "electron ./build",
     "start:local": "cross-env USE_LOCAL_API=1 npm start",
     "start:live": "cross-env USE_LIVE_API=1 npm start",
@@ -38,14 +38,14 @@
     "reformat-files": "./node_modules/.bin/prettier --ignore-path .eslintignore --write --require-pragma \"**/*.{js,jsx,scss}\"",
     "packages": "npx lerna publish --no-git-tag-version",
     "uidev": "cd uidev && webpack-dev-server",
-    "postinstall": "node scripts/postinstall.js",
-    "apply-branding": "node ./src/i18n/apply-branding.js",
+    "postinstall": "ts-node scripts/postinstall.ts",
+    "apply-branding": "ts-node ./src/i18n/apply-branding.ts",
     "update-submodules": "git submodule update --remote --force",
     "prepare-code": "npm run lint && npm run reformat-files && npm run manage-translations && npm run apply-branding",
-    "build-theme-info": "node scripts/build-theme-info.js",
-    "link-readme": "node scripts/link-readme.js",
+    "link-readme": "ts-node scripts/link-readme.ts",
     "minify-images": "./scripts/minify-images.sh",
-    "start:server": "node src/internal-server/test.js"
+    "start:server": "ts-node src/internal-server/test.ts",
+    "add-crowdin-contributors": "ts-node scripts/add-crowdin-contributors.ts"
   },
   "keywords": [],
   "author": "Amine Mouafik <amine@mouafik.fr>",
@@ -217,6 +217,7 @@
     "terser": "4.8.0",
     "ts-loader": "5.4.5",
     "ts-mocha": "8.0.0",
+    "ts-node": "10.2.1",
     "typescript": "3.9.10",
     "wait-on": "6.0.0",
     "webpack": "4.46.0",
diff --git a/scripts/add-crowdin-contributors.js b/scripts/add-crowdin-contributors.ts
index 05e377a94..00d12eca1 100644
--- a/scripts/add-crowdin-contributors.js
+++ b/scripts/add-crowdin-contributors.ts
@@ -1,3 +1,7 @@
+import fs from 'fs-extra';
+import path from 'path';
+import allContributors from 'all-contributors-cli';
+
 /**
  * Add CrowdIn Contributors to AllContributors list
  *
@@ -48,17 +52,13 @@ console.clear();
 console.log(JSON.stringify(members));
 
  * 3. Paste the output of the script (JSON Array) below to set 'list' to that value
- * 4. Execute this script using 'node scripts/add-crowdin-contributors.js'
+ * 4. Execute this script using 'npm run add-crowdin-contributors'
  * 5. Regenerate the README table using the CLI ('all-contributors generate')
  * Please check if the generated data is ok and no data is lost.
 */
-const list = [];
-
-const fs = require('fs-extra');
-const path = require('path');
-const allContributors = require('all-contributors-cli');
+const list: any[] = [];
 
-const infoPath = path.join(__dirname, '..', '..', '.all-contributorsrc');
+const infoPath = path.join(__dirname, '..', '.all-contributorsrc');
 
 (async () => {
   const info = await fs.readJSON(infoPath);
diff --git a/scripts/build-theme-info.js b/scripts/build-theme-info.js
deleted file mode 100644
index 8aee96ab7..000000000
--- a/scripts/build-theme-info.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Script to get information on which selectors use the brand color.
- * This is needed to provide the accent color feature - the feature will create CSS rules
- * to overwrite the color of these selectors.
- */
-const css = require('css');
-const fs = require('fs-extra');
-const path = require('path');
-const theme = require('@meetfranz/theme');
-
-// Colors that should be replaced with the accent color
-const accentColors = [
-  theme.DEFAULT_ACCENT_COLOR.toLowerCase(),
-  '#7367f0',
-  '#5e50ee',
-];
-
-const cssFile = path.join(__dirname, '..', '..', 'build', 'styles', 'main.css');
-const outputFile = path.join(__dirname, '..', 'assets', 'themeInfo.json');
-
-// Parse and extract the rules from a CSS stylesheet file
-async function getRulesFromCssFile(file) {
-  const cssSrc = (await fs.readFile(file)).toString();
-  const cssTree = css.parse(cssSrc);
-
-  return cssTree.stylesheet?.rules;
-}
-
-/**
- * Get all selectors from a list of parsed CSS rules that set any property to one of the specified
- * values.
- *
- * This function will output an object in this format:
- * {
- *  'property-name': [ array of selectors ]
- * }
- *
- * e.g.
- * {
- *  'background-color': [
- *   '.background',
- *   '.input-dark'
- *  ]
- * }
- *
- * @param {Array} rules Rules as outputted by the `css` module
- * @param {Array} values Array of values that should be searched for
- */
-function getSelectorsDeclaringValues(rules, values) {
-  const output = {};
-
-  for (const rule of rules) {
-    if (rule.declarations) {
-      for (const declaration of rule.declarations) {
-        if (
-          declaration.type === 'declaration' &&
-          values.includes(declaration.value.toLowerCase())
-        ) {
-          if (!output[declaration.property]) {
-            output[declaration.property] = [];
-          }
-          // eslint-disable-next-line unicorn/prefer-spread
-          output[declaration.property] = output[declaration.property].concat(
-            rule.selectors,
-          );
-        }
-      }
-    }
-  }
-
-  return output;
-}
-
-async function generateThemeInfo() {
-  if (!(await fs.pathExists(cssFile))) {
-    console.log('Please make sure to build the project first.');
-    return;
-  }
-
-  // Read and parse css bundle
-  const rules = await getRulesFromCssFile(cssFile);
-
-  console.log(`Found ${rules?.length} rules`);
-
-  // Get rules specifying the brand colors
-  const brandRules = getSelectorsDeclaringValues(rules, accentColors);
-
-  console.log(
-    `Found ${Object.keys(brandRules).join(
-      ', ',
-    )} properties that set color to brand color`,
-  );
-
-  // Join array of declarations into a single string
-  for (const rule of Object.keys(brandRules)) {
-    brandRules[rule] = brandRules[rule].join(', ');
-  }
-
-  // Write object with theme info to file
-  fs.writeFile(outputFile, JSON.stringify(brandRules));
-}
-
-generateThemeInfo();
diff --git a/scripts/link-readme.js b/scripts/link-readme.ts
index 2ab38912c..77b384ff4 100644
--- a/scripts/link-readme.js
+++ b/scripts/link-readme.ts
@@ -6,12 +6,12 @@
  * and "@abc" => "[@abc](https://github.com/abc)"
  */
 
-const fs = require('fs-extra');
-const path = require('path');
+import fs from 'fs-extra';
+import path from 'path';
 
 console.log('Linking issues and PRs in README.md');
 
-const readmepath = path.join(__dirname, '..', '..', 'README.md');
+const readmepath = path.join(__dirname, '..', 'README.md');
 
 // Read README.md
 let readme = fs.readFileSync(readmepath, 'utf-8');
diff --git a/scripts/postinstall.js b/scripts/postinstall.ts
index 84e7492ef..4fa71c35f 100644
--- a/scripts/postinstall.js
+++ b/scripts/postinstall.ts
@@ -1,4 +1,4 @@
-const { exec } = require('child_process');
+import { exec } from 'child_process';
 
 // eslint-disable-next-line no-console
 const log = (err, stdout, stderr) => console.log(err || stdout || stderr);
diff --git a/scripts/prepare.js b/scripts/prepare.ts
index 0b4daa82b..0b4daa82b 100644
--- a/scripts/prepare.js
+++ b/scripts/prepare.ts
diff --git a/src/assets/themeInfo.json b/src/assets/themeInfo.json
deleted file mode 100644
index 54e833789..000000000
--- a/src/assets/themeInfo.json
+++ /dev/null
@@ -1 +0,0 @@
-{"color":".theme__dark .app .sidebar .sidebar__button.is-muted, .theme__dark .app .sidebar .sidebar__button.is-active, .sidebar .sidebar__button.is-muted, .sidebar .sidebar__button.is-active, .tab-item.is-active, .settings .account .invoices .invoices__action button, .settings-navigation .settings-navigation__link.is-active .badge, a.link, button.link, .auth .welcome .button:hover, .auth .welcome .button__inverted, .franz-form .franz-form__radio.is-selected, .theme__dark .franz-form__button.franz-form__button--inverted, .franz-form__button.franz-form__button--inverted","border-color":".theme__dark .settings, .franz-form .franz-form__radio.is-selected","background":".settings .settings__header, .settings .settings__close, .settings-navigation .settings-navigation__link.is-active, a.button, button.button, .auth, .info-bar, .info-bar.info-bar--primary, .infobox.infobox--primary, .theme__dark .badge.badge--primary, .theme__dark, .badge.badge--primary, .content-tabs .content-tabs__tabs .content-tabs__item.is-active, #electron-app-title-bar .toolbar-dropdown:not(.open) > .toolbar-button > button:hover, #electron-app-title-bar .list-item.selected .menu-item, #electron-app-title-bar .list-item.selected:focus .menu-item, .theme__dark .quick-switch .active, .franz-form .franz-form__toggle-wrapper .franz-form__toggle.is-active .franz-form__toggle-button, .theme__dark .franz-form__button, .franz-form__button, .ferdi__fab, .franz-form .franz-form__slider-wrapper .slider::-webkit-slider-thumb","border-right-color":".settings .settings__header .separator"}
diff --git a/src/electron/ipc-api/localServer.ts b/src/electron/ipc-api/localServer.ts
index d318b93a5..61e56c777 100644
--- a/src/electron/ipc-api/localServer.ts
+++ b/src/electron/ipc-api/localServer.ts
@@ -2,7 +2,7 @@ import { ipcMain, BrowserWindow } from 'electron';
 import net from 'net';
 import { LOCAL_HOSTNAME, LOCAL_PORT } from '../../config';
 import { userDataPath } from '../../environment';
-import startServer from '../../internal-server/start';
+import { server } from '../../internal-server/start';
 
 const portInUse = (port: number): Promise<boolean> =>
   new Promise(resolve => {
@@ -35,7 +35,7 @@ export default (params: { mainWindow: BrowserWindow }) => {
         }
         console.log('Starting local server on port', port);
 
-        startServer(userDataPath(), port);
+        server(userDataPath(), port);
 
         params.mainWindow.webContents.send('localServerPort', {
           port,
diff --git a/src/electron/macOSPermissions.ts b/src/electron/macOSPermissions.ts
index f5a8c7cc4..aef3ac30b 100644
--- a/src/electron/macOSPermissions.ts
+++ b/src/electron/macOSPermissions.ts
@@ -15,7 +15,7 @@ debug(
 
 const filePath = userDataPath('.has-app-requested-screen-capture-permissions');
 
-function hasPromptedForScreenCapturePermission(): boolean {
+function hasPromptedForScreenCapturePermission(): string | boolean {
   if (!isExplicitScreenCapturePermissionReqd) {
     return false;
   }
diff --git a/src/environment.js b/src/environment.ts
index b315466fc..ca1380199 100644
--- a/src/environment.js
+++ b/src/environment.ts
@@ -24,7 +24,9 @@ import {
 } from './config';
 
 import { asarPath } from './helpers/asar-helpers';
-import * as buildInfo from './buildInfo.json'; // eslint-disable-line import/no-unresolved
+
+// @ts-expect-error Cannot find module './buildInfo.json' or its corresponding type declarations.
+import * as buildInfo from './buildInfo.json';
 
 export const { app } = electronApi;
 export const ferdiVersion = app.getVersion();
@@ -38,7 +40,11 @@ if (process.env.FERDI_APPDATA_DIR != null) {
   app.setPath('appData', process.env.FERDI_APPDATA_DIR);
   app.setPath('userData', join(app.getPath('appData')));
 } else if (process.env.PORTABLE_EXECUTABLE_DIR != null) {
-  app.setPath('appData', process.env.PORTABLE_EXECUTABLE_DIR, `${app.name}AppData`);
+  app.setPath(
+    'appData',
+    process.env.PORTABLE_EXECUTABLE_DIR,
+    `${app.name}AppData`,
+  );
   app.setPath('userData', join(app.getPath('appData'), `${app.name}AppData`));
 } else if (is.windows) {
   app.setPath('appData', process.env.APPDATA);
@@ -50,17 +56,17 @@ if (isDevMode) {
   app.setPath('userData', join(app.getPath('appData'), `${app.name}Dev`));
 }
 
-export function userDataPath(...segments) {
-  return join(app.getPath('userData'), ...([segments].flat()));
+export function userDataPath(...segments: string[]) {
+  return join(app.getPath('userData'), ...[segments].flat());
 }
 
-export function userDataRecipesPath(...segments) {
-  return userDataPath('recipes', ...([segments].flat()));
+export function userDataRecipesPath(...segments: any[]) {
+  return userDataPath('recipes', ...[segments].flat());
 }
 
 // Replacing app.asar is not beautiful but unfortunately necessary
-export function asarRecipesPath(...segments) {
-  return join(asarPath(join(__dirname, 'recipes')), ...([segments].flat()));
+export function asarRecipesPath(...segments: any[]) {
+  return join(asarPath(join(__dirname, 'recipes')), ...[segments].flat());
 }
 
 export const useLiveAPI = process.env.USE_LIVE_API;
@@ -79,22 +85,31 @@ export const is64Bit = osArch.match(/64/);
 const ctrlKey = isMac ? '⌘' : 'Ctrl';
 const cmdKey = isMac ? 'Cmd' : 'Ctrl';
 
-export const altKey = (isAccelerator = true) => (!isAccelerator && isMac ? '⌥' : 'Alt');
-export const shiftKey = (isAccelerator = true) => (!isAccelerator && isMac ? '⇧' : 'Shift');
+export const altKey = (isAccelerator = true) =>
+  !isAccelerator && isMac ? '⌥' : 'Alt';
+export const shiftKey = (isAccelerator = true) =>
+  !isAccelerator && isMac ? '⇧' : 'Shift';
 
 // Platform specific shortcut keys
-export const cmdOrCtrlShortcutKey = (isAccelerator = true) => (isAccelerator ? cmdKey : ctrlKey);
-export const lockFerdiShortcutKey = (isAccelerator = true) => `${cmdOrCtrlShortcutKey(isAccelerator)}+${shiftKey(isAccelerator)}+L`;
-export const todosToggleShortcutKey = (isAccelerator = true) => `${cmdOrCtrlShortcutKey(isAccelerator)}+T`;
-export const workspaceToggleShortcutKey = (isAccelerator = true) => `${cmdOrCtrlShortcutKey(isAccelerator)}+D`;
-export const muteFerdiShortcutKey = (isAccelerator = true) => `${cmdOrCtrlShortcutKey(isAccelerator)}+${shiftKey(isAccelerator)}+M`;
-export const addNewServiceShortcutKey = (isAccelerator = true) => `${cmdOrCtrlShortcutKey(isAccelerator)}+N`;
-export const settingsShortcutKey = (isAccelerator = true) => `${cmdOrCtrlShortcutKey(isAccelerator)}+${isMac ? ',' : 'P'}`;
-
-let api;
-let wsApi;
-let web;
-let todos;
+export const cmdOrCtrlShortcutKey = (isAccelerator = true) =>
+  isAccelerator ? cmdKey : ctrlKey;
+export const lockFerdiShortcutKey = (isAccelerator = true) =>
+  `${cmdOrCtrlShortcutKey(isAccelerator)}+${shiftKey(isAccelerator)}+L`;
+export const todosToggleShortcutKey = (isAccelerator = true) =>
+  `${cmdOrCtrlShortcutKey(isAccelerator)}+T`;
+export const workspaceToggleShortcutKey = (isAccelerator = true) =>
+  `${cmdOrCtrlShortcutKey(isAccelerator)}+D`;
+export const muteFerdiShortcutKey = (isAccelerator = true) =>
+  `${cmdOrCtrlShortcutKey(isAccelerator)}+${shiftKey(isAccelerator)}+M`;
+export const addNewServiceShortcutKey = (isAccelerator = true) =>
+  `${cmdOrCtrlShortcutKey(isAccelerator)}+N`;
+export const settingsShortcutKey = (isAccelerator = true) =>
+  `${cmdOrCtrlShortcutKey(isAccelerator)}+${isMac ? ',' : 'P'}`;
+
+let api: string;
+let wsApi: string;
+let web: string;
+let todos: string;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
   api = LIVE_FERDI_API;
   wsApi = LIVE_WS_API;
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.ts
index 0c935be32..b00b9df3d 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.ts
@@ -1,6 +1,5 @@
 import color from 'color';
 import { reaction } from 'mobx';
-import themeInfo from '../../assets/themeInfo.json';
 import { iconSizeBias } from '../../config';
 import { DEFAULT_APP_SETTINGS } from '../../environment';
 
@@ -30,14 +29,6 @@ function darkenAbsolute(originalColor, absoluteChange) {
 function generateAccentStyle(accentColorStr) {
   let style = '';
 
-  for (const property of Object.keys(themeInfo)) {
-    style += `
-      ${themeInfo[property]} {
-        ${property}: ${accentColorStr};
-      }
-    `;
-  }
-
   let accentColor = color(DEFAULT_APP_SETTINGS.accentColor);
   try {
     accentColor = color(accentColorStr);
diff --git a/src/features/basicAuth/Form.js b/src/features/basicAuth/Form.ts
index 95721d0e9..95721d0e9 100644
--- a/src/features/basicAuth/Form.js
+++ b/src/features/basicAuth/Form.ts
diff --git a/src/features/basicAuth/mainIpcHandler.js b/src/features/basicAuth/mainIpcHandler.ts
index ae4e7cf93..4ec3848e8 100644
--- a/src/features/basicAuth/mainIpcHandler.js
+++ b/src/features/basicAuth/mainIpcHandler.ts
@@ -1,6 +1,8 @@
+import { BrowserWindow } from 'electron';
+
 const debug = require('debug')('Ferdi:feature:basicAuth:main');
 
-export default function mainIpcHandler(mainWindow, authInfo) {
+export default function mainIpcHandler(mainWindow: BrowserWindow, authInfo) {
   debug('Sending basic auth call', authInfo);
 
   mainWindow.webContents.send('feature:basic-auth', {
diff --git a/src/features/basicAuth/store.js b/src/features/basicAuth/store.ts
index 0713ff572..0713ff572 100644
--- a/src/features/basicAuth/store.js
+++ b/src/features/basicAuth/store.ts
diff --git a/src/features/basicAuth/styles.js b/src/features/basicAuth/styles.ts
index 6bdaf9a6e..6bdaf9a6e 100644
--- a/src/features/basicAuth/styles.js
+++ b/src/features/basicAuth/styles.ts
diff --git a/src/features/communityRecipes/index.js b/src/features/communityRecipes/index.ts
index 828c6d867..828c6d867 100644
--- a/src/features/communityRecipes/index.js
+++ b/src/features/communityRecipes/index.ts
diff --git a/src/features/utils/ActionBinding.js b/src/features/utils/ActionBinding.ts
index 787166d44..787166d44 100644
--- a/src/features/utils/ActionBinding.js
+++ b/src/features/utils/ActionBinding.ts
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
deleted file mode 100644
index 5b5db422e..000000000
--- a/src/features/workspaces/actions.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import Workspace from './models/Workspace';
-import { createActionsFromDefinitions } from '../../actions/lib/actions';
-
-export const workspaceActions = createActionsFromDefinitions({
-  edit: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  create: {
-    name: PropTypes.string.isRequired,
-  },
-  delete: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  update: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  activate: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  deactivate: {},
-  toggleWorkspaceDrawer: {},
-  openWorkspaceSettings: {},
-  toggleKeepAllWorkspacesLoadedSetting: {},
-}, PropTypes.checkPropTypes);
-
-export default workspaceActions;
diff --git a/src/features/workspaces/actions.ts b/src/features/workspaces/actions.ts
new file mode 100644
index 000000000..5e7e6e721
--- /dev/null
+++ b/src/features/workspaces/actions.ts
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import Workspace from './models/Workspace';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const workspaceActions = createActionsFromDefinitions(
+  {
+    edit: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    create: {
+      name: PropTypes.string.isRequired,
+    },
+    delete: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    update: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    activate: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    deactivate: {},
+    toggleWorkspaceDrawer: {},
+    openWorkspaceSettings: {},
+    toggleKeepAllWorkspacesLoadedSetting: {},
+  },
+  PropTypes.checkPropTypes,
+);
+
+export default workspaceActions;
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.ts
index 322695ed2..8447fc247 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.ts
@@ -12,12 +12,14 @@ export const workspaceApi = {
     debug('getUserWorkspaces GET', url);
     const result = await sendAuthRequest(url, { method: 'GET' });
     debug('getUserWorkspaces RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't getUserWorkspaces");
+    }
     const workspaces = await result.json();
-    return workspaces.map((data) => new Workspace(data));
+    return workspaces.map(data => new Workspace(data));
   },
 
-  createWorkspace: async (name) => {
+  createWorkspace: async name => {
     const url = `${apiBase()}/workspace`;
     const options = {
       method: 'POST',
@@ -26,20 +28,24 @@ export const workspaceApi = {
     debug('createWorkspace POST', url, options);
     const result = await sendAuthRequest(url, options);
     debug('createWorkspace RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't createWorkspace");
+    }
     return new Workspace(await result.json());
   },
 
-  deleteWorkspace: async (workspace) => {
+  deleteWorkspace: async workspace => {
     const url = `${apiBase()}/workspace/${workspace.id}`;
     debug('deleteWorkspace DELETE', url);
     const result = await sendAuthRequest(url, { method: 'DELETE' });
     debug('deleteWorkspace RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't deleteWorkspace");
+    }
     return true;
   },
 
-  updateWorkspace: async (workspace) => {
+  updateWorkspace: async workspace => {
     const url = `${apiBase()}/workspace/${workspace.id}`;
     const options = {
       method: 'PUT',
@@ -48,15 +54,29 @@ export const workspaceApi = {
     debug('updateWorkspace UPDATE', url, options);
     const result = await sendAuthRequest(url, options);
     debug('updateWorkspace RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't updateWorkspace");
+    }
     return new Workspace(await result.json());
   },
 };
 
-export const getUserWorkspacesRequest = new Request(workspaceApi, 'getUserWorkspaces');
-export const createWorkspaceRequest = new Request(workspaceApi, 'createWorkspace');
-export const deleteWorkspaceRequest = new Request(workspaceApi, 'deleteWorkspace');
-export const updateWorkspaceRequest = new Request(workspaceApi, 'updateWorkspace');
+export const getUserWorkspacesRequest = new Request(
+  workspaceApi,
+  'getUserWorkspaces',
+);
+export const createWorkspaceRequest = new Request(
+  workspaceApi,
+  'createWorkspace',
+);
+export const deleteWorkspaceRequest = new Request(
+  workspaceApi,
+  'deleteWorkspace',
+);
+export const updateWorkspaceRequest = new Request(
+  workspaceApi,
+  'updateWorkspace',
+);
 
 export const resetApiRequests = () => {
   getUserWorkspacesRequest.reset();
diff --git a/src/features/workspaces/constants.js b/src/features/workspaces/constants.ts
index 2d1416ee0..2d1416ee0 100644
--- a/src/features/workspaces/constants.js
+++ b/src/features/workspaces/constants.ts
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.ts
index 83e4d9049..ecca64b41 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.ts
@@ -12,10 +12,8 @@ export default function initWorkspaces(stores, actions) {
 
   // Toggle workspace feature
   reaction(
-    () => (
-      features.features.isWorkspaceEnabled
-    ),
-    (isEnabled) => {
+    () => features.features.isWorkspaceEnabled,
+    isEnabled => {
       if (isEnabled && !workspaceStore.isFeatureActive) {
         debug('Initializing `workspaces` feature');
         workspaceStore.start(stores, actions);
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.ts
index 14add9437..cd3918fba 100644
--- a/src/features/workspaces/models/Workspace.js
+++ b/src/features/workspaces/models/Workspace.ts
@@ -28,8 +28,10 @@ export default class Workspace {
       services.push(KEEP_WS_LOADED_USID);
     } else if (data.saving && data.services.includes(KEEP_WS_LOADED_USID)) {
       // Don't keep loaded
-      services = services.filter((e) => e !== KEEP_WS_LOADED_USID);
+      services = services.filter(e => e !== KEEP_WS_LOADED_USID);
     }
+
+    // @ts-expect-error Property 'replace' does not exist on type 'never[]'.
     this.services.replace(services);
 
     this.userId = data.userId;
diff --git a/src/i18n/apply-branding.js b/src/i18n/apply-branding.ts
index 8ec573919..801a4a525 100644
--- a/src/i18n/apply-branding.js
+++ b/src/i18n/apply-branding.ts
@@ -1,8 +1,8 @@
 /**
  * Apply Ferdi branding to i18n translations
  */
-const fs = require('fs-extra');
-const path = require('path');
+import fs from 'fs-extra';
+import path from 'path';
 
 console.log('Applying Ferdi branding to translations...');
 
diff --git a/src/i18n/globalMessages.js b/src/i18n/globalMessages.ts
index 8e1df10f7..8e1df10f7 100644
--- a/src/i18n/globalMessages.js
+++ b/src/i18n/globalMessages.ts
diff --git a/src/i18n/languages.js b/src/i18n/languages.ts
index e7713b42b..e7713b42b 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.ts
diff --git a/src/i18n/translations.js b/src/i18n/translations.ts
index 9a7dc7453..9a7dc7453 100644
--- a/src/i18n/translations.js
+++ b/src/i18n/translations.ts
diff --git a/src/internal-server/start.js b/src/internal-server/start.ts
index 5ccc1330e..392f7cf41 100644
--- a/src/internal-server/start.js
+++ b/src/internal-server/start.ts
@@ -15,16 +15,16 @@
 |     Make sure to pass a relative path from the project root.
 */
 
-const fold = require('@adonisjs/fold');
-const { Ignitor } = require('@adonisjs/ignitor');
-const fs = require('fs-extra');
-const path = require('path');
-const { LOCAL_HOSTNAME } = require('../config');
-const { isWindows } = require('../environment');
+import fold from '@adonisjs/fold';
+import { Ignitor } from '@adonisjs/ignitor';
+import fs from 'fs-extra';
+import path from 'path';
+import { LOCAL_HOSTNAME } from '../config';
+import { isWindows } from '../environment';
 
 process.env.ENV_PATH = path.join(__dirname, 'env.ini');
 
-module.exports = async (userPath, port) => {
+export const server = async (userPath: string, port: number) => {
   const dbPath = path.join(userPath, 'server.sqlite');
   const dbTemplatePath = path.join(__dirname, 'database', 'template.sqlite');
 
@@ -45,7 +45,7 @@ module.exports = async (userPath, port) => {
   process.env.DB_PATH = dbPath;
   process.env.USER_PATH = userPath;
   process.env.HOST = LOCAL_HOSTNAME;
-  process.env.PORT = port;
+  process.env.PORT = port.toString();
 
-  new Ignitor(fold).appRoot(__dirname).fireHttpServer().catch(console.error); // eslint-disable-line no-console
+  new Ignitor(fold).appRoot(__dirname).fireHttpServer().catch(console.error);
 };
diff --git a/src/internal-server/test.js b/src/internal-server/test.ts
index ef85743f3..437a2813b 100644
--- a/src/internal-server/test.js
+++ b/src/internal-server/test.ts
@@ -1,6 +1,6 @@
-const path = require('path');
-const fs = require('fs-extra');
-const server = require('./start');
+import path from 'path';
+import fs from 'fs-extra';
+import { server } from './start';
 
 const dummyUserFolder = path.join(__dirname, 'user_data');