linting and stuff

src/components/PluginSettings/PluginModal.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Forms } from "@components";
 import { User } from "discord-types/general";
 import { Constructor } from "type-fest";
 
@@ -25,7 +26,7 @@ import { lazyWebpack, proxyLazy } from "../../utils";
 import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "../../utils/modal";
 import { OptionType, Plugin } from "../../utils/types";
 import { filters } from "../../webpack";
-import { Button, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "../../webpack/common";
+import { Button, FluxDispatcher, React, Text, Tooltip, UserStore, UserUtils } from "../../webpack/common";
 import ErrorBoundary from "../ErrorBoundary";
 import { Flex } from "../Flex";
 import {
@@ -33,7 +34,7 @@ import {
     SettingInputComponent,
     SettingNumericComponent,
     SettingSelectComponent,
-    SettingSliderComponent,
+    SettingSliderComponent
 } from "./components";
 
 const UserSummaryItem = lazyWebpack(filters.byCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));

src/components/PluginSettings/components/SettingBooleanComponent.tsx

@@ -16,8 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Forms } from "@components";
+
 import { PluginOptionBoolean } from "../../../utils/types";
-import { Forms, React, Select } from "../../../webpack/common";
+import { React, Select } from "../../../webpack/common";
 import { ISettingElementProps } from ".";
 
 export function SettingBooleanComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionBoolean>) {

src/components/PluginSettings/components/SettingNumericComponent.tsx

@@ -16,8 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Forms } from "@components";
+
 import { OptionType, PluginOptionNumber } from "../../../utils/types";
-import { Forms, React, TextInput } from "../../../webpack/common";
+import { React, TextInput } from "../../../webpack/common";
 import { ISettingElementProps } from ".";
 
 const MAX_SAFE_NUMBER = BigInt(Number.MAX_SAFE_INTEGER);

src/components/PluginSettings/components/SettingSelectComponent.tsx

@@ -16,8 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { FormSection, FormText, FormTitle } from "@components/Forms";
+import Select from "@components/Select";
+
 import { PluginOptionSelect } from "../../../utils/types";
-import { Forms, React, Select } from "../../../webpack/common";
+import { React } from "../../../webpack/common";
 import { ISettingElementProps } from ".";
 
 export function SettingSelectComponent({ option, pluginSettings, onChange, onError, id }: ISettingElementProps<PluginOptionSelect>) {
@@ -41,8 +44,8 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
     }
 
     return (
-        <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+        <FormSection>
+            <FormTitle>{option.description}</FormTitle>
             <Select
                 isDisabled={option.disabled?.() ?? false}
                 options={option.options}
@@ -54,7 +57,7 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
                 serialize={v => String(v)}
                 {...option.componentProps}
             />
-            {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
-        </Forms.FormSection>
+            {error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
+        </FormSection>
     );
 }

src/components/PluginSettings/components/SettingSliderComponent.tsx

@@ -16,8 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Forms } from "@components";
+
 import { PluginOptionSlider } from "../../../utils/types";
-import { Forms, React, Slider } from "../../../webpack/common";
+import { React, Slider } from "../../../webpack/common";
 import { ISettingElementProps } from ".";
 
 export function makeRange(start: number, end: number, step = 1) {

src/components/PluginSettings/components/SettingTextComponent.tsx

@@ -16,8 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Forms } from "@components";
+
 import { PluginOptionString } from "../../../utils/types";
-import { Forms, React, TextInput } from "../../../webpack/common";
+import { React, TextInput } from "../../../webpack/common";
 import { ISettingElementProps } from ".";
 
 export function SettingInputComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionString>) {

src/components/PluginSettings/index.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { FormDivider, FormSection, FormText, FormTitle } from "@components/Forms";
+
 import Plugins from "~plugins";
 
 import { showNotice } from "../../api/Notices";
@@ -26,7 +28,7 @@ import { ChangeList } from "../../utils/ChangeList";
 import { classes, lazyWebpack } from "../../utils/misc";
 import { Plugin } from "../../utils/types";
 import { filters } from "../../webpack";
-import { Alerts, Button, Forms, Margins, Parser, React, Switch, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
+import { Alerts, Button, Margins, Parser, React, Switch, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
 import ErrorBoundary from "../ErrorBoundary";
 import { ErrorCard } from "../ErrorCard";
 import { Flex } from "../Flex";
@@ -235,10 +237,10 @@ export default ErrorBoundary.wrap(function Settings() {
     };
 
     return (
-        <Forms.FormSection tag="h1" title="Vencord">
-            <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
+        <FormSection tag="h1" title="Vencord">
+            <FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
                 Plugins
-            </Forms.FormTitle>
+            </FormTitle>
 
             <ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
 
@@ -275,10 +277,10 @@ export default ErrorBoundary.wrap(function Settings() {
                     : <Text variant="text-md/normal">No plugins meet search criteria.</Text>
                 }
             </div>
-            <Forms.FormDivider />
-            <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
+            <FormDivider />
+            <FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
                 Required Plugins
-            </Forms.FormTitle>
+            </FormTitle>
             <div style={styles.PluginsGrid}>
                 {sortedPlugins?.length ? sortedPlugins
                     .filter(a => a.required || dependencyCheck(a.name, depMap).length && pluginFilter(a))
@@ -303,15 +305,15 @@ export default ErrorBoundary.wrap(function Settings() {
                     : <Text variant="text-md/normal">No plugins meet search criteria.</Text>
                 }
             </div>
-        </Forms.FormSection >
+        </FormSection>
     );
 });
 
 function makeDependencyList(deps: string[]) {
     return (
         <React.Fragment>
-            <Forms.FormText>This plugin is required by:</Forms.FormText>
-            {deps.map((dep: string) => <Forms.FormText style={{ margin: "0 auto" }}>{dep}</Forms.FormText>)}
+            <FormText>This plugin is required by:</FormText>
+            {deps.map((dep: string) => <FormText style={{ margin: "0 auto" }}>{dep}</FormText>)}
         </React.Fragment>
     );
 }

src/components/Settings.tsx

@@ -16,11 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { FormDivider, FormSection, FormText, FormTitle } from "@components/Forms";
+
 import { useSettings } from "../api/settings";
 import { ChangeList } from "../utils/ChangeList";
 import IpcEvents from "../utils/IpcEvents";
 import { useAwaiter } from "../utils/misc";
-import { Alerts, Button, Forms, Margins, Parser, React, Switch } from "../webpack/common";
+import { Alerts, Button, Margins, Parser, React, Switch } from "../webpack/common";
 import ErrorBoundary from "./ErrorBoundary";
 import { Flex } from "./Flex";
 import { launchMonacoEditor } from "./Monaco";
@@ -51,14 +53,14 @@ export default ErrorBoundary.wrap(function Settings() {
     }, []);
 
     return (
-        <Forms.FormSection tag="h1" title="Vencord">
-            <Forms.FormTitle tag="h5">
+        <FormSection tag="h1" title="Vencord">
+            <FormTitle tag="h5">
                 Settings
-            </Forms.FormTitle>
+            </FormTitle>
 
-            <Forms.FormText>
+            <FormText>
                 Settings Directory: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code>
-            </Forms.FormText>
+            </FormText>
 
             {!IS_WEB && <Flex className={Margins.marginBottom20} style={{ marginTop: 8 }}>
                 <Button
@@ -92,7 +94,7 @@ export default ErrorBoundary.wrap(function Settings() {
                 Open QuickCSS File
             </Button>}
 
-            <Forms.FormDivider />
+            <FormDivider />
             <Switch
                 value={settings.useQuickCss}
                 onChange={(v: boolean) => settings.useQuickCss = v}
@@ -114,6 +116,6 @@ export default ErrorBoundary.wrap(function Settings() {
             >
                 Get notified about new Updates
             </Switch>}
-        </Forms.FormSection >
+        </FormSection>
     );
 });

src/components/Updater.tsx

@@ -16,11 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Forms } from "@components";
+
 import gitHash from "~git-hash";
 
 import { classes, useAwaiter } from "../utils/misc";
 import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../utils/updater";
-import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../webpack/common";
+import { Alerts, Button, Card, Margins, Parser, React, Toasts } from "../webpack/common";
 import ErrorBoundary from "./ErrorBoundary";
 import { ErrorCard } from "./ErrorCard";
 import { Flex } from "./Flex";

src/plugins/experiments.tsx

@@ -16,12 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Forms } from "@components";
+
 import { lazyWebpack } from "../utils";
 import { Devs } from "../utils/constants";
 import definePlugin, { OptionType } from "../utils/types";
 import { Settings } from "../Vencord";
 import { filters } from "../webpack";
-import { Forms, React } from "../webpack/common";
+import { React } from "../webpack/common";
 
 const KbdStyles = lazyWebpack(filters.byProps(["key", "removeBuildOverride"]));
 
@@ -76,7 +78,7 @@ export default definePlugin({
         return (
             <React.Fragment>
                 <Forms.FormTitle tag="h3">More Information</Forms.FormTitle>
-                <Forms.FormText variant="text-md/normal">
+                <Forms.FormText>
                     You can enable client DevTools{" "}
                     <kbd className={KbdStyles.key}>{modKey}</kbd> +{" "}
                     <kbd className={KbdStyles.key}>{altKey}</kbd> +{" "}

src/plugins/pronoundb/components/PronounsAboutComponent.tsx

@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Forms, React } from "../../../webpack/common";
+import { Forms } from "@components";
+
+import { React } from "../../../webpack/common";
 
 export default function PronounsAboutComponent() {
     return (

src/webpack/common.tsx

@@ -33,6 +33,7 @@ export let UserStore: Stores.UserStore;
 export let SelectedChannelStore: Stores.SelectedChannelStore;
 export let ChannelStore: Stores.ChannelStore;
 
+/** @deprecated import from "@components/Forms" instead */
 export const Forms = {} as {
     FormTitle: Components.FormTitle;
     FormSection: any;
@@ -47,6 +48,7 @@ export let Router: any;
 export let TextInput: any;
 export let Text: (props: TextProps) => JSX.Element;
 
+/** @deprecated import from "@components/Select" instead */
 export const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
 export const Slider = lazyWebpack(filters.byCode("closestMarkerIndex", "stickToMarkers"));
 
@@ -78,6 +80,7 @@ const ToastPosition = {
     BOTTOM: 1
 };
 
+/** @deprecated import from "@components/Toasts" instead */
 export const Toasts = {
     Type: ToastType,
     Position: ToastPosition,

src/webpack/components/Forms.tsx

@@ -0,0 +1,82 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { filters, proxyWaitFor } from "../webpack";
+
+export enum Tag {
+    H1 = "h1",
+    H2 = "h2",
+    H3 = "h3",
+    H4 = "h4",
+    H5 = "h5",
+}
+
+interface FormTitleProps extends React.PropsWithChildren<React.HTMLProps<HTMLDivElement>> {
+    tag?: Tag | `${Tag}`;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    faded?: boolean;
+}
+
+interface FormSectionProps extends React.PropsWithChildren {
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+    titleId?: string;
+    tag?: Tag | `${Tag}`;
+    titleClassName?: string;
+}
+
+export enum FormTextType {
+    DEFAULT = "default",
+    INPUT_PLACEHOLDER = "placeholder",
+    DESCRIPTION = "description",
+    LABEL_BOLD = "labelBold",
+    LABEL_SELECTED = "labelSelected",
+    LABEL_DESCRIPTOR = "labelDescriptor",
+    ERROR = "error",
+    SUCCESS = "success",
+}
+
+interface FormTextProps extends React.PropsWithChildren<React.HTMLProps<HTMLDivElement>> {
+    type?: FormTextType;
+    selectable?: boolean;
+}
+
+interface FormDividerProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export const FormTitle: (props: FormTitleProps) => JSX.Element = proxyWaitFor(filters.byCode("errorSeparator"));
+export const FormSection: (props: FormSectionProps) => JSX.Element = proxyWaitFor(filters.byCode("titleClassName", "sectionTitle"));
+export const FormText: (props: FormTextProps) => JSX.Element = proxyWaitFor(m => m.Types?.INPUT_PLACEHOLDER);
+export const FormDivider: (props: FormDividerProps) => JSX.Element = proxyWaitFor(m => {
+    if (typeof m !== "function") return false;
+    const s = m.toString();
+    return s.length < 200 && s.includes("divider");
+});
+
+export const Forms = {
+    FormTitle,
+    FormSection,
+    FormText,
+    FormDivider
+};
+
+export default Forms;

src/webpack/components/Select.tsx

@@ -0,0 +1,73 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { lazyWebpack } from "src/utils";
+
+import { filters } from "../webpack";
+
+export enum Look {
+    FILLED,
+    CUSTOM
+}
+
+export enum Position {
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom",
+    CENTER = "center",
+    WINDOW_CENTER = "window_center",
+}
+
+export interface SelectOption {
+    value: any;
+    label: string;
+    disabled?: boolean;
+    key?: React.Key;
+}
+
+interface SelectProps {
+    options: SelectOption[];
+    placeholder?: string;
+    className?: string;
+    isDisabled?: boolean;
+    maxVisibleItems?: number;
+    look?: Look;
+    autoFocus?: boolean;
+    popoutWidth?: number;
+    clearable?: boolean;
+    onClose?(): void;
+    onOpen?(): void;
+    renderOptionLabel?(option: SelectOption): React.ReactNode;
+    renderOptionValue?(option: SelectOption[]): React.ReactNode;
+    popoutClassName?: string;
+    popoutPosition?: Position;
+    optionClassName?: string;
+    closeOnSelect?: boolean;
+    select?(value: any): void;
+    isSelected?(value: any): boolean;
+    serialize?(value: any): string;
+    clear?(): void;
+    hideIcon?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+
+export const Select: (props: SelectProps) => JSX.Element = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
+
+export default Select;

src/webpack/components/Toasts.tsx

@@ -0,0 +1,60 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { lazyWebpack } from "../../utils";
+import { filters } from "../webpack";
+
+export enum ToastType {
+    MESSAGE = 0,
+    SUCCESS,
+    FAILURE,
+    CUSTOM
+}
+
+export enum ToastPosition {
+    TOP = 0,
+    BOTTOM,
+}
+
+export interface ToastOptions {
+    position?: ToastPosition;
+    timeout?: number;
+    duration?: number;
+}
+
+export interface ToastProps {
+    message: string;
+    type: ToastType;
+    id: string;
+    options?: ToastOptions;
+}
+
+const showToast = lazyWebpack(filters.byCode("currentToast?"));
+const popToast = lazyWebpack(filters.byCode("currentToast:null"));
+
+export const ToastAPI = {
+    show(props: ToastProps): void {
+        return showToast(props);
+    },
+
+    pop(): void {
+        return popToast();
+    }
+};
+
+export default ToastAPI;

src/webpack/components/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export * as Forms from "./Forms";
+export * as Select from "./Select";
+export * as Toasts from "./Toasts";

src/webpack/webpack.ts

@@ -180,6 +180,12 @@ export function waitFor(filter: string | string[] | FilterFn, callback: Callback
     subscriptions.set(filter, callback);
 }
 
+export function proxyWaitFor(filter: string | string[] | FilterFn, mapper = m => m) {
+    let v;
+    waitFor(filter, m => v = mapper(m));
+    return proxyLazy(() => v);
+}
+
 export function addListener(callback: CallbackFn) {
     listeners.add(callback);
 }

tsconfig.json

@@ -17,7 +17,12 @@
         // https://esbuild.github.io/api/#jsx-factory
         "jsxFactory": "Vencord.Webpack.Common.React.createElement",
         "jsxFragmentFactory": "Vencord.Webpack.Common.React.Fragment",
-        "jsx": "react"
+        "jsx": "react",
+        "baseUrl": ".",
+        "paths": {
+            "@components": ["src/webpack/components/index.ts"],
+            "@components/*": ["src/webpack/components/*"]
+        }
     },
     "include": ["src/**/*"]
 }