FB

resource/locales/en_US/meta.json

@@ -1,5 +1,5 @@
 {
   "id": "en_US",
   "displayName": "English",
-  "browserLanguageId":"en"
+  "browserLanguageId": ["en"]
 }

resource/locales/ja_JP/meta.json

@@ -1,5 +1,5 @@
 {
   "id": "ja_JP",
   "displayName": "日本語",
-  "browserLanguageId":"ja"
+  "aliases": ["ja"]
 }

resource/locales/zh_CN/meta.json

@@ -1,5 +1,5 @@
 {
 	"id": "zh_CN",
 	"displayName": "简体中文",
-  "browserLanguageId":"zh"
+  "browserLanguageId": ["zh"]
 }

src/client/js/util/LanguageDetectorWrapper.js → src/client/js/util/AliasToLocaleMapper.js

@@ -1,9 +1,16 @@
 import locales from '@root/resource/locales';
 
-class LanguageDetectorWrapper {
+const browserLanguageIdMapping = {};
+Object.values(locales).forEach((locale) => {
+  locale.meta.aliases.forEach((aliase) => {
+    browserLanguageIdMapping[aliase] = locale.meta.id;
+  });
+});
+
+class AliasToLocaleMapper {
 
   constructor(langDetector) {
-    this.name = 'languageDetectorWrapper';
+    this.name = 'aliasToLocaleMapper';
     this.type = 'languageDetector';
 
     this.langDetector = langDetector;
@@ -15,13 +22,10 @@ class LanguageDetectorWrapper {
       return;
     }
 
-    const browserLanguageIdMapping = {};
-    Object.values(locales).forEach((locale) => {
-      browserLanguageIdMapping[locale.meta.browserLanguageId] = locale.meta.id;
-    });
     if (Object.values(browserLanguageIdMapping).includes(lang)) {
       return lang;
     }
+
     return browserLanguageIdMapping[lang];
   }
 
@@ -38,4 +42,4 @@ class LanguageDetectorWrapper {
 
 }
 
-export default LanguageDetectorWrapper;
+export default AliasToLocaleMapper;

src/client/js/util/i18n.js

@@ -2,7 +2,7 @@ import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import locales from '@root/resource/locales';
-import LanguageDetectorWrapper from './LanguageDetectorWrapper';
+import AliasToLocaleMapper from './AliasToLocaleMapper';
 
 // extract metadata list from 'resource/locales/${locale}/meta.json'
 export const localeMetadatas = Object.values(locales).map(locale => locale.meta);
@@ -18,10 +18,10 @@ export const i18nFactory = (userLocaleId) => {
   });
 
   // Wrapper to convert lang after detected
-  const languageDetectorWrapper = new LanguageDetectorWrapper(langDetector);
+  const aliasToLocaleMapper = new AliasToLocaleMapper(langDetector);
 
   i18n
-    .use(languageDetectorWrapper)
+    .use(aliasToLocaleMapper)
     .use(initReactI18next) // if not using I18nextProvider
     .init({
       debug: (process.env.NODE_ENV !== 'production'),
@@ -29,7 +29,7 @@ export const i18nFactory = (userLocaleId) => {
       load: 'currentOnly',
 
       fallbackLng: 'en_US',
-      detection: 'languageDetectorWrapper',
+      detection: 'aliasToLocaleMapper',
 
       interpolation: {
         escapeValue: false, // not needed for react!!