|
| 1 | +# YAML i18n loader for Webpack |
| 2 | + |
| 3 | +Loads YAML files into JavaScript as precompiled functions using |
| 4 | +[yaml-to-messageformat] and [messageformat]. |
| 5 | + |
| 6 | +With the default options, will load [Rails i18n] YAML files, but can be |
| 7 | +configured for other contents as well. E.g. for YAML with contents already in |
| 8 | +ICU MessageFormat, use with options `{ pluralVariable: null, replacements: [] }`. |
| 9 | + |
| 10 | +By default, variables of the form `%{foo}` and `%b` will be detected in the |
| 11 | +input strings, and an object with keys matching the pluralisation classes of the |
| 12 | +current language (set by having a parent key such as `en` or `fi`) will be |
| 13 | +handled as a proper plural. |
| 14 | + |
| 15 | +## Installation |
| 16 | + |
| 17 | +```sh |
| 18 | +npm install messageformat-yaml-loader |
| 19 | +``` |
| 20 | +or |
| 21 | +```sh |
| 22 | +yarn add messageformat-yaml-loader |
| 23 | +``` |
| 24 | + |
| 25 | + |
| 26 | +## Usage |
| 27 | + |
| 28 | +For a working demo of the following, run `npm install` in the |
| 29 | +[`example/`](./example/) directory, and then open `example/dist/index.html` in |
| 30 | +a browser. |
| 31 | + |
| 32 | + |
| 33 | +#### Webpack configuration |
| 34 | + |
| 35 | +```js |
| 36 | +{ |
| 37 | + test: [/\.yaml$/, /\.yml$/], |
| 38 | + loader: require.resolve('messageformat-yaml-loader'), |
| 39 | + options: { |
| 40 | + biDiSupport: false, |
| 41 | + defaultLocale: 'en', |
| 42 | + includeLocales: null, |
| 43 | + pluralVariable: 'count', |
| 44 | + verbose: false |
| 45 | + } |
| 46 | +} |
| 47 | +``` |
| 48 | + |
| 49 | +Some of the default option values are shown, but none is required. Most options |
| 50 | +are passed on to [yaml-to-messageformat] (see there for their documentation); |
| 51 | +`biDiSupport` enables bi-directional text support in [messageformat]. |
| 52 | + |
| 53 | + |
| 54 | +#### messages.yml |
| 55 | + |
| 56 | +```yaml |
| 57 | +en: |
| 58 | + errors: |
| 59 | + format: "%{attribute} %{message}" |
| 60 | + messages: |
| 61 | + confirmation: "doesn't match %{attribute}" |
| 62 | + accepted: "must be accepted" |
| 63 | + wrong_length: |
| 64 | + one: "is the wrong length (should be 1 character)" |
| 65 | + other: "is the wrong length (should be %{count} characters)" |
| 66 | + equal_to: "must be equal to %{count}" |
| 67 | +``` |
| 68 | +
|
| 69 | +
|
| 70 | +#### example.js |
| 71 | +
|
| 72 | +```js |
| 73 | +import messages from './messages.yml' |
| 74 | +const { format, messages: errors } = messages.en.errors |
| 75 | + |
| 76 | +errors.accepted() |
| 77 | +// 'must be accepted' |
| 78 | + |
| 79 | +format({ |
| 80 | + attribute: 'Your message', |
| 81 | + message: errors.wrong_length({ count: 42 }) |
| 82 | +}) |
| 83 | +// 'Your message is the wrong length (should be 42 characters)' |
| 84 | +``` |
| 85 | + |
| 86 | + |
| 87 | +[messageformat]: https://messageformat.github.io/ |
| 88 | +[Rails i18n]: http://guides.rubyonrails.org/i18n.html |
| 89 | +[yaml-to-messageformat]: https://github.com/eemeli/yaml-to-messageformat |
0 commit comments