Fix i18n usage

src/components/Icons.tsx

@@ -18,9 +18,8 @@
 
 import "./iconStyles.css";
 
-import { getTheme, Theme } from "@utils/discord";
+import { getIntlMessage, getTheme, Theme } from "@utils/discord";
 import { classes } from "@utils/misc";
-import { i18n } from "@webpack/common";
 import type { PropsWithChildren } from "react";
 
 interface BaseIconProps extends IconProps {
@@ -133,7 +132,7 @@ export function InfoIcon(props: IconProps) {
 export function OwnerCrownIcon(props: IconProps) {
     return (
         <Icon
-            aria-label={i18n.Messages.GUILD_OWNER}
+            aria-label={getIntlMessage("GUILD_OWNER")}
             {...props}
             className={classes(props.className, "vc-owner-crown-icon")}
             role="img"

src/debug/loadLazyChunks.ts

@@ -31,9 +31,7 @@ export async function loadLazyChunks() {
             const lazyChunks = factoryCode.matchAll(LazyChunkRegex);
             const validChunkGroups = new Set<[chunkIds: number[], entryPoint: number]>();
 
-            // Workaround for a chunk that depends on the ChannelMessage component but may be be force loaded before
+            const shouldForceDefer = false;
-            // the chunk containing the component
-            const shouldForceDefer = factoryCode.includes(".Messages.GUILD_FEED_UNFEATURE_BUTTON_TEXT");
 
             await Promise.all(Array.from(lazyChunks).map(async ([, rawChunkIds, entryPoint]) => {
                 const chunkIds = rawChunkIds ? Array.from(rawChunkIds.matchAll(Webpack.ChunkIdsRegex)).map(m => Number(m[1])) : [];

src/plugins/betterFolders/index.tsx

@@ -18,9 +18,10 @@
 
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
-import { FluxDispatcher, i18n, useMemo } from "@webpack/common";
+import { FluxDispatcher, useMemo } from "@webpack/common";
 
 import FolderSideBar from "./FolderSideBar";
 
@@ -276,7 +277,7 @@ export default definePlugin({
     makeGuildsBarGuildListFilter(isBetterFolders: boolean) {
         return child => {
             if (isBetterFolders) {
-                return child?.props?.["aria-label"] === i18n.Messages.SERVERS;
+                return child?.props?.["aria-label"] === getIntlMessage("SERVERS");
             }
             return true;
         };

src/plugins/betterSettings/PluginsSubmenu.tsx

@@ -5,8 +5,9 @@
  */
 
 import { openPluginModal } from "@components/PluginSettings/PluginModal";
+import { getIntlMessage } from "@utils/discord";
 import { isObjectEmpty } from "@utils/misc";
-import { Alerts, i18n, Menu, useMemo, useState } from "@webpack/common";
+import { Alerts, Menu, useMemo, useState } from "@webpack/common";
 
 import Plugins from "~plugins";
 
@@ -48,7 +49,7 @@ export default function PluginsSubmenu() {
                         query={query}
                         onChange={setQuery}
                         ref={ref}
-                        placeholder={i18n.Messages.SEARCH}
+                        placeholder={getIntlMessage("SEARCH")}
                     />
                 )}
             />

src/plugins/betterSettings/index.tsx

@@ -7,10 +7,11 @@
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { waitFor } from "@webpack";
-import { ComponentDispatch, FocusLock, i18n, Menu, useEffect, useRef } from "@webpack/common";
+import { ComponentDispatch, FocusLock, Menu, useEffect, useRef } from "@webpack/common";
 import type { HTMLAttributes, ReactElement } from "react";
 
 import PluginsSubmenu from "./PluginsSubmenu";
@@ -159,7 +160,7 @@ export default definePlugin({
             if (item.section === "HEADER") {
                 items.push({ label: item.label, items: [] });
             } else if (item.section === "DIVIDER") {
-                items.push({ label: i18n.Messages.OTHER_OPTIONS, items: [] });
+                items.push({ label: getIntlMessage("OTHER_OPTIONS"), items: [] });
             } else {
                 items.at(-1)!.items.push(item);
             }

src/plugins/decor/ui/components/DecorationGridCreate.tsx

@@ -5,7 +5,8 @@
  */
 
 import { PlusIcon } from "@components/Icons";
-import { i18n, Text } from "@webpack/common";
+import { getIntlMessage } from "@utils/discord";
+import { Text } from "@webpack/common";
 import { HTMLProps } from "react";
 
 import { DecorationGridItem } from ".";
@@ -24,7 +25,7 @@ export default function DecorationGridCreate(props: DecorationGridCreateProps) {
             variant="text-xs/normal"
             color="header-primary"
         >
-            {i18n.Messages.CREATE}
+            {getIntlMessage("CREATE")}
         </Text>
     </DecorationGridItem >;
 }

src/plugins/decor/ui/components/DecorationGridNone.tsx

@@ -5,7 +5,8 @@
  */
 
 import { NoEntrySignIcon } from "@components/Icons";
-import { i18n, Text } from "@webpack/common";
+import { getIntlMessage } from "@utils/discord";
+import { Text } from "@webpack/common";
 import { HTMLProps } from "react";
 
 import { DecorationGridItem } from ".";
@@ -24,7 +25,7 @@ export default function DecorationGridNone(props: DecorationGridNoneProps) {
             variant="text-xs/normal"
             color="header-primary"
         >
-            {i18n.Messages.NONE}
+            {getIntlMessage("NONE")}
         </Text>
     </DecorationGridItem >;
 }

src/plugins/fullSearchContext/index.tsx

@@ -19,10 +19,11 @@
 import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { migratePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import { NoopComponent } from "@utils/react";
 import definePlugin from "@utils/types";
 import { filters, findByPropsLazy, waitFor } from "@webpack";
-import { ChannelStore, ContextMenuApi, i18n, UserStore } from "@webpack/common";
+import { ChannelStore, ContextMenuApi, UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 const { useMessageMenu } = findByPropsLazy("useMessageMenu");
@@ -41,7 +42,7 @@ function MessageMenu({ message, channel, onHeightUpdate }) {
 
     return useMessageMenu({
         navId: "message-actions",
-        ariaLabel: i18n.Messages.MESSAGE_UTILITIES_A11Y_LABEL,
+        ariaLabel: getIntlMessage("MESSAGE_UTILITIES_A11Y_LABEL"),
 
         message,
         channel,
@@ -72,7 +73,7 @@ const contextMenuPatch: NavContextMenuPatchCallback = (children, props: MessageA
 
     const group = findGroupChildrenByChildId("devmode-copy-id", children, true);
     group?.push(
-        CopyIdMenuItem({ id: props.message.author.id, label: i18n.Messages.COPY_ID_AUTHOR })
+        CopyIdMenuItem({ id: props.message.author.id, label: getIntlMessage("COPY_ID_AUTHOR") })
     );
 };
 

src/plugins/messageLogger/index.tsx

@@ -24,12 +24,13 @@ import { Settings } from "@api/Settings";
 import { disableStyle, enableStyle } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import { proxyLazy } from "@utils/lazy";
 import { Logger } from "@utils/Logger";
 import { classes } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy, findByPropsLazy } from "@webpack";
-import { ChannelStore, FluxDispatcher, i18n, Menu, MessageStore, Parser, SelectedChannelStore, Timestamp, UserStore, useStateFromStores } from "@webpack/common";
+import { ChannelStore, FluxDispatcher, Menu, MessageStore, Parser, SelectedChannelStore, Timestamp, UserStore, useStateFromStores } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 import overlayStyle from "./deleteStyleOverlay.css?managed";
@@ -178,7 +179,7 @@ export default definePlugin({
                             isEdited={true}
                             isInline={false}
                         >
-                            <span className={styles.edited}>{" "}({i18n.Messages.MESSAGE_EDITED})</span>
+                            <span className={styles.edited}>{" "}({getIntlMessage("MESSAGE_EDITED")})</span>
                         </Timestamp>
                     </div>
                 ))}

src/plugins/pauseInvitesForever/index.tsx

@@ -18,8 +18,9 @@
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import definePlugin from "@utils/types";
-import { Constants, GuildStore, i18n, RestAPI } from "@webpack/common";
+import { Constants, GuildStore, RestAPI } from "@webpack/common";
 
 function showDisableInvites(guildId: string) {
     // @ts-ignore
@@ -61,7 +62,7 @@ export default definePlugin({
     renderInvitesLabel: ErrorBoundary.wrap(({ guildId, setChecked }) => {
         return (
             <div>
-                {i18n.Messages.GUILD_INVITE_DISABLE_ACTION_SHEET_DESCRIPTION}
+                {getIntlMessage("GUILD_INVITE_DISABLE_ACTION_SHEET_DESCRIPTION")}
                 {showDisableInvites(guildId) && <a role="button" onClick={() => {
                     setChecked(true);
                     disableInvites(guildId);

src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx

@@ -19,10 +19,10 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { InfoIcon, OwnerCrownIcon } from "@components/Icons";
-import { getUniqueUsername } from "@utils/discord";
+import { getIntlMessage, getUniqueUsername } from "@utils/discord";
 import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { findByCodeLazy } from "@webpack";
-import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
+import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, Menu, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
 import { UnicodeEmoji } from "@webpack/types";
 import type { Guild, Role, User } from "discord-types/general";
 
@@ -216,7 +216,7 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
         >
             <Menu.MenuItem
                 id={cl("copy-role-id")}
-                label={i18n.Messages.COPY_ID_ROLE}
+                label={getIntlMessage("COPY_ID_ROLE")}
                 action={() => {
                     Clipboard.copy(roleId);
                 }}
@@ -225,7 +225,7 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
             {(settings.store as any).unsafeViewAsRole && (
                 <Menu.MenuItem
                     id={cl("view-as-role")}
-                    label={i18n.Messages.VIEW_AS_ROLE}
+                    label={getIntlMessage("VIEW_AS_ROLE")}
                     action={() => {
                         const role = GuildStore.getRole(guild.id, roleId);
                         if (!role) return;
@@ -257,7 +257,7 @@ function UserContextMenu({ userId }: { userId: string; }) {
         >
             <Menu.MenuItem
                 id={cl("copy-user-id")}
-                label={i18n.Messages.COPY_ID_USER}
+                label={getIntlMessage("COPY_ID_USER")}
                 action={() => {
                     Clipboard.copy(userId);
                 }}

src/plugins/permissionsViewer/components/UserPermissions.tsx

@@ -18,9 +18,10 @@
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { ExpandableHeader } from "@components/ExpandableHeader";
+import { getIntlMessage } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { filters, findBulk, proxyLazyWebpack } from "@webpack";
-import { i18n, PermissionsBits, Text, Tooltip, useMemo, UserStore } from "@webpack/common";
+import { PermissionsBits, Text, Tooltip, useMemo, UserStore } from "@webpack/common";
 import type { Guild, GuildMember } from "discord-types/general";
 
 import { PermissionsSortOrder, settings } from "..";
@@ -105,7 +106,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
                 permissions: Object.values(PermissionsBits).reduce((prev, curr) => prev | curr, 0n)
             });
 
-            const OWNER = i18n.Messages.GUILD_OWNER || "Server Owner";
+            const OWNER = getIntlMessage("GUILD_OWNER") || "Server Owner";
             userPermissions.push({
                 permission: OWNER,
                 roleName: "Owner",

src/plugins/permissionsViewer/utils.ts

@@ -17,8 +17,9 @@
 */
 
 import { classNameFactory } from "@api/Styles";
+import { getIntlMessage } from "@utils/discord";
 import { wordsToTitle } from "@utils/text";
-import { GuildStore, i18n, Parser } from "@webpack/common";
+import { GuildStore, Parser } from "@webpack/common";
 import { Guild, GuildMember, Role } from "discord-types/general";
 import type { ReactNode } from "react";
 
@@ -44,7 +45,7 @@ const PermissionKeyMap = {
 export function getPermissionString(permission: string) {
     permission = PermissionKeyMap[permission] || permission;
 
-    return i18n.Messages[permission] ||
+    return getIntlMessage(permission) ||
         // shouldn't get here but just in case
         formatPermissionWithoutMatchingString(permission);
 }
@@ -58,7 +59,7 @@ export function getPermissionDescription(permission: string): ReactNode {
     else if (permission !== "STREAM")
         permission = PermissionKeyMap[permission] || permission;
 
-    const msg = i18n.Messages[`ROLE_PERMISSIONS_${permission}_DESCRIPTION`] as any;
+    const msg = getIntlMessage(`ROLE_PERMISSIONS_${permission}_DESCRIPTION`) as any;
     if (msg?.hasMarkdown)
         return Parser.parse(msg.message);
 

src/plugins/showConnections/VerifiedIcon.tsx

@@ -16,8 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { getIntlMessage } from "@utils/discord";
 import { findComponentByCodeLazy, findLazy } from "@webpack";
-import { i18n, useToken } from "@webpack/common";
+import { useToken } from "@webpack/common";
 
 const ColorMap = findLazy(m => m.colors?.INTERACTIVE_MUTED?.css);
 const VerifiedIconComponent = findComponentByCodeLazy("#{intl::CONNECTIONS_ROLE_OFFICIAL_ICON_TOOLTIP}");
@@ -31,7 +32,7 @@ export function VerifiedIcon() {
             color={color}
             forcedIconColor={forcedIconColor}
             size={16}
-            tooltipText={i18n.Messages.CONNECTION_VERIFIED}
+            tooltipText={getIntlMessage("CONNECTION_VERIFIED")}
         />
     );
 }

src/plugins/showTimeoutDuration/index.tsx

@@ -9,10 +9,11 @@ import "./styles.css";
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import { canonicalizeMatch } from "@utils/patches";
 import definePlugin, { OptionType } from "@utils/types";
 import { findComponentLazy } from "@webpack";
-import { ChannelStore, GuildMemberStore, i18n, Text, Tooltip } from "@webpack/common";
+import { ChannelStore, GuildMemberStore, Text, Tooltip } from "@webpack/common";
 import { Message } from "discord-types/general";
 import { FunctionComponent, ReactNode } from "react";
 
@@ -50,9 +51,14 @@ function renderTimeout(message: Message, inline: boolean) {
         />
     );
 
+    getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {
+        username: message.author.username,
+        countdown
+    });
+
     return inline
         ? countdown()
-        : i18n.Messages.GUILD_ENABLE_COMMUNICATION_TIME_REMAINING.format({
+        : getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {
             username: message.author.username,
             countdown
         });

src/plugins/typingIndicator/index.tsx

@@ -21,9 +21,10 @@ import "./style.css";
 import { definePluginSettings, Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
 import { findComponentByCodeLazy, findExportedComponentLazy, findStoreLazy } from "@webpack";
-import { ChannelStore, GuildMemberStore, i18n, RelationshipStore, SelectedChannelStore, Tooltip, UserStore, useStateFromStores } from "@webpack/common";
+import { ChannelStore, GuildMemberStore, RelationshipStore, SelectedChannelStore, Tooltip, UserStore, useStateFromStores } from "@webpack/common";
 
 import { buildSeveralUsers } from "../typingTweaks";
 
@@ -72,24 +73,26 @@ function TypingIndicator({ channelId }: { channelId: string; }) {
     const typingUsersArray = Object.keys(typingUsers).filter(id => id !== myId && !(RelationshipStore.isBlocked(id) && !settings.store.includeBlockedUsers));
     let tooltipText: string;
 
+    // the new syntax is getIntlMessage("ONE_USER_TYPING", { a: getDisplayName(guildId, typingUsersArray[0]) });
+
     switch (typingUsersArray.length) {
         case 0: break;
         case 1: {
-            tooltipText = i18n.Messages.ONE_USER_TYPING.format({ a: getDisplayName(guildId, typingUsersArray[0]) });
+            tooltipText = getIntlMessage("ONE_USER_TYPING", { a: getDisplayName(guildId, typingUsersArray[0]) });
             break;
         }
         case 2: {
-            tooltipText = i18n.Messages.TWO_USERS_TYPING.format({ a: getDisplayName(guildId, typingUsersArray[0]), b: getDisplayName(guildId, typingUsersArray[1]) });
+            tooltipText = getIntlMessage("TWO_USERS_TYPING", { a: getDisplayName(guildId, typingUsersArray[0]), b: getDisplayName(guildId, typingUsersArray[1]) });
             break;
         }
         case 3: {
-            tooltipText = i18n.Messages.THREE_USERS_TYPING.format({ a: getDisplayName(guildId, typingUsersArray[0]), b: getDisplayName(guildId, typingUsersArray[1]), c: getDisplayName(guildId, typingUsersArray[2]) });
+            tooltipText = getIntlMessage("THREE_USERS_TYPING", { a: getDisplayName(guildId, typingUsersArray[0]), b: getDisplayName(guildId, typingUsersArray[1]), c: getDisplayName(guildId, typingUsersArray[2]) });
             break;
         }
         default: {
             tooltipText = Settings.plugins.TypingTweaks.enabled
                 ? buildSeveralUsers({ a: getDisplayName(guildId, typingUsersArray[0]), b: getDisplayName(guildId, typingUsersArray[1]), count: typingUsersArray.length - 2 })
-                : i18n.Messages.SEVERAL_USERS_TYPING;
+                : getIntlMessage("SEVERAL_USERS_TYPING");
             break;
         }
     }

src/plugins/userMessagesPronouns/PronounsChatComponent.tsx

@@ -18,9 +18,10 @@
 
 import { getUserSettingLazy } from "@api/UserSettings";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { getIntlMessage } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { findByPropsLazy } from "@webpack";
-import { i18n, Tooltip, UserStore } from "@webpack/common";
+import { Tooltip, UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 import { settings } from "./settings";
@@ -44,7 +45,7 @@ function PronounsChatComponent({ message }: { message: Message; }) {
     const pronouns = useFormattedPronouns(message.author.id);
 
     return pronouns && (
-        <Tooltip text={i18n.Messages.USER_PROFILE_PRONOUNS}>
+        <Tooltip text={getIntlMessage("USER_PROFILE_PRONOUNS")}>
             {tooltipProps => (
                 <span
                     {...tooltipProps}

src/plugins/userVoiceShow/index.tsx

@@ -78,7 +78,7 @@ export default definePlugin({
         {
             find: "PrivateChannel.renderAvatar",
             replacement: {
-                match: /\.Messages\.CLOSE_DM.+?}\)(?=])/,
+                match: /#{intl::CLOSE_DM}.+?}\)(?=])/,
                 replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
             },
             predicate: () => settings.store.showVoiceChannelIndicator

src/plugins/viewRaw/index.tsx

@@ -23,11 +23,12 @@ import { CodeBlock } from "@components/CodeBlock";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { copyWithToast } from "@utils/misc";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, ChannelStore, Forms, i18n, Menu, Text } from "@webpack/common";
+import { Button, ChannelStore, Forms, Menu, Text } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 
@@ -122,7 +123,7 @@ function MakeContextCallback(name: "Guild" | "User" | "Channel"): NavContextMenu
     return (children, props) => {
         const value = props[name.toLowerCase()];
         if (!value) return;
-        if (props.label === i18n.Messages.CHANNEL_ACTIONS_MENU_LABEL) return; // random shit like notification settings
+        if (props.label === getIntlMessage("CHANNEL_ACTIONS_MENU_LABEL")) return; // random shit like notification settings
 
         const lastChild = children.at(-1);
         if (lastChild?.key === "developer-actions") {

src/utils/discord.tsx

@@ -31,7 +31,7 @@ import { MediaModalItem, MediaModalProps, openMediaModal } from "./modal";
  * @param key The plain message key
  * @param values The values to interpolate, if it's a rich message
  */
-export function getIntlMessage(key: string, values?: Record<PropertyKey, any>): string {
+export function getIntlMessage(key: string, values?: Record<PropertyKey, any>): any {
     return getIntlMessageFromHash(runtimeHashMessageKey(key), values);
 }
 
@@ -40,7 +40,7 @@ export function getIntlMessage(key: string, values?: Record<PropertyKey, any>):
  * @param key The hashed message key
  * @param values The values to interpolate, if it's a rich message
  */
-export function getIntlMessageFromHash(key: string, values?: Record<PropertyKey, any>): string {
+export function getIntlMessageFromHash(key: string, values?: Record<PropertyKey, any>): any {
     return values == null ? i18n.intl.string(i18n.t[key]) : i18n.intl.format(i18n.t[key], values);
 }