|
| 1 | +# @nice-labs/formatjs-webpack-loader |
| 2 | + |
| 3 | +A webpack loader for [FormatJS](https://formatjs.io), precompiles ICU MessageFormat strings, improve performance by avoiding runtime parsing of ICU messages. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- Through Webpack loader precompile ICU MessageFormat strings |
| 8 | +- Integrates seamlessly with webpack build process. |
| 9 | + |
| 10 | +## Installation |
| 11 | + |
| 12 | +```bash |
| 13 | +npm install --save-dev @nice-labs/formatjs-webpack-loader |
| 14 | +``` |
| 15 | + |
| 16 | +## Usage |
| 17 | + |
| 18 | +Add the loader to your webpack configuration: |
| 19 | + |
| 20 | +```typescript |
| 21 | +import * as path from 'node:path' |
| 22 | +import type { Configuration } from 'webpack' |
| 23 | + |
| 24 | +export default { |
| 25 | + // ... |
| 26 | + module: { |
| 27 | + rules: [ |
| 28 | + // ... |
| 29 | + { |
| 30 | + test: /\.json$/, |
| 31 | + loader: require.resolve('@nice-labs/formatjs-webpack-loader'), |
| 32 | + options: { |
| 33 | + // Loader options here |
| 34 | + }, |
| 35 | + include: [ |
| 36 | + // Specify the directories or files to include |
| 37 | + path.resolve(__dirname, 'src', 'locales'), |
| 38 | + ], |
| 39 | + }, |
| 40 | + // ... |
| 41 | + ], |
| 42 | + }, |
| 43 | + // ... |
| 44 | +} satisfies Configuration |
| 45 | +``` |
| 46 | + |
| 47 | +in the above example, the loader is applied to all `.json` files in the `src/locales` directory. |
| 48 | + |
| 49 | +in your source code, you can import the messages like this: |
| 50 | + |
| 51 | +```typescript |
| 52 | +import messages from './locales/en-US.json' |
| 53 | +// stored file format: Record<string, MessageDescriptor> |
| 54 | +// used file format: Record<string, MessageFormatElement[]> |
| 55 | +``` |
| 56 | + |
| 57 | +Precompiled files do not need to be stored or tracked in codebase, this webpack loader will handle it for you |
| 58 | + |
| 59 | +## Loader Options |
| 60 | + |
| 61 | +### **`format`** (optional, default: `default`) |
| 62 | + |
| 63 | +The format of the input. It can be one of the following: |
| 64 | + |
| 65 | +- [`default`] |
| 66 | +- [`lokalise`] |
| 67 | +- `simple`: flattern object |
| 68 | +- [`smartling`] |
| 69 | +- [`transifex`] |
| 70 | + |
| 71 | +[`default`]: https://formatjs.github.io/docs/react-intl/api/#message-descriptor |
| 72 | +[`lokalise`]: https://docs.lokalise.com/en/articles/3229161-structured-json |
| 73 | +[`smartling`]: https://help.smartling.com/hc/en-us/articles/360008000733-JSON |
| 74 | +[`transifex`]: https://help.transifex.com/en/articles/6220899-structured-json |
| 75 | + |
| 76 | +### **`pseudo-locale`** (optional, default: unset) |
| 77 | + |
| 78 | +The pseudo locale to use for the input. It can be one of the following: |
| 79 | + |
| 80 | +- `xx-LS`: Append `'S' * 25` at the end to simulate long string |
| 81 | +- `xx-AC`: `toUpperCase` everything |
| 82 | +- `xx-HA`: Prefix `[javascript]` to the message |
| 83 | +- `en-XA`: Convert letter to **hebrew letter** |
| 84 | +- `en-XB`: Convert letter to **accented letter** |
| 85 | + |
| 86 | +See <https://github.com/formatjs/formatjs/issues/2165#issuecomment-701738341> |
| 87 | + |
| 88 | +### **`ignoreTag`** (optional, default: `false`) |
| 89 | + |
| 90 | +Whether to treat HTML/XML tags as string literal instead of parsing them as tag token. |
| 91 | +When this is false we only allow simple tags without any attributes |
| 92 | + |
| 93 | +### **`requiresOtherClause`** (optional, default: `false`) |
| 94 | + |
| 95 | +Should `select`, `selectordinal`, and `plural` arguments always include the `other` case clause. |
| 96 | + |
| 97 | +### **`shouldParseSkeletons`** (optional, default: `false`) |
| 98 | + |
| 99 | +Whether to parse number/datetime skeleton into [Intl.NumberFormatOptions] and [Intl.DateTimeFormatOptions], respectively. |
| 100 | + |
| 101 | +[Intl.NumberFormatOptions]: https://formatjs.github.io/docs/intl/#formatnumber |
| 102 | +[Intl.DateTimeFormatOptions]: https://formatjs.github.io/docs/intl/#formatdate |
| 103 | + |
| 104 | +## Resource Query |
| 105 | + |
| 106 | +### **`pseudo-locale`** |
| 107 | + |
| 108 | +for example: |
| 109 | + |
| 110 | +```ts |
| 111 | +import messages from './locales/en-US.json?pseudo-locale=xx-LS' |
| 112 | +// pseudo locale will be applied to the messages |
| 113 | +``` |
| 114 | + |
| 115 | +more see <https://webpack.js.org/concepts/loaders/> |
| 116 | + |
| 117 | +## LICENSE |
| 118 | + |
| 119 | +[MIT LICENSE](LICENSE.txt) |
0 commit comments