overleaf/services/web/frontend/js/i18n.js
Eric Mc Sween 4e40eee738 Merge pull request #3586 from overleaf/as-fix-react-i18n-re-render
Trigger render after receiving translation strings

GitOrigin-RevId: 22bfd5aa3cb7ae7c76cd6924663a4133b08c3d24
2021-01-22 03:05:00 +00:00

47 lines
1.5 KiB
JavaScript

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
const LANG = window.i18n.currentLangCode
// Since we are rendering React from Angular, the initialisation is
// synchronous on page load (but hidden behind the loading screen). This
// means that translations must be initialised without any actual
// translation strings, and load those manually ourselves later
i18n.use(initReactI18next).init({
lng: LANG,
react: {
// Since we are manually waiting on the translations data to
// load, we don't need to use Suspense
useSuspense: false,
// Trigger a re-render when a language is added. Since we load the
// translation strings asynchronously, we need to trigger a re-render once
// they've loaded
bindI18nStore: 'added'
},
interpolation: {
// We use the legacy v1 JSON format, so configure interpolator to use
// underscores instead of curly braces
prefix: '__',
suffix: '__',
unescapeSuffix: 'HTML',
// Disable nesting in interpolated values, preventing user input
// injection via another nested value
skipOnVariables: true
}
})
// The webpackChunkName here will name this chunk (and thus the requested
// script) according to the file name. See https://webpack.js.org/api/module-methods/#magic-comments
// for details
const localesPromise = import(
/* webpackChunkName: "[request]" */ `../../locales/${LANG}.json`
).then(lang => {
i18n.addResourceBundle(LANG, 'translation', lang)
})
export default localesPromise