Default to English translation if translation key is missing

[OtterleyW]

If the locale in config.js is different than en we compare the selected translation to default en.json file. Translations are compared in the same way that it's done in Translations CLI.

After this update, new translation keys will not be added to other translation files with English default texts. We keep providing translations in our supported languages but they might not be up to date all the time. This means if you want to update your translations beforehand or use your own translations file, you can use translation CLI to check if there are translations missing.

[Gnito]

Don't export anything directly from Lodash.
It is quite a big library and since we use a very small portion of functions it provides, we save ~15 KB of gzipped javascript if we don't import it directly.

[Gnito]

Use arrow function instead of anonymous function declaration and I think object spread is easier to understand than Object.assign.
With those changes this can be turned to oneliner:

const addedKeys = diff.reduce((toAdd, key) => ({ ...toAdd, [key]: defaultMessages[key] }), {});

or if you prefer explicit returns:

const addedKeys = diff.reduce((toAdd, key) => {
  return { ...toAdd, [key]: defaultMessages[key] };
}, {});

Although, this is probably the easiest to understand:

  const addDefaultTranslation = (translations, missingKey) => ({ ...translations, [missingKey]: defaultMessages[missingKey] });
  const addedKeys = diff.reduce(addDefaultTranslation, messagesInLocale);

[Gnito]

Actually, I'd suggest this:

const addMissingTranslations = (sourceLangTranslations, targetLangTranslations) => {
  const sourceKeys = Object.keys(sourceLangTranslations);
  const targetKeys = Object.keys(targetLangTranslations);
  const missingKeys = difference(sourceKeys, targetKeys);

  const addMissingTranslation = (translations, missingKey) => 
    ({ ...translations, [missingKey]: sourceLangTranslations[missingKey] });

  return missingKeys.reduce(addMissingTranslation, targetLangTranslations);
};

const isDefaultLanguageInUse = config.locale === 'en';
const messages = isDefaultLanguageInUse
  ? defaultMessages
  : addMissingTranslations(defaultMessages, messagesInLocale);

[Gnito]

(btw. I didn't test that ^)

[Gnito]

Now that I read these comments, I think that these lines (20-34) should be reordered a bit:

// Flex template application uses English translations as default.
import defaultMessages from './translations/en.json';

// If you want to change the language, change the imports to match the wanted locale:
//   1) Change the language in the config.js file!
//   2) Import correct locale rules for React Intl library
//   3) Import correct locale rules for Moment library
//   4) Use the `messagesInLocale` import to add the correct translation file.

// Step 2:
// Import locale rules for React Intl library 
import localeData from 'react-intl/locale-data/en';

// Step 3:
// If you are using a non-english locale with moment library,
// you should also import time specific formatting rules for that locale
// e.g. for French: import 'moment/locale/fr';

// Step 4:
// If you are using a non-english locale, point `messagesInLocale` to correct .json file
import messagesInLocale from './translations/en.json';

// If translation key is missing from `messagesInLocale` (e.g. fr.json), 
// corresponding key will be added to messages from `defaultMessages` (en.json) 
// to prevent missing translation key errors.

[Gnito]

Also docs should reflect this step-by-step model ^

[Gnito]

I'd refactor this a bit more.