Add Settings 'page', gitHash, electron version in settings

build.mjs

@@ -1,4 +1,5 @@
 #!/usr/bin/node
+import { execSync } from "child_process";
 import esbuild from "esbuild";
 import { readdirSync } from "fs";
 import { performance } from "perf_hooks";
@@ -59,6 +60,23 @@ const globPlugins = {
     }
 };
 
+const gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
+/**
+ * @type {esbuild.Plugin}
+ */
+const gitHashPlugin = {
+    name: "git-hash-plugin",
+    setup: build => {
+        const filter = /^git-hash$/;
+        build.onResolve({ filter }, args => ({
+            namespace: "git-hash", path: args.path
+        }));
+        build.onLoad({ filter, namespace: "git-hash" }, () => ({
+            contents: `export default "${gitHash}"`
+        }));
+    }
+};
+
 const begin = performance.now();
 await Promise.all([
     esbuild.build({
@@ -92,9 +110,10 @@ await Promise.all([
         target: ["esnext"],
         footer: { js: "//# sourceURL=VencordRenderer" },
         globalName: "Vencord",
-        external: ["plugins"],
+        external: ["plugins", "git-hash"],
         plugins: [
-            globPlugins
+            globPlugins,
+            gitHashPlugin
         ],
         sourcemap: "inline",
         watch,

src/Vencord.ts

@@ -1,6 +1,7 @@
 export * as Plugins from "./plugins";
 export * as Webpack from "./utils/webpack";
 export * as Api from "./api";
+export * as Components from "./components";
 
 import "./utils/patchWebpack";
 import "./utils/quickCss";

src/VencordNative.ts

@@ -7,5 +7,6 @@ export default {
             cb(css);
         });
     },
-    getQuickCss: () => ipcRenderer.invoke(IPC_GET_QUICK_CSS) as Promise<string>
+    getQuickCss: () => ipcRenderer.invoke(IPC_GET_QUICK_CSS) as Promise<string>,
+    getVersions: () => process.versions
 };

src/components/Settings.tsx

@@ -0,0 +1,4 @@
+export default function Settings(props) {
+    console.log(props);
+    return (<p>Hi</p>);
+}

src/components/Test.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-export default () => {
-    <div>
-        Hi
-    </div>;
-};

src/components/index.ts

@@ -0,0 +1 @@
+export { default as Settings } from "./Settings";

src/plugins/clientInfo.ts

@@ -1,17 +0,0 @@
-import definePlugin from "../utils/types";
-
-export default definePlugin({
-    name: "ClientInfo",
-    description: "Adds extra info to Client Info in settings",
-    author: "Vendicated",
-    patches: [{
-        find: "default.versionHash",
-        replacement: {
-            match: /\w\.createElement.+?["']Host ["'].+?\):null/,
-            replace: m => {
-                const idx = m.indexOf("Host") - 1;
-                return `${m},${m.slice(0, idx)}"Vencord ".repeat(50),"1.0.0")," ")`;
-            }
-        }
-    }]
-});

src/plugins/settings.ts

@@ -0,0 +1,39 @@
+import definePlugin from "../utils/types";
+import gitHash from "git-hash";
+
+export default definePlugin({
+    name: "Settings",
+    description: "Adds Settings UI and debug info",
+    author: "Vendicated",
+    patches: [{
+        find: "default.versionHash",
+        replacement: [
+            {
+                match: /return .{1,2}\("div"/,
+                replace: (m) => {
+                    return `var versions=VencordNative.getVersions();${m}`;
+                }
+            },
+            {
+                match: /\w\.createElement.+?["']Host ["'].+?\):null/,
+                replace: m => {
+                    const idx = m.indexOf("Host") - 1;
+                    const template = m.slice(0, idx);
+                    return `${m}, ${template}"Vencord ", "${gitHash}"), " "), ` +
+                        `${template} "Electron ", versions.electron), " "), ` +
+                        `${template} "Chrome ", versions.chrome), " ")`;
+                }
+            }
+        ]
+    }, {
+        find: "Messages.ACTIVITY_SETTINGS",
+        replacement: {
+            match: /\{section:(.{1,2})\.SectionTypes\.HEADER,label:(.{1,2})\.default\.Messages\.ACTIVITY_SETTINGS\}/,
+            replace: (m, mod) =>
+                `{section:${mod}.SectionTypes.HEADER,label:"Vencord"},` +
+                `{section:"Vencord",label:"Vencord",element:Vencord.Components.Settings},` +
+                `{section:${mod}.SectionTypes.DIVIDER},${m}`
+
+        }
+    }]
+});

src/pluginsModule.d.ts

@@ -1,4 +1,9 @@
 declare module "plugins" {
     const plugins: import("./utils/types").Plugin[];
     export default plugins;
-}
+}
+
+declare module "git-hash" {
+    const hash: string;
+    export default hash;
+}

src/utils/quickCss.ts

@@ -3,4 +3,4 @@ document.addEventListener("DOMContentLoaded", async () => {
     document.head.appendChild(style);
     VencordNative.handleQuickCssUpdate((css: string) => style.innerText = css);
     style.innerText = await VencordNative.getQuickCss();
-});
+});

tsconfig.json

@@ -9,7 +9,7 @@
         "noImplicitAny": false,
         "target": "ESNEXT",
         // https://esbuild.github.io/api/#jsx-factory
-        "jsxFactory": "Vencord.React.createElement",
+        "jsxFactory": "Vencord.Webpack.Common.React.createElement",
         "jsx": "react"
     },
     "include": ["src/**/*"]