$ cnpm install d2-i18n
d2-i18n contains a default configuration set on top of i18next library
yarn add d2-i18n
yarn upgrade d2-i18n
Will set the current language for frontend app.
i18n.changeLanguage(lng)
Include postcss-rtl plugin as follows inside your webpack.config.dev/prod.js
require('postcss-cssnext'),
require('postcss-rtl'),
require('postcss-flexbugs-fixes'),
Add dir="ltr" to index.html file. When switching to RTL language set dir="rtl". Your CSS will automatically present it self in RTL format.
String passed into i18n.t will translate text w.r.t. current language set.
i18n.t('translation string');
Note
We don't use react-i18next because handling cursor in editor with the mixing of ASCII and RTL characters is very messy. ASCII characters move the cursor to one end of the line while RTL characters take cursor to the opposite end. Additionally using variables in RTL language strings doesn't work as the first sequence of {{ might be entered correctly but the next sequence of }} simply flows in the opposite direction making it impossible to translate.
$> yarn add i18next d2-i18n-extract d2-i18n-generate husky@next prettier
If you run into package update problems with any d2- packages. Please use npm update package-name
which should update package-lock.json file and install the required updates.
Inside scripts section, add the extract-pot command below. It will use
"extract-pot": "d2-i18n-extract -p src/ -o i18n/",
add prettify command inside scripts.
"prettify": "prettier \"src/**/*.{js,jsx,json,css}\" --write",
Add pre-commit hook to extract en.pot file. It will extract translation strings from src/ directory with file extensions *.js, *.jx. On finish it place en.pot file inside i18n/en.pot directory
"husky": {
"hooks": {
"pre-commit": "npm run extract-pot && npm run prettify && CI=true npm run test && git add -A ."
}
}
Inside scripts section, add the localize command below.
"localize": "npm run extract-pot && d2-i18n-generate -n NAMESPACE -p ./i18n/ -o ./src/locales/"
We default on en.pot file so there will not be an en.po file.
Because localization or translations files inside our repo's will be auto-generated so they are not part of our code base. Only en.pot and language related .po files are part of our code base.
Therefore, you must generate the localization before they are needed anywhere, for e.g. in development or production. To generate them for build/prestart you must prepend the localize command as below inside the scripts section of package.json.
"prestart": "npm run localize && d2-manifest package.json ./public/manifest.webapp",
"build": "npm run localize && node scripts/build.js"
Before build/deploy part add the npm run localize
so that localization files are available otherwise code will not work.
Copyright © npmmirror.com | 浙ICP备15033595号-63 |