d2-i18n

About

d2-i18n contains a default configuration set on top of i18next library

• API
• Interpolation
• Frameworks

Install

yarn add d2-i18n

Upgrade

yarn upgrade d2-i18n

Change/Set Language

Will set the current language for frontend app.

i18n.changeLanguage(lng)

RTL CSS / Right to Left Styles

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.

In Code

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.

Integration

$>  yarn add i18next d2-i18n-extract d2-i18n-generate husky@next prettier

• d2-i18n-extract is used to extract translation strings.
• d2-i18n-generate is used to generate localization files for frontend project. Currently is limited to loading language translations. But in future it can extended to manage date/time/calendar settings for a particular locale.
• husky: to add pre-commit hooks, to auto-generate en.pot file.

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.

In App's package.json

Generate en.pot

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 ."
      }
  }

Generate localization files

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.

• It will pick all po or pot files from ./i18n/ directory. Filename would be used as a language code.
• i18next compatible translations would be output into ./src/locales/
• Specify NAMESPACE so translation strings from different package's don't collide across app switching in UI.

On prestart / start / build

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"

Travis .travis.yml

Before build/deploy part add the npm run localize so that localization files are available otherwise code will not work.