Bundle dependencies with extensions for webstore rule compliance (#1740)

src/globals.d.ts

@@ -33,6 +33,7 @@ declare global {
      * replace: `${IS_WEB}?foo:bar`
      */
     export var IS_WEB: boolean;
+    export var IS_EXTENSION: boolean;
     export var IS_DEV: boolean;
     export var IS_STANDALONE: boolean;
     export var IS_UPDATER_DISABLED: boolean;

src/main/ipcMain.ts

@@ -27,7 +27,7 @@ import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readdir, readFile, writeFile } from "fs/promises";
 import { join, normalize } from "path";
 
-import monacoHtml from "~fileContent/../components/monacoWin.html;base64";
+import monacoHtml from "~fileContent/monacoWin.html;base64";
 
 import { getThemeInfo, stripBOM, UserThemeHeader } from "./themes";
 import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE, THEMES_DIR } from "./utils/constants";

src/plugins/_core/supportHelper.tsx

@@ -27,7 +27,7 @@ import { Alerts, Forms, UserStore } from "@webpack/common";
 import gitHash from "~git-hash";
 import plugins from "~plugins";
 
-import settings from "./_core/settings";
+import settings from "./settings";
 
 const REMEMBER_DISMISS_KEY = "Vencord-SupportHelper-Dismiss";
 

src/plugins/fakeNitro.ts

