feat: added first typescript support

Didn't add many types yet. Just used to test out typescript compiler, copying files and building.
Now that all that seems to go well I can start converting all files to .ts and then adding proper typing everywhere

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
+}

.gitignore

@@ -12,3 +12,4 @@ build/linux/arch/*
 
 # JetBrains IDE configuration
 .idea
+ts-dist/**

package.json

@@ -2,9 +2,13 @@
   "name": "tidal-hifi",
   "version": "5.1.0",
   "description": "Tidal on Electron with widevine(hifi) support",
-  "main": "src/main.js",
+  "main": "ts-dist/main.js",
   "scripts": {
     "start": "electron .",
+    "compile": "tsc && npm run sass-and-copy",
+    "watch": "tsc-watch --onSuccess \"npm run sass-and-copy\"",
+    "sass-and-copy": "npm run sass && npm run copy-files",
+    "copy-files": "rsync -av --exclude '*.ts' --exclude '*.scss' ./src/pages ts-dist",
     "build": "npm run builder -- -c ./build/electron-builder.yml",
     "build-deb": "npm run builder -- -c ./build/electron-builder.deb.yml",
     "build-unpacked": "npm run builder -- -c ./build/electron-builder.unpacked.yml",
@@ -14,8 +18,7 @@
     "build-wl": "npm run builder -- -c ./build/electron-builder.yml -wl",
     "build-mac": "npm run builder -- -c ./build/electron-builder.yml -m",
     "build-base": "npm run builder -- -c ./build/electron-builder.base.yml",
-    "prestart": "npm run sass",
-    "prebuilder": "npm run sass",
+    "prebuilder": "npm run compile",
     "builder": "electron-builder --publish=never",
     "sass": "sass ./src/pages/settings/settings.scss ./src/pages/settings/settings.css",
     "style-lint": "npx stylelint **/*.scss",
@@ -42,8 +45,11 @@
   },
   "devDependencies": {
     "@mastermindzh/prettier-config": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "electron": "git+https://github.com/castlabs/electron-releases.git#v24.1.2+wvcus",
     "electron-builder": "^24.2.1",
+    "eslint": "^8.39.0",
     "js-yaml": "^4.1.0",
     "markdown-toc": "^1.2.0",
     "prettier": "^2.8.8",
@@ -51,6 +57,8 @@
     "stylelint-config-standard": "^33.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-prettier": "^3.0.0",
+    "tsc-watch": "^6.0.4",
+    "typescript": "^5.0.4"
   },
   "prettier": "@mastermindzh/prettier-config"
 }

src/constants/settings.js

@@ -21,6 +21,7 @@ const settings = {
   enableCustomHotkeys: "enableCustomHotkeys",
   enableDiscord: "enableDiscord",
   flags: {
+    root: "flags",
     disableHardwareMediaKeys: "flags.disableHardwareMediaKeys",
     gpuRasterization: "flags.gpuRasterization",
   },

src/main.ts

@@ -1,5 +1,5 @@
-require("@electron/remote/main").initialize();
-const {
+import { initialize, enable } from "@electron/remote/main";
+import {
   app,
   BrowserWindow,
   components,
@@ -7,38 +7,40 @@ const {
   ipcMain,
   protocol,
   session,
-} = require("electron");
-const {
+} from "electron";
+import {
   settings,
   store,
   createSettingsWindow,
   showSettingsWindow,
   closeSettingsWindow,
   hideSettingsWindow,
-} = require("./scripts/settings");
-const { addTray, refreshTray } = require("./scripts/tray");
-const { addMenu } = require("./scripts/menu");
-const path = require("path");
+} from "./scripts/settings";
+import { addTray, refreshTray } from "./scripts/tray";
+import { addMenu } from "./scripts/menu";
+import path from "path";
+import expressModule from "./scripts/express";
+import mediaKeys from "./constants/mediaKeys";
+import mediaInfoModule from "./scripts/mediaInfo";
+import discordModule from "./scripts/discord";
+import globalEvents from "./constants/globalEvents";
+import flagValues from "./constants/flags";
 const tidalUrl = "https://listen.tidal.com";
-const expressModule = require("./scripts/express");
-const mediaKeys = require("./constants/mediaKeys");
-const mediaInfoModule = require("./scripts/mediaInfo");
-const discordModule = require("./scripts/discord");
-const globalEvents = require("./constants/globalEvents");
-const flagValues = require("./constants/flags");
 
-let mainWindow;
-let icon = path.join(__dirname, "../assets/icon.png");
+initialize();
+
+let mainWindow: any;
+const icon = path.join(__dirname, "../assets/icon.png");
 const PROTOCOL_PREFIX = "tidal";
 
 setFlags();
 
 function setFlags() {
-  const flags = store.get().flags;
+  const flags = store.get(settings.flags.root);
   if (flags) {
     for (const [key, value] of Object.entries(flags)) {
       if (value) {
-        flagValues[key].forEach((flag) => {
+        (flagValues as any)[key].forEach((flag: any) => {
           console.log(`enabling command line switch ${flag.flag} with value ${flag.value}`);
           app.commandLine.appendSwitch(flag.flag, flag.value);
         });
@@ -80,7 +82,7 @@ function isMainInstanceOrMultipleInstancesAllowed() {
   return true;
 }
 
-function createWindow(options = {}) {
+function createWindow(options = { x: 0, y: 0, backgroundColor: "white" }) {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     x: options.x,
@@ -97,7 +99,7 @@ function createWindow(options = {}) {
       devTools: true, // I like tinkering, others might too
     },
   });
-  require("@electron/remote/main").enable(mainWindow.webContents);
+  enable(mainWindow.webContents);
   registerHttpProtocols();
   syncMenuBarWithStore();
 
@@ -109,11 +111,8 @@ function createWindow(options = {}) {
     mainWindow.webContents.setBackgroundThrottling(false);
   }
 
-  // run stuff after first load
-  mainWindow.webContents.once("did-finish-load", () => {});
-
-  mainWindow.on("close", function (event) {
-    if (!app.isQuiting && store.get(settings.minimizeOnClose)) {
+  mainWindow.on("close", function (event: any) {
+    if (store.get(settings.minimizeOnClose)) {
       event.preventDefault();
       mainWindow.hide();
       refreshTray(mainWindow);
@@ -126,8 +125,7 @@ function createWindow(options = {}) {
     app.quit();
   });
   mainWindow.on("resize", () => {
-    let { width, height } = mainWindow.getBounds();
-
+    const { width, height } = mainWindow.getBounds();
     store.set(settings.windowBounds.root, { width, height });
   });
 }
@@ -144,7 +142,7 @@ function registerHttpProtocols() {
 function addGlobalShortcuts() {
   Object.keys(mediaKeys).forEach((key) => {
     globalShortcut.register(`${key}`, () => {
-      mainWindow.webContents.send("globalEvent", `${mediaKeys[key]}`);
+      mainWindow.webContents.send("globalEvent", `${(mediaKeys as any)[key]}`);
     });
   });
 }
@@ -169,7 +167,10 @@ app.on("ready", async () => {
     addMenu(mainWindow);
     createSettingsWindow();
     addGlobalShortcuts();
-    store.get(settings.trayIcon) && addTray(mainWindow, { icon }) && refreshTray();
+    if (store.get(settings.trayIcon)) {
+      addTray(mainWindow, { icon });
+      refreshTray();
+    }
     store.get(settings.api) && expressModule.run(mainWindow);
     store.get(settings.enableDiscord) && discordModule.initRPC();
   } else {
@@ -186,7 +187,7 @@ app.on("activate", function () {
 });
 
 app.on("browser-window-created", (_, window) => {
-  require("@electron/remote/main").enable(window.webContents);
+  enable(window.webContents);
 });
 
 // IPC

src/pages/settings/preload.js

@@ -18,9 +18,9 @@ let adBlock,
   trayIcon,
   updateFrequency;
 
-const { store, settings } = require("./../../scripts/settings");
+const { store, settings } = require("../../scripts/settings");
 const { ipcRenderer } = require("electron");
-const globalEvents = require("./../../constants/globalEvents");
+const globalEvents = require("../../constants/globalEvents");
 const remote = require("@electron/remote");
 const { app } = remote;
 /**

src/scripts/discord.js

@@ -3,7 +3,15 @@ const { app, ipcMain } = require("electron");
 const globalEvents = require("../constants/globalEvents");
 const clientId = "833617820704440341";
 const mediaInfoModule = require("./mediaInfo");
-const discordModule = [];
+const discordModule = {
+  rpc: {},
+  unRPC: function () {
+    return;
+  },
+  initRPC: function () {
+    return;
+  },
+};
 
 function timeToSeconds(timeArray) {
   let minutes = timeArray[0] * 1;

src/scripts/mediaInfo.js

@@ -13,21 +13,17 @@ const mediaInfo = {
 };
 const mediaInfoModule = {
   mediaInfo,
-};
-
-/**
- * Update artist and song info in the mediaInfo constant
- */
-mediaInfoModule.update = function (arg) {
-  mediaInfo.title = propOrDefault(arg.title);
-  mediaInfo.artists = propOrDefault(arg.artists);
-  mediaInfo.album = propOrDefault(arg.album);
-  mediaInfo.icon = propOrDefault(arg.icon);
-  mediaInfo.url = propOrDefault(arg.url);
-  mediaInfo.status = propOrDefault(arg.status);
-  mediaInfo.current = propOrDefault(arg.current);
-  mediaInfo.duration = propOrDefault(arg.duration);
-  mediaInfo.image = propOrDefault(arg.image);
+  update: function (arg) {
+    mediaInfo.title = propOrDefault(arg.title);
+    mediaInfo.artists = propOrDefault(arg.artists);
+    mediaInfo.album = propOrDefault(arg.album);
+    mediaInfo.icon = propOrDefault(arg.icon);
+    mediaInfo.url = propOrDefault(arg.url);
+    mediaInfo.status = propOrDefault(arg.status);
+    mediaInfo.current = propOrDefault(arg.current);
+    mediaInfo.duration = propOrDefault(arg.duration);
+    mediaInfo.image = propOrDefault(arg.image);
+  },
 };
 
 /**

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES6",
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "outDir": "ts-dist",
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["node_modules/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}