Migrate to @vencord/types package

package.json

@@ -23,10 +23,12 @@
         "watch": "pnpm build --watch"
     },
     "devDependencies": {
+        "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
         "@types/node": "^18.15.11",
         "@types/react": "^18.0.33",
         "@typescript-eslint/eslint-plugin": "^5.57.1",
         "@typescript-eslint/parser": "^5.57.1",
+        "@vencord/types": "^0.1.1",
         "dotenv": "^16.0.3",
         "electron": "^23.2.0",
         "electron-builder": "^23.6.0",

pnpm-lock.yaml

@@ -1,6 +1,9 @@
 lockfileVersion: '6.0'
 
 devDependencies:
+  '@fal-works/esbuild-plugin-global-externals':
+    specifier: ^2.1.2
+    version: 2.1.2
   '@types/node':
     specifier: ^18.15.11
     version: 18.15.11
@@ -13,6 +16,9 @@ devDependencies:
   '@typescript-eslint/parser':
     specifier: ^5.57.1
     version: 5.57.1(eslint@8.38.0)(typescript@5.0.2)
+  '@vencord/types':
+    specifier: ^0.1.1
+    version: 0.1.1
   dotenv:
     specifier: ^16.0.3
     version: 16.0.3
@@ -367,6 +373,10 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@fal-works/esbuild-plugin-global-externals@2.1.2:
+    resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==}
+    dev: true
+
   /@humanwhocodes/config-array@0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
@@ -492,6 +502,10 @@ packages:
       '@types/node': 18.15.11
     dev: true
 
+  /@types/lodash@4.14.194:
+    resolution: {integrity: sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==}
+    dev: true
+
   /@types/minimatch@5.1.2:
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
     dev: true
@@ -522,6 +536,19 @@ packages:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
     dev: true
 
