feat: Allow finds to use regex (#2452)

src/components/VencordSettings/PatchHelperTab.tsx

@@ -180,7 +180,8 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
 
     return (
         <>
-            <Forms.FormTitle>replacement</Forms.FormTitle>
+            {/* FormTitle adds a class if className is not set, so we set it to an empty string to prevent that */}
+            <Forms.FormTitle className="">replacement</Forms.FormTitle>
             <TextInput
                 value={replacement?.toString()}
                 onChange={onChange}
@@ -188,7 +189,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
             />
             {!isFunc && (
                 <div className="vc-text-selectable">
-                    <Forms.FormTitle>Cheat Sheet</Forms.FormTitle>
+                    <Forms.FormTitle className={Margins.top8}>Cheat Sheet</Forms.FormTitle>
                     {Object.entries({
                         "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
                         "$$": "Insert a $",
@@ -220,11 +221,12 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
 
 interface FullPatchInputProps {
     setFind(v: string): void;
+    setParsedFind(v: string | RegExp): void;
     setMatch(v: string): void;
     setReplacement(v: string | ReplaceFn): void;
 }
 
-function FullPatchInput({ setFind, setMatch, setReplacement }: FullPatchInputProps) {
+function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacement }: FullPatchInputProps) {
     const [fullPatch, setFullPatch] = React.useState<string>("");
     const [fullPatchError, setFullPatchError] = React.useState<string>("");
 
@@ -233,6 +235,7 @@ function FullPatchInput({ setFind, setMatch, setReplacement }: FullPatchInputPro
             setFullPatchError("");
 
             setFind("");
+            setParsedFind("");
             setMatch("");
             setReplacement("");
             return;
@@ -256,7 +259,8 @@ function FullPatchInput({ setFind, setMatch, setReplacement }: FullPatchInputPro
             if (!parsed.replacement.match) throw new Error("No 'replacement.match' field");
             if (!parsed.replacement.replace) throw new Error("No 'replacement.replace' field");
 
-            setFind(parsed.find);
+            setFind(parsed.find instanceof RegExp ? parsed.find.toString() : parsed.find);
+            setParsedFind(parsed.find);
             setMatch(parsed.replacement.match instanceof RegExp ? parsed.replacement.match.source : parsed.replacement.match);
             setReplacement(parsed.replacement.replace);
             setFullPatchError("");
@@ -266,7 +270,7 @@ function FullPatchInput({ setFind, setMatch, setReplacement }: FullPatchInputPro
     }
 
     return <>
-        <Forms.FormText>Paste your full JSON patch here to fill out the fields</Forms.FormText>
+        <Forms.FormText className={Margins.bottom8}>Paste your full JSON patch here to fill out the fields</Forms.FormText>
         <TextArea value={fullPatch} onChange={setFullPatch} onBlur={update} />
         {fullPatchError !== "" && <Forms.FormText style={{ color: "var(--text-danger)" }}>{fullPatchError}</Forms.FormText>}
     </>;
@@ -274,6 +278,7 @@ function FullPatchInput({ setFind, setMatch, setReplacement }: FullPatchInputPro
 
 function PatchHelper() {
     const [find, setFind] = React.useState<string>("");
+    const [parsedFind, setParsedFind] = React.useState<string | RegExp>("");
     const [match, setMatch] = React.useState<string>("");
     const [replacement, setReplacement] = React.useState<string | ReplaceFn>("");
 
@@ -285,20 +290,34 @@ function PatchHelper() {
     const code = React.useMemo(() => {
         return `
 {
-    find: ${JSON.stringify(find)},
+    find: ${parsedFind instanceof RegExp ? parsedFind.toString() : JSON.stringify(parsedFind)},
     replacement: {
         match: /${match.replace(/(?<!\\)\//g, "\\/")}/,
         replace: ${typeof replacement === "function" ? replacement.toString() : JSON.stringify(replacement)}
     }
 }
         `.trim();
-    }, [find, match, replacement]);
+    }, [parsedFind, match, replacement]);
 
     function onFindChange(v: string) {
         setFindError(void 0);
         setFind(v);
-        if (v.length) {
+    }
-            findCandidates({ find: v, setModule, setError: setFindError });
+
+    function onFindBlur() {
+        try {
+            let parsedFind = find as string | RegExp;
+            if (/^\/.+?\/$/.test(find)) parsedFind = new RegExp(find.slice(1, -1));
+
+            setFindError(void 0);
+            setFind(find);
+            setParsedFind(parsedFind);
+
+            if (find.length) {
+                findCandidates({ find: parsedFind, setModule, setError: setFindError });
+            }
+        } catch (e: any) {
+            setFindError((e as Error).message);
         }
     }
 
@@ -317,19 +336,21 @@ function PatchHelper() {
             <Forms.FormTitle>full patch</Forms.FormTitle>
             <FullPatchInput
                 setFind={onFindChange}
+                setParsedFind={setParsedFind}
                 setMatch={onMatchChange}
                 setReplacement={setReplacement}
             />
 
-            <Forms.FormTitle>find</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top8}>find</Forms.FormTitle>
             <TextInput
                 type="text"
                 value={find}
                 onChange={onFindChange}
+                onBlur={onFindBlur}
                 error={findError}
             />
 
-            <Forms.FormTitle>match</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top8}>match</Forms.FormTitle>
             <CheckedTextInput
                 value={match}
                 onChange={onMatchChange}
@@ -342,6 +363,7 @@ function PatchHelper() {
                 }}
             />
 
+            <div className={Margins.top8} />
             <ReplacementInput
                 replacement={replacement}
                 setReplacement={setReplacement}

src/utils/types.ts

@@ -29,14 +29,19 @@ export default function definePlugin<P extends PluginDef>(p: P & Record<string,
 export type ReplaceFn = (match: string, ...groups: string[]) => string;
 
 export interface PatchReplacement {
+    /** The match for the patch replacement. If you use a string it will be implicitly converted to a RegExp */
     match: string | RegExp;
+    /** The replacement string or function which returns the string for the patch replacement */
     replace: string | ReplaceFn;
+    /** A function which returns whether this patch replacement should be applied */
     predicate?(): boolean;
 }
 
 export interface Patch {
     plugin: string;
-    find: string;
+    /** A string or RegExp which is only include/matched in the module code you wish to patch. Prefer only using a RegExp if a simple string test is not enough */
+    find: string | RegExp;
+    /** The replacement(s) for the module being patched */
     replacement: PatchReplacement | PatchReplacement[];
     /** Whether this patch should apply to multiple modules */
     all?: boolean;
@@ -44,6 +49,7 @@ export interface Patch {
     noWarn?: boolean;
     /** Only apply this set of replacements if all of them succeed. Use this if your replacements depend on each other */
     group?: boolean;
+    /** A function which returns whether this patch should be applied */
     predicate?(): boolean;
 }
 

src/webpack/patchWebpack.ts

@@ -245,7 +245,12 @@ function patchFactories(factories: Record<string, (module: any, exports: any, re
         for (let i = 0; i < patches.length; i++) {
             const patch = patches[i];
             if (patch.predicate && !patch.predicate()) continue;
-            if (!code.includes(patch.find)) continue;
+
+            const moduleMatches = typeof patch.find === "string"
+                ? code.includes(patch.find)
+                : patch.find.test(code);
+
+            if (!moduleMatches) continue;
 
             patchedBy.add(patch.plugin);