does not work

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "build": "npm run vers && npm run build:css && npm run extract && npm run build:i18n && npm run build:prod && npm run build:dev",
+    "clean": "rm umd/* && rm css/base.min.css && rm i18n.min/*",
     "build:css": "postcss css/base.css > css/base.min.css",
     "build:dev": "webpack --mode development",
     "build:prod": "webpack --mode production",

scripts/i18n.js

@@ -9,10 +9,10 @@ const mkdirpSync = require('mkdirp').sync;
 
 const EXTRACTED_STRINGS = './src/i18n/ex/base-en.json';
 const BASE_LANG        = 'en';
-const LANG_DIR         = './src/i18n/';
 const LANG_PATTERN     = './src/i18n/*.json';
 const LANG_PATTERN_ONE = './src/i18n/%s.json';
 const FINAL_FILE       = './src/messages.json';
+const OUTPUT_PATTERN   = './src/i18n.min/%s.json';
 
 const args = process.argv.slice(2);
 
@@ -99,8 +99,9 @@ globSync(LANG_PATTERN)
     fs.writeFileSync(filename, JSON.stringify(translated, null, 2)+"\n");
   });
 
-// Combine all translations into a single json {"lang_1": {...}, "lang_2: {...}"}
+// Legacy: Combine all translations into a single json {"lang_1": {...}, "lang_2: {...}"}
 // while removing messages marked as missing or obsolete.
+// New way: Emit one file per language with all unnecessary data stripped.
 
 // Read all translations.
 const messages = globSync(LANG_PATTERN)
@@ -122,6 +123,11 @@ const messages = globSync(LANG_PATTERN)
     return { ...collection, ...descriptors };
   }, {});
 
-// Write a file with all translations combined.
+// Legacy: Write a single file with all translations combined.
 mkdirpSync(path.dirname(FINAL_FILE));
 fs.writeFileSync(FINAL_FILE, JSON.stringify(messages));
+
+// New way: write minified ptraslation files.
+for (let lang in messages) {
+  fs.writeFileSync(printf(OUTPUT_PATTERN, lang), JSON.stringify(messages[lang]));
+}

src/index.js

@@ -1,6 +1,8 @@
 // Put all packages together.
 // Used to generate umd/index.prod.js
 
+console.log("hello!");
+
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -10,6 +12,21 @@ import allMessages from './messages.json';
 import TinodeWeb from './views/tinode-web.jsx';
 import HashNavigation from './lib/navigation.js';
 
+/*
+// Load just one language.
+const messageLoader = {
+  'de': _ => import('./i18n.min/de.json'),
+  'en': _ => import('./i18n.min/en.json'),
+  'es': _ => import('./i18n.min/es.json'),
+  'fr': _ => import('./i18n.min/fr.json'),
+  'ko': _ => import('./i18n.min/ko.json'),
+  'ro': _ => import('./i18n.min/ro.json'),
+  'ru': _ => import('./i18n.min/ru.json'),
+  'zh': _ => import('./i18n.min/zh.json'),
+  'zh-TW': _ => import('./i18n.min/zh-TW.json')
+};
+*/
+
 // Detect human language to use in the UI:
 //  Check parameters from URL hash #?hl=ru, then browser, then use 'en' as a fallback.
 const { params } = HashNavigation.parseUrlHash(window.location.hash);
@@ -19,16 +36,21 @@ const language = (params && params.hl) ||
   navigator.userLanguage ||
   'en';
 
+// Make sure names like 'en_GB' and 'en-GB' consistently use '-'.
+const normalized = language.replace('_', '-');
 // Get the base language 'en' from a more specific 'en_GB' or 'en-US' as a partial fallback.
-const baseLanguage = language.toLowerCase().split(/[-_]/)[0];
+const baseLanguage = normalized.split(/[-]/)[0].toLowerCase();
 
 // Try the full locale first, then the locale without the region code, fallback to 'en'.
-const htmlLang = allMessages[language] ? language : allMessages[baseLanguage] ? baseLanguage : 'en';
+// const htmlLang = messageLoader[normalized] ? language : messageLoader[baseLanguage] ? baseLanguage : 'en';
+// const messages = await messageLoader[htmlLang]();
+const htmlLang = allMessages[normalized] ? language : allMessages[baseLanguage] ? baseLanguage : 'en';
 const messages = allMessages[htmlLang];
 
+console.log("language:", htmlLang, "messages loaded", messages);
+
 // Set lang attribute of the HTML element: <html lang="XX">
 document.getElementsByTagName('html')[0].setAttribute('lang', htmlLang);
-
 // Render the app.
 const root = createRoot(document.getElementById('mountPoint'));
 root.render(

umd/index.dev.js

@@ -2307,6 +2307,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib_navigation_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./lib/navigation.js */ "./src/lib/navigation.js");
 
 
+console.log("hello!");
 
 
 
@@ -2319,13 +2320,14 @@ const {
 } = _lib_navigation_js__WEBPACK_IMPORTED_MODULE_5__["default"].parseUrlHash(window.location.hash);
 const language = params && params.hl || navigator.languages && navigator.languages[0] || navigator.language || navigator.userLanguage || 'en';
 
-const baseLanguage = language.toLowerCase().split(/[-_]/)[0];
+const normalized = language.replace('_', '-');
+const baseLanguage = normalized.split(/[-]/)[0].toLowerCase();
 
-const htmlLang = _messages_json__WEBPACK_IMPORTED_MODULE_3__[language] ? language : _messages_json__WEBPACK_IMPORTED_MODULE_3__[baseLanguage] ? baseLanguage : 'en';
+const htmlLang = _messages_json__WEBPACK_IMPORTED_MODULE_3__[normalized] ? language : _messages_json__WEBPACK_IMPORTED_MODULE_3__[baseLanguage] ? baseLanguage : 'en';
 const messages = _messages_json__WEBPACK_IMPORTED_MODULE_3__[htmlLang];
+console.log("language:", htmlLang, "messages loaded", messages);
 
 document.getElementsByTagName('html')[0].setAttribute('lang', htmlLang);
-
 const root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(document.getElementById('mountPoint'));
 root.render(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_2__.IntlProvider, {
   locale: language,

webpack.config.js

@@ -69,5 +69,8 @@ module.exports = (env, argv) => {
       'react-intl': 'ReactIntl',
       'tinode-sdk': 'Tinode',
     },
+    experiments: {
+      topLevelAwait: true
+    },
   };
 }