+  /@types/react-dom@18.0.11:
+    resolution: {integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==}
+    dependencies:
+      '@types/react': 18.0.33
+    dev: true
+
+  /@types/react@17.0.2:
+    resolution: {integrity: sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      csstype: 3.1.2
+    dev: true
+
   /@types/react@18.0.33:
     resolution: {integrity: sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==}
     dependencies:
@@ -698,6 +725,18 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
+  /@vencord/types@0.1.1:
+    resolution: {integrity: sha512-QbAeVafeMpkteSscgtnXmwvwmXaePqOI4jwaLb9DAwIKpuVRCtT2V48th8PCuL228NyBMBRI+rpYaf1JmSB7UQ==}
+    dependencies:
+      '@types/lodash': 4.14.194
+      '@types/node': 18.15.11
+      '@types/react': 18.0.33
+      '@types/react-dom': 18.0.11
+      discord-types: 1.3.26
+      standalone-electron-types: 1.0.0
+      type-fest: 3.8.0
+    dev: true
+
   /acorn-jsx@5.3.2(acorn@8.8.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1342,6 +1381,13 @@ packages:
       path-type: 4.0.0
     dev: true
 
+  /discord-types@1.3.26:
+    resolution: {integrity: sha512-ToG51AOCH+JTQf7b+8vuYQe5Iqwz7nZ7StpECAZ/VZcI1ZhQk13pvt9KkRTfRv1xNvwJ2qib4e3+RifQlo8VPQ==}
+    dependencies:
+      '@types/react': 17.0.2
+      moment: 2.29.4
+    dev: true
+
   /dmg-builder@23.6.0:
     resolution: {integrity: sha512-jFZvY1JohyHarIAlTbfQOk+HnceGjjAdFjVn3n8xlDWKsYNqbO4muca6qXEZTfGXeQMG7TYim6CeS5XKSfSsGA==}
     dependencies:
@@ -2875,6 +2921,10 @@ packages:
     hasBin: true
     dev: true
 
+  /moment@2.29.4:
+    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
+    dev: true
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
@@ -3390,6 +3440,12 @@ packages:
     dev: true
     optional: true
 
+  /standalone-electron-types@1.0.0:
+    resolution: {integrity: sha512-0HOi/tlTz3mjWhsAz4uRbpQcHMZ+ifj1JzWW9nugykOHClBBG77ps8QinrzX1eow4Iw2pnC+RFaSYRgufF4BOg==}
+    dependencies:
+      '@types/node': 18.15.11
+    dev: true
+
   /stat-mode@1.0.0:
     resolution: {integrity: sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==}
     engines: {node: '>= 6'}

scripts/build/build.mts

@@ -6,6 +6,8 @@
 
 import { BuildContext, BuildOptions, context } from "esbuild";
 
+import vencordDep from "./vencordDep.mjs";
+
 const isDev = process.argv.includes("--dev");
 
 const CommonOpts: BuildOptions = {
@@ -35,17 +37,20 @@ await Promise.all([
     createContext({
         ...NodeCommonOpts,
         entryPoints: ["src/main/index.ts"],
-        outfile: "dist/js/main.js"
+        outfile: "dist/js/main.js",
+        footer: { js: "//# sourceURL=VCDMain" }
     }),
     createContext({
         ...NodeCommonOpts,
         entryPoints: ["src/preload/index.ts"],
-        outfile: "dist/js/preload.js"
+        outfile: "dist/js/preload.js",
+        footer: { js: "//# sourceURL=VCDPreload" }
     }),
     createContext({
         ...NodeCommonOpts,
         entryPoints: ["src/updater/preload.ts"],
-        outfile: "dist/js/updaterPreload.js"
+        outfile: "dist/js/updaterPreload.js",
+        footer: { js: "//# sourceURL=VCDUpdaterPreload" }
     }),
     createContext({
         ...CommonOpts,
@@ -57,7 +62,10 @@ await Promise.all([
         jsxFactory: "VencordCreateElement",
         jsxFragment: "VencordFragment",
         // Work around https://github.com/evanw/esbuild/issues/2460
-        tsconfig: "./scripts/build/tsconfig.esbuild.json"
+        tsconfig: "./scripts/build/tsconfig.esbuild.json",
+        external: ["@vencord/types/*"],
+        plugins: [vencordDep],
+        footer: { js: "//# sourceURL=VCDRenderer" }
     })
 ]);
 

scripts/build/vencordDep.mts

@@ -0,0 +1,38 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vencord Desktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { globalExternalsWithRegExp } from "@fal-works/esbuild-plugin-global-externals";
+
+const names = {
+    webpack: "Vencord.Webpack",
+    "webpack/common": "Vencord.Webpack.Common",
+    utils: "Vencord.Util",
+    api: "Vencord.Api",
+    "api/settings": "Vencord",
+    components: "Vencord.Components"
+};
+
+export default globalExternalsWithRegExp({
+    getModuleInfo(modulePath) {
+        const path = modulePath.replace("@vencord/types/", "");
+        let varName = names[path];
+        if (!varName) {
+            const altMapping = names[path.split("/")[0]];
+            if (!altMapping) throw new Error("Unknown module path: " + modulePath);
+
+            varName =
+                altMapping +
+                "." +
+                // @ts-ignore
+                path.split("/")[1].replaceAll("/", ".");
+        }
+        return {
+            varName,
+            type: "cjs"
+        };
+    },
+    modulePathFilter: /^@vencord\/types.+$/
+});

src/globals.d.ts

@@ -7,8 +7,6 @@
 declare global {
     export var VencordDesktopNative: typeof import("preload/VencordDesktopNative").VencordDesktopNative;
     export var VencordDesktop: typeof import("renderer/index");
-    // TODO
-    export var Vencord: any;
     export var vcdLS: typeof localStorage;
 
     export var IS_DEV: boolean;

src/renderer/components/Settings.tsx

@@ -6,20 +6,12 @@
 
 import "./settings.css";
 
+import { Margins } from "@vencord/types/utils";
+import { Button, Forms, Select, Switch, Text } from "@vencord/types/webpack/common";
 import { useSettings } from "renderer/settings";
 
-import { Common, Util } from "../vencord";
-
-const { Margins } = Util;
-
 export default function SettingsUi() {
     const Settings = useSettings();
-    const {
-        Forms: { FormSection, FormText, FormDivider, FormSwitch, FormTitle },
-        Text,
-        Select,
-        Button
-    } = Common;
 
     const switches: [keyof typeof Settings, string, string, boolean?, (() => boolean)?][] = [
         ["tray", "Tray Icon", "Add a tray icon for Vencord Desktop", true],
@@ -43,12 +35,12 @@ export default function SettingsUi() {
     ];
 
     return (
-        <FormSection>
+        <Forms.FormSection>
             <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
                 Vencord Desktop Settings
             </Text>
 
-            <FormTitle className={Margins.top16}>Discord Branch</FormTitle>
+            <Forms.FormTitle className={Margins.top16}>Discord Branch</Forms.FormTitle>
             <Select
                 placeholder="Stable"
                 options={[
@@ -62,22 +54,22 @@ export default function SettingsUi() {
                 serialize={s => s}
             />
 
-            <FormDivider className={Margins.top16 + " " + Margins.bottom16} />
+            <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
 
             {switches.map(([key, text, note, def, predicate]) => (
-                <FormSwitch
+                <Switch
-                    value={(Settings[key] ?? def ?? false) && (!predicate || predicate())}
+                    value={(Settings[key as any] ?? def ?? false) && predicate?.() !== false}
                     disabled={predicate && !predicate()}
-                    onChange={v => (Settings[key] = v)}
+                    onChange={v => (Settings[key as any] = v)}
                     note={note}
                     key={key}
                 >
                     {text}
-                </FormSwitch>
+                </Switch>
             ))}
 
-            <FormTitle>Vencord Location</FormTitle>
+            <Forms.FormTitle>Vencord Location</Forms.FormTitle>
-            <FormText>
+            <Forms.FormText>
                 Vencord files are loaded from{" "}
                 {Settings.vencordDir ? (
                     <a
@@ -92,7 +84,7 @@ export default function SettingsUi() {
                 ) : (
                     "the default location"
                 )}
-            </FormText>
+            </Forms.FormText>
             <div className="vcd-location-btns">
                 <Button
                     size={Button.Sizes.SMALL}
@@ -117,6 +109,6 @@ export default function SettingsUi() {
                     Reset
                 </Button>
             </div>
-        </FormSection>
+        </Forms.FormSection>
     );
 }

src/renderer/fixes.ts

@@ -6,6 +6,8 @@
 
 import "./hideGarbage.css";
 
+import { waitFor } from "@vencord/types/webpack";
+
 import { isFirstRun, localStorage } from "./utils";
 
 // Make clicking Notifications focus the window
@@ -25,7 +27,7 @@ if (isFirstRun) {
     // Hide "Download Discord Desktop now!!!!" banner
     localStorage.setItem("hideNag", "true");
 
-    Vencord.Webpack.waitFor("setDesktopType", m => {
+    waitFor("setDesktopType", m => {
         m.setDesktopType("all");
     });
 }

src/renderer/settings.ts

@@ -4,17 +4,16 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
+import { useEffect, useReducer } from "@vencord/types/webpack/common";
 import { SettingsStore } from "shared/utils/SettingsStore";
 
-import { Common } from "./vencord";
-
 export const Settings = new SettingsStore(VencordDesktopNative.settings.get());
 Settings.addGlobalChangeListener((o, p) => VencordDesktopNative.settings.set(o, p));
 
 export function useSettings() {
-    const [, update] = Common.React.useReducer(x => x + 1, 0);
+    const [, update] = useReducer(x => x + 1, 0);
 
-    Common.React.useEffect(() => {
+    useEffect(() => {
         Settings.addGlobalChangeListener(update);
 
         return () => Settings.removeGlobalChangeListener(update);

src/renderer/vencord.ts

@@ -1,13 +0,0 @@
-/*
- * SPDX-License-Identifier: GPL-3.0
- * Vencord Desktop, a desktop app aiming to give you a snappier Discord Experience
- * Copyright (c) 2023 Vendicated and Vencord contributors
- */
-
-// FIXME: this is terrible
-
-const { Webpack, Plugins, Util } = Vencord;
-const { Common } = Webpack;
-const { plugins } = Plugins;
-
-export { Common, Plugins, plugins, Util, Webpack };

tsconfig.json

@@ -10,7 +10,9 @@
         "target": "ESNEXT",
         "jsx": "preserve",
 
-        "baseUrl": "./src/"
+        "baseUrl": "./src/",
+
+        "typeRoots": ["./node_modules/@types", "./node_modules/@vencord"]
     },
     "include": ["src/**/*"]
 }