Merge pull request #5 from oskar-binary/lazy_load_json

Lazy load json
binary-com · Dec 18, 2019 · ab60e92 · ab60e92
2 parents 6a04067 + dda74ad
commit ab60e92
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 87 deletions.
diff --git a/packages/core/build/config.js b/packages/core/build/config.js
@@ -14,6 +14,7 @@ const copyConfig = (base) => ([
     { from: path.resolve(__dirname, '../node_modules/deriv-trader/dist/js/trader.*.js'), to: 'js', flatten: true },
     { from: path.resolve(__dirname, '../node_modules/deriv-trader/dist/css/**'), to: 'css', flatten: true },
     { from: path.resolve(__dirname, '../node_modules/deriv-trader/dist/*.*'), to: 'js', flatten: true },
+    { from: path.resolve(__dirname, '../node_modules/deriv-translations/lib/public/i18n/*.*'), to: 'public/i18n', flatten: true },
     { from: path.resolve(__dirname, '../scripts/CNAME'), to: 'CNAME', toType: 'file' },
     { from: path.resolve(__dirname, '../src/root_files/404.html'), to: '404.html', toType: 'file' },
     { from: path.resolve(__dirname, '../src/root_files/robots.txt'), to: 'robots.txt', toType: 'file' },

diff --git a/packages/core/src/App/app.jsx b/packages/core/src/App/app.jsx
@@ -5,7 +5,7 @@ import { Prompt }                   from 'react-router';
 import { BrowserRouter as Router }  from 'react-router-dom';
 // Initialize i18n by importing it here
 // eslint-disable-next-line no-unused-vars
-import { i18n,
+import { initializeTranslations,
     loadIncontextTranslation }      from 'deriv-translations';
 import Client                       from '_common/base/client_base';
 import WS                           from 'Services/ws-methods';
@@ -32,6 +32,7 @@ const App = ({ root_store }) => {
     const has_base = /^\/(br_)/.test(l.pathname);
     const url_params = new URLSearchParams(l.search);
 
+    initializeTranslations();
     const is_staging = /staging\.deriv\.app/i.test(l.hostname);
     if (is_staging) {
         loadIncontextTranslation();

diff --git a/packages/translations/README.md b/packages/translations/README.md
@@ -31,10 +31,12 @@
 * This project uses [react-i18next](https://react.i18next.com)
 
 ### Setup
-* initialize translations in root app.jsx by importing i18n.js
-* in `app.jsx`
+* initialize translations in root app.jsx by importing and calling initializeTranslations
+* in `app.jsx`:
 ```jsx
-    import { i18n } from 'deriv-translations';
+    import { initializeTranslations } from 'deriv-translations';
+    ...
+    initializeTranslations()
 ```
 ### Usage
 * For strings use either `localize(...)` or `<Localize />`

diff --git a/packages/translations/package-lock.json b/packages/translations/package-lock.json
diff --git a/packages/translations/package.json b/packages/translations/package.json
@@ -4,7 +4,7 @@
   "description": "Deriv translations",
   "author": "Deriv",
   "license": "Apache-2.0",
-  "main": "lib/main.js",
+  "main": "lib/translations.main.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/binary-com/deriv-app.git"
@@ -49,7 +49,7 @@
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.4",
+    "copy-webpack-plugin": "^5.1.1",
     "cross-env": "^5.2.0",
     "eslint": "^6.0.0",
     "eslint-config-airbnb-base": "^13.1.0",

diff --git a/packages/translations/src/i18next/i18next.js b/packages/translations/src/i18next/i18next.js
@@ -1,21 +1,7 @@
-/* eslint-disable */
 import { str as crc32 }     from 'crc-32';
 import i18n                 from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import withI18n             from '../components'
-// TODO: lazy load these: with i18n.addResourceBundle
-import ach                  from '../translations/ach.json';
-import en                   from '../translations/en.json';
-import es                   from '../translations/es.json';
-import fr                   from '../translations/fr.json';
-import id                   from '../translations/id.json';
-import it                   from '../translations/it.json';
-import pl                   from '../translations/pl.json';
-import pt                   from '../translations/pt.json';
-import ru                   from '../translations/ru.json';
-import vi                   from '../translations/ru.json';
-import zh_cn                from '../translations/zh_cn.json';
-import zh_tw                from '../translations/zh_tw.json';
+import withI18n             from '../components';
 
 const LANGUAGE_KEY     = 'i18n_language';
 const DEFAULT_LANGUAGE = 'EN';
@@ -29,13 +15,20 @@ const ALL_LANGUAGES    = Object.freeze({
     PL   : 'Polish',
     PT   : 'Português',
     RU   : 'Русский',
-    TH   : 'Thai',
     VI   : 'Tiếng Việt',
     ZH_CN: '简体中文',
     ZH_TW: '繁體中文',
 });
 
-const hasLanguage = lang => {
+const getUrlBase = (path = '') => {
+    const l = window.location;
+
+    if (!/^\/(br_)/.test(l.pathname)) return path;
+
+    return `/${l.pathname.split('/')[1]}${/^\//.test(path) ? path : `/${path}`}`;
+};
+
+const hasLanguage = (lang) => {
     if (!lang) return false;
     return Object.keys(ALL_LANGUAGES).includes(lang.toUpperCase());
 };
@@ -66,49 +59,50 @@ const getInitialLanguage = () => {
     return DEFAULT_LANGUAGE;
 };
 
+const loadLanguageJson = async (lang) => {
+    if (!i18n.hasResourceBundle(lang, 'translations') && lang !== DEFAULT_LANGUAGE) {
+        const response = await fetch(getUrlBase(`/public/i18n/${lang.toLowerCase()}.json`));
+        const lang_json = await response.text();
+
+        i18n.addResourceBundle(lang, 'translations', JSON.parse(lang_json));
+    }
+};
+
 const initial_language = getInitialLanguage();
 const i18n_config = {
-    resources: {
-        ACH  : { translations: {...ach } },
-        EN   : { translations: { ...en } },
-        ES   : { translations: { ...es } },
-        FR   : { translations: { ...fr } },
-        ID   : { translations: { ...id } },
-        IT   : { translations: { ...it } },
-        PL   : { translations: { ...pl } },
-        PT   : { translations: { ...pt } },
-        RU   : { translations: { ...ru } },
-        VI   : { translations: { ...vi } },
-        ZH_CN: { translations: { ...zh_cn } },
-        ZH_TW: { translations: { ...zh_tw } },
-    },
     react: {
         hashTransKey(defaultValue) {
             return crc32(defaultValue);
         },
     },
-    lng: initial_language,
+    lng        : initial_language,
     fallbackLng: 'EN',
-    ns: ['translations'],
-    defaultNS: 'translations',
+    ns         : ['translations'],
+    defaultNS  : 'translations',
 };
 
 i18n
     .use(initReactI18next) // passes i18n down to react-i18next
     .init(i18n_config);
 
-const changeLanguage = (lang, cb) => {
-    return;
-    // TODO: uncomment this when translations are ready
-    // if (hasLanguage(lang)) {
-    //     i18n.changeLanguage(lang, () => {
-    //         localStorage.setItem(LANGUAGE_KEY, lang);
-    //         cb();
-    //     })
-    // }
-}
+const initializeTranslations = async () => {
+    await loadLanguageJson(initial_language);
+};
+
+const changeLanguage = async (lang, cb) => {
+    if (hasLanguage(lang)) {
+        await loadLanguageJson(lang);
+        i18n.changeLanguage(lang, () => {
+            localStorage.setItem(LANGUAGE_KEY, lang);
+            cb();
+        });
+    }
+};
 
-const getLanguage = () => i18n.language;
+const getLanguage = () => {
+    const lang = i18n.language || initial_language;
+    return lang;
+};
 
 // <Localize /> component wrapped with i18n
 const Localize = withI18n(i18n);
@@ -122,16 +116,24 @@ const localize = (string, values) => {
 const loadIncontextTranslation = () => {
     const is_ach = i18n.language === 'ACH';
     if (is_ach) {
-        const jipt = document.createElement('script')
-        jipt.type = 'text/javascript'
+        const jipt = document.createElement('script');
+        jipt.type = 'text/javascript';
         jipt.text = `
             var _jipt = []; _jipt.push(['project', 'deriv-app']);
             var crowdin = document.createElement("script");
             crowdin.setAttribute('src', '//cdn.crowdin.com/jipt/jipt.js');
             document.head.appendChild(crowdin);
-        `
-        document.head.appendChild(jipt)
+        `;
+        document.head.appendChild(jipt);
     }
-}
+};
 
-export default { i18n, localize, Localize, changeLanguage, getLanguage, getAllLanguages, loadIncontextTranslation };
+export default {
+    changeLanguage,
+    getAllLanguages,
+    getLanguage,
+    initializeTranslations,
+    loadIncontextTranslation,
+    localize,
+    Localize,
+};
diff --git a/packages/translations/src/translations/en.json b/packages/translations/src/translations/en.json
diff --git a/packages/translations/webpack.config.js b/packages/translations/webpack.config.js
@@ -1,3 +1,4 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
 
 const is_serve   = process.env.BUILD_MODE === 'serve';
@@ -7,11 +8,16 @@ module.exports = {
     entry : path.resolve(__dirname, 'src', 'i18next/index.js'),
     output: {
         path         : path.resolve(__dirname, 'lib'),
-        filename     : '[name].js',
+        filename     : 'translations.main.js',
         libraryExport: 'default',
-        library      : ['deriv-translations', '[name]'],
+        library      : 'deriv-translations',
         libraryTarget: 'umd',
     },
+    resolve: {
+        alias: {
+            'public/i18n': path.resolve(__dirname, 'lib', 'languages'),
+        },
+    },
     optimization: {
         minimize: true,
         // TODO enable splitChunks
@@ -42,6 +48,11 @@ module.exports = {
             },
         ],
     },
+    plugins: [
+        new CopyWebpackPlugin([
+            { from: 'src/translations', to: 'public/i18n/' },
+        ]),
+    ],
     externals: {
         'react'         : 'react',
         'babel-polyfill': 'babel-polyfill',