• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ttag-org/babel-plugin-ttag: ttag - library for extracting and resolving gettext ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

ttag-org/babel-plugin-ttag

开源软件地址(OpenSource Url):

https://github.com/ttag-org/babel-plugin-ttag

开源编程语言(OpenSource Language):

JavaScript 96.6%

开源软件介绍(OpenSource Introduction):

babel-plugin-ttag

travis codecov

NPM

⚠️ This project was previously named babel-plugin-c-3po. Some of the talks, presentations, and documentation may reference it with both names.

project description

Solution for providing gettext like translations into your project. Uses es6 native template syntax.

documentation - c-3po.js.org

Plugin functions:

  • extracting translations from es6 tagged templates to .pot
  • resolving translations from .po files right into your sources at compile time.

Key features: The core features of this tool are:

  • Works with GNU gettext tool (.po files).
  • Use es6 tagged templates syntax for string formatting (no extra formatting rules, no sprintf e.t.c).
  • The most intelligent gettext functions extraction from javascript sources (babel plugin).
  • Resolves translations from .po files right into your code (no runtime extra work in browser).
  • Works with everything that works with babel (.jsx syntax for instance).
  • Fast feedback loop (alerts when some string is missing translation right at compile time)
  • Designed to work with universal apps (works on a backend and a frontend).

Tutorials

Installation

npm install --save-dev babel-plugin-ttag && npm install --save ttag

gettext example

Here is how you code will look like while using this plugin:

import { t } from 'ttag';
const name = 'Mike';
console.log(t`Hello ${name}`);

So you can see that you can use native es6 template formatting. To make your string translatable, all you need to do is to place 't' tag.

Translator will see this inside .po files:

#: src/page.js:8
msgid "Hello ${ name }"
msgstr ""

Plural example

Here is how you can handle plural forms:

This function has something similar with standart ngettext but behaves a little bit different. It assumes that you have only one form in your sources and other forms will be added in .po files. This is because different languages has different number of plural forms, and there are cases when your default language is not english, so it doesn't make sense to specify 2 plural forms at all.

import { ngettext, msgid } from 'ttag';
const name = 'Mike';
const n = 5;
console.log(ngettext(msgid`Mike has ${n} banana`, `Mike has ${n} bananas`, n));

Output in .po files:

#: src/PluralDemo.js:18
msgid "Mike has ${ n } banana"
msgid_plural "Mike has ${ n } bananas"
msgstr[0] ""
msgstr[1] ""

Use case with jsx (react):

There are no additional setup for making this plugin work inside jsx. (just add babel-plugin-react plugin to your .babelrc)

import React from 'react';
import { t, ngettext, msgid } from 'ttag';

class PluralDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.countInc = this.countInc.bind(this);
    }
    countInc() {
        this.setState({ count: this.state.count + 1 });
    }
    render() {
        const n = this.state.count;
        return (
            <div>
                <h3>{ t`Deadly boring counter demo (but with plurals)` }</h3>
                <div>{ ngettext(msgid`You have clicked ${n} time`, `You have clicked ${n} times`, n) }</div>
                <button onClick={this.countInc}>{ t`Click me` }</button>
            </div>
        )
    }
}

export default PluralDemo;

Disabling some code parts

If for some reason you need to disable ttag plugin transformation for some code block you can use special comment globally to disable the whole file or inside some code block (function):

/* disable ttag */

// or
function test() {
    /* disable ttag */
}

Contribution

Feel free to contribute, make sure to cover your contributions with tests. Test command:

make test

License

MIT License.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap