web: the return of pseudolocalization (#7190)

* web: the return of pseudolocalization

The move to lit-locale lost the ability to automagically pseudolocalize the UI, a useful
utility for checking that additions to the UI have been properly cataloged as
translation targets.  This short script (barely 40 lines) digs deep into the lit-localize
toolkit and produces a pretranslated translation bundle in the target format folder.

* Linted, prettied, and commented.

web/.gitignore

@@ -109,3 +109,5 @@ temp/
 # End of https://www.gitignore.io/api/node
 api/**
 storybook-static/
+scripts/*.mjs
+scripts/*.js

web/package-lock.json

@@ -84,6 +84,7 @@
                 "lit-analyzer": "^1.2.1",
                 "npm-run-all": "^4.1.5",
                 "prettier": "^3.0.3",
+                "pseudolocale": "^2.0.0",
                 "pyright": "^1.1.331",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
@@ -19295,6 +19296,30 @@
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
             "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
         },
+        "node_modules/pseudolocale": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/pseudolocale/-/pseudolocale-2.0.0.tgz",
+            "integrity": "sha512-g1K9tCQYY4e3UGtnW8qs3kGWAOONxt7i5wuOFvf3N1EIIRhiLVIhZ9AM/ZyGTxsp231JbFywJU/EbJ5ZoqnZdg==",
+            "dev": true,
+            "dependencies": {
+                "commander": "^10.0.0"
+            },
+            "bin": {
+                "pseudolocale": "dist/cli.mjs"
+            },
+            "engines": {
+                "node": ">=16.0.0"
+            }
+        },
+        "node_modules/pseudolocale/node_modules/commander": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+            "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+            "dev": true,
+            "engines": {
+                "node": ">=14"
+            }
+        },
         "node_modules/pump": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

web/package.json

@@ -21,6 +21,9 @@
         "precommit": "run-s tsc lit-analyse lint:precommit lint:spelling prettier",
         "prettier-check": "prettier --check .",
         "prettier": "prettier --write .",
+        "pseudolocalize:build-extract-script": "cd scripts && tsc --esModuleInterop --module es2020 --moduleResolution 'node' pseudolocalize.ts && mv pseudolocalize.js pseudolocalize.mjs",
+        "pseudolocalize:extract": "node scripts/pseudolocalize.mjs",
+        "pseudolocalize": "run-s pseudolocalize:build-extract-script pseudolocalize:extract",
         "tsc:execute": "tsc --noEmit -p .",
         "tsc": "run-s build-locales tsc:execute",
         "storybook": "storybook dev -p 6006",
@@ -102,6 +105,7 @@
         "lit-analyzer": "^1.2.1",
         "npm-run-all": "^4.1.5",
         "prettier": "^3.0.3",
+        "pseudolocale": "^2.0.0",
         "pyright": "^1.1.331",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

web/scripts/pseudolocalize.ts

@@ -0,0 +1,47 @@
+import { readFileSync } from "fs";
+import path from "path";
+import pseudolocale from "pseudolocale";
+import { fileURLToPath } from "url";
+
+import { makeFormatter } from "@lit/localize-tools/lib/formatters/index.js";
+import type { Message, ProgramMessage } from "@lit/localize-tools/lib/messages.d.ts";
+import { sortProgramMessages } from "@lit/localize-tools/lib/messages.js";
+import { TransformLitLocalizer } from "@lit/localize-tools/lib/modes/transform.js";
+import type { Config } from "@lit/localize-tools/lib/types/config.d.ts";
+import type { Locale } from "@lit/localize-tools/lib/types/locale.d.ts";
+import type { TransformOutputConfig } from "@lit/localize-tools/lib/types/modes.d.ts";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const pseudoLocale: Locale = "pseudo-LOCALE" as Locale;
+const targetLocales: Locale[] = [pseudoLocale];
+const baseConfig = JSON.parse(readFileSync(path.join(__dirname, "../lit-localize.json"), "utf-8"));
+
+// Need to make some internal specifications to satisfy the transformer. It doesn't actually matter
+// which Localizer we use (transformer or runtime), because all of the functionality we care about
+// is in their common parent class, but I had to pick one.  Everything else here is just pure
+// exploitation of the lit/localize-tools internals.
+
+const config: Config = {
+    ...baseConfig,
+    baseDir: path.join(__dirname, ".."),
+    targetLocales,
+    output: {
+        ...baseConfig,
+        mode: "transform",
+    },
+    resolve: (path: string) => path,
+} as Config;
+
+const pseudoMessagify = (message: ProgramMessage) => ({
+    name: message.name,
+    contents: message.contents.map((content) =>
+        typeof content === "string" ? pseudolocale(content, { prepend: "", append: "" }) : content,
+    ),
+});
+
+const localizer = new TransformLitLocalizer(config as Config & { output: TransformOutputConfig });
+const { messages } = localizer.extractSourceMessages();
+const translations = messages.map(pseudoMessagify);
+const sorted = sortProgramMessages([...messages]);
+const formatter = makeFormatter(config);
+formatter.writeOutput(sorted, new Map<Locale, Message[]>([[pseudoLocale, translations]]));

web/src/elements/ak-locale-context/definitions.ts

@@ -35,6 +35,11 @@ export { enLocale };
 // - Text Label
 // - Locale loader.
 
+// prettier-ignore
+const debug: LocaleRow = [
+    "pseudo-LOCALE",  /^pseudo/i,  () => msg("Pseudolocale (for testing)"),  async () => await import("@goauthentik/locales/pseudo-LOCALE"),
+];
+
 // prettier-ignore
 const LOCALE_TABLE: LocaleRow[] = [
     ["en",      /^en([_-]|$)/i,      () => msg("English"),               async () => await import("@goauthentik/locales/en")],
@@ -46,6 +51,7 @@ const LOCALE_TABLE: LocaleRow[] = [
     ["zh-Hant", /^zh[_-](HK|Hant)/i, () => msg("Chinese (traditional)"), async () => await import("@goauthentik/locales/zh-Hant")],
     ["zh_TW",   /^zh[_-]TW$/i,       () => msg("Taiwanese Mandarin"),    async () => await import("@goauthentik/locales/zh_TW")],
     ["zh-Hans", /^zh(\b|_)/i,        () => msg("Chinese (simplified)"),  async () => await import("@goauthentik/locales/zh-Hans")],
+    debug
 ];
 
 export const LOCALES: AkLocale[] = LOCALE_TABLE.map(([code, match, label, locale]) => ({