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

@edx/reactifex

v2.2.0

Published

A helper for moving react-intl messages to transifex and back

Downloads

21,710

Readme

reactifex

Helper utility designed to make it easy to upload react-intl extracted messages to transifex, with support for ICU plurals and translator comments.

dependencies license npm_version Build Status

There are two modes of usage - compilation and comment pushing.

Compilation mode

In this mode, messages that have been extracted by babel-plugin-react-intl (into individual files) are combined. The resulting json is suitable to upload to Transifex and matches their specified KEYVALUEJSON format.

usage: $(npm bin)/reactifex <input_folder> <output_file>

  • input_folder corresponds to the messagesDir option used by babel-plugin-react-intl
    • note that reactifex assumes folder structure based on this default
  • output_file will be suitable for upload to transifex

Comment pushing

This mode is why I wrote this library in the first place - I wanted the ability to use comments as PO files do, but none of the tools I found to convert react-intl messages to PO files were able to properly handle ICU pluralization. By keeping everything in a js context with KEYVALUEJSON, plurals work correctly and we now have comment support for translators (by default, Transifex's KEYVALUEJSON file format does not allow for comments to be included with strings for translation).

Usage is a little complicated, I'm sorry about that; you're going to be running this server-side as a series of bash commands. Do note that I assume $SECRET_USER and $SECRET_PWD env vars exist for basic auth purposes. See Transifex's API Introduction for more details on authentication. Here's an example, written as it would be in the Makefile of a project that makes use of reactifex:

tx_url1 = https://www.transifex.com/api/2/project/<project>/resource/<resource>/translation/<default_language_code>/strings/
tx_url2 = https://www.transifex.com/api/2/project/<project>/resource/<resource>/source/
push_translations:
    ./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
    $$(npm bin)/reactifex <input_folder> --comments
    ./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
  • tx_url1 and tx_url2 are just variables as defined by the Transifex API documentation, extracted for readability.

  • First, bash_scripts/get_hashed_strings.sh is called with a url argument. This will populate bash_scripts/hashmap.json with data about the strings in your resource, including the all-important string_hash.

  • Next, the main reactifex script (node js) runs with an additional --comments flag, and no output file. This has the effect of gathering up all your babel-plugin-react-intl extracted messages with their comments attached. From there, it's simple enough to match up each message with its string_hash, and save these pairs in a '|'-delimited list, for later consumption.

  • Finally, bash_scripts/put_comments.sh is run with the base PUT url as an argument (also reads the data file we created in the previous step), updating translator comments for each message on Transifex via their API.