Traks - a translation system for React/JSX.

Demo

See traks-zoo (https://github.com/aktiedysten/traks-zoo). Its commit history also serves as a step-by-step guide for setting up traks using create-react-app.

Introduction

The basic idea is to add elements in your JSX code like this:

<T>You have {count} unread message(s)</T>

Then you run bin/traks update (in this example bin/traks update --langs en,da) which searches for <T> tags in your source code. New tags are automatically added to your translations file, and looks like this:

	"e8c2410dd77c": {
		"_new": true, // FIXME remove this line when translation is done
		"en": (count) => <O>You have {count} unread message(s)</O>,
		"da": (count) => <O>You have {count} unread message(s)</O>,
	},

You can then translate it and even handle plural/singular cases by changing it into this:

	"e8c2410dd77c": {
		"en": (count) => {
			switch (count) {
			case 0: return <O>You have no unread messages</O>;
			case 1: return <O>You have 1 unread message</O>;
			default: return <O>You have {count} unread messages</O>;
			}
		},
		"da": (count) => {
			switch (count) {
			case 0: return <O>Du har ingen ulæste beskeder</O>;
			case 1: return <O>Du har 1 ulæst besked</O>;
			default: return <O>Du har {count} ulæste beskeder</O>;
			}
		},
	},

More features

• You can provide context when ambiguities arise, e.g. <T context="file">Save</T> and <T context="money">Save</T> - these result in separate translation keys so you can translate them differently.
• Dependencies are captured automatically, for example count in the introduction above. But you can also specify additional dependencies: <T deps={[foo]}>Translate me</T> will add foo as dependency and pass it to your translation function even though foo is not used inside the <T> tag.
• At Aktiedysten ApS we've combined context and deps to format dates and such, e.g. <T context="1 January 2018" deps={[timestamp]}></T> - then the language specific date formatting happens in the respective translation functions.
• Translations can be "baked", so that only one language is included when the site is built. See traks-zoo (specifically https://github.com/aktiedysten/traks-zoo/blob/master/bake-npm-start.sh), for an example on how to do this. By default, all translations are included in the build, so baking saves space.

Caveats

• It's not trivial to install; npm install traks isn't enough; you also need to insert our custom Babel preset (see react-app.js) into the compilation flow (this is where the "magic" handling of <T> tags happens). If you're using create-react-app you need to eject it before modifying the Babel preset is even possible (this is what traks-zoo did). Other build setups have not been tested.
• There are restrictions on how you can use <T> tags; see the autogenerated traks.js and traks-translations.js files for documentation on this.

Why?

The two most popular translation solutions for React are react-intl and react-i18next. Both have a verbose and unnatural syntax, and want you to assign keys to every translation. I have previously worked with gettext which is intuitive to work with, has a light syntax and it automatically extracts translation strings from your source code. So, I desired something similar for React.