Use json files in translations

.tx/config

@@ -2,7 +2,7 @@
 host = https://www.transifex.com
 
 [saleor-1.dashboard-20-json]
-file_filter = locale/<lang>.po
+file_filter = locale/<lang>.json
 minimum_perc = 1
 source_file = locale/defaultMessages.json
 source_lang = en

package-lock.json

@@ -762,54 +762,6 @@
         "js-tokens": "^4.0.0"
       }
     },
-    "@babel/node": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/node/-/node-7.8.4.tgz",
-      "integrity": "sha512-MlczXI/VYRnoaWHjicqrzq2z4DhRPaWQIC+C3ISEQs5z+mEccBsn7IAI5Q97ZDTnFYw6ts5IUTzqArilC/g7nw==",
-      "dev": true,
-      "requires": {
-        "@babel/register": "^7.8.3",
-        "commander": "^4.0.1",
-        "core-js": "^3.2.1",
-        "lodash": "^4.17.13",
-        "node-environment-flags": "^1.0.5",
-        "regenerator-runtime": "^0.13.3",
-        "resolve": "^1.13.1",
-        "v8flags": "^3.1.1"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-          "dev": true
-        },
-        "regenerator-runtime": {
-          "version": "0.13.3",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
-          "dev": true
-        },
-        "resolve": {
-          "version": "1.15.1",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
-          "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
-          "dev": true,
-          "requires": {
-            "path-parse": "^1.0.6"
-          }
-        },
-        "v8flags": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",
-          "integrity": "sha512-amh9CCg3ZxkzQ48Mhcb8iX7xpAfYJgePHxWMQCBWECpOSqJUXgY26ncA61UTV0BkPqfhcy6mzwCIoP4ygxpW8w==",
-          "dev": true,
-          "requires": {
-            "homedir-polyfill": "^1.0.1"
-          }
-        }
-      }
-    },
     "@babel/parser": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.2.tgz",
@@ -1724,32 +1676,6 @@
         }
       }
     },
-    "@babel/register": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.8.3.tgz",
-      "integrity": "sha512-t7UqebaWwo9nXWClIPLPloa5pN33A2leVs8Hf0e9g9YwUP8/H9NeR7DJU+4CXo23QtjChQv5a3DjEtT83ih1rg==",
-      "dev": true,
-      "requires": {
-        "find-cache-dir": "^2.0.0",
-        "lodash": "^4.17.13",
-        "make-dir": "^2.1.0",
-        "pirates": "^4.0.0",
-        "source-map-support": "^0.5.16"
-      },
-      "dependencies": {
-        "find-cache-dir": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-          "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^2.0.0",
-            "pkg-dir": "^3.0.0"
-          }
-        }
-      }
-    },
     "@babel/runtime": {
       "version": "7.7.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.6.tgz",
@@ -12441,15 +12367,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "gettext-parser": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/gettext-parser/-/gettext-parser-1.1.0.tgz",
-      "integrity": "sha1-LFpmONiTk0ubVQN9CtgstwBLJnk=",
-      "dev": true,
-      "requires": {
-        "encoding": "^0.1.11"
-      }
-    },
     "git-parse": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/git-parse/-/git-parse-1.0.3.tgz",
@@ -12762,12 +12679,6 @@
         }
       }
     },
-    "has-color": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
-      "integrity": "sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8=",
-      "dev": true
-    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -16525,16 +16436,6 @@
         "minimatch": "^3.0.2"
       }
     },
-    "node-environment-flags": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.6.tgz",
-      "integrity": "sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==",
-      "dev": true,
-      "requires": {
-        "object.getownpropertydescriptors": "^2.0.3",
-        "semver": "^5.7.0"
-      }
-    },
     "node-fetch": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
@@ -16885,41 +16786,6 @@
       "integrity": "sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ==",
       "dev": true
     },
-    "nomnom": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
-      "integrity": "sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=",
-      "dev": true,
-      "requires": {
-        "chalk": "~0.4.0",
-        "underscore": "~1.6.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
-          "integrity": "sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg=",
-          "dev": true
-        },
-        "chalk": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
-          "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "~1.0.0",
-            "has-color": "~0.1.0",
-            "strip-ansi": "~0.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
-          "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE=",
-          "dev": true
-        }
-      }
-    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -17907,16 +17773,6 @@
         "ts-pnp": "^1.1.2"
       }
     },
-    "po2json": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/po2json/-/po2json-0.4.5.tgz",
-      "integrity": "sha1-R7spUtoy1Yob4vJWpZjuvAt0URg=",
-      "dev": true,
-      "requires": {
-        "gettext-parser": "1.1.0",
-        "nomnom": "1.8.1"
-      }
-    },
     "polished": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/polished/-/polished-3.4.2.tgz",