@@ -19,7 +19,7 @@
 import { addPreEditListener, addPreSendListener, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
 import { definePluginSettings, Settings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import { ApngBlendOp, ApngDisposeOp, getGifEncoder, importApngJs } from "@utils/dependencies";
+import { ApngBlendOp, ApngDisposeOp, importApngJs } from "@utils/dependencies";
 import { getCurrentGuild } from "@utils/discord";
 import { proxyLazy } from "@utils/lazy";
 import { Logger } from "@utils/Logger";
@@ -27,6 +27,7 @@ import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy, findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
 import { ChannelStore, EmojiStore, FluxDispatcher, Parser, PermissionStore, UserStore } from "@webpack/common";
 import type { Message } from "discord-types/general";
+import { applyPalette, GIFEncoder, quantize } from "gifenc";
 import type { ReactElement, ReactNode } from "react";
 
 const DRAFT_TYPE = 0;
@@ -650,15 +651,11 @@ export default definePlugin({
     },
 
     async sendAnimatedSticker(stickerLink: string, stickerId: string, channelId: string) {
-        const [{ parseURL }, {
-            GIFEncoder,
-            quantize,
-            applyPalette
-        }] = await Promise.all([importApngJs(), getGifEncoder()]);
+        const { parseURL } = importApngJs();
 
         const { frames, width, height } = await parseURL(stickerLink);
 
-        const gif = new GIFEncoder();
+        const gif = GIFEncoder();
         const resolution = Settings.plugins.FakeNitro.stickerSize;
 
         const canvas = document.createElement("canvas");

src/plugins/petpet.ts

@@ -18,10 +18,10 @@
 
 import { ApplicationCommandInputType, ApplicationCommandOptionType, Argument, CommandContext, findOption, sendBotMessage } from "@api/Commands";
 import { Devs } from "@utils/constants";
-import { getGifEncoder } from "@utils/dependencies";
 import { makeLazy } from "@utils/lazy";
 import definePlugin from "@utils/types";
 import { findByCodeLazy, findByPropsLazy } from "@webpack";
+import { applyPalette, GIFEncoder, quantize } from "gifenc";
 
 const DRAFT_TYPE = 0;
 const DEFAULT_DELAY = 20;
@@ -124,7 +124,6 @@ export default definePlugin({
                 }
             ],
             execute: async (opts, cmdCtx) => {
-                const { GIFEncoder, quantize, applyPalette } = await getGifEncoder();
                 const frames = await getFrames();
 
                 const noServerPfp = findOption(opts, "no-server-pfp", false);
@@ -143,7 +142,7 @@ export default definePlugin({
                 const delay = findOption(opts, "delay", DEFAULT_DELAY);
                 const resolution = findOption(opts, "resolution", DEFAULT_RESOLUTION);
 
-                const gif = new GIFEncoder();
+                const gif = GIFEncoder();
 
                 const canvas = document.createElement("canvas");
                 canvas.width = canvas.height = resolution;

src/utils/dependencies.ts

@@ -17,23 +17,15 @@
 */
 
 import { makeLazy } from "./lazy";
+import { EXTENSION_BASE_URL } from "./web-metadata";
 
 /*
     Add dynamically loaded dependencies for plugins here.
  */
 
-// https://github.com/mattdesl/gifenc
-// this lib is way better than gif.js and all other libs, they're all so terrible but this one is nice
-// @ts-ignore ts mad
-export const getGifEncoder = makeLazy(() => import("https://unpkg.com/gifenc@1.0.3/dist/gifenc.esm.js"));
-
 // needed to parse APNGs in the nitroBypass plugin
-export const importApngJs = makeLazy(async () => {
-    const exports = {};
-    const winProxy = new Proxy(window, { set: (_, k, v) => exports[k] = v });
-    Function("self", await fetch("https://cdnjs.cloudflare.com/ajax/libs/apng-canvas/2.1.1/apng-canvas.min.js").then(r => r.text()))(winProxy);
-    // @ts-ignore
-    return exports.APNG as { parseURL(url: string): Promise<ApngFrameData>; };
+export const importApngJs = makeLazy(() => {
+    return require("./apng-canvas").APNG as { parseURL(url: string): Promise<ApngFrameData>; };
 });
 
 // https://wiki.mozilla.org/APNG_Specification#.60fcTL.60:_The_Frame_Control_Chunk
@@ -75,13 +67,20 @@ export interface ApngFrameData {
     playTime: number;
 }
 
-const shikiWorkerDist = "https://unpkg.com/@vap/shiki-worker@0.0.8/dist";
-export const shikiWorkerSrc = `${shikiWorkerDist}/${IS_DEV ? "index.js" : "index.min.js"}`;
-export const shikiOnigasmSrc = "https://unpkg.com/@vap/shiki@0.10.3/dist/onig.wasm";
-
-export const rnnoiseDist = "https://unpkg.com/@sapphi-red/web-noise-suppressor@0.3.3/dist";
+// On web (extensions), use extension uri as basepath (load files from extension)
+// On desktop (electron), load from cdn
+export const rnnoiseDist = IS_EXTENSION
+    ? new URL("/third-party/rnnoise", EXTENSION_BASE_URL).toString()
+    : "https://unpkg.com/@sapphi-red/web-noise-suppressor@0.3.3/dist";
 export const rnnoiseWasmSrc = (simd = false) => `${rnnoiseDist}/rnnoise${simd ? "_simd" : ""}.wasm`;
 export const rnnoiseWorkletSrc = `${rnnoiseDist}/rnnoise/workletProcessor.js`;
 
-// @ts-expect-error SHUT UP
-export const getStegCloak = makeLazy(() => import("https://unpkg.com/stegcloak-dist@1.0.0/index.js"));
+
+// The below code is only used on the Desktop (electron) build of Vencord.
+// Browser (extension) builds do not contain these remote imports.
+
+export const shikiWorkerSrc = `https://unpkg.com/@vap/shiki-worker@0.0.8/dist/${IS_DEV ? "index.js" : "index.min.js"}`;
+export const shikiOnigasmSrc = "https://unpkg.com/@vap/shiki@0.10.3/dist/onig.wasm";
+
+// @ts-expect-error
+export const getStegCloak = /* #__PURE__*/ makeLazy(() => import("https://unpkg.com/stegcloak-dist@1.0.0/index.js"));

src/utils/web-metadata.ts

@@ -0,0 +1,14 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export let EXTENSION_BASE_URL: string;
+export let EXTENSION_VERSION: string;
+
+if (IS_EXTENSION) {
+    const script = document.querySelector("#vencord-script") as HTMLScriptElement;
+    EXTENSION_BASE_URL = script.dataset.extensionBaseUrl!;
+    EXTENSION_VERSION = script.dataset.version!;
+}