Newton's Programmatic Measurements

npm

Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »

easygettext

2.7.0 • Public • Published

easygettext

Build Status codecov.io

Simple gettext tokens extraction tools for HTML and Pug files. Also converts from PO to JSON.

Motivation

angular-gettext is a very neat tool, that comes with Grunt tooling to extract translation tokens from your Pug/Jade/HTML templates and JavaScript code.

Unfortunately, this has two drawbacks:

  • It isn't a simple command-line interface, and forces the usage of Grunt;
  • It is angular-specific.

This library comes up with two simple CLI tools to extract and compile your HTML tokens.

Why This Library?

Our frontend toolchain, systematic doesn't rely on Grunt/Gulp/Broccoli/... and uses a combination of simple Makefiles and CLI tools to do the job.

The toolchain being framework-agnostic, we don't want to depend on Angular to extract our HTML translation tokens. On another note, we use the standard xgettext tool to extract our JavaScript translation tokens.

Nevertheless, the way angular-gettext does it (with tokens, directly in HTML) is elegant, is used by many other libraries and will also be the way to do it in Angular2.

Also, by utilizing acorn, this tool will parse and compile typical JavaScript expressions used in translate-filter expressions. For example, exposed to a (AngularJS-based) fragment like

<span ng-bind="isNight ? 'Moon' + 'shine' : 'Day' + 'light' |translate"></span>
<span ng-bind="isC ? 'C' + (isD ? 'D' : 'd') : 'c' + (isE ? 'E' : 'e') |i18n "></span>

will produce the following strings

Moonshine
Daylight
CD
Cd
cE
ce

Which will be correctly looked up and translated during runtime, at least by angular-gettext.

Installation

You can install the easygettext package by running

npm install --dev easygettext

or

yarn add --save-dev easygettext

Usage & Examples

gettext-extract

Simply invoke the tool on the templates you want to extract a POT dictionary template from. The optional '--ouput' argument enables you to directly output to a file.

gettext-extract --output dictionary.pot foo.html bar.pug hello.vue

It recognizes the following token flavours (currently; feel free to extend it!)

<div translate>Hello World</div>
<div translate translate-context="According to...">Hello World</div>
<div translate translate-comment="My comment...">Hello World</div>
<div translate translate-plural="Hello worlds">Hello World</div>
<div placeholder="{{ 'Hello World' | translate }}"></div>
<div placeholder="{{ scopeVariable || ('Hello World' | translate) }}"></div>
<get-text>Hello World</get-text>
<i18n>Hello World</i18n>
<translate>Hello World</translate>
<!--  The following becomes 'Broken strings are joined'  --> 
<span ng-bind="{{ 'Broken '
 + 'strings ' +
 'are ' + 
 'joined' |translate}}"></span>
 <span ng-bind="'Bed n\'' + ' breakfast' |translate"></span>
 <!-- JavaScript expressions are parsed and compiled -->
<span ng-bind="true ? 'Always' : 'Never' |i18n "></span>
<!--  By supplying the  --filterPrefix '::' parameter  -->  
<span>{{:: 'Something …' |translate}}</span>
<!--  The default delimiters '{{' and '}}' must be changed to empty strings to handle these examples  -->
<span ng-bind=":: 'Something …' |translate"></span>
<div placeholder="'Hello World' | translate"></div>

Also, it's able to parse Jade/Pug and Vue component files, even if those themselves contain Jade or Pug templates.

You can combine any context, comment and plural together. Also, you can use 'i18n' instead of 'translate' as master token.

You can also provide your own master tokens:

gettext-extract --attribute v-translate --output dictionary.pot foo.html bar.jade
 
gettext-extract --attribute v-translate --attribute v-i18n --output dictionary.pot foo.html bar.jade
 
gettext-extract --startDelimiter '[#' --endDelimiter '#]' --output dictionary.pot foo.html bar.jade
Extract from multiple files

gettext-extract needs the exact file paths to work. If you want to extract gettext from all files in a folder, you can use the UNIX find command. Here is an example as a npm script:

{
  //...
  "scripts": {
    // This is for VueJS files, please adapt for HTML or Jade/Pug templates
    "extract-gettext-cli": "gettext-extract --attribute v-translate --output dictionary.pot $(find scripts/src/components -type f -name '*.vue')"
  }
}
Extract from

Keywords

none

install

npm i easygettext

Downloadsweekly downloads

7,714

version

2.7.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability