Typescript!

package.json

@@ -5,30 +5,39 @@
   "license": "MIT",
   "main": "dist/main/index.js",
   "scripts": {
-    "build": "parcel build"
+    "build": "parcel build",
+    "watch": "parcel watch",
+    "check": "tsc --noEmit"
   },
   "repository": "https://github.com/replugged-org/replugged.git",
   "author": "Replugged",
   "bugs": {
     "url": "https://github.com/replugged-org/replugged/issues"
   },
   "devDependencies": {
-    "parcel": "^2.7.0"
+    "@types/node": "^18.7.23",
+    "electron": "13",
+    "parcel": "^2.7.0",
+    "typescript": "^4.8.4"
   },
   "targets": {
     "main": {
       "context": "electron-main",
-      "source": "src/main/index.js",
-      "includeNodeModules": true
+      "source": "src/main/index.ts",
+      "includeNodeModules": {
+        "electron": false
+      }
     },
     "preload": {
       "context": "electron-renderer",
-      "source": "src/preload.js",
-      "includeNodeModules": true
+      "source": "src/preload.ts",
+      "includeNodeModules": {
+        "electron": false
+      }
     },
     "renderer": {
       "context": "browser",
-      "source": "src/renderer/index.js",
+      "source": "src/renderer/index.ts",
       "includeNodeModules": true
     }
   }

src/main/index.js → src/main/index.ts

@@ -1,30 +1,42 @@
-const { dirname, join } = require("path");
+import { dirname, join } from "path";
 
-const electron = require("electron");
+import electron from "electron";
+import type { RepluggedWebContents } from "../types";
 
 const electronPath = require.resolve("electron");
-const discordPath = join(dirname(require.main.filename), "..", "app.asar");
+const discordPath = join(dirname(require.main!.filename), "..", "app.asar");
 const discordPackage = require(join(discordPath, "package.json"));
 const discordMain = join(discordPath, discordPackage.main);
-require.main.filename = discordMain;
+require.main!.filename = discordMain;
 
 Object.defineProperty(global, "appSettings", {
   set: (v /*: typeof global.appSettings*/) => {
-      v.set("DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING", true);
-      // @ts-ignore
-      delete global.appSettings;
-      global.appSettings = v;
+    v.set(
+      "DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING",
+      true
+    );
+    // @ts-ignore
+    delete global.appSettings;
+    // @ts-ignore
+    global.appSettings = v;
   },
-  configurable: true
+  configurable: true,
 });
 
 // This class has to be named "BrowserWindow" exactly
 // https://github.com/discord/electron/blob/13-x-y/lib/browser/api/browser-window.ts#L60-L62
 // Thank you Ven for pointing this out!
 class BrowserWindow extends electron.BrowserWindow {
-  constructor(opts) {
+  constructor(
+    opts: Electron.BrowserWindowConstructorOptions & {
+      webContents: Electron.WebContents;
+      webPreferences: {
+        nativeWindowOpen: boolean;
+      };
+    }
+  ) {
     console.log(opts);
-    const originalPreload = opts.webPreferences.preload;
+    const originalPreload = opts.webPreferences.preload!;
 
     if (opts.webContents) {
       // General purpose popouts used by Discord
@@ -33,13 +45,13 @@ class BrowserWindow extends electron.BrowserWindow {
       //opts.webPreferences.preload = join(__dirname, './preloadSplash.js');
     } else if (opts.webPreferences && opts.webPreferences.offscreen) {
       // Overlay
-//      originalPreload = opts.webPreferences.preload;
+      //      originalPreload = opts.webPreferences.preload;
       // opts.webPreferences.preload = join(__dirname, './preload.js');
     } else if (opts.webPreferences && opts.webPreferences.preload) {
       //originalPreload = opts.webPreferences.preload;
       if (opts.webPreferences.nativeWindowOpen) {
         // Discord Client
-        opts.webPreferences.preload = join(__dirname, "../preload.js");
+        opts.webPreferences.preload = join(__dirname, "../preload/index.js");
         //opts.webPreferences.contextIsolation = false; // shrug
       } else {
         // Splash Screen on macOS (Host 0.0.262+) & Windows (Host 0.0.293 / 1.0.17+)
@@ -48,12 +60,13 @@ class BrowserWindow extends electron.BrowserWindow {
     }
 
     super(opts);
-    this.webContents.originalPreload = originalPreload;
+    (this.webContents as RepluggedWebContents).originalPreload =
+      originalPreload;
   }
 }
 
-const electronExports = new Proxy(electron, {
-  get (target, prop) {
+const electronExports: typeof electron = new Proxy(electron, {
+  get(target, prop) {
     switch (prop) {
       case "BrowserWindow":
         return BrowserWindow;
@@ -63,29 +76,34 @@ const electronExports = new Proxy(electron, {
       case "__esModule":
         return true;
       default:
-        return target[prop];
+        return target[prop as keyof typeof electron];
     }
-  }
+  },
 });
 
-delete require.cache[electronPath].exports;
-require.cache[electronPath].exports = electronExports;
+delete require.cache[electronPath]!.exports;
+require.cache[electronPath]!.exports = electronExports;
 
+// @ts-ignore
 electron.app.setAppPath(discordPath);
 electron.app.name = discordPackage.name;
 
 // Copied from old codebase
 electron.app.once("ready", () => {
   // @todo: Whitelist a few domains instead of removing CSP altogether; See #386
-  electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders }, done) => {
-    Object.keys(responseHeaders)
-      .filter(k => (/^content-security-policy/i).test(k))
-      .map(k => (delete responseHeaders[k]));
+  electron.session.defaultSession.webRequest.onHeadersReceived(
+    ({ responseHeaders }, done) => {
+      if (!responseHeaders) return done({});
 
-    done({ responseHeaders });
-  });
+      Object.keys(responseHeaders)
+        .filter((k) => /^content-security-policy/i.test(k))
+        .map((k) => delete responseHeaders[k]);
+
+      done({ responseHeaders });
+    }
+  );
 });
 
 require("./ipc");
 
-require("module")._load(discordMain);
+require("module")._load(discordMain);

src/main/ipc/index.ts

@@ -0,0 +1,11 @@
+import { ipcMain } from "electron";
+import "./plugins";
+import "./themes";
+import "./quick-css";
+import type { RepluggedWebContents } from "../../types";
+
+ipcMain.on("REPLUGGED_GET_DISCORD_PRELOAD", (event) => {
+  console.log(event);
+  event.returnValue = (event.sender as RepluggedWebContents).originalPreload;
+});
+// Handle requesting renderer code

src/main/ipc/quick-css.ts

@@ -0,0 +1,12 @@
+import { readFile, writeFile } from "fs/promises";
+import { join } from "path";
+import { ipcMain } from "electron";
+
+const cssPath = join(__dirname, "../../../settings/quickcss/main.css");
+
+ipcMain.handle("REPLUGGED_GET_QUICK_CSS", () =>
+  readFile(cssPath, { encoding: "utf-8" })
+);
+ipcMain.on("REPLUGGED_SAVE_QUICK_CSS", (_, css) =>
+  writeFile(cssPath, css, { encoding: "utf-8" })
+);

src/main/ipc/themes.js → src/main/ipc/themes.ts

@@ -5,12 +5,16 @@ IPC events:
 - REPLUGGED_UNINSTALL_THEME: uninstalls a theme by name
 */
 
-const { ipcMain } = require("electron");
+import { ipcMain } from "electron";
 
-ipcMain.handle("REPLUGGED_GET_THEME_CSS", async (event, themeName) => {
-
-});
+ipcMain.handle(
+  "REPLUGGED_GET_THEME_CSS",
+  async (event, themeName: string) => {}
+);
 
 ipcMain.handle("REPLUGGED_LIST_THEMES", async () => {});
 
-ipcMain.handle("REPLUGGED_UNINSTALL_THEME", async (event, themeName) => {});
+ipcMain.handle(
+  "REPLUGGED_UNINSTALL_THEME",
+  async (event, themeName: string) => {}
+);

src/preload.js → src/preload.ts

@@ -1,20 +1,22 @@
-const { contextBridge, ipcRenderer, webFrame } = require("electron");
+import { contextBridge, ipcRenderer, webFrame } from "electron";
 
 const themesMap = new Map();
-let quickCSSKey;
+let quickCSSKey: string;
 
 const RepluggedNative = {
   themes: {
-    enable: async (themeName) => {},
-    disable: async (themeName) => {},
-    load: async (themeName) => {
-      return ipcRenderer.invoke("REPLUGGED_GET_THEME_CSS", themeName).then(css => {
-        const cssKey = webFrame.insertCSS(css);
-        themesMap.set(themeName, cssKey);
-      })
+    enable: async (themeName: string) => {},
+    disable: async (themeName: string) => {},
+    load: async (themeName: string) => {
+      return ipcRenderer
+        .invoke("REPLUGGED_GET_THEME_CSS", themeName)
+        .then((css) => {
+          const cssKey = webFrame.insertCSS(css);
+          themesMap.set(themeName, cssKey);
+        });
     },
     loadAll: async () => {},
-    unload: (themeName) => {
+    unload: (themeName: string) => {
       webFrame.removeInsertedCSS(themesMap.get(themeName));
       themesMap.delete(themeName);
     },
@@ -23,7 +25,7 @@ const RepluggedNative = {
         RepluggedNative.themes.unload(theme);
       }
     },
-    reload: async (themeName) => {
+    reload: async (themeName: string) => {
       RepluggedNative.themes.unload(themeName);
       await RepluggedNative.themes.load(themeName);
     },
@@ -33,48 +35,49 @@ const RepluggedNative = {
     },
     listEnabled: async () => {},
     listDisabled: async () => {},
-    uninstall: async (themeName) => {
+    uninstall: async (themeName: string) => {
       return ipcRenderer.invoke("REPLUGGED_UNINSTALL_THEME", themeName); // whether theme was successfully uninstalled
-    }
+    },
   },
 
   plugins: {
-    getJS: async (pluginName) => {
+    getJS: async (pluginName: string) => {
       return ipcRenderer.invoke("REPLUGGED_GET_PLUGIN_JS", pluginName);
     },
     list: async () => {
       return ipcRenderer.invoke("REPLUGGED_LIST_PLUGINS");
     },
-    uninstall: async (pluginName) => {
+    uninstall: async (pluginName: string) => {
       return ipcRenderer.invoke("REPLUGGED_UNINSTALL_PLUGIN", pluginName);
-    }
+    },
   },
 
   quickCSS: {
     get: async () => ipcRenderer.invoke("REPLUGGED_GET_QUICK_CSS"),
-    load: async () => RepluggedNative.quickCSS.get().then(css => {
-      quickCSSKey = webFrame.insertCSS(css);
-    }),
+    load: async () =>
+      RepluggedNative.quickCSS.get().then((css) => {
+        quickCSSKey = webFrame.insertCSS(css);
+      }),
     unload: () => webFrame.removeInsertedCSS(quickCSSKey),
-    save: (css) => ipcRenderer.send("REPLUGGED_SAVE_QUICK_CSS", css),
+    save: (css: string) => ipcRenderer.send("REPLUGGED_SAVE_QUICK_CSS", css),
     reload: async () => {
       RepluggedNative.quickCSS.unload();
       return RepluggedNative.quickCSS.load();
-    }
+    },
   },
 
   settings: {
-    get: (key) => {},
-    set: (key, value) => {},
-    has: (key) => {},
-    delete: (key) => {}
+    get: (key: string) => {},
+    set: (key: string, value: any) => {},
+    has: (key: string) => {},
+    delete: (key: string) => {},
   },
 
-  openDevTools: () => {},     // TODO
-  closeDevTools: () => {},    // TODO
+  openDevTools: () => {}, // TODO
+  closeDevTools: () => {}, // TODO
 
-  clearCache: () => {},       // maybe?
-  openBrowserWindow: (opts) => {} // later
+  clearCache: () => {}, // maybe?
+  openBrowserWindow: (opts: Electron.BrowserWindowConstructorOptions) => {}, // later
 };
 
 contextBridge.exposeInMainWorld("RepluggedNative", RepluggedNative);
@@ -89,4 +92,4 @@ if (preload) {
 
 // While we could keep the thing below...it's terrible practice to use time delay
 // as a substitute for handling events.
-//setTimeout(() => DiscordNative.window.setDevtoolsCallbacks(null, null), 5e3);
+//setTimeout(() => DiscordNative.window.setDevtoolsCallbacks(null, null), 5e3);

src/renderer/index.ts

@@ -0,0 +1,2 @@
+declare var replugged: {};
+window.replugged = {};