https://github.com/amireh/canvas_react_i18n
Node function for converting React <Text /> components to Canvas-ready I18n.t() calls.
https://github.com/amireh/canvas_react_i18n
Last synced: 5 months ago
JSON representation
Node function for converting React <Text /> components to Canvas-ready I18n.t() calls.
- Host: GitHub
- URL: https://github.com/amireh/canvas_react_i18n
- Owner: amireh
- Created: 2014-08-10T21:06:55.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-01-15T19:10:31.000Z (over 10 years ago)
- Last Synced: 2024-12-07T22:13:27.867Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 377 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# canvas_react_i18n
Write HTML markup inside a special `` React component and it will be used as `defaultValue` to a translated phrase, with wrappers automatically extracted. Best described with an example.
This JSX:
```javascript
Hello World!
```
Compiles into something like this:
```javascript
$1"
};
return I18n.t("greeting", "* Hello World! *", { "wrapper": wrapper });
}())
}
} />
```
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](https://github.com/fnando/i18n-js) in conjunction with [i18nliner](https://github.com/jenseng/i18nliner-js)
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 `` tags.
```javascript
/* jshint node: true */
var transform = require('canvas_react_i18n');
var fs = require('fs');
var component = fs.readFileSync('./some/jsx/component.jsx');
var transformedComponent = transform(component);
fs.writeFileSync('./some/jsx/component-transformed.jsx', transformedComponent);
```
A [sample implementation](https://github.com/amireh/canvas_react_i18n/wiki/The-Text-Component) of the `` 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 `` 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:
```html
Hello
%{name}!
```
Output would be:
```text
*
**
Hello
***%{name}!***
**
****Click me!****
**********
*
```
The generated `"wrapper": {}` set for the example above looks something like this:
```javascript
var wrapper = {
"*": "
$1
",
"**": "$1",
"***": "$1",
"****": "$1",
"*****": "$1"
};
```
### Pass 3: transform
Using the extracted I18n parameters and the "wrapped" markup, we go over the source and replace the original, raw `...` contents with the compiled `I18n.t()` directive.
## Running tests
```bash
npm install
npm run test
```
## LICENSE
MIT