Managing Translations

Adding text messages to components

In any file that emits text strings to the page that should be translated replace the string with the <FormattedMessage> component or one of its relations.

You MUST provide:

id - this is the key used to find the translation in the resource files.

defaultMessage - this is used if no translation is found and should be equivalent to the usual English text.

description - this is shown to the translator and helps them understand the context and usage of the word. For example the id might be 'Name' but the message to the translator might indicate whether we mean full name, first name etc.

<FormattedMessage	
	id="translation"
	defaultMessage="Translation"
	description="Test of the internationalisation scripts"
/>

Process the source code

When npm start is run in development mode, or when npm run extract-messages is run the babel-plugin-react-intl processes all the client javascript files looking for usage of the <FormattedMessag> Tag. These are moved to the build/messages folder in a structure the reflects the module layout.

Run Manage Translations

npm run manage:translations

This will output a report showing any duplicated ids and untranslated keys

it also adds any new keys to the translation files.

Duplicate ids:
 
  No duplicate ids found, great!
 
Maintaining mi.json:
 
Untranslated keys:
  translation: Translation

The results are in

Intl/en.json and Intl/mi.json

Whitelist files

To suppress untranslated warnings when the word is the same in both languages add it to the whilelist file.

e.g

At Runtime

Most of the work takes place in setup.js

This defines the available languages/locales. reads in the translation files and adds them to the localiszationData.<lang>.messages array.

This array is then held in the global state and made available via injection of the Intl object into all the components that require it.

Changing the locale via the Switch Language menu item and action should immediately update all the translations on the page.

Background Reading

Run Time translation is handled by react-intl.

https://github.com/yahoo/react-intl/wiki/Components#string-formatting-components

Collection of Messages requiring translation is handled by babel-plugin-react-intl

https://github.com/yahoo/babel-plugin-react-intl

Management of the translations files handled by react-intl-translations manager

https://github.com/GertjanReynaert/react-intl-translations-manager