feat: top level hax

src/components/PluginSettings/index.tsx

@@ -33,7 +33,6 @@ import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
 import { openModalLazy } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
-import { lowercaseify } from "@utils/text";
 import { $t } from "@utils/translation";
 import { Plugin } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
@@ -154,7 +153,7 @@ export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, on
     return (
         <AddonCard
             name={plugin.name}
-            description={$t(`${lowercaseify(plugin.name)}.description`)}
+            description={plugin.description}
             isNew={isNew}
             enabled={isEnabled()}
             setEnabled={toggleEnabled}

src/utils/text.ts

@@ -37,8 +37,6 @@ export const wordsToPascal = (words: string[]) =>
 export const wordsToTitle = (words: string[]) =>
     words.map(w => w[0].toUpperCase() + w.slice(1)).join(" ");
 
-export const lowercaseify = (text: string) => text[0].toLowerCase() + text.slice(1);
-
 const units = ["years", "months", "weeks", "days", "hours", "minutes", "seconds"] as const;
 type Units = typeof units[number];
 

src/utils/translation.tsx

@@ -107,26 +107,40 @@ function _t(key: string, bundle: any): Translation {
  * @returns A translated string.
  */
 export function $t(key: string, variables?: Record<string, any>): string {
-    const translation = _t(key, loadedLocale);
+    const getter = (): string => {
+        const translation = _t(key, loadedLocale);
 
-    if (typeof translation !== "string") {
+        if (typeof translation !== "string") {
-        if (!variables || !variables.count) throw new Error(`translation key ${key} is an object (requires plurality?)`);
+            if (!variables || !variables.count) throw new Error(`translation key ${key} is an object (requires plurality?)`);
 
-        if (variables.count) {
+            if (variables.count) {
-            const pluralTag: Intl.LDMLPluralRule = variables.count === 0 ? "zero" :
+                const pluralTag: Intl.LDMLPluralRule = variables.count === 0 ? "zero" :
-                new Intl.PluralRules(bestLocale).select(variables.count);
+                    new Intl.PluralRules(bestLocale).select(variables.count);
 
-            if (translation[pluralTag]) {
+                if (translation[pluralTag]) {
-                return format(translation[pluralTag]!, variables);
+                    return format(translation[pluralTag]!, variables);
-            } else {
+                } else {
-                return format(translation.other, variables);
+                    return format(translation.other, variables);
+                }
             }
         }
-    }
 
-    if (!variables) return translation as string;
+        if (!variables) return translation as string;
 
-    return format(translation as string, variables);
+        return format(translation as string, variables);
+    };
+
+    // top level support hax (thank you vee!!)
+    // tl;dr: this lets you use $t at the top level in objects by simulating a string, a la:
+    // {
+    //    description: $t("clientTheme.description")
+    // }
+    // and any future accesses of the description prop will result in an up to date translation
+    return {
+        __proto__: String.prototype,
+        valueOf: getter,
+        toString: getter
+    } as unknown as string;
 }
 
 interface TranslateProps {