@markuplint/i18n

@markuplint/i18n

Install

markuplint package includes this package.

If you are installing purposely, how below:

$ npm install @markuplint/i18n

$ yarn add @markuplint/i18n

API

import { translator } from '@markuplint/i18n';

const t = translator({
  locale: 'ja',
  ...require('@markuplint/i18n/locales/ja.json'),
});

The translator function creates the t function. It is an overloading function that accepts kind of arguments below:

Translate sentence

type T = (template?: string, ...values: string[]) => string;

const message = t(
  // Template #1
  '{0} is {1:c}',
  // The {0} value of template #1
  t(
    // Template #2
    '{0} of {1}',
    // The {0} value of template #2
    t(
      // Template #3
      'the {0}',
      // The {0} value of template #3
      'value',
    ),
    // The {1} value of template #2
    t(
      // Template #4
      'the "{0*}" {1}',
      // The {0} value of template #4
      'id',
      // The {1} value of template #4
      'attribute',
    ),
  ),
  // The {1} value of template #1
  'duplicated',
);

console.log(message);
// => 属性「id」の値が重複しています

Placeholder

There is a placeholder that the number is surrounded by {} on template strings. It is replaced argument as a phrase. It translates the phrase if it matches the keyword defined in the dictionary.

Tagged templates syntax

:warning: It is experimental.

import { taggedTemplateTranslator } from '@markuplint/i18n';

const _ = taggedTemplateTranslator({
  locale: 'ja',
  ...require('path/to/dictionary/ja.json'),
});

const message = _`${
  //
  _`${
    //
    _`the ${'value'}`
  } of ${
    //
    _`the "${'id'}" ${'attribute'}`
  }`
} is ${
  //
  'c:duplicated'
}`;

console.log(message);
// => 属性「id」の値が重複しています

Translate a phrase

type T = (phrase: string) => string;

const phrase = t('element');

console.log(phrase);
// => 要素

Translate listed phrases

type T = (phrases: string[], useLastSeparator?: boolean) => string;

const list = t(['element', 'attribute', 'value']);

console.log(list);
// => 「要素」「属性」「値」

/* If locale is "en" */
console.log(list);
// => "element", "attribute", "value"

const list = t(['element', 'attribute', 'value'], true);

console.log(list);
// => 「要素」「属性」「値」

/* If locale is "en" */
console.log(list);
// => "element", "attribute" and "value"

It converts the character-separated list specified in each locale.

Locale	Separator	Before Char	After Char	Last Separator
en	, (comma + space)	" (double quote)	" (double quote)	and (space + chars + space )
ja	none (empty string)	「 (left corner bracket)	」 (right corner bracket)	none (empty string)

Avoid translation

The autocomplete is defined as オートコンプリート in the JA dictionary. However, It avoids translation if the number placeholder includes * (asterisk). It is an effective means if you want a code or a specific name.

const phrase = t('the "{0}" {1}', 'autocomplete', 'attribute');
console.log(phrase);
// => 属性「オートコンプリート」

const phrase = t('the "{0*}" {1}', 'autocomplete', 'attribute');
console.log(phrase);
// => 属性「autocomplete」

Another means is that it surrounds % (percentage) to a phrase. It is effective when you use listing.

const phrase = t('the "{0}" {1}', '%autocomplete%', 'attribute');
console.log(phrase);
// => 属性「autocomplete」

const list = t(['element', '%attribute%', 'value']);
console.log(list);
// => 「要素」「attribute」「値」