PermissionViewer/BetterRoleContext: fix 'View Role Members'

packages/discord-types/src/components.d.ts

@@ -541,3 +541,10 @@ export type ColorPicker = ComponentType<{
     label?: ReactNode;
     onChange(value: number | null): void;
 }>;
+
+export type RoleMemberPopout = ComponentType<{
+    popoutProps: PopoutProps;
+    guildId: string;
+    channelId: string;
+    roleId: string;
+}>;

src/plugins/_core/concatenatedComponentExtractor.tsx

@@ -6,7 +6,7 @@
 
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { setColorPicker, setCreateScroller } from "@webpack/common";
+import { setColorPicker, setCreateScroller, setRoleMemberPopout } from "@webpack/common";
 
 export default definePlugin({
     name: "ConcatenatedComponentExtractor",
@@ -29,9 +29,17 @@ export default definePlugin({
                 match: /(?=function (\i)\(\i,\i,\i\)\{.{0,20}?return \i\.forwardRef\(function\(\i,\i\)\{let\{[^}]+?="ltr",orientation:)/,
                 replace: "$self.setCreateScroller($1);"
             }
-        }
+        },
+        {
+            find: ".ROLE_MENTION)",
+            replacement: {
+                match: /function (\i)(?=.+?renderPopout:.{0,20}\1,\{guildId:\i,channelId:\i)/,
+                replace: "$self.setRoleMemberPopout($1);$&"
+            }
+        },
     ],
 
     setCreateScroller,
     setColorPicker,
+    setRoleMemberPopout,
 });

src/plugins/betterRoleContext/index.tsx

@@ -13,10 +13,9 @@ import { getCurrentChannel, getCurrentGuild, getIntlMessage, openImageModal } fr
 import { isTruthy } from "@utils/guards";
 import { classes } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
-import { Guild, PopoutProps, Role } from "@vencord/discord-types";
+import { Guild, Role } from "@vencord/discord-types";
 import { findByCodeLazy, findByPropsLazy, findCssClassesLazy } from "@webpack";
-import { ContextMenuApi, GuildRoleStore, Menu, PermissionStore, Popout, useRef } from "@webpack/common";
-import { ComponentType } from "react";
+import { ContextMenuApi, GuildRoleStore, Menu, PermissionStore, Popout, RoleMemberPopout, useRef } from "@webpack/common";
 
 const GuildSettingsActions = findByPropsLazy("open", "selectRole", "updateGuild");
 const MenuItemClasses = findCssClassesLazy("item", "labelContainer", "colorDefault", "label", "iconContainer");
@@ -76,15 +75,6 @@ const settings = definePluginSettings({
     }
 });
 
-interface RoleMemberPopoutProps {
-    popoutProps: PopoutProps;
-    guildId: string;
-    channelId: string;
-    roleId: string;
-}
-type RoleMemberPopout = ComponentType<RoleMemberPopoutProps>;
-
-let RoleMemberPopout: RoleMemberPopout = () => null;
 
 export function buildExtraRoleContextMenuItems(role: Role, guild: Guild, popoutRef?: React.RefObject<any>) {
     if (!role) return { before: [], after: [] };
@@ -211,13 +201,6 @@ export default definePlugin({
     settings,
     openRoleContextMenu,
     patches: [
-        {
-            find: ".ROLE_MENTION)",
-            replacement: {
-                match: /function (\i)(?=.+?renderPopout:.{0,20}\1,\{guildId:\i,channelId:\i)/,
-                replace: "$self.RoleMembers=$1;$&"
-            }
-        },
         // Conflicts with RoleColorEverywhere which changes the code at the end of our match. (and also uses same find & similar match)
         // However, BetterRoleContext applies first (alphabetic order), so it's not an issue
         {
@@ -234,10 +217,6 @@ export default definePlugin({
         DeveloperMode.updateSetting(true);
     },
 
-    set RoleMembers(component: RoleMemberPopout) {
-        RoleMemberPopout = component;
-    },
-
     contextMenus: {
         "dev-context"(children, { id }: { id: string; }) {
             const popoutRef = useRef(null);

src/webpack/common/components.ts

@@ -68,14 +68,17 @@ export const TabBar = waitForComponent("TabBar", filters.componentByCode("ref:th
 // TODO: remake this component
 export const Clickable = waitForComponent<t.Clickable>("Clickable", filters.componentByCode("this.context?this.renderNonInteractive():"));
 export const Avatar = waitForComponent<t.Avatar>("Avatar", filters.componentByCode(".size-1.375*"));
+export const UserSummaryItem = waitForComponent("UserSummaryItem", filters.componentByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
 
 export let ColorPicker: t.ColorPicker = () => null;
 export function setColorPicker(component: t.ColorPicker) {
     ColorPicker = component;
 }
 
-
-export const UserSummaryItem = waitForComponent("UserSummaryItem", filters.componentByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
+export let RoleMemberPopout: t.RoleMemberPopout = () => null;
+export function setRoleMemberPopout(component: t.RoleMemberPopout) {
+    RoleMemberPopout = component;
+}
 
 export let createScroller: ((scrollbarClassName: string, fadeClassName: string, customThemeClassName: string) => t.ScrollerThin) | undefined;
 export function setCreateScroller(cs: NonNullable<typeof createScroller>) {

src/webpack/webpack.ts

@@ -55,7 +55,7 @@ export const stringMatches = (s: string, filter: CodeFilter) =>
     );
 
 export function makeClassNameRegex(className: string) {
-    return new RegExp(`(?:\\b|_)${escapeRegExp(className)}(?:\\b|_)`);
+    return new RegExp(`(?<=^|\\s)${escapeRegExp(className)}(?:_\\S*)?(?=$|\\s)`);
 }
 
 export const filters = {