jdcrensh / riw

A console app and library to help you localise React apps in conjunction with react-intl

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

riw

A console app and library to help you localise React apps in conjunction with react-intl

Use riw to:

  • Define target locales for your app: the locales into which you translate the app.
  • Extract react-intl message descriptors from your React components, directly or indirectly.
  • Check for duplicates in your react-intl message descriptor ids.
  • Manage translations for each target locale, storing them in a simple translations database.
  • Generate JSON files for your translations, to include in your app.

See Introducing riw on Medium for background and motivations.

There's an example repository, riw-example, showing (in its commit history) how to migrate a simple React app with hard-coded strings to react-intl, and then how to use riw with it.

The word "riw" seems to be Welsh for slope or hill, and rhymes with the English word drew.

This project is not associated with the react-intl project.

Assumptions

riw assumes you're familiar with react-intl, and that your app already uses a build system of some kind (for example, webpack).

Problems riw doesn't solve

  • riw doesn't perform any automated text translation or interface with any translators or translation services. It tells you which messages need translating, lets you update its translations database with the translations once you have them, and produces shippable, react-intl-compatible JSON files for each locale you want to support.

  • riw doesn't provide a mechanism for generating unique react-intl message descriptor ids. How you define these depends on your app's requirements. However, it does let you identify any duplicate ids. (See the FAQ for a possible naming scheme to help avoid duplicates.)

  • riw doesn't import the generated JSON locale files into your app or plug them into react-intl's IntlProvider. You implement this behaviour yourself.

Install

$ yarn add --dev riw  # OR: npm install --save-dev riw

Usage

Full tutorial: Installing, configuring and using riw

TL;DR:

  1. Add to your app's package.json:
    "riw": {
        "defaultLocale": "en-US", // locale of source strings
        "targetLocales": [  // other locales app should support
            "fr-FR",
            "pt-BR",
            ...
         ],
    }
  2. yarn run riw db init – initialise empty db at src/locale/riw-db.json
  3. yarn run riw app translate – outputs src/locale/[locale].json and src/locale/TODO-untranslated.json (you might need to add a .babelrc in your app)
  4. Update your app to import strings from src/locale/[locale].json for each target locale, and plug them into react-intl's IntlProvider at the appropriate time.
  5. LOOP:
  6. Translate everything in the TODO-untranslated.json file. Meanwhile, keep developing your app in the usual way.
  7. yarn run riw db import TODO-with-translations.json if you have a file of them in the right format, or
  8. yarn run riw db update <opts...> to update the db string by string.
  9. yarn run riw app translate
  10. Test and (maybe) ship.
  11. Go to LOOP.

Check everything into source control. There are no temporary files.

More information

Maintainer

David Smith (@avaragado)

Contribute

Bug reports, feature requests and PRs are gratefully received. Add an issue or submit a PR.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Licence

MIT © David Smith

About

A console app and library to help you localise React apps in conjunction with react-intl

License:MIT License


Languages

Language:JavaScript 100.0%