Skip to main content

Generate Lokalise keys

Proposed change​

We're using Lokalise, and we're using a script to download the lokalise keys into a json file within the chosen application.

Currently we're using strings for all Lokalise keys, with this change we'll be able to use an object to access the lokalise key.

How it looks now​

<FormattedMessage id={'overview_greeting_evening'} />

Alternative​

import { translationKeys } from '../services/i18n';

<FormattedMessage id={translationKeys.overview_greeting_evening} />;
expect(element.textContent).toMatch(getFormattedMessageById(translationKeys.overview_greeting_evening));

Motivation​

  • This will help reduce user errors
  • It will make it easier to find the key we want to use with the help of VSCode's intellisense.

Proposed transition strategy​

  • Run the lokalise script to get the latest keys and generate the translationKeys object.
  • export translationKeys from i18n/index.ts file.
  • Add this to the end of the scripts/generate_keys.sh file to replace all occurrences of each string key in the app with the new implementation.
for KEY in ${LOKALISE_KEYS[@]}
do
  KEY=${KEY%\"}
  KEY=${KEY#\"}

  for file in $(grep -lRZE $(get_app_path)/src -e "('|\")$KEY('|\")" --exclude-dir="i18n") ; do
      sed -i '' "s/id=\"$KEY\"/id={translationKeys.$KEY}/g" $file
      sed -i '' "s/\"$KEY\"/translationKeys.$KEY/g" $file
      sed -i '' "s/'$KEY'/translationKeys.$KEY/g" $file
  done
done
  • Make sure that translationKeys is imported in each of the files that the script changed.
  • Review all the changed files, and run the linter/tests before opening a PR.