@leading-works/create-trans-unit v0.1.6

create-trans-unit

Convenience tool to generate trans-unit XML tag for Angular's i18n XLIFF files.

See the Angular's i18n guide

Installation

With Yarn: yarn global add @leading-works/create-trans-unit

Usage

Help: create-trans-unit -h

Angular adds the source text, the relative path to the file containing the translation and the line number where it appears. With only the mandatory options: create-trans-unit --source "Hello World!" --path 'src/app/app.component.html' --lineNumber '42'

Add optional arguments

Angular's internationalization solution offers the possiblity to add a description, a meaning and an id to the translation. In order to add a meaning, one must add a description first (out of syntax, organically).

Unless an id is provided, Angular will infer a dynamic id from the text and the meaning:

The Angular i18n tools generated the ids for these translation units. Don't change them. Each id depends upon the content of the template text and its assigned meaning. If you change either the text or the meaning, then the id changes.

With optional arguments:

create-trans-unit \
  --source "Hello World!" \
  --path 'src/app/app.component.html' \
  --lineNumber '42' \
  --id 'app.greeting.message' \
  --meaning 'main page message' \
  --description 'The greeting message on the main page.' \
  --verbose

Workflow

Suppose you're working on the next great feature of your app and have a form for visitors to reply to your "Hello World!" statement:

<label for="reply">Reply:</label>
<input id="reply" type="text" placeholder="How do you do?" />

You decide you want it in French too and add the i18n attribute with a meaning, a description and an id:

<label for="reply" i18n="input label|label for the reply input@@app.reply.label"
  >Reply:</label
>
<input
  id="reply"
  type="text"
  placeholder="How do you do?"
  i18n-placeholder="input placeholder|placeholder text in the reply input@@app.reply.placeholder"
/>

In order to avoid massive headaches and merge conflicts (way - we know stuff gets postponed in projects...) down the line, you decide you will add the texts the *.fr.xlf file now - so that you can also preserve existing translations, you know... Thusly, you joyfully type:

create-trans-unit \
  --source "Reply:" \
  --path 'src/app/app.component.html' \
  --lineNumber '50' \
  --id 'app.reply.label' \
  --meaning 'input label' \
  --description 'label for the reply input' | pbcopy

create-trans-unit \
  --source "How do you do?" \
  --path 'src/app/app.component.html' \
  --lineNumber '53' \
  --id 'app.reply.placeholder' \
  --meaning 'input placeholder' \
  --description 'placeholder text in the reply input' | pbcopy

Because you piped the outputs to pbcopy, you can directly go to your messages.fr.xlf and paste your shiny new <trans-unit> tag in the appropriate place.

You commit your new feature with the updated translation and git will inform you the history of your translations as you've added them to your app.