Babel Typograf Plugin

The plugin automatically formats your translations in JS.

Features

• It uses Typograf to format the text;
• Also, it replaces ~ with non-breaking space. It’s easier to use than UTF-8 character, and it is visible in any editor.

Structure (our approach)

const I18N = {
  ru: {
    heading: 'Структура должна быть ',
    content: 'вот такая. Допускается ' +
             'использовать~переносы',
    array: [
      'Допускается использовать массивы',
      [
        'И массивы внутри массивов',
        'Удобно для списков'
      ]
    ]
  },
  en: {
    heading: 'Structure should be ',
    content: 'like this. It`s allowed ' +
             'to use multiline~translations',
    array: [
      'You can use arrays',
      [
        'And arrays inside of arrays',
        'It is used as lists in the main'
      ]
    ]
  }
}

🚩 Also, you can wrap the translation object with any function if translation is a first argument of this function:

const I18N = messages({...})

Example usage

const t = I18N[this.context.locale]

h('div', [
  h('h1', [t.heading])
  h('p', [t.content])
])

• Translation should be plain otherwise it won’t be processed;
• But Arrays are supported (used as lists in the main);
• Anyway Functions won’t be processed.

This is mine very first Babel Plugin so please send an Issue if you have any suggestions how to improve this.

Plugin installation

1. First of all, you need to install the package:

$ yarn add babel-plugin-transform-typograf

2. Then you should add the plugin in your Babel config, for example, .babelrc:

  "plugins": [
    ...
    "react-hyperscript",
    "transform-typograf"
  ]

Limitations

• It is tested with ru 🇷🇺 and en 🇺🇸 languages only for now;
• Rules enabled: nbsp, hellip (ellipsis), apostrophe.

Tests

Run the following command to run test:

$ yarn test

It compares actual.js after transformation with an expected.js. Please note that due to unexpected behavior of Babel (it forces escaping of Cyrillic symbols), I have to add unescaping function to the test file.

Special thanks to Andrey Sitnik