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.
This commit is contained in:
Ken Sternberg 2023-10-16 13:54:43 -07:00 committed by GitHub
parent 0697e3d5a4
commit 9e568e1e85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1674 additions and 4 deletions

2
web/.gitignore vendored
View File

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

25
web/package-lock.json generated
View File

@ -84,6 +84,7 @@
"lit-analyzer": "^1.2.1", "lit-analyzer": "^1.2.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prettier": "^3.0.3", "prettier": "^3.0.3",
"pseudolocale": "^2.0.0",
"pyright": "^1.1.331", "pyright": "^1.1.331",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^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", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" "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": { "node_modules/pump": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

View File

@ -21,6 +21,9 @@
"precommit": "run-s tsc lit-analyse lint:precommit lint:spelling prettier", "precommit": "run-s tsc lit-analyse lint:precommit lint:spelling prettier",
"prettier-check": "prettier --check .", "prettier-check": "prettier --check .",
"prettier": "prettier --write .", "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:execute": "tsc --noEmit -p .",
"tsc": "run-s build-locales tsc:execute", "tsc": "run-s build-locales tsc:execute",
"storybook": "storybook dev -p 6006", "storybook": "storybook dev -p 6006",
@ -102,6 +105,7 @@
"lit-analyzer": "^1.2.1", "lit-analyzer": "^1.2.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prettier": "^3.0.3", "prettier": "^3.0.3",
"pseudolocale": "^2.0.0",
"pyright": "^1.1.331", "pyright": "^1.1.331",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

View File

@ -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]]));

View File

@ -35,6 +35,11 @@ export { enLocale };
// - Text Label // - Text Label
// - Locale loader. // - Locale loader.
// prettier-ignore
const debug: LocaleRow = [
"pseudo-LOCALE", /^pseudo/i, () => msg("Pseudolocale (for testing)"), async () => await import("@goauthentik/locales/pseudo-LOCALE"),
];
// prettier-ignore // prettier-ignore
const LOCALE_TABLE: LocaleRow[] = [ const LOCALE_TABLE: LocaleRow[] = [
["en", /^en([_-]|$)/i, () => msg("English"), async () => await import("@goauthentik/locales/en")], ["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-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_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")], ["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]) => ({ export const LOCALES: AkLocale[] = LOCALE_TABLE.map(([code, match, label, locale]) => ({

File diff suppressed because it is too large Load Diff