@@ -18829,28 +18685,6 @@
         "shallow-equal": "^1.1.0"
       }
     },
-    "react-intl-po": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/react-intl-po/-/react-intl-po-2.2.2.tgz",
-      "integrity": "sha512-BvW4gyohm4Ac0sSN6dBJB3+PeIjsns+IE9JqT/7NolBRGNc+fCKzWa5e1eZdhu9nY+7W1t0sWqhrt+LXgXb6Iw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.3.2",
-        "commander": "^2.15.1",
-        "glob": "^7.1.2",
-        "mkdirp": "^0.5.1",
-        "po2json": "^0.4.5",
-        "ramda": "^0.25.0"
-      },
-      "dependencies": {
-        "ramda": {
-          "version": "0.25.0",
-          "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
-          "integrity": "sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ==",
-          "dev": true
-        }
-      }
-    },
     "react-intl-translations-manager": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/react-intl-translations-manager/-/react-intl-translations-manager-5.0.3.tgz",
@@ -22355,12 +22189,6 @@
       "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
       "dev": true
     },
-    "underscore": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
-      "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=",
-      "dev": true
-    },
     "unfetch": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz",

package.json

@@ -130,7 +130,6 @@
     "lint-staged": "^9.4.2",
     "plop": "^2.4.0",
     "prettier": "^1.19.1",
-    "react-intl-po": "^2.2.2",
     "react-intl-translations-manager": "^5.0.3",
     "react-test-renderer": "^16.12.0",
     "regenerator-runtime": "^0.11.1",
@@ -187,7 +186,6 @@
     "extract-json-messages": "rimraf build/locale && cross-env NODE_ENV=extract babel src 'src/**/*.{ts,tsx}' -o build/dashboard.bundle.js",
     "transpile-messages": "node scripts/transpile-tx.js",
     "extract-messages": "npm run extract-json-messages && npm run transpile-messages",
-    "build-messages": "rip po2json 'locale/**/*.po' -m 'build/locale/**/*.json' -o 'locale' -c 'description'",
     "build-types": "apollo client:codegen --target=typescript types --globalTypesFile=src/types/globalTypes.ts",
     "check-types": "tsc --noEmit",
     "generate-component": "plop --plopfile .plop/plopfile.js",

scripts/transpile-tx.js

@@ -4,6 +4,8 @@ const {
   default: manageTranslations
 } = require("react-intl-translations-manager");
 
+const { dotSeparator } = require("../src/components/Locale/Locale.tsx");
+
 const sortKeys = true;
 const translationsDirectory = "locale";
 
@@ -16,7 +18,7 @@ manageTranslations({
         []
       );
       const structuredJsonFormat = msgDescriptors.reduce((msgs, msg) => {
-        const key = msg.id.replace(/\./g, "_dot_");
+        const key = msg.id.replace(/\./g, dotSeparator);
         if (msgs[key] && msgs[key].context === undefined) {
           msgs[key].context = msg.description;
         } else {

src/components/Locale/Locale.tsx

@@ -89,7 +89,11 @@ export enum Locale {
   ZH_HANT = "zh-hant"
 }
 
-type LocaleMessages = Record<string, string>;
+interface StructuredMessage {
+  context?: string;
+  string: string;
+}
+type LocaleMessages = Record<string, StructuredMessage>;
 const localeData: Record<Locale, LocaleMessages> = {
   [Locale.AR]: locale_AR,
   [Locale.AZ]: locale_AZ,
@@ -181,6 +185,19 @@ export const localeNames: Record<Locale, string> = {
   [Locale.ZH_HANT]: "繁體中文"
 };
 
+export const dotSeparator = "_dot_";
+const sepRegExp = new RegExp(dotSeparator, "g");
+
+function getKeyValueJson(messages: LocaleMessages): Record<string, string> {
+  if (messages) {
+    const keyValueMessages: Record<string, string> = {};
+    return Object.entries(messages).reduce((acc, [id, msg]) => {
+      acc[id.replace(sepRegExp, ".")] = msg.string;
+      return acc;
+    }, keyValueMessages);
+  }
+}
+
 export function getMatchingLocale(languages: readonly string[]): Locale {
   const localeEntries = Object.entries(Locale);
 
@@ -218,7 +235,7 @@ const LocaleProvider: React.FC = ({ children }) => {
     <IntlProvider
       defaultLocale={defaultLocale}
       locale={locale}
-      messages={localeData[locale]}
+      messages={getKeyValueJson(localeData[locale])}
       onError={err => {
         if (!err.includes("[React Intl] Missing message: ")) {
           console.error(err);