Make JSX work

build/build.mjs

@@ -13,15 +13,17 @@ const contexts = await Promise.all(
             entryPoints: [`./plugins/${p}`],
             outfile: `dist/${p}/index.js`,
             format: "iife",
-            jsxFactory: "VCR.createElement",
-            jsxFragment: "VCR.Fragment",
+            globalName: "VencordPlugin",
+            jsxFactory: "Vencord.Webpack.Common.React.createElement",
+            jsxFragment: "Vencord.Webpack.Common.React.Fragment",
             external: ["@vencord/types/*"],
             plugins: [vencordDep],
-            footer: { js: `//# sourceURL=${encodeURI(p)}` },
+            footer: { js: `return VencordPlugin;\n//# sourceURL=${encodeURI(p)}` },
             minify: !isDev,
             bundle: true,
             sourcemap: "linked",
-            logLevel: "info"
+            logLevel: "info",
+            tsconfig: "./build/tsconfig.json"
         })
     )
 );

build/tsconfig.json

@@ -0,0 +1,7 @@
+// Work around https://github.com/evanw/esbuild/issues/2460
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "jsx": "react"
+    }
+}

build/vencordDep.mjs

@@ -4,7 +4,6 @@ const names = {
     webpack: "Vencord.Webpack",
     "webpack/common": "Vencord.Webpack.Common",
     utils: "Vencord.Util",
-    "utils/types": "Vencord.Plugins.External",
     api: "Vencord.Api",
     components: "Vencord.Components"
 };
@@ -15,14 +14,11 @@ export default globalExternalsWithRegExp({
 
         let varName = names[path];
         if (!varName) {
-            const altMapping = names[path.split("/")[0]];
-            if (!altMapping) throw new Error("Unknown module path: " + modulePath);
+            const elements = path.split("/");
+            varName = names[elements.shift()];
+            if (!varName) throw new Error("Unknown module path: " + modulePath);
 
-            varName =
-                altMapping +
-                "." +
-                // @ts-ignore
-                path.split("/")[1].replaceAll("/", ".");
+            if (varName !== "Vencord.Util" || elements[0] === "types") varName += "." + elements.join(".");
         }
 
         return {

plugins/MyExamplePlugin/index.tsx

@@ -1,6 +1,8 @@
+import { GlobalContextMenuPatchCallback, addGlobalContextMenuPatch, removeGlobalContextMenuPatch } from "@vencord/types/api/ContextMenu";
 import { definePluginSettings } from "@vencord/types/api/settings";
 import definePlugin, { OptionType } from "@vencord/types/utils/types";
 import { findStoreLazy } from "@vencord/types/webpack";
+import { Menu } from "@vencord/types/webpack/common";
 
 // This is already a webpack common so maybe don't search it again.
 // just an example heh :3
@@ -14,7 +16,19 @@ const settings = definePluginSettings({
     }
 });
 
-definePlugin({
+const patchContextMenu: GlobalContextMenuPatchCallback = (navId, children) => () => {
+    children.unshift((
+        <Menu.MenuItem
+            id="example-context-menu-item"
+            label="read if cute"
+            action={() => {
+                alert(":3");
+            }}
+        />
+    ));
+};
+
+export default definePlugin({
     name: "MyExamplePlugin",
     description: "Very cute plugin",
     authors: [
@@ -30,10 +44,15 @@ definePlugin({
 
     start() {
         console.log(this.name, "just started");
+
+        addGlobalContextMenuPatch(patchContextMenu);
+
         console.log(UserStore.getCurrentUser().username, "is", settings.store.cuteSetting);
     },
 
     stop() {
         console.log(this.name, "just stopped");
+
+        removeGlobalContextMenuPatch(patchContextMenu);
     }
 });