Chore: Remove pseudoizer and use i18next-pseudo instead (#101690)

* Remove pseudoizer and use i18next-pseudo instead

* Remove pseudo.mjs script

* Conditionally add pseudo post processing to i18n config

* Remove pseudo-locale in favour of post processing

* Add wrapped property to pseudo strings

Makefile

@@ -131,14 +131,12 @@ else
 i18n-extract-enterprise:
 	@echo "Extracting i18n strings for Enterprise"
 	yarn run i18next --config public/locales/i18next-parser-enterprise.config.cjs
-	node ./public/locales/pseudo.mjs --mode enterprise
 endif
 
 .PHONY: i18n-extract
 i18n-extract: i18n-extract-enterprise
 	@echo "Extracting i18n strings for OSS"
 	yarn run i18next --config public/locales/i18next-parser.config.cjs
-	node ./public/locales/pseudo.mjs --mode oss
 
 ##@ Building
 .PHONY: gen-cue

package.json

@@ -223,7 +223,6 @@
     "postcss-reporter": "7.1.0",
     "postcss-scss": "4.0.9",
     "prettier": "3.4.2",
-    "pseudoizer": "^0.1.0",
     "react-refresh": "0.14.0",
     "react-select-event": "5.5.1",
     "redux-mock-store": "1.5.5",
@@ -336,6 +335,7 @@
     "history": "4.10.1",
     "i18next": "^24.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-pseudo": "^2.2.1",
     "immer": "10.1.1",
     "immutable": "5.0.3",
     "ix": "^7.0.0",

packages/grafana-ui/src/utils/i18n.tsx

@@ -20,6 +20,23 @@ function initI18n() {
       resources: {},
       returnEmptyString: false,
       lng: 'en-US', // this should be the locale of the phrases in our source JSX
+      postProcess: [
+        // Add pseudo processing even if we aren't necessarily going to use it
+        'pseudo',
+      ],
+    });
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    import('i18next-pseudo').then((module) => {
+      const Pseudo = module.default;
+      i18next.use(
+        new Pseudo({
+          languageToPseudo: 'pseudo',
+          enabled: true,
+          wrapped: true,
+        })
+      );
     });
   }
 }

public/app/core/internationalization/constants.ts

@@ -79,7 +79,9 @@ if (process.env.NODE_ENV === 'development') {
     code: PSEUDO_LOCALE,
     name: 'Pseudo-locale',
     loader: {
-      grafana: () => import('../../../locales/pseudo-LOCALE/grafana.json'),
+      // Load the English locale as the pseudo-locale,
+      // as it will be post-processed by i18next-pseudo library
+      grafana: () => import('../../../locales/en-US/grafana.json'),
     },
   });
 }

public/locales/pseudo.mjs

@@ -1,63 +0,0 @@
-// @ts-check
-import { readFile, writeFile } from 'fs/promises';
-import { format } from 'prettier';
-import { pseudoize } from 'pseudoizer';
-import { hideBin } from 'yargs/helpers';
-import yargs from 'yargs/yargs';
-
-const argv = await yargs(hideBin(process.argv))
-  .option('mode', {
-    demandOption: true,
-    describe: 'Path to a template to use for each issue. See source bettererIssueTemplate.md for an example',
-    type: 'string',
-    choices: ['oss', 'enterprise', 'both'],
-  })
-  .version(false).argv;
-
-const extractOSS = ['oss', 'both'].includes(argv.mode);
-const extractEnterprise = ['enterprise', 'both'].includes(argv.mode);
-
-/**
- * @param {string} key
- * @param {unknown} value
- */
-function pseudoizeJsonReplacer(key, value) {
-  if (typeof value === 'string') {
-    // Split string on brace-enclosed segments. Odd indices will be {{variables}}
-    const phraseParts = value.split(/(\{\{[^}]+}\})/g);
-    const translatedParts = phraseParts.map((str, index) => (index % 2 ? str : pseudoize(str)));
-    return translatedParts.join('');
-  }
-
-  return value;
-}
-/**
- * @param {string} inputPath
- * @param {string} outputPath
- */
-async function pseudoizeJson(inputPath, outputPath) {
-  const baseJson = await readFile(inputPath, 'utf-8');
-  const enMessages = JSON.parse(baseJson);
-  const pseudoJson = JSON.stringify(enMessages, pseudoizeJsonReplacer, 2);
-  const prettyPseudoJson = await format(pseudoJson, {
-    parser: 'json',
-  });
-
-  await writeFile(outputPath, prettyPseudoJson);
-  console.log('Wrote', outputPath);
-}
-
-//
-// OSS translations
-if (extractOSS) {
-  await pseudoizeJson('./public/locales/en-US/grafana.json', './public/locales/pseudo-LOCALE/grafana.json');
-}
-
-//
-// Enterprise translations
-if (extractEnterprise) {
-  await pseudoizeJson(
-    './public/app/extensions/locales/en-US/grafana-enterprise.json',
-    './public/app/extensions/locales/pseudo-LOCALE/grafana-enterprise.json'
-  );
-}

yarn.lock

@@ -18246,6 +18246,7 @@ __metadata:
     i18next: "npm:^24.0.0"
     i18next-browser-languagedetector: "npm:^8.0.0"
     i18next-parser: "npm:9.3.0"
+    i18next-pseudo: "npm:^2.2.1"
     immer: "npm:10.1.1"
     immutable: "npm:5.0.3"
     ini: "npm:^5.0.0"
@@ -18301,7 +18302,6 @@ __metadata:
     postcss-scss: "npm:4.0.9"
     prettier: "npm:3.4.2"
     prismjs: "npm:1.29.0"
-    pseudoizer: "npm:^0.1.0"
     rc-slider: "npm:11.1.8"
     rc-tree: "npm:5.13.0"
     re-resizable: "npm:6.10.3"
@@ -19118,6 +19118,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next-pseudo@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "i18next-pseudo@npm:2.2.1"
+  dependencies:
+    i18next: "npm:^19.1.0"
+  checksum: 10/4eeec03540c6e9bb823b804cffcb2b95555b0a1d185e0287c74d2deaf7e6bfa206b0223d69db4fbe7b90c66faba451737b06151c85708afd2c5e9502adf817b2
+  languageName: node
+  linkType: hard
+
+"i18next@npm:^19.1.0":
+  version: 19.9.2
+  resolution: "i18next@npm:19.9.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.0"
+  checksum: 10/a3b8da898edf74257984821b8eaf11929db4cab2c123dadad05c641af98bfcf94ddddee951d091e45f6f7510db47294f4d67134906b1dd82f144f01534153710
+  languageName: node
+  linkType: hard
+
 "i18next@npm:^23.0.0, i18next@npm:^23.11.5":
   version: 23.16.8
   resolution: "i18next@npm:23.16.8"
@@ -25369,13 +25387,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pseudoizer@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "pseudoizer@npm:0.1.0"
-  checksum: 10/fd3fa95ea4f330f268cad2388f3829e4c29249e7ffea970467b9123f1ef2a81334e92425c5cad0c72ab04c320203501b65ae86aa8d88320b63e0e75e944c6e76
-  languageName: node
-  linkType: hard
-
 "psl@npm:^1.1.33":
   version: 1.9.0
   resolution: "psl@npm:1.9.0"