canvas_react_i18n
Write HTML markup inside a special <Text />
React component and it will be used as defaultValue
to a translated phrase, with wrappers automatically extracted. Best described with an example.
This JSX:
<Text key="greeting"> <p>Hello World!</p></Text>
Compiles into something like this:
<div dangerouslySetInnerHTML= __html: { var wrapper = "*": "<p>$1</p>" ; return I18n; } />
The output will be more compact than the above making it ready to be injected anywhere. And of course, we're assuming that an I18n
variable is in-scope. canvas_react_i18n assumes you are using i18n-js in conjunction with i18nliner
See the test/fixtures/
folder for more examples. It contains pairs of files; raw JSX inputs and their compiled outputs.
Usage
Just require the module and use the function on a block of text; a script that contains any number of <Text />
tags.
/* jshint node: true */var transform = ;var fs = ; var component = fs;var transformedComponent = ; fs;
A sample implementation of the <Text />
component can be found in the Wiki.
Internals
The transformation is done in three passes:
Pass 1: extracting blocks
Go through the source and locate <Text />
tags, extract the I18n phrase, any interpolation variables, and the actual markup.
Pass 2: wrapping the markup
Scan for HTML tags, replace them with "I18n wrappers" (stuff like *content*
and **content**
), and build the wrapper
set that will be injected into the I18n.t()
directive later on.
The transformer fully supports any level of tag-nesting. An input like this is totally valid:
Hello %{name}! Click me!
Output would be:
* ** Hello ***%{name}!*** ** ****Click me!**** ***********
The generated "wrapper": {}
set for the example above looks something like this:
var wrapper = "*": "<p>$1</p>" "**": "<span>$1</span>" "***": "<span>$1</span>" "****": "<a href=\"http://google.com\">$1</a>" "*****": "<iframe src=\"%{page_url}\">$1</iframe>";
Pass 3: transform
Using the extracted I18n parameters and the "wrapped" markup, we go over the source and replace the original, raw <Text ... >...</Text>
contents with the compiled I18n.t()
directive.
Running tests
npm installnpm run test
LICENSE
MIT