Project was renamed to . Follow the new doc — . The name was changed due to the possible legal infringement. (look at this for the details) ttag https://ttag.js.org/ issue Hi everyone! This article is about new tool — . We have been using c-3po for nearly a year in production and are happy with it. was designed to provide an intelligent and reliable translation workflow on top of format. In general, c-3po is a library plus a set of that will allow you to localize your project with minimal effort. javascript localization c-3po c-3po GNU gettext tools Fear question: “ ?”. There are a couple of mature solutions for the localization that you can be happy with, but the main reasons why we decided to build our own were: Why yet another one localization library We didn’t want to use formatting for strings. introduced , we just wanted to use them for the string formatting. sprintf es6 template strings We were looking for the intelligent tool that can extract translation strings from the sources (js, jsx) and will be able to add some kind of validation for the extracted strings. We were searching for the solution that will allow us to precompile translations on a build step and on script execution also. Framework agnostic solution, that can be integrated almost in any framework and can be used with any build tool. javascript Wanted to ensure that all strings are translated during CI builds. Welcome, c-3po! Here are some examples of how this library can be used: Plural forms support: More details about why we should use the tag for the first argument with are . t msgid here Contexts support: .po files According to the format, all translations are placed inside files. Each locale has it’s separate file and all translations are added there. The ecosystem provides reliable toolset that can create and update those files. GNU gettext .po .po c-3po .po So, somehow we must parse our source code and extract all strings that are wrapped with c-3po tags and functions. For that purpose, we created that works well with javascript AST. As a result, it can be used everywhere where babel works (jsx, ts, tsx, React Native e.t.c). There is a separate documentation page for the plugin options . Just to reduce some boilerplate work we created , that works on top of that plugin. babel-plugin-c-3po here c-3po-cli will add the command to your environment, which will be used in the examples below. npm install -g c-3po c-3po .po files creation Let’s imagine that we have file and want to localize it to the Ukrainian language. hello.js To get started, you need to setup file for the Ukrainian language. .po c-3po init uk uk.po is the ISO code for the Ukrainian language. (all supported codes can be found ) uk here command will create empty file with the minimal set of the required headers. init po Extracting and updating translations to the .po file To extract all tagged strings you need to execute one simple command: c-3po update uk.po hello.js After that our string must appear in the file: Hello ${ name } uk.po #: hello.js:3msgid "Hello ${ name }"msgstr " command will add new strings and will delete those that are not present in the sources. If your workflow requires files — you can use and commands. update .pot extract merge Building localized files If you can afford to build a separate bundle for every language, it is recommended to do so, as it will increase client performance (no extra parsing and replacing on a client + smaller bundles). c-3po replace uk.po hello-uk.js hello.js This command will create a localized version of the original file with all translations applied from . hello-uk.js uk.po Applying translations at runtime Another option is that you can apply appropriate file on a script execution. .po Here is how you can achieve this for our simple : hello.js You can also build your workflow with webpack and and import appropriate with dynamic imports. po-gettext-loader .po With this setup, every change in a file will trigger the webpack build. You can read more about different setups with webpack . .po here Translations validation and CI This command will throw if there are some untranslated strings or some invalid translations wrapped with tags: c-3po check uk.po hello.js More details on — validation https://c-3po.js.org/validation.html What’s next? Still, we are working on improving translation process and going to add new features to the library and tools. Simplify webpack integration. Simplify translations setup. Typescript. More docs and examples. Current translation process requires quite a bit of boilerplate that we can reduce, and we are going to fix that. Any feedback will be appreciated, PR’s are welcome! More links Docs and examples — https://c-3po.js.org/ c-3po library — https://github.com/c-3po-org/c-3po babel-plugin-c-3po — https://github.com/c-3po-org/babel-plugin-c-3po c-3po-cli — https://github.com/c-3po-org/c-3po-cli

Localization in javascript with c-3po

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Simple i18n for Create React App with ttag

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

How to Setup Webpack and Babel 7 for React

Simple i18n for Create React App with ttag

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

How to Setup Webpack and Babel 7 for React

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps