build: inject createElement alias (#176)

scripts/build/common.mjs

@@ -17,7 +17,6 @@
 */
 
 import { exec, execSync } from "child_process";
-import esbuild from "esbuild";
 import { existsSync } from "fs";
 import { readdir, readFile } from "fs/promises";
 import { join } from "path";
@@ -142,7 +141,7 @@ export const fileIncludePlugin = {
 };
 
 /**
- * @type {esbuild.BuildOptions}
+ * @type {import("esbuild").BuildOptions}
  */
 export const commonOpts = {
     logLevel: "info",
@@ -152,5 +151,10 @@ export const commonOpts = {
     sourcemap: watch ? "inline" : "",
     legalComments: "linked",
     plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin],
-    external: ["~plugins", "~git-hash", "~git-remote"]
+    external: ["~plugins", "~git-hash", "~git-remote"],
+    inject: ["./scripts/build/inject/react.mjs"],
+    jsxFactory: "VencordCreateElement",
+    jsxFragment: "VencordFragment",
+    // Work around https://github.com/evanw/esbuild/issues/2460
+    tsconfig: "./scripts/build/tsconfig.esbuild.json"
 };

scripts/build/inject/react.mjs

@@ -0,0 +1,21 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export const VencordFragment = Symbol.for("react.fragment");
+export let VencordCreateElement =
+    (...args) => (VencordCreateElement = Vencord.Webpack.Common.React.createElement)(...args);

scripts/build/tsconfig.esbuild.json

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

src/components/Settings.tsx

@@ -23,7 +23,6 @@ import { useAwaiter } from "../utils/misc";
 import { Alerts, Button, Forms, Margins, Parser, React, Switch } from "../webpack/common";
 import ErrorBoundary from "./ErrorBoundary";
 import { Flex } from "./Flex";
-import { launchMonacoEditor } from "./Monaco";
 
 export default ErrorBoundary.wrap(function Settings() {
     const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
@@ -85,7 +84,7 @@ export default ErrorBoundary.wrap(function Settings() {
             </Flex>}
 
             {IS_WEB && <Button
-                onClick={launchMonacoEditor}
+                onClick={() => require("./Monaco").launchMonacoEditor()}
                 size={Button.Sizes.SMALL}
                 disabled={settingsDir === "Loading..."}
             >

src/globals.d.ts

@@ -16,7 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import React from "react";
 
 declare global {
     /**
@@ -49,12 +48,6 @@ declare global {
      */
     export var DiscordNative: any;
 
-    // jsFactory, here to make ts happy
-    /** Shorter alias for React.createElement to reduce bundle size, don't use this. */
-    export var _Ve$: typeof React["createElement"];
-    /** Shorter alias for React.Fragment to reduce bundle size, don't use this. */
-    export var _VF$: typeof React["Fragment"];
-
     interface Window {
         webpackChunkdiscord_app: {
             push(chunk: any): any;
@@ -63,3 +56,5 @@ declare global {
         [k: string]: any;
     }
 }
+
+export { };

src/webpack/common.tsx

@@ -115,11 +115,7 @@ export const Clipboard = mapMangledModuleLazy('document.queryCommandEnabled("cop
     SUPPORTS_COPY: x => typeof x === "boolean",
 });
 
-waitFor("useState", m => {
+waitFor("useState", m => React = m);
-    window._Ve$ = m.createElement;
-    window._VF$ = m.Fragment;
-    React = m;
-});
 
 waitFor(["dispatch", "subscribe"], m => {
     FluxDispatcher = m;

tsconfig.json

@@ -14,11 +14,7 @@
         "strict": true,
         "noImplicitAny": false,
         "target": "ESNEXT",
-        // https://esbuild.github.io/api/#jsx-factory
+        "jsx": "preserve"
-        // these short window aliases make the bundle ~10% smaller
-        "jsxFactory": "_Ve$",
-        "jsxFragmentFactory": "_VF$",
-        "jsx": "react"
     },
     "include": ["src/**/*"]
 }