Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
easygettext
Advanced tools
Simple gettext tokens extraction tools for HTML and Pug files. Also converts from PO to JSON.
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:
This library comes up with two simple CLI tools to extract and compile your HTML tokens.
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.
You can install the easygettext package by running
npm install --dev easygettext
or
yarn add --save-dev easygettext
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
You can also extract the strings marked as translatable inside the <script> section of Vue.js components:
<template>
<h1>{{ greeting_message }}</h1>
</template>
<script>
export default {
name: "greetings",
computed: {
greeting_message() {
return this.$gettext("Hello there!")
}
}
}
</script>
For the moment, only the the extraction of strings localized using the $gettext function of vue-gettext is supported.
Outputs or writes to an output file, the sanitized JSON version of a PO file.
gettext-compile --output translations.json fr.po en.po de.po
If you use easygettext
to extract files from an AngularJS code base, you might find the following tips helpful.
To cover the cases (1)
<input placeholder="{{:: 'Insert name …' |translate }}">
<input placeholder="{{ 'Insert name …' |translate }}">
and (2)
<a href="#" ng-bind=":: 'Link text' |translate"></a>
<a href="#" ng-bind="'Link text' |translate"></a>
<a href="#">{{::'Link text' |translate}}</a>
<a href="#">{{'Link text' |translate}}</a>
you should run the extraction tool twice. Once with the command-line arguments
--startDelimiter '{{' --endDelimiter '}}' --filterPrefix '::'
and once with the command-line arguments
--output ${html_b} --startDelimiter '' --endDelimiter '' --filterPrefix '::'
The following Bash script shows how msgcat
might help
#!/usr/bin/env bash
input_files="$(find ./src/ -iname \*\.html)"
workdir=$(mktemp -d "${TMPDIR:-/tmp/}$(basename $0).XXXXXXXXXXXX") || exit 1
html_a=${workdir}/messages-html-interpolate.pot
html_b=${workdir}/messages-html.pot
./dist/extract-cli.js --output ${html_a} --startDelimiter '{{' --endDelimiter '}}' --filterPrefix '::' ${input_files}
./dist/extract-cli.js --output ${html_b} --startDelimiter '' --endDelimiter '' --filterPrefix '::' ${input_files}
# Extract gettext “messages” from JavaScript files here, into ${es_a} …
es_a=${workdir}/ecmascript.pot
# [...] > ${es_a}
# Merge the different catalog templates with `msgcat`:
merged_pot=${workdir}/merged.pot
msgcat ${html_a} ${html_b} ${es_a} > ${merged_pot}
# Cleanup, in case `msgcat` gave merge-conflicts in catalog header.
header=${workdir}/header.pot
sed -e '/^$/q' < ${html_a} > ${header}
body=${workdir}/body.pot
sed '1,/^$/d' < ${merged_pot} > ${body}
cat ${header} ${body} > ${output_file}
# Remove temporary directory with working files.
rm -r ${workdir}
Please note that the script needs to be modified to match your needs and environment.
Run the tests using mocha:
npm test
We also have extensive coverage:
npm run cover
Run:
npm run prepublish
Then run extract-cli.js
:
./dist/extract-cli.js --attribute v-translate --attribute v-i18n ~/output.html
Thanks a million to @rubenv for the initial ideas and implementations in angular-gettext-tools, which inspired me a lot.
Thanks to ES6 and Babel for being awesome.
MIT
FAQs
Simple tools to extract gettext strings
The npm package easygettext receives a total of 9,328 weekly downloads. As such, easygettext popularity was classified as popular.
We found that easygettext demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.