Merge remote-tracking branch 'upstream/dev' into dev

src/webpack/common/components.ts

@@ -16,78 +16,82 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { filters, findByPropsLazy, waitFor } from "@webpack";
+import { LazyComponent } from "@utils/lazyReact";
+import { filters, mapMangledModuleLazy, waitFor } from "@webpack";
 
 import { waitForComponent } from "./internal";
 import * as t from "./types/components";
 
-export let Forms = {} as {
-    FormTitle: t.FormTitle,
-    FormSection: t.FormSection,
-    FormDivider: t.FormDivider,
-    FormText: t.FormText,
+
+const FormTitle = waitForComponent<t.FormTitle>("FormTitle", filters.componentByCode('["defaultMargin".concat', '="h5"'));
+const FormText = waitForComponent<t.FormText>("FormText", filters.componentByCode(".SELECTABLE),", ".DISABLED:"));
+const FormSection = waitForComponent<t.FormSection>("FormSection", filters.componentByCode(".titleId)&&"));
+const FormDivider = waitForComponent<t.FormDivider>("FormDivider", filters.componentByCode(".divider,", ",style:", '"div"', /\.divider,\i\),style:/));
+
+export const Forms = {
+    FormTitle,
+    FormText,
+    FormSection,
+    FormDivider
 };
 
-export let Icons = {} as t.Icons;
+export const Card = waitForComponent<t.Card>("Card", filters.componentByCode(".editable),", ".outline:"));
+export const Button = waitForComponent<t.Button>("Button", filters.componentByCode("#{intl::A11Y_LOADING_STARTED}))),!1"));
+export const Switch = waitForComponent<t.Switch>("Switch", filters.componentByCode(".labelRow,ref:", ".disabledText"));
+
+const Tooltips = mapMangledModuleLazy(".tooltipTop,bottom:", {
+    Tooltip: filters.componentByCode("this.renderTooltip()]"),
+    TooltipContainer: filters.componentByCode('="div",')
+}) as {
+    Tooltip: t.Tooltip,
+    TooltipContainer: t.TooltipContainer;
+};
+
+export const Tooltip = LazyComponent(() => Tooltips.Tooltip);
+export const TooltipContainer = LazyComponent(() => Tooltips.TooltipContainer);
+
+export const TextInput = waitForComponent<t.TextInput>("TextInput", filters.componentByCode(".error]:this.hasError()"));
+export const TextArea = waitForComponent<t.TextArea>("TextArea", filters.componentByCode("this.getPaddingRight()},id:"));
+export const Text = waitForComponent<t.Text>("Text", filters.componentByCode('case"always-white"'));
+export const Heading = waitForComponent<t.Heading>("Heading", filters.componentByCode(">6?{", "variant:"));
+export const Select = waitForComponent<t.Select>("Select", filters.componentByCode('.selectPositionTop]:"top"===', '"Escape"==='));
+export const SearchableSelect = waitForComponent<t.SearchableSelect>("SearchableSelect", filters.componentByCode('.selectPositionTop]:"top"===', ".multi]:"));
+export const Slider = waitForComponent<t.Slider>("Slider", filters.componentByCode('"markDash".concat('));
+export const Popout = waitForComponent<t.Popout>("Popout", filters.componentByCode("ref:this.ref,preload:"));
+export const Dialog = waitForComponent<t.Dialog>("Dialog", filters.componentByCode('role:"dialog",tabIndex:-1'));
+export const TabBar = waitForComponent("TabBar", filters.componentByCode("ref:this.tabBarRef,className:"));
+export const Paginator = waitForComponent<t.Paginator>("Paginator", filters.componentByCode('rel:"prev",children:'));
+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 let createScroller: (scrollbarClassName: string, fadeClassName: string, customThemeClassName: string) => t.ScrollerThin;
+export let scrollerClasses: Record<string, string>;
+waitFor(filters.byCode('="ltr",orientation:', "customTheme:", "forwardRef"), m => createScroller = m);
+waitFor(["thin", "auto", "customTheme"], m => scrollerClasses = m);
+
+export const ScrollerNone = LazyComponent(() => createScroller(scrollerClasses.none, scrollerClasses.fade, scrollerClasses.customTheme));
+export const ScrollerThin = LazyComponent(() => createScroller(scrollerClasses.thin, scrollerClasses.fade, scrollerClasses.customTheme));
+export const ScrollerAuto = LazyComponent(() => createScroller(scrollerClasses.auto, scrollerClasses.fade, scrollerClasses.customTheme));
+
+const { FocusLock_ } = mapMangledModuleLazy("attachTo:null!==", {
+    FocusLock_: filters.componentByCode(".containerRef")
+}) as {
+    FocusLock_: t.FocusLock;
+};
+
+export const FocusLock = LazyComponent(() => FocusLock_);
 
-export let Card: t.Card;
-export let Button: t.Button;
-export let Switch: t.Switch;
-export let Tooltip: t.Tooltip;
-export let TooltipContainer: t.TooltipContainer;
-export let TextInput: t.TextInput;
-export let TextArea: t.TextArea;
-export let Text: t.Text;
-export let Heading: t.Heading;
-export let Select: t.Select;
-export let SearchableSelect: t.SearchableSelect;
-export let Slider: t.Slider;
-export let ButtonLooks: t.ButtonLooks;
-export let Popout: t.Popout;
-export let Dialog: t.Dialog;
-export let TabBar: any;
-export let Paginator: t.Paginator;
-export let ScrollerThin: t.ScrollerThin;
-export let Clickable: t.Clickable;
-export let Avatar: t.Avatar;
-export let Dots: t.Dots;
-export let FocusLock: t.FocusLock;
-// token lagger real
-/** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */
 export let useToken: t.useToken;
+waitFor(m => {
+    if (typeof m !== "function") {
+        return false;
+    }
+
+    const str = String(m);
+    return str.includes(".resolve({theme:null") && !str.includes("useMemo");
+}, m => useToken = m);
 
 export const MaskedLink = waitForComponent<t.MaskedLink>("MaskedLink", filters.componentByCode("MASKED_LINK)"));
-export const Timestamp = waitForComponent<t.Timestamp>("Timestamp", filters.byCode("#{intl::MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL}"));
+export const Timestamp = waitForComponent<t.Timestamp>("Timestamp", filters.componentByCode("#{intl::MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL}"));
 export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"]);
-
-export const { OAuth2AuthorizeModal } = findByPropsLazy("OAuth2AuthorizeModal");
-
-waitFor(["FormItem", "Button"], m => {
-    ({
-        useToken,
-        Card,
-        Button,
-        FormSwitch: Switch,
-        Tooltip,
-        TooltipContainer,
-        TextInput,
-        TextArea,
-        Text,
-        Select,
-        SearchableSelect,
-        Slider,
-        ButtonLooks,
-        TabBar,
-        Popout,
-        Dialog,
-        Paginator,
-        ScrollerThin,
-        Clickable,
-        Avatar,
-        FocusLock,
-        Heading,
-        Dots
-    } = m);
-    Forms = m;
-    Icons = m;
-});
+export const OAuth2AuthorizeModal = waitForComponent("OAuth2AuthorizeModal", filters.componentByCode(".authorize),children:", ".contentBackground"));

src/webpack/common/menu.ts

@@ -16,17 +16,29 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { filters, mapMangledModuleLazy, waitFor } from "@webpack";
-
+// eslint-disable-next-line path-alias/no-relative
+import { filters, mapMangledModuleLazy, waitFor, wreq } from "../webpack";
 import type * as t from "./types/menu";
 
-export let Menu = {} as t.Menu;
+export const Menu = {} as t.Menu;
 
-waitFor(["MenuItem", "MenuSliderControl"], m => Menu = m);
+// Relies on .name properties added by the MenuItemDemanglerAPI
+waitFor(m => m.name === "MenuCheckboxItem", (_, id) => {
+    // we have to do this manual require by ID because m is in this case the MenuCheckBoxItem instead of the entire module
+    const module = wreq(id as any);
+
+    for (const e of Object.values(module)) {
+        if (typeof e === "function" && e.name.startsWith("Menu")) {
+            Menu[e.name] = e;
+        }
+    }
+});
+
+waitFor(filters.componentByCode('path:["empty"]'), m => Menu.Menu = m);
+waitFor(filters.componentByCode("sliderContainer", "slider", "handleSize:16", "=100"), m => Menu.MenuSliderControl = m);
 
 export const ContextMenuApi: t.ContextMenuApi = mapMangledModuleLazy('type:"CONTEXT_MENU_OPEN', {
     closeContextMenu: filters.byCode("CONTEXT_MENU_CLOSE"),
     openContextMenu: filters.byCode("renderLazy:"),
     openContextMenuLazy: e => typeof e === "function" && e.toString().length < 100
 });
-

src/webpack/common/types/components.d.ts

@@ -18,14 +18,12 @@
 
 import type { ComponentPropsWithRef, ComponentType, CSSProperties, FunctionComponent, HtmlHTMLAttributes, HTMLProps, JSX, KeyboardEvent, MouseEvent, PropsWithChildren, PropsWithRef, ReactNode, Ref } from "react";
 
-import { IconNames } from "./iconNames";
 
 export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/semibold" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/semibold" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/semibold" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-sm" | "display-md" | "display-lg" | "code";
 export type FormTextTypes = Record<"DEFAULT" | "INPUT_PLACEHOLDER" | "DESCRIPTION" | "LABEL_BOLD" | "LABEL_SELECTED" | "LABEL_DESCRIPTOR" | "ERROR" | "SUCCESS", string>;
 export type HeadingTag = `h${1 | 2 | 3 | 4 | 5 | 6}`;
 
 export type Margins = Record<"marginTop16" | "marginTop8" | "marginBottom8" | "marginTop20" | "marginBottom20", string>;
-export type ButtonLooks = Record<"FILLED" | "INVERTED" | "OUTLINED" | "LINK" | "BLANK", string>;
 
 export type TextProps = PropsWithChildren<HtmlHTMLAttributes<HTMLDivElement> & {
     variant?: TextVariant;
@@ -511,4 +509,3 @@ export type Icon = ComponentType<JSX.IntrinsicElements["svg"] & {
     colorClass?: string;
 } & Record<string, any>>;
 
-export type Icons = Record<IconNames, Icon>;