bpt

babel-plugin-transform-typograf

Automatically formats your translations in JS

Showing:

Popularity

Downloads/wk

44

Maintenance

No Maintenance Data Available

Package

Dependencies

2

Size (min+gzip)

16.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Amplifr Logo

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
  1. 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100