Split translations between EW and shared components (#31441)

* Split translations between EW and shared components

Uses update module API with global TranslationKey type that can be
overridden.

WIP.

* Removed the wrong script (for now)

* Add the type files

* Add shared components i18n file

* More i18n strings

* Add i18n check for shared conmponents

* Needs a different name

* rerun i18n for merge from develop, fix test

* Move translated strings to shared components file

NB. there are lots of removed strings for a few languages where we
seem to have hit a localazy bug or something where the key/value
for plurals got switched, making the translations invalid. They've
been missing for a while so I'm removing them rather than trying to
restore them,

* Add shared components files to localazy

* Merge element web & shared component translations

for the built app

* Use right translations for shared component tests

and fix missign en_EN strings

* Pull shared components translations too

* Fix/disable warnings

* We can now remove the build:res call

...right? (right?)

* Remove webpack import for languages index

..and just load it using a relative path which we do for the individual
language files and also did anyway for the index because even in non-test
it was an object, not a string, so we always usesd the 'test' code path.

* Make the storybook language selector work

...without referring to the parent app's files

* Revert unnecessary yarn lock change

* Typo

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment on why we use merge

* Fix localazy download config

to actually put the translations in the right place

* Better typescript syntax

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Watch both translations files

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

scripts/copy-res.ts

@@ -9,8 +9,10 @@ import _ from "lodash";
 import webpack from "webpack";
 import type { Translations } from "matrix-web-i18n";
 
-const I18N_BASE_PATH = "src/i18n/strings/";
-const INCLUDE_LANGS = [...new Set([...fs.readdirSync(I18N_BASE_PATH)])]
+const EW_I18N_BASE_PATH = "src/i18n/strings/";
+const SC_I18N_BASE_PATH = "packages/shared-components/src/i18n/strings/";
+
+const INCLUDE_LANGS = [...new Set([...fs.readdirSync(EW_I18N_BASE_PATH)])]
     .filter((fn) => fn.endsWith(".json"))
     .map((f) => f.slice(0, -5));
 
@@ -41,11 +43,17 @@ const logWatch = (path: string) => {
     }
 };
 
-function prepareLangFile(lang: string, dest: string): [filename: string, json: string] {
-    const path = I18N_BASE_PATH + lang + ".json";
+/*
+ * Make a JSON language file for the given language by merging all translations
+ * into a single file (ie. element-web and shared-components).
+ * Returns the filename (including hash) and JSON content.
+ */
+function prepareLangFile(lang: string): [filename: string, json: string] {
+    const ewTranslationsPath = EW_I18N_BASE_PATH + lang + ".json";
+    const scTranslationsPath = SC_I18N_BASE_PATH + lang + ".json";
 
     let translations: Translations = {};
-    [path].forEach(function (f) {
+    [ewTranslationsPath, scTranslationsPath].forEach(function (f) {
         if (fs.existsSync(f)) {
             try {
                 translations = _.merge(translations, JSON.parse(fs.readFileSync(f).toString()));
@@ -99,7 +107,8 @@ function genLangList(langFileMap: Record<string, string>): void {
  * and regenerating languages.json with the new filename
  */
 function watchLanguage(lang: string, dest: string, langFileMap: Record<string, string>): void {
-    const path = I18N_BASE_PATH + lang + ".json";
+    const ewTranslationsPath = EW_I18N_BASE_PATH + lang + ".json";
+    const scTranslationsPath = SC_I18N_BASE_PATH + lang + ".json";
 
     // XXX: Use a debounce because for some reason if we read the language
     // file immediately after the FS event is received, the file contents
@@ -110,14 +119,14 @@ function watchLanguage(lang: string, dest: string, langFileMap: Record<string, s
             clearTimeout(makeLangDebouncer);
         }
         makeLangDebouncer = setTimeout(() => {
-            const [filename, json] = prepareLangFile(lang, dest);
+            const [filename, json] = prepareLangFile(lang);
             genLangFile(dest, filename, json);
             langFileMap[lang] = filename;
             genLangList(langFileMap);
         }, 500);
     };
 
-    [path].forEach(function (f) {
+    [ewTranslationsPath, scTranslationsPath].forEach(function (f) {
         chokidar
             .watch(f, { ignoreInitial: true })
             .on("ready", () => {
@@ -132,7 +141,7 @@ function watchLanguage(lang: string, dest: string, langFileMap: Record<string, s
 // language resources
 const I18N_DEST = "webapp/i18n/";
 const I18N_FILENAME_MAP = INCLUDE_LANGS.reduce<Record<string, string>>((m, l) => {
-    const [filename, json] = prepareLangFile(l, I18N_DEST);
+    const [filename, json] = prepareLangFile(l);
     if (!watch) {
         genLangFile(I18N_DEST, filename, json);
     }