npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gettext-utils

v2.2.1

Published

A set of utils to parse react files and export .po files and import them back

Downloads

543

Readme

gettext-utils

Build Status Coverage Status

A set of utils to extract strings from JS application to .pot file, merge it with existing .po files and / import these strings back to a react-targem or lioness compatible .json file / validate that all the strings are translated before release

Installation

npm i --save-dev gettext-utils

Usage

  • export-strings [input-files-glob] [output] [--default-locale=locale] [--po-files-path] parse through all the files provided in input-files-glob (src/**/{*.js,*.jsx,*.ts,*.tsx} by default) (uses glob) and generate .pot file in the output path (./src/i18n/template.pot by default). Then searches for all the .po files in the same directory and updates them with new strings to translate. If default-locale is provided (e.g. en) and this locale's .po file exists in the same folder (e.g. en.po), this file will be populated with the translations automatically. You can specify additional path(s) to update .po files by using --po-files-path your/custom/folder your/other/directory.
  • import-strings [po-files-path] [output] [--optimize=true] [--split-by-locale=false] parse all the .po files inside the directory provided as po-files-path (./src/i18n/ by default) and generate react-targem or lioness compatible .json file in the output path (./src/i18n/translations.json), which is an object with each locale as a key and gettext-parser object for this locale as a value. By default all translations.json are optimized, e.g. all unnecessary fields are removed. Pass --no-optimize or --optimize=false to disabled optimizations. You can also pass --split-by-locale option to write translations for different locales into separate files.
  • merge-translations [po-files-dir-path] [template-path] merge updated .pot file with .po. Done automatically by export-strings command. If default-locale is provided (e.g. en) and this locale's .po file exists in the same folder (e.g. en.po), this file will be populated with the translations automatically.
  • validate-strings [po-files-dir-path] [template-path] validate all .po files inside po-files-dir-path (./src/i18n/ by default) to have all the translations in the .pot file provided in template-path (./src/i18n/template.pot by default).

Use-case

For example, you have a react project in src folder and you want to use react-targem or lioness to translate your application.

Init

  1. npm i --save react-targem or npm i --save lioness
  2. npm i --save-dev gettext-utils
  3. Write your first translatable string with <T> component or withTranslations HOC.
  4. npx gettext-utils export-strings to create a src/i18n/template.pot file.
  5. Open it with POEdit and create locale files from it in the same folder (including the default locale, e.g. en)
  6. Create a prestart and prebuild scripts inside scripts section of your package.json: "prestart": "gettext-utils import-strings" to generate translations.json file automatically.
  7. Include /src/i18n/translations.json file inside your .gitignore (this file is generated automatically).
  8. Add gettext-utils export-strings --default-locale=en && git add src/i18n/* in any precommit hook you are using, so the translations will be exported automatically (husky).

Translate

  1. There are plenty of tools, that connect to your git repository with an online translation tool (eg. POEditor or open-source Weblate).
  2. Translators can translate all the application in the develop branch before relase.

Release

  1. You can run npx gettext-utils validate-strings to make sure that everything is translated before each release.