adds script that generates fake locale, and modifies React to load it

app/javascript/mastodon/locales/gen-longest.ts

@@ -0,0 +1,44 @@
+import { writeFile, glob } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+async function main() {
+  const locales: Record<string, Record<string, string>> = {};
+  const localeLoader = glob('*.json', { cwd: __dirname });
+  for await (const path of localeLoader) {
+    const locale = path.replace('.json', '');
+    // @ts-expect-error -- with: { type: 'json' } is not by the tsconfig but we use TSX.
+    const { default: content } = (await import(`./${path}`, {
+      with: { type: 'json' },
+    })) as { default: Record<string, string> };
+    locales[locale] = content;
+  }
+
+  const mainLocale = locales.en;
+  if (!mainLocale) {
+    throw new Error('en.json not found');
+  }
+
+  const longest: Record<string, string> = {};
+  for (const [key, enString] of Object.entries(mainLocale)) {
+    let longestString = enString;
+
+    for (const localeStrings of Object.values(locales)) {
+      const localeString = localeStrings[key];
+      if (localeString && localeString.length > longestString.length) {
+        longestString = localeString;
+      }
+    }
+
+    longest[key] = longestString;
+  }
+
+  await writeFile(
+    resolve(__dirname, 'xx.json'),
+    JSON.stringify(longest, null, 2),
+  );
+}
+
+main().catch((error: unknown) => {
+  console.error(error);
+  process.exit(1);
+});

app/javascript/mastodon/locales/load_locale.ts

@@ -1,5 +1,7 @@
 import { Semaphore } from 'async-mutex';
 
+import { isDevelopment } from '../utils/environment';
+
 import type { LocaleData } from './global_locale';
 import { isLocaleLoaded, setLocale } from './global_locale';
 
@@ -11,7 +13,10 @@ const localeFiles = import.meta.glob<{ default: LocaleData['messages'] }>([
 
 export async function loadLocale() {
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want to match empty strings
-  const locale = document.querySelector<HTMLElement>('html')?.lang || 'en';
+  let locale = document.querySelector<HTMLElement>('html')?.lang || 'en';
+  if (window.location.hash === '#lang-xx' && isDevelopment()) {
+    locale = 'xx';
+  }
 
   // We use a Semaphore here so only one thing can try to load the locales at
   // the same time. If one tries to do it while its in progress, it will wait