handlebars-i18n 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.commitlintrc.json +3 -0
- package/.github/workflows/ci.yml +36 -0
- package/.github/workflows/schedule.yml +49 -0
- package/.idea/.name +1 -0
- package/.idea/handlebars-i18n.iml +8 -0
- package/.idea/jsLibraryMappings.xml +6 -0
- package/.idea/misc.xml +14 -0
- package/.idea/modules.xml +8 -0
- package/.idea/vcs.xml +6 -0
- package/.idea/watcherTasks.xml +4 -0
- package/.releaserc.json +11 -0
- package/.travis.yml +15 -0
- package/CHANGELOG.md +26 -0
- package/LICENSE +21 -0
- package/dist/handlebars-i18n.js +423 -0
- package/dist/handlebars-i18n.min.js +1 -0
- package/examples/browser-example/img/germany.png +0 -0
- package/examples/browser-example/img/united_kingdom.png +0 -0
- package/examples/browser-example/index.html +238 -0
- package/examples/node-example/simple-example.js +172 -0
- package/gulpfile.js +11 -0
- package/package.json +67 -0
- package/readme.md +376 -0
- package/renovate.json +13 -0
- package/test/handlebars-i18n.test.js +569 -0
package/readme.md
ADDED
|
@@ -0,0 +1,376 @@
|
|
|
1
|
+
# handlebars-i18n
|
|
2
|
+
|
|
3
|
+
`handlebars-i18n` adds the internationalization features of [i18next](https://www.i18next.com/) to [handlebars.js](https://handlebarsjs.com/). It also provides **date**, **number**, and **currency formatting** via [Intl](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl). Use as node module or in the web browser.
|
|
4
|
+
|
|
5
|
+
Handlebars-i18n is listed amongst i18next’s [framework helpers](https://www.i18next.com/overview/supported-frameworks).
|
|
6
|
+
|
|
7
|
+
[](https://opensource.org/licenses/MIT) [](https://travis-ci.org/fwalzel/handlebars-i18n) [](https://coveralls.io/github/fwalzel/handlebars-i18next?branch=master) [](https://www.code-inspector.com/project/29087/status/svg) []
|
|
8
|
+
|
|
9
|
+
## License
|
|
10
|
+
|
|
11
|
+
Copyright (c) 2020 Florian Walzel,
|
|
12
|
+
MIT License
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
$ npm install handlebars-i18n handlebars i18next intl
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
Usage within node environment:
|
|
24
|
+
|
|
25
|
+
```javascript
|
|
26
|
+
const HandlebarsI18n = require("handlebars-i18n");
|
|
27
|
+
HandlebarsI18n.init();
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Usage in web browser:
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
<script src="handlebars.js"></script>
|
|
34
|
+
<script src="i18next.js"></script>
|
|
35
|
+
<script src="handlebars-i18n.js"></script>
|
|
36
|
+
|
|
37
|
+
<script>
|
|
38
|
+
HandlebarsI18n.init()
|
|
39
|
+
</script>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Quick example
|
|
43
|
+
|
|
44
|
+
Initialize i18next with your language strings and default settings:
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
const i18next = require('i18next');
|
|
48
|
+
|
|
49
|
+
i18next.init({
|
|
50
|
+
resources : {
|
|
51
|
+
"en" : {
|
|
52
|
+
translation : {
|
|
53
|
+
"phrase1": "What is good?",
|
|
54
|
+
"phrase2": "{{what}} is good."
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
"de" : {
|
|
58
|
+
translation: {
|
|
59
|
+
"phrase1": "Was ist gut?",
|
|
60
|
+
"phrase2": "{{what}} ist gut."
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
lng : "en"
|
|
65
|
+
});
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Set your Handlebars.js data object:
|
|
69
|
+
|
|
70
|
+
```javascript
|
|
71
|
+
let data = {
|
|
72
|
+
myItem: "handlebars-i18n",
|
|
73
|
+
myPrice: 1200.99,
|
|
74
|
+
myDate: "2020-03-11T03:24:00"
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Initialize handlebars-i18n:
|
|
80
|
+
|
|
81
|
+
```javascript
|
|
82
|
+
HandlebarsI18n.init();
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Optionally configure your language specific number, currency, and date-time defaults:
|
|
86
|
+
|
|
87
|
+
```javascript
|
|
88
|
+
HandlebarsI18n.configure([
|
|
89
|
+
["en", "PriceFormat", {currency: "USD"}],
|
|
90
|
+
["de", "PriceFormat", {currency: "EUR"}]
|
|
91
|
+
]);
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Finally use in template:
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
<p> {{__ "phrase1"}} </p>
|
|
98
|
+
```
|
|
99
|
+
* returns for "en" → **What is good?**
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
<p> {{__ "phrase2" what=myItem}} </p>
|
|
103
|
+
```
|
|
104
|
+
* returns for "en" → **handlebars-i18n is good.**
|
|
105
|
+
|
|
106
|
+
```
|
|
107
|
+
<p> {{_date myDate}} </p>
|
|
108
|
+
```
|
|
109
|
+
* returns for "en" → **March 11, 2020, 4:24 AM**
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
<p> {{_price myPrice}} </p>
|
|
113
|
+
```
|
|
114
|
+
* returns for "en" → **$1,200.99**
|
|
115
|
+
|
|
116
|
+
## Further examples
|
|
117
|
+
|
|
118
|
+
:point_right: See the *examples folder* in the repo for more use cases and details.
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
## Run tests
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
$ npm test
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
## API
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
### __
|
|
132
|
+
|
|
133
|
+
Returns the phrase associated with the given key for the selected language. __ will take all options i18next’s [t-function](https://www.i18next.com/overview/api#t) would take.
|
|
134
|
+
The primary key can be passed hard encoded in the template when written in quotes:
|
|
135
|
+
|
|
136
|
+
```
|
|
137
|
+
{{__ "keyToTranslationPhrase"}}
|
|
138
|
+
```
|
|
139
|
+
… or it can be referenced via a handlebars variable:
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
{{__ keyFromHandlebarsData}}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
**Variable Replacement**
|
|
146
|
+
|
|
147
|
+
Template usage:
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
{{__ "whatIsWhat" a="Everything" b="fine"}}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
The i18next resource:
|
|
154
|
+
|
|
155
|
+
```
|
|
156
|
+
"en" : {
|
|
157
|
+
translation : {
|
|
158
|
+
"whatIsWhat": "{{a}} is {{b}}."
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
**Plurals**
|
|
164
|
+
|
|
165
|
+
```
|
|
166
|
+
{{__ "keyWithCount" count=8}}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
'en' : {
|
|
171
|
+
translation : {
|
|
172
|
+
'keyWithCount': '{{count}} item',
|
|
173
|
+
'keyWithCount_plural': '{{count}} items',
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
**Override globally selected language**
|
|
179
|
+
|
|
180
|
+
```
|
|
181
|
+
{{__ "key1" lng="de"}}
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Will output the contents for "**de**" even though other language is selected.
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
### _locale
|
|
191
|
+
|
|
192
|
+
Returns the shortcode of i18next’s currently selected language such as "**en**", "**de**", "**fr**", "**fi**" … etc.
|
|
193
|
+
|
|
194
|
+
```
|
|
195
|
+
{{_locale}}
|
|
196
|
+
```
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
### localeIs
|
|
200
|
+
|
|
201
|
+
Checks a string against i18next’s currently selected language. Returns **true** or **false**.
|
|
202
|
+
|
|
203
|
+
```
|
|
204
|
+
{{#if (localeIs "en")}} ... {{/if}}
|
|
205
|
+
```
|
|
206
|
+
---
|
|
207
|
+
|
|
208
|
+
### _date
|
|
209
|
+
|
|
210
|
+
Outputs a formated date according to the language specific conventions.
|
|
211
|
+
|
|
212
|
+
```
|
|
213
|
+
{{_date}}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
If called without argument the current date is returned. Any other input date can be passed as a conventional date string, a number (timestamp in milliseconds), or a date array. _date accepts all arguments Javascript’s [new Date()](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date) constructor would accept.
|
|
217
|
+
|
|
218
|
+
**Date argument given as date string:**
|
|
219
|
+
|
|
220
|
+
```
|
|
221
|
+
{{_date "2020-03-11T03:24:00"}}
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
```
|
|
225
|
+
{{_date "December 17, 1995 03:24:00"}}
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
**Date argument given as number (milliseconds since begin of unix epoch):**
|
|
229
|
+
|
|
230
|
+
```
|
|
231
|
+
{{_date 1583922952743}}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
**Date argument given as javascript date array** [year, monthIndex [, day [, hour [, minutes [, seconds [, milliseconds]]]]]]:
|
|
235
|
+
|
|
236
|
+
```
|
|
237
|
+
{{_date "[2012, 11, 20, 3, 0, 0]"}}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
**Additional arguments for formatting**
|
|
241
|
+
|
|
242
|
+
You can add multiple arguments for individual formatting. See [Intl DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) for your option arguments.
|
|
243
|
+
|
|
244
|
+
```
|
|
245
|
+
{{_date 1583922952743 year="2-digit" day="2-digit" timeZone="America/Los_Angeles"}}
|
|
246
|
+
```
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
### _num
|
|
250
|
+
|
|
251
|
+
Outputs a formated number according to the language specific conventions of number representation, e.g. **4,100,000.8314** for "**en**", but **4.100.000,8314** for "**de**".
|
|
252
|
+
|
|
253
|
+
```
|
|
254
|
+
{{_num 4100000.8314 }}
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
**Additional arguments for formatting**
|
|
258
|
+
|
|
259
|
+
You can add multiple arguments for individual formatting. See [Intl NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for your option arguments.
|
|
260
|
+
|
|
261
|
+
```
|
|
262
|
+
{{_num 3.14159 maximumFractionDigits=2}}
|
|
263
|
+
```
|
|
264
|
+
Will output **3.14** for "**en**", but **3,14** for "**de**".
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
### _price
|
|
269
|
+
|
|
270
|
+
Outputs a formated currency string according to the language specific conventions of price representation, e.g. **€9,999.99** for "**en**", but **9.999,99 €** for "**de**".
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
```
|
|
274
|
+
{{_price 9999.99}}
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
**Additional arguments for formatting**
|
|
278
|
+
|
|
279
|
+
You can add multiple arguments for individual currency formatting. See [Intl NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for your option arguments.
|
|
280
|
+
|
|
281
|
+
```
|
|
282
|
+
{{_price 1000 currency="JPY" minimumFractionDigits=2}}
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
## How to use HandlebarsI18n.configure method
|
|
288
|
+
|
|
289
|
+
### Generic language format settings
|
|
290
|
+
|
|
291
|
+
Instead of defining the formatting options for each date, number or price anew, you can configure global settings for all languages or only for specific languages.
|
|
292
|
+
|
|
293
|
+
```
|
|
294
|
+
HandlebarsI18n.configure("all", "DateTimeFormat", {timeZone: "America/Los_Angeles"});
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
First argument is the language shortcode or "**all**" for all languages. Second is the format option you want to address (DateTimeFormat, NumberFormat, or PriceFormat). Third argument ist the options object with the specific settings.
|
|
298
|
+
|
|
299
|
+
### Custom language format subsets
|
|
300
|
+
|
|
301
|
+
You can define specific subsets to be used in the template, i.e. if you want the date in different formatts such as:
|
|
302
|
+
|
|
303
|
+
* **2020** (year-only)
|
|
304
|
+
* **11.3.2020** (standard-date)
|
|
305
|
+
* **7:24:02** (time-only)
|
|
306
|
+
|
|
307
|
+
To do this define a 4th parameter with a custom name:
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
```javascript
|
|
311
|
+
HandlebarsI18n.configure([
|
|
312
|
+
["en", "DateTimeFormat", {year:'numeric'}, "year-only"],
|
|
313
|
+
["en", "DateTimeFormat", {year:'numeric', month:'numeric', day:'numeric'}, "standard-date"],
|
|
314
|
+
['en', 'DateTimeFormat', { hour:'numeric', minute:'numeric', second:'numeric', hour12:false}, "time-only"]
|
|
315
|
+
]);
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
Call a subset in template wit the parameter "format", like:
|
|
319
|
+
|
|
320
|
+
```
|
|
321
|
+
{{_date myDate format="year-only"}}
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
### The lookup cascade
|
|
327
|
+
|
|
328
|
+
The general lookup cascade is:
|
|
329
|
+
|
|
330
|
+
* `1st Priority`: The argument given in the template for custom configurations by the key "format", i.e. `{{_date format="my-custom-format"}}`
|
|
331
|
+
* `2nd Priority`: The extra argument(s) given in the template, e.g. `{{_date timeZone="America/Los_Angeles" year="2-digit"}}`
|
|
332
|
+
* `3rd Priority`: The global setting configured for the current language, such as "**en**"
|
|
333
|
+
* `4th Priority`: The global setting configured for **all** languages
|
|
334
|
+
* `Default`: The **Intl** default setting
|
|
335
|
+
|
|
336
|
+
**Example:**
|
|
337
|
+
|
|
338
|
+
This defines that all prices for all languages are represented as Dollar:
|
|
339
|
+
|
|
340
|
+
```
|
|
341
|
+
HandlebarsI18n.configure("all", "PriceFormat", {currency: "USD"});
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
This defines that all prices for all languages are represented as Dollar, but that for language French the currency is Euro:
|
|
345
|
+
|
|
346
|
+
```
|
|
347
|
+
HandlebarsI18n.configure([
|
|
348
|
+
["all", "PriceFormat", {currency: "USD"}],
|
|
349
|
+
["fr", "PriceFormat", {currency: "EUR"}]
|
|
350
|
+
]);
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
### Reset an existing configuration
|
|
354
|
+
|
|
355
|
+
Dismiss all existing configurations:
|
|
356
|
+
|
|
357
|
+
```javascript
|
|
358
|
+
HandlebarsI18n.reset();
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
## Using custom instances of Handlebars
|
|
362
|
+
|
|
363
|
+
Sometimes you may want to use a Handlebars Object you have already modified before, or you may want to use muliple descrete instances of Handlebars. In this case you can pass you custom Handlebars instance to the init function to use it instead of the generic Handebars object. like so:
|
|
364
|
+
|
|
365
|
+
```javascript
|
|
366
|
+
const HandlebarsModified = require('handlebars');
|
|
367
|
+
HandlebarsModified.registerHelper('foo', function() { return 'what you want' });
|
|
368
|
+
HandlebarsI18n.init(HandlebarsModified)
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
HandlebarsI18n will have the method **foo()** by now.
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
## Note
|
|
375
|
+
|
|
376
|
+
There is a *different* package named [handlebars-i18next](https://www.npmjs.com/package/handlebars-i18next) by [Julian Gonggrijp](https://github.com/jgonggrijp) which might also suit your needs. Cheers!
|
package/renovate.json
ADDED