Merge branch 'dev' of https://github.com/Vendicated/Vencord into discord-types

scripts/build/build.mjs

@@ -21,9 +21,9 @@ import esbuild from "esbuild";
 import { readdir } from "fs/promises";
 import { join } from "path";
 
-import { BUILD_TIMESTAMP, commonOpts, disposeAll, exists, globPlugins, IS_DEV, IS_REPORTER, IS_STANDALONE, IS_UPDATER_DISABLED, rebuildAll, resolvePluginName, VERSION, watch, watchAll } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, commonRendererPlugins, disposeAll, exists, globPlugins, IS_DEV, IS_REPORTER, IS_STANDALONE, IS_UPDATER_DISABLED, rebuildAll, resolvePluginName, VERSION, watch, watchAll } from "./common.mjs";
 
-/** @type {Record<string, any>} */
+/** @type {Record<string, string>} */
 const defines = {
     IS_STANDALONE: IS_STANDALONE.toString(),
     IS_DEV: IS_DEV.toString(),
@@ -35,7 +35,7 @@ const defines = {
     BUILD_TIMESTAMP: BUILD_TIMESTAMP.toString()
 };
 
-if (defines.IS_STANDALONE === false)
+if (defines.IS_STANDALONE === "false")
     // If this is a local build (not standalone), optimize
     // for the specific platform we're on
     defines["process.platform"] = JSON.stringify(process.platform);
@@ -129,7 +129,7 @@ const contexts = await Promise.all([
         sourcemap,
         plugins: [
             globPlugins("discordDesktop"),
-            ...commonOpts.plugins
+            ...commonRendererPlugins
         ],
         define: {
             ...defines,
@@ -177,7 +177,7 @@ const contexts = await Promise.all([
         sourcemap,
         plugins: [
             globPlugins("vencordDesktop"),
-            ...commonOpts.plugins
+            ...commonRendererPlugins
         ],
         define: {
             ...defines,

scripts/build/buildWeb.mjs

@@ -24,7 +24,7 @@ import { join } from "path";
 // @ts-expect-error: No types
 import Zip from "zip-local";
 
-import { BUILD_TIMESTAMP, commonOpts, disposeAll, globPlugins, IS_DEV, IS_REPORTER, rebuildAll, VERSION, watch, watchAll } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, commonRendererPlugins, disposeAll, globPlugins, IS_DEV, IS_REPORTER, rebuildAll, VERSION, watch, watchAll } from "./common.mjs";
 
 /** @satisfies {esbuild.BuildOptions} */
 const commonOptions = {
@@ -35,7 +35,7 @@ const commonOptions = {
     external: ["~plugins", "~git-hash", "/assets/*"],
     plugins: [
         globPlugins("web"),
-        ...commonOpts.plugins,
+        ...commonRendererPlugins
     ],
     target: ["esnext"],
     define: {

scripts/build/common.mjs

@@ -24,6 +24,7 @@ import esbuild from "esbuild";
 import { constants as FsConstants, readFileSync } from "fs";
 import { access, readdir, readFile } from "fs/promises";
 import { minify as minifyHtml } from "html-minifier-terser";
+import { builtinModules } from "module";
 import { join, relative } from "path";
 import { promisify } from "util";
 
@@ -301,6 +302,20 @@ export const rebuildAll = contexts =>
 /** @param {esbuild.BuildContext[]} contexts */
 export const watchAll = contexts => Promise.all(contexts.map(ctx => ctx.watch()));
 
+/**
+ * @param {RegExp} filter
+ * @param {string} message
+ * @returns {esbuild.Plugin}
+ */
+export const banImportPlugin = (filter, message) => ({
+    name: "ban-imports",
+    setup: build => {
+        build.onResolve({ filter }, () => {
+            return { errors: [{ text: message }] };
+        });
+    }
+});
+
 /** @satisfies {esbuild.BuildOptions} */
 export const commonOpts = {
     // Does not work with esbuild.BuildContext.rebuild: https://github.com/evanw/esbuild/issues/2886#issuecomment-1416397046
@@ -319,3 +334,15 @@ export const commonOpts = {
     // Work around https://github.com/evanw/esbuild/issues/2460
     tsconfig: "./scripts/build/tsconfig.esbuild.json"
 };
+
+const escapedBuiltinModules = builtinModules
+    .map(m => m.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"))
+    .join("|");
+const builtinModuleRegex = new RegExp(`^(node:)?(${escapedBuiltinModules})$`);
+
+export const commonRendererPlugins = [
+    banImportPlugin(builtinModuleRegex, "Cannot import node inbuilt modules in browser code. You need to use a native.ts file"),
+    banImportPlugin(/^react$/, "Cannot import from react. React and hooks should be imported from @webpack/common"),
+    banImportPlugin(/^electron(\/.*)?$/, "Cannot import electron in browser code. You need to use a native.ts file"),
+    ...commonOpts.plugins
+];

src/plugins/mutualGroupDMs/index.tsx

@@ -21,8 +21,7 @@ import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import type { GroupDMChannelRecord, UserRecord } from "@vencord/discord-types";
 import { findByPropsLazy } from "@webpack";
-import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, UserStore, UserUtils } from "@webpack/common";
-import type { ReactElement } from "react";
+import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, useMemo, UserStore, UserUtils } from "@webpack/common";
 
 const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
 
@@ -42,9 +41,27 @@ function getGroupDMName(channel: GroupDMChannelRecord) {
     return names.join(", ");
 }
 
+const useMutualGroupDMs = (userId: string) => useMemo(
+    () => ChannelStore.getSortedPrivateChannels()
+        .filter((c): c is GroupDMChannelRecord => c.isGroupDM() && c.recipients.includes(userId)),
+    [userId]
+);
+
+const isBotOrMe = (user: UserRecord) => user.bot || user.id === UserStore.getCurrentUser()!.id;
+
+function getMutualGDMCountText(user: UserRecord) {
+    let count = 0;
+    for (const channel of Object.values(ChannelStore.getMutablePrivateChannels()))
+        if (channel.isGroupDM() && channel.recipients.includes(user.id))
+            count++;
+    return `${count === 0 ? "No" : count} Mutual Group${count !== 1 ? "s" : ""}`;
+}
+
+const IS_PATCHED = Symbol("MutualGroupDMs.Patched");
+
 export default definePlugin({
     name: "MutualGroupDMs",
-    description: "Shows mutual group dms in profiles",
+    description: "Shows mutual group DMs in profiles",
     authors: [Devs.amia],
 
     patches: [
@@ -66,8 +83,8 @@ export default definePlugin({
             find: ".MUTUAL_FRIENDS?(",
             replacement: [
                 {
-                    match: /(?<=onItemSelect:\i,children:)(\i)\.map/,
-                    replace: "[...$1, ...($self.isBotOrMe(arguments[0].user) ? [] : [{section:'MUTUAL_GDMS',text:$self.getMutualGDMCountText(arguments[0].user)}])].map"
+                    match: /\i\.useEffect.{0,100}(\i)\[0\]\.section/,
+                    replace: "$self.pushSection($1, arguments[0].user);$&"
                 },
                 {
                     match: /\(0,\i\.jsx\)\(\i,\{items:\i,section:(\i)/,
@@ -77,39 +94,41 @@ export default definePlugin({
         }
     ],
 
-    isBotOrMe: (user: UserRecord) => user.bot || user.id === UserStore.getCurrentUser()!.id,
+    isBotOrMe,
+    getMutualGDMCountText,
 
-    getMutualGDMCountText(user: UserRecord) {
-        let count = 0;
-        for (const channel of Object.values(ChannelStore.getMutablePrivateChannels()))
-            if (channel.isGroupDM() && channel.recipients.includes(user.id))
-                count++;
-        return `${count === 0 ? "No" : count} Mutual Group${count === 1 ? "" : "s"}`;
+    pushSection(sections: any[] & { [IS_PATCHED]?: true; }, user: UserRecord) {
+        if (isBotOrMe(user) || sections[IS_PATCHED]) return;
+
+        sections[IS_PATCHED] = true;
+        sections.push({
+            section: "MUTUAL_GDMS",
+            text: getMutualGDMCountText(user)
+        });
     },
 
     renderMutualGDMs: ErrorBoundary.wrap(({ user, onClose }: { user: UserRecord; onClose: () => void; }) => {
-        const entries: ReactElement[] = [];
-        for (const channel of ChannelStore.getSortedPrivateChannels())
-            if (channel.isGroupDM() && channel.recipients.includes(user.id))
-                entries.push(
-                    <Clickable
-                        className={ProfileListClasses.listRow}
-                        onClick={() => {
-                            onClose();
-                            SelectedChannelActionCreators.selectPrivateChannel(channel.id);
-                        }}
-                    >
-                        <Avatar
-                            src={IconUtils.getChannelIconURL({ id: channel.id, icon: channel.icon, size: 32 })}
-                            size="SIZE_40"
-                            className={ProfileListClasses.listAvatar}
-                        />
-                        <div className={ProfileListClasses.listRowContent}>
-                            <div className={ProfileListClasses.listName}>{getGroupDMName(channel)}</div>
-                            <div className={GuildLabelClasses.guildNick}>{channel.recipients.length + 1} Members</div>
-                        </div>
-                    </Clickable>
-                );
+        const mutualGroupDMs = useMutualGroupDMs(user.id);
+
+        const entries = mutualGroupDMs.map(channel => (
+            <Clickable
+                className={ProfileListClasses.listRow}
+                onClick={() => {
+                    onClose();
+                    SelectedChannelActionCreators.selectPrivateChannel(channel.id);
+                }}
+            >
+                <Avatar
+                    src={IconUtils.getChannelIconURL({ id: channel.id, icon: channel.icon, size: 32 })}
+                    size="SIZE_40"
+                    className={ProfileListClasses.listAvatar}
+                />
+                <div className={ProfileListClasses.listRowContent}>
+                    <div className={ProfileListClasses.listName}>{getGroupDMName(channel)}</div>
+                    <div className={GuildLabelClasses.guildNick}>{channel.recipients.length + 1} Members</div>
+                </div>
+            </Clickable>
+        ));
 
         return (
             <ScrollerThin

src/plugins/pictureInPicture/index.tsx

@@ -24,13 +24,13 @@ const settings = definePluginSettings({
 export default definePlugin({
     name: "PictureInPicture",
     description: "Adds picture in picture to videos (next to the Download button)",
-    authors: [Devs.Nobody],
+    authors: [Devs.Lumap],
     settings,
     patches: [
         {
-            find: ".nonMediaMosaicItem]",
+            find: ".removeMosaicItemHoverButton),",
             replacement: {
-                match: /\.nonMediaMosaicItem\]:!(\i).{0,50}?children:\[(\S)/,
+                match: /\.nonMediaMosaicItem\]:!(\i).{0,50}?children:\[\S,(\S)/,
                 replace: "$&,$1&&$2&&$self.renderPiPButton(),"
             },
         },

src/utils/constants.ts

@@ -33,10 +33,6 @@ export interface Dev {
  * If you are fine with attribution but don't want the badge, add badge: false
  */
 export const Devs = /* #__PURE__*/ Object.freeze({
-    Nobody: {
-        name: "Nobody",
-        id: 0n,
-    },
     Ven: {
         name: "Vee",
         id: 343383572805058560n
@@ -545,7 +541,11 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     surgedevs: {
         name: "Chloe",
         id: 1084592643784331324n
-    }
+    },
+    Lumap: {
+        name: "Lumap",
+        id: 585278686291427338n,
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly