i18n: locales support fixes

.babelrc

@@ -5,6 +5,8 @@
     "@lingui/babel-preset-react"
   ],
   "plugins": [
+    "@babel/transform-runtime",
+    "@babel/syntax-dynamic-import",
     "macros"
   ]
 }

.gitignore

@@ -7,4 +7,4 @@ tmp/
 static/build/client/
 binaries/client/
 binaries/server/
-src/locales/**/**.js
+locales/**/**.js

locales/en/messages.po

@@ -1302,6 +1302,7 @@ msgstr "Names"
 #: src/renderer/components/+workloads-jobs/jobs.tsx:38
 #: src/renderer/components/+workloads-pods/pods.tsx:75
 #: src/renderer/components/+workloads-statefulsets/statefulsets.tsx:41
+#: src/renderer/components/app.tsx:37
 #: src/renderer/components/dock/edit-resource.tsx:91
 #: src/renderer/components/dock/install-chart.tsx:122
 #: src/renderer/components/dock/upgrade-chart.tsx:98

locales/fi/messages.po

@@ -6,6 +6,12 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "X-Generator: @lingui/cli\n"
 "Language: fi\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
 
 #: src/renderer/components/+config-autoscalers/hpa-details.tsx:28
 msgid "(as a percentage of request)"
@@ -1287,6 +1293,7 @@ msgstr ""
 #: src/renderer/components/+workloads-jobs/jobs.tsx:38
 #: src/renderer/components/+workloads-pods/pods.tsx:75
 #: src/renderer/components/+workloads-statefulsets/statefulsets.tsx:41
+#: src/renderer/components/app.tsx:37
 #: src/renderer/components/dock/edit-resource.tsx:91
 #: src/renderer/components/dock/install-chart.tsx:122
 #: src/renderer/components/dock/upgrade-chart.tsx:98

locales/ru/messages.po

@@ -1303,6 +1303,7 @@ msgstr ""
 #: src/renderer/components/+workloads-jobs/jobs.tsx:38
 #: src/renderer/components/+workloads-pods/pods.tsx:75
 #: src/renderer/components/+workloads-statefulsets/statefulsets.tsx:41
+#: src/renderer/components/app.tsx:37
 #: src/renderer/components/dock/edit-resource.tsx:91
 #: src/renderer/components/dock/install-chart.tsx:122
 #: src/renderer/components/dock/upgrade-chart.tsx:98

package.json

@@ -52,13 +52,18 @@
       "ru",
       "fi"
     ],
+    "format": "po",
     "sourceLocale": "en",
     "fallbackLocale": "en",
-    "compileNamespace": "es",
+    "compileNamespace": "cjs",
-    "format": "po",
+    "extractBabelOptions": {
+      "plugins": [
+        "@babel/plugin-syntax-dynamic-import"
+      ]
+    },
     "catalogs": [
       {
-        "path": "./src/locales/{locale}/messages",
+        "path": "./locales/{locale}/messages",
         "include": "./src/renderer"
       }
     ]
@@ -75,14 +80,14 @@
   "build": {
     "afterSign": "build/notarize.js",
     "extraResources": [
-      {
-        "from": "src/locales/",
-        "filter": "**/*.js"
-      },
       {
         "from": "src/features/",
         "filter": "**/*"
       },
+      {
+        "from": "locales/",
+        "filter": "**/*.js"
+      },
       {
         "from": "static/",
         "filter": "**/*"
@@ -204,6 +209,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.1",
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",
@@ -259,6 +266,7 @@
     "identity-obj-proxy": "^3.0.0",
     "include-media": "^1.4.9",
     "jest": "^26.0.1",
+    "make-plural": "^6.2.1",
     "material-design-icons": "^3.0.1",
     "mobx": "^5.15.4",
     "mobx-observable-history": "^1.0.3",

src/renderer/i18n.ts

@@ -1,8 +1,10 @@
 import moment from "moment";
 import { observable, reaction } from "mobx";
 import { setupI18n } from "@lingui/core";
-import { autobind, createStorage } from "./utils";
 import orderBy from "lodash/orderBy"
+import { autobind, createStorage } from "./utils";
+
+const plurals: Record<string, Function> = require('make-plural/plurals');
 
 export interface ILanguage {
   code: string;
@@ -40,17 +42,22 @@ export class LocalizationStore {
   }
 
   async load(locale: string) {
-    const catalog = await import(`../locales/${locale}/messages.po`);
+    const { messages } = await import(
-    return _i18n.load(locale, catalog);
+      /* webpackChunkName: "i18n-[request]" */
+      `@lingui/loader!../../locales/${locale}/messages.po`
+      );
+    _i18n.loadLocaleData(locale, { plurals: plurals[locale] });
+    _i18n.load(locale, messages);
   }
 
   async setLocale(locale: string) {
     await this.load(locale);
-    await _i18n.activate(locale);
 
     // set moment's locale before activeLang for proper next render() in app
     moment.locale(locale);
     this.activeLang = locale;
+
+    await _i18n.activate(locale);
   }
 }
 

src/renderer/webpack.renderer.js

@@ -2,15 +2,11 @@
 const path = require("path");
 
 module.exports = function (config, env) {
-  const {module, plugins} = config;
+  const {module} = config;
   const {rules} = module;
 
   // localization support
   // https://lingui.js.org/guides/typescript.html
-  rules.push({
-    test: /\.po$/,
-    use: '@lingui/loader'
-  });
   patchLoader(".tsx", "ts-loader", loader => {
     loader.options = Object.assign({}, loader.options, {
       compilerOptions: {
@@ -43,7 +39,7 @@ module.exports = function (config, env) {
       let loader = typeof loaders[index] === "string" ? {loader: loaders[index]} : loaders[index];
       loaders[index] = updater(loader);
       rule.use = loaders.flat();
-      console.info(`Patched renderer's webpack loader "${loaderName}"`, loader);
+      console.info(`Patched webpack's renderer config for "${loaderName}" in ${__filename}`, loader);
     }
   }
 

tsconfig.json

@@ -4,8 +4,8 @@
     "baseUrl": ".",
     "outDir": "./dist",
     "jsx": "react",
-    "target": "es2017",
+    "target": "ES2017",
-    "module": "CommonJS",
+    "module": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "moduleResolution": "Node",
     "sourceMap": true,

yarn.lock

@@ -729,6 +729,16 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
+"@babel/plugin-transform-runtime@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.10.1.tgz#fd1887f749637fb2ed86dc278e79eb41df37f4b1"
+  integrity sha512-4w2tcglDVEwXJ5qxsY++DgWQdNJcCCsPxfT34wCUwIf2E7dI7pMpH8JczkMBbgBTNzBX62SZlNJ9H+De6Zebaw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.1"
+    "@babel/helper-plugin-utils" "^7.10.1"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
 "@babel/plugin-transform-shorthand-properties@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.1.tgz#e8b54f238a1ccbae482c4dce946180ae7b3143f3"
@@ -10307,7 +10317,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -10567,7 +10577,7 @@ semver-diff@^3.1.1:
   dependencies:
     semver "^6.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==