refactor(i18n): automatic locale data (#1725)

* chore(i18n): dep bump + automatic locale data Small i18n refactor that makes things more future-proof: ipfs-shipyard/i18n#9 * fix(i18n): regression in Trans Latest i18next-icu uses upstream intl-messageformat for plurals, unfortunately it means we no longer can mix tags with plurals in Trans element. This is a cosmetic fix that makes the entire label a link.
ipfs · Mar 12, 2021 · 4fa82e1 · 4fa82e1
1 parent 8664bce
commit 4fa82e1
Show file tree

Hide file tree

Showing 7 changed files with 509 additions and 459 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "start:win32": "@powershell -Command $env:REACT_APP_GIT_REV=(git rev-parse --short HEAD); react-scripts start",
     "start:darwin:linux": "cross-env REACT_APP_GIT_REV=`git rev-parse --short HEAD` react-scripts start",
     "lint": "eslint src/ test/",
+    "prebuild": "lol public/locales > src/lib/languages.json",
     "build": "run-script-os",
     "build:win32": "@powershell -Command $env:REACT_APP_GIT_REV=(git rev-parse --short HEAD); react-scripts build",
     "build:darwin:linux": "cross-env REACT_APP_GIT_REV=`git rev-parse --short HEAD` react-scripts build",
@@ -39,13 +40,14 @@
     "file-extension": "^4.0.5",
     "filesize": "^6.1.0",
     "hashlru": "^2.3.0",
-    "i18next": "^19.8.0",
+    "i18next": "^19.9.0",
     "i18next-browser-languagedetector": "^6.0.1",
     "i18next-chained-backend": "^2.0.1",
-    "i18next-http-backend": "^1.0.21",
-    "i18next-icu": "^1.4.2",
+    "i18next-http-backend": "^1.1.1",
+    "i18next-icu": "^2.0.0",
     "i18next-localstorage-backend": "^3.1.2",
     "internal-nav-helper": "^3.1.0",
+    "intl-messageformat": "^9.5.1",
     "ip": "^1.1.5",
     "ipfs-css": "^1.2.0",
     "ipfs-geoip": "^6.0.0",
@@ -77,7 +79,7 @@
     "react-faux-dom": "^4.5.0",
     "react-helmet": "^5.2.1",
     "react-hook-form": "^6.0.6",
-    "react-i18next": "^11.7.0",
+    "react-i18next": "^11.8.8",
     "react-identicons": "^1.2.4",
     "react-joyride": "^2.3.0",
     "react-loadable": "^5.5.0",
@@ -99,6 +101,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
+    "@olizilla/lol": "2.0.0",
     "@storybook/addon-a11y": "^5.3.19",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
@@ -110,7 +113,7 @@
     "babel-eslint": "^10.1.0",
     "basic-auth": "^2.0.1",
     "big.js": "^5.2.2",
-    "bundlesize": "^0.18.0",
+    "bundlesize": "0.18.1",
     "cross-env": "^6.0.3",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
@@ -121,7 +124,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "fake-indexeddb": "^3.1.2",
     "get-port": "^5.1.1",
-    "go-ipfs": "0.8.0-rc1",
+    "go-ipfs": "0.8.0",
     "http-proxy": "^1.18.1",
     "http-server": "^0.12.3",
     "ipfs": "^0.54.2",

diff --git a/public/locales/en/status.json b/public/locales/en/status.json
@@ -9,8 +9,8 @@
   "pieChartLabel": "{count, plural, one {{percent}% ({count} Peer)} other {{percent}% ({count} Peers)}}",
   "countMore": "...and {count} more",
   "StatusConnected": {
-    "paragraph1": "Hosting <0>{repoSize} of files</0>",
-    "paragraph2": "{count, plural, one {Discovered <0>1 peer</0>} other {Discovered <0>{peersCount} peers</0>}}"
+    "repoSize": "Hosting {repoSize} of data",
+    "peersCount": "{peersCount, plural, one {Discovered 1 peer} other {Discovered {peersCount} peers}}"
   },
   "customApiConfig": "Custom JSON configuration",
   "AskToEnable": {

diff --git a/src/components/language-selector/language-modal/LanguageModal.js b/src/components/language-selector/language-modal/LanguageModal.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import i18n, { localesList } from '../../../i18n'
-import { getLanguage } from '../../../lib/i18n'
 
 // Components
 import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
@@ -21,10 +20,10 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
         <div className='pa2 flex flex-wrap'>
           { localesList.map((lang) =>
             <button
-              key={`lang-${lang}`}
+              key={`lang-${lang.locale}`}
               className='pa2 w-33 flex nowrap bg-transparent bn outline-0 blue justify-center'
-              onClick={() => handleClick(lang)}>
-              { getLanguage(lang) }
+              onClick={() => handleClick(lang.locale)}>
+              { lang.nativeName }
             </button>
           )}
         </div>

diff --git a/src/i18n.js b/src/i18n.js
@@ -5,38 +5,11 @@ import LocalStorageBackend from 'i18next-localstorage-backend'
 import HttpBackend from 'i18next-http-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
 
-import ar from 'i18next-icu/locale-data/ar'
-import ca from 'i18next-icu/locale-data/ca'
-import cs from 'i18next-icu/locale-data/cs'
-import da from 'i18next-icu/locale-data/da'
-import de from 'i18next-icu/locale-data/de'
-import en from 'i18next-icu/locale-data/en'
-import es from 'i18next-icu/locale-data/es'
-import fr from 'i18next-icu/locale-data/fr'
-import it from 'i18next-icu/locale-data/it'
-import ja from 'i18next-icu/locale-data/ja'
-import ko from 'i18next-icu/locale-data/ko'
-import nl from 'i18next-icu/locale-data/nl'
-import no from 'i18next-icu/locale-data/no'
-import pl from 'i18next-icu/locale-data/pl'
-import pt from 'i18next-icu/locale-data/pt'
-import ro from 'i18next-icu/locale-data/ro'
-import ru from 'i18next-icu/locale-data/ru'
-import sv from 'i18next-icu/locale-data/sv'
-import zh from 'i18next-icu/locale-data/zh'
-
-const localeData = [ar, ca, cs, da, de, en, es, fr, it, ja, ko, nl, no, pl, pt, ro, ru, sv, zh]
-
-export const localesList =
-  // add here the language variants
-  ['ja-JP', 'ko-KR', 'zh-CN', 'zh-HK', 'zh-TW']
-    .concat(localeData.map((locale) => locale[0].locale))
-    // add here languages you want to exclude
-    .filter(item => !['ja', 'ko', 'zh'].includes(item))
-    .sort()
+import locales from './lib/languages.json'
+export const localesList = Object.values(locales)
 
 i18n
-  .use(new ICU({ localeData }))
+  .use(ICU)
   .use(Backend)
   .use(LanguageDetector)
   .init({

diff --git a/src/lib/languages.json b/src/lib/languages.json
@@ -39,6 +39,11 @@
     "nativeName": "Français",
     "englishName": "French"
   },
+  "hu": {
+    "locale": "hu",
+    "nativeName": "Magyar",
+    "englishName": "Hungarian"
+  },
   "it": {
     "locale": "it",
     "nativeName": "Italiano",

diff --git a/src/status/StatusConnected.js b/src/status/StatusConnected.js
@@ -12,21 +12,15 @@ export const StatusConnected = ({ t, peersCount, repoSize }) => {
       </h1>
       <p className='montserrat fw4 f5 ma0 pb3 lh-copy'>
         <span className='db dib-ns'>
-          <Trans
-            i18nKey='StatusConnected.paragraph1' t={t}
-            defaults='Hosting <0>{repoSize} of files</0>'
-            values={{ repoSize: humanRepoSize }}
-            components={[<a className='link blue' href='#/files'>?</a>]}
-          />
+          <a className='link blue' href='#/files'>
+            {t('StatusConnected.repoSize', { repoSize: humanRepoSize })}
+          </a>
         </span>
         <span className='dn di-ns gray'> — </span>
         <span className='db mt1 mt0-ns dib-ns'>
-          <Trans
-            i18nKey='StatusConnected.paragraph2' t={t}
-            defaults='Discovered <0>{peersCount} peers</0>'
-            values={{ peersCount: peersCount.toString() }}
-            components={[<a className='link blue' href='#/peers'>?</a>]}
-          />
+          <a className='link blue' href='#/peers'>
+            {t('StatusConnected.peersCount', { peersCount: peersCount.toString() })}
+          </a>
         </span>
       </p>
     </header>