Clean up commons

src/utils/modal.tsx

@@ -19,7 +19,6 @@
 import { filters, find, findByProps, findExportedComponent } from "@webpack";
 import type { ComponentType, PropsWithChildren, ReactNode, Ref } from "react";
 
-
 export const enum ModalSize {
     SMALL = "small",
     MEDIUM = "medium",

src/utils/react.tsx

@@ -22,8 +22,6 @@ import { checkIntersecting } from "./misc";
 
 export * from "./lazyReact";
 
-export const NoopComponent = () => null;
-
 /**
  * Check if an element is on screen
  * @param intersectOnly If `true`, will only update the state when the element comes into view

src/webpack/common/classes.ts

@@ -16,9 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { find, findByProps } from "@webpack";
-
+// eslint-disable-next-line path-alias/no-relative
+import { find, findByProps } from "../webpack";
 import * as t from "./types/classes";
 
-export const ModalImageClasses: t.ImageModalClasses = find(m => m.image && m.modal && !m.applicationIcon);
-export const ButtonWrapperClasses: t.ButtonWrapperClasses = findByProps("buttonWrapper", "buttonContent");
+export const ModalImageClasses = find<t.ImageModalClasses>(m => m.image && m.modal && !m.applicationIcon);
+export const ButtonWrapperClasses = findByProps<t.ButtonWrapperClasses>("buttonWrapper", "buttonContent");

src/webpack/common/components.ts

@@ -17,17 +17,9 @@
 */
 
 // eslint-disable-next-line path-alias/no-relative
-import { filters, findComponent, findExportedComponent, waitFor } from "@webpack";
-
+import { filters, find, findComponent, findExportedComponent } from "../webpack";
 import * as t from "./types/components";
 
-export let Forms = {} as {
-    FormTitle: t.FormTitle,
-    FormSection: t.FormSection,
-    FormDivider: t.FormDivider,
-    FormText: t.FormText,
-};
-
 export let Card: t.Card;
 export let Button: t.Button;
 export let Switch: t.Switch;
@@ -58,8 +50,7 @@ export const Flex = findComponent<t.FlexProps>(filters.byProps("Justify", "Align
 
 export const OAuth2AuthorizeModal = findExportedComponent("OAuth2AuthorizeModal");
 
-waitFor(filters.byProps("FormItem", "Button"), m => {
-    Forms = m;
+export const Forms = find(filters.byProps("FormItem", "Button"), m => {
     ({
         useToken,
         Card,
@@ -83,4 +74,11 @@ waitFor(filters.byProps("FormItem", "Button"), m => {
         FocusLock,
         Heading
     } = m);
-});
+
+    return m;
+}) as {
+    FormTitle: t.FormTitle,
+    FormSection: t.FormSection,
+    FormDivider: t.FormDivider,
+    FormText: t.FormText,
+};

src/webpack/common/menu.ts

@@ -23,4 +23,3 @@ import type * as t from "./types/menu";
 export const Menu = findByProps<t.Menu>("MenuItem", "MenuSliderControl");
 
 export const ContextMenuApi = findByProps<t.ContextMenuApi>("closeContextMenu", "openContextMenu");
-

src/webpack/common/react.ts

@@ -17,9 +17,8 @@
 */
 
 // eslint-disable-next-line path-alias/no-relative
-import { filters, findByProps,waitFor } from "../webpack";
+import { filters, find, findByProps } from "../webpack";
 
-export let React: typeof import("react");
 export let useState: typeof React.useState;
 export let useEffect: typeof React.useEffect;
 export let useMemo: typeof React.useMemo;
@@ -29,7 +28,8 @@ export let useCallback: typeof React.useCallback;
 
 export const ReactDOM = findByProps<typeof import("react-dom") & typeof import("react-dom/client")>("createPortal", "render");
 
-waitFor(filters.byProps("useState"), m => {
-    React = m;
-    ({ useEffect, useState, useMemo, useRef, useReducer, useCallback } = React);
+export const React = find<typeof import("react")>(filters.byProps("useState"), m => {
+    ({ useEffect, useState, useMemo, useRef, useReducer, useCallback } = m);
+
+    return m;
 });

src/webpack/common/settingsStores.ts

@@ -4,12 +4,11 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { findByProps } from "@webpack";
-
+// eslint-disable-next-line path-alias/no-relative
+import { findByProps } from "../webpack";
 import * as t from "./types/settingsStores";
 
-
-export const TextAndImagesSettingsStores = findByProps("MessageDisplayCompact") as Record<string, t.SettingsStore>;
-export const StatusSettingsStores = findByProps("ShowCurrentGame") as Record<string, t.SettingsStore>;
+export const TextAndImagesSettingsStores = findByProps<Record<string, t.SettingsStore>>("MessageDisplayCompact");
+export const StatusSettingsStores = findByProps<Record<string, t.SettingsStore>>("ShowCurrentGame");
 
 export const UserSettingsActionCreators = findByProps("PreloadedUserSettingsActionCreators");

src/webpack/common/stores.ts

@@ -22,7 +22,7 @@ import type * as Stores from "discord-types/stores";
 import { findByProps, findStore } from "../webpack";
 import * as t from "./types/stores";
 
-export const Flux: t.Flux = findByProps("connectStores");
+export const Flux = findByProps<t.Flux>("connectStores");
 
 export type GenericStore = t.FluxStore & Record<string, any>;
 
@@ -39,26 +39,26 @@ export const MessageStore = findStore("MessageStore") as Omit<Stores.MessageStor
 
 // this is not actually a FluxStore
 export const PrivateChannelsStore = findByProps("openPrivateChannel");
-export const PermissionStore: GenericStore = findStore("PermissionStore");
-export const GuildChannelStore: GenericStore = findStore("GuildChannelStore");
-export const ReadStateStore: GenericStore = findStore("ReadStateStore");
-export const PresenceStore: GenericStore = findStore("PresenceStore");
+export const PermissionStore = findStore<GenericStore>("PermissionStore");
+export const GuildChannelStore = findStore<GenericStore>("GuildChannelStore");
+export const ReadStateStore = findStore<GenericStore>("ReadStateStore");
+export const PresenceStore = findStore<GenericStore>("PresenceStore");
 
-export const GuildStore: t.GuildStore = findStore("GuildStore");
-export const UserStore: Stores.UserStore & t.FluxStore = findStore("UserStore");
-export const UserProfileStore: GenericStore = findStore("UserProfileStore");
-export const SelectedChannelStore: Stores.SelectedChannelStore & t.FluxStore = findStore("SelectedChannelStore");
-export const SelectedGuildStore: t.FluxStore & Record<string, any> = findStore("SelectedGuildStore");
-export const ChannelStore: Stores.ChannelStore & t.FluxStore = findStore("ChannelStore");
-export const GuildMemberStore: Stores.GuildMemberStore & t.FluxStore = findStore("GuildMemberStore");
+export const GuildStore = findStore<t.GuildStore>("GuildStore");
+export const UserStore = findStore<Stores.UserStore & t.FluxStore>("UserStore");
+export const UserProfileStore = findStore<GenericStore>("UserProfileStore");
+export const SelectedChannelStore = findStore<Stores.SelectedChannelStore & t.FluxStore>("SelectedChannelStore");
+export const SelectedGuildStore = findStore<GenericStore>("SelectedGuildStore");
+export const ChannelStore = findStore<Stores.ChannelStore & t.FluxStore>("ChannelStore");
+export const GuildMemberStore = findStore<Stores.GuildMemberStore & t.FluxStore>("GuildMemberStore");
 export const RelationshipStore = findStore("RelationshipStore") as Stores.RelationshipStore & t.FluxStore & {
     /** Get the date (as a string) that the relationship was created */
     getSince(userId: string): string;
 };
 
-export const EmojiStore: t.EmojiStore = findStore("EmojiStore");
-export const WindowStore: t.WindowStore = findStore("WindowStore");
-export const DraftStore: t.DraftStore = findStore("DraftStore");
+export const EmojiStore = findStore<t.EmojiStore>("EmojiStore");
+export const WindowStore = findStore<t.WindowStore>("WindowStore");
+export const DraftStore = findStore<t.DraftStore>("DraftStore");
 
 /**
  * React hook that returns stateful data for one or more stores

src/webpack/common/utils.ts

@@ -90,7 +90,6 @@ export const Toasts = {
     }
 };
 
-// This is the same module but this is easier
 waitFor(filters.byCode("showToast"), m => {
     Toasts.show = m.showToast;
     Toasts.pop = m.popToast;