handlebars-i18n 1.6.3 → 1.7.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.
Files changed (12) hide show
  1. package/.github/workflows/ci.yml +15 -15
  2. package/LICENSE +2 -1
  3. package/dist/handlebars-i18n.d.ts +187 -3
  4. package/dist/handlebars-i18n.js +229 -88
  5. package/dist/handlebars-i18n.min.js +1 -1
  6. package/examples/browser-example/index.html +109 -86
  7. package/examples/node-example/simple-example.js +89 -35
  8. package/examples/typescript/index.ts +11 -8
  9. package/examples/typescript/test.hbs +25 -7
  10. package/package.json +11 -8
  11. package/readme.md +150 -45
  12. package/test/handlebars-i18n.test.js +467 -53
package/examples/browser-example/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <style>
7
7
  html, body {
8
8
  margin: 1rem;
9
- font-family: Helvetica Neue, Helvetica, Arial;
9
+ font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
10
10
  }
11
11
  h3 {
12
12
  margin-top: 2rem;
@@ -30,12 +30,14 @@
30
30
  <body>
31
31
  <h2>handlebars-i18n Demo</h2>
32
32
 
33
- <div id="demo"><!-- handlebars' rendered demo content goes here --></div>
33
+ <div id="demo"><!-- handlebars’ rendered demo content goes here --></div>
34
34
 
35
- <!-- Dependencies: hanldebars, i18next, handlebars-i18n.js -->
35
+ <!-- Load scripts: handlebars, i18next, handlebars-i18n.js -->
36
36
  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
37
37
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/19.3.2/i18next.js"></script>
38
38
  <script src="../../dist/handlebars-i18n.js"></script>
39
+
40
+ <!-- The demo -->
39
41
  <script>
40
42
 
41
43
  'use strict';
@@ -83,7 +85,7 @@
83
85
  // -- Init and configure handlebars-i18n
84
86
  HandlebarsI18n.init();
85
87
  HandlebarsI18n.configure([
86
- // generic configuration for all languages for number representation:
88
+ // generic configuration for number representation in all languages :
87
89
  ['all', 'NumberFormat', { minimumFractionDigits: 2 }],
88
90
  // generic configurations per language for price representation:
89
91
  ['en', 'PriceFormat', { currency: 'USD'}],
@@ -91,129 +93,150 @@
91
93
  // generic configurations per language for date representation:
92
94
  ['en', 'DateTimeFormat', { year:'numeric', month:'long', day:'numeric', hour:'numeric', minute:'numeric'}],
93
95
  ['de', 'DateTimeFormat', { year:'numeric', month:'numeric', day:'numeric', hour:'numeric', minute:'numeric', hour12:false}],
94
- // configurations per language with custom formats for date:
96
+ // custom formats for dates:
95
97
  ['en', 'DateTimeFormat', { year:'numeric' }, 'custom-year-only'],
96
98
  ['de', 'DateTimeFormat', { year:'numeric' }, 'custom-year-only'],
97
99
  ['en', 'DateTimeFormat', { year:'numeric', month:'numeric', day:'numeric' }, 'custom-date-short'],
98
100
  ['de', 'DateTimeFormat', { year:'numeric', month:'numeric', day:'numeric' }, 'custom-date-short'],
99
101
  ['en', 'DateTimeFormat', { hour:'numeric', minute:'numeric', second:'numeric', hour12:false}, 'custom-time'],
100
- ['de', 'DateTimeFormat', { hour:'numeric', minute:'numeric', second:'numeric', hour12:false}, 'custom-time']
102
+ ['de', 'DateTimeFormat', { hour:'numeric', minute:'numeric', second:'numeric', hour12:false}, 'custom-time'],
103
+ // custom formats for relative dates:
104
+ ['en', 'RelativeTimeFormat', { style: 'short', unit: 'year' }, 'date-rel-spec'],
105
+ ['de', 'RelativeTimeFormat', { style: 'short', unit: 'year' }, 'date-rel-spec']
101
106
  ]);
102
107
 
103
108
  // -- The handlebars template to be rendered
104
- let template =
105
- '<button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>' +
106
- '<h3>Translations</h3>' +
109
+ let template =`
110
+ <button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>
111
+ <h3>Translations</h3>
112
+
113
+ <h4>Simple translation, key given as string:</h4>
114
+ <code>{{{{raw}}}} {{__ "key1"}} {{{{/raw}}}}</code>
115
+ <p>&#x2192; {{__ "key1"}}</p>
116
+
117
+ <h4>Translation with variable replacement:</h4>
118
+ <code>{{{{raw}}}} {{__ "key2" what=sayWhat}} {{{{/raw}}}}</code>
119
+ <p>&#x2192; {{__ "key2" what=sayWhat}}</p>
120
+
121
+ <h4>Phrase with [singular] / plural:</h4>
122
+ <code>{{{{raw}}}} {{__ "key3WithCount" count=1}} {{{{/raw}}}}</code>
123
+ <p>&#x2192;{{__ "key3WithCount" count=1}}</p>
124
+
125
+ <h4>Phrase with singular / [plural]:</h4>
126
+ <code>{{{{raw}}}} {{__ "key3WithCount" count=7}} {{{{/raw}}}}</code>
127
+ <p>&#x2192; {{__ "key3WithCount" count=7}}</p>
107
128
 
108
- '<h4>Simple translation, key given as string:</h4>' +
109
- '<code>{{{{raw}}}} {{__ "key1"}} {{{{/raw}}}}</code>' +
110
- '<p>{{__ "key1"}}</p>' +
129
+ <h4>Override language to use:</h4>
130
+ <code>{{{{raw}}}} {{__ "key1" lng="de"}} {{{{/raw}}}}</code>
131
+ <p>&#x2192; {{__ "key1" lng="de"}}</p>
111
132
 
112
- '<h4>Translation with variable replacement:</h4>' +
113
- '<code>{{{{raw}}}} {{__ "key2" what=sayWhat}} {{{{/raw}}}}</code>' +
114
- '<p>{{__ "key2" what=sayWhat}}</p>' +
133
+ <h3>Output selected language</h3>
115
134
 
116
- '<h4>Phrase with [singular] / plural:</h4>' +
117
- '<code>{{{{raw}}}} {{__ "key3WithCount" count=1}} {{{{/raw}}}}</code>' +
118
- '<p>{{__ "key3WithCount" count=1}}</p>' +
135
+ <button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>
119
136
 
120
- '<h4>Phrase with singular / [plural]:</h4>' +
121
- '<code>{{{{raw}}}} {{__ "key3WithCount" count=7}} {{{{/raw}}}}</code>' +
122
- '<p>{{__ "key3WithCount" count=7}}</p>' +
137
+ <h4>Translation key given through handlebars variable and _locale output:</h4>
138
+ <code>{{{{raw}}}} {{__ holdKey4}} {{_locale}} {{{{/raw}}}}</code>
139
+ <p>&#x2192; {{__ holdKey4}} {{_locale}}</p>
123
140
 
124
- '<h4>Override language to use:</h4>' +
125
- '<code>{{{{raw}}}} {{__ "key1" lng="de"}} {{{{/raw}}}}</code>' +
126
- '<p>{{__ "key1" lng="de"}}</p>' +
141
+ <h4>Check against selected language:</h4>
142
+ <code>{{{{raw}}}} &lt;img src="img/{{#if (localeIs \'en\')}}united_kingdom{{else}}germany{{/if}}.png"/&gt {{{{/raw}}}}</code><br/>
143
+ <img src="img/{{#if (localeIs \'en\')}}united_kingdom{{else}}germany{{/if}}.png" height="20"/>
127
144
 
128
- '<h3>Output selected language</h3>' +
145
+ <h3>Number representation</h3>
129
146
 
130
- '<button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>' +
147
+ <button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>
131
148
 
132
- '<h4>Translation key given through handlebars variable and _locale output:</h4>' +
133
- '<code>{{{{raw}}}} {{__ holdKey4}} {{_locale}} {{{{/raw}}}}</code>' +
134
- '<p>{{__ holdKey4}} {{_locale}}</p>' +
149
+ <h4>Number representation as configured for all languages:</h4>
150
+ <code>{{{{raw}}}} {{_num 7000}} {{{{/raw}}}}</code>
151
+ <p>&#x2192; {{_num 7000}}</p>
135
152
 
136
- '<h4>Check against selected language:</h4>' +
137
- '<code>{{{{raw}}}} &lt;img src="img/{{#if (localeIs \'en\')}}united_kingdom{{else}}germany{{/if}}.png"/&gt {{{{/raw}}}}</code><br/>' +
138
- '<img src="img/{{#if (localeIs \'en\')}}united_kingdom{{else}}germany{{/if}}.png" height="20"/>' +
153
+ <h4>Number representation with specific format attribute:</h4>
154
+ <code>{{{{raw}}}} {{_num 3.1415926 maximumFractionDigits=2}} {{{{/raw}}}}</code>
155
+ <p>&#x2192; {{_num 3.1415926 maximumFractionDigits=2}}</p>
139
156
 
140
- '<h3>Number representation</h3>' +
157
+ <h4>Number and attribute given through handlebars variables:</h4>
158
+ <code>{{{{raw}}}} {{_num mynumber maximumFractionDigits=myMaxDigits}} {{{{/raw}}}}</code>
159
+ <p>&#x2192; {{_num mynumber maximumFractionDigits=myMaxDigits}}</p>
141
160
 
142
- '<button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>' +
161
+ <h3>Price representation</h3>
143
162
 
144
- '<h4>Number representation as configured for all languages:</h4>' +
145
- '<code>{{{{raw}}}} {{_num 7000}} {{{{/raw}}}}</code>' +
146
- '<p>{{_num 7000}}</p>' +
163
+ <button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>
147
164
 
148
- '<h4>Number representation with specific format attribute:</h4>' +
149
- '<code>{{{{raw}}}} {{_num 3.1415926 maximumFractionDigits=0}} {{{{/raw}}}}</code>' +
150
- '<p>{{_num 3.1415926 maximumFractionDigits=0}}</p>' +
165
+ <h4>Price representation as configured per language:</h4>
166
+ <code>{{{{raw}}}} {{_price 9999.99}} {{{{/raw}}}}</code>
167
+ <p>&#x2192; {{_price 9999.99}}</p>
151
168
 
152
- '<h4>Number and attribute given through handlebars variables:</h4>' +
153
- '<code>{{{{raw}}}} {{_num mynumber maximumFractionDigits=myMaxDigits}} {{{{/raw}}}}</code>' +
154
- '<p>{{_num mynumber maximumFractionDigits=myMaxDigits}}</p>' +
169
+ <h4>Price representation with specific format attributes:</h4>
170
+ <code>{{{{raw}}}} {{_price 1000.99 currency="JPY" minimumFractionDigits=0}} {{{{/raw}}}}</code>
171
+ <p>&#x2192; {{_price 1000.99 currency="JPY" minimumFractionDigits=0}}</p>
155
172
 
156
- '<h3>Price representation</h3>' +
173
+ <h4>&#x2192; Price given through handlebars variable and with specific format attribute:</h4>
174
+ <code>{{{{raw}}}} {{_price myPrice currency="DKK"}} {{{{/raw}}}}</code>
175
+ <p>&#x2192; {{_price myPrice currency="DKK"}}</p>
157
176
 
158
- '<button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>' +
177
+ <h3>Date representation</h3>
159
178
 
160
- '<h4>Price representation as configured per language:</h4>' +
161
- '<code>{{{{raw}}}} {{_price 9999.99}} {{{{/raw}}}}</code>' +
162
- '<p>{{_price 9999.99}}</p>' +
179
+ <button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>
163
180
 
164
- '<h4>Price representation with specific format attributes:</h4>' +
165
- '<code>{{{{raw}}}} {{_price 1000.99 currency="JPY" minimumFractionDigits=0}} {{{{/raw}}}}</code>' +
166
- '<p>{{_price 1000.99 currency="JPY" minimumFractionDigits=0}}</p>' +
181
+ <h4>Todays’ date as configured per language:</h4>
182
+ <code>{{{{raw}}}} {{_date}} {{{{/raw}}}}</code>
183
+ <p>&#x2192; {{_date}}</p>
167
184
 
168
- '<h4>Price given through handlebars variable and with with specific format attribute:</h4>' +
169
- '<code>{{{{raw}}}} {{_price myPrice currency="DKK"}} {{{{/raw}}}}</code>' +
170
- '<p>{{_price myPrice currency="DKK"}}</p>' +
185
+ <h4>Date given as date string:</h4>
186
+ <code>{{{{raw}}}} {{_date "2020-03-11T03:24:00"}} {{{{/raw}}}}</code>
187
+ <p>&#x2192; {{_date "2020-03-11T03:24:00"}}</p>
171
188
 
172
- '<h3>Date representation</h3>' +
189
+ <h4>Date given in milliseconds since begin of unix epoch:</h4>
190
+ <code>{{{{raw}}}} {{_date 1583922952743}} {{{{/raw}}}}</code>
191
+ <p>&#x2192; {{_date 1583922952743}}</p>
173
192
 
174
- '<button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>' +
193
+ <h4>Date given as javascript date parameter array:</h4>
194
+ <code>{{{{raw}}}} {{_date "[2012, 11, 20, 3, 0, 0]"}} {{{{/raw}}}}</code>
195
+ <p>&#x2192; {{_date "[2012, 11, 20, 3, 0, 0]"}}</p>
175
196
 
176
- '<h4>Todays date as configured per language:</h4>' +
177
- '<code>{{{{raw}}}} {{_date}} {{{{/raw}}}}</code>' +
178
- '<p>{{_date}}</p>' +
197
+ <h4>Todays’ date with specific format attributes:</h4>
198
+ <code>{{{{raw}}}} {{_date "today" year="2-digit" month="2-digit" day="2-digit"}} {{{{/raw}}}}</code>
199
+ <p>&#x2192; {{_date "today" year="2-digit" month="2-digit" day="2-digit"}}</p>
179
200
 
180
- '<h4>Date given as date string:</h4>' +
181
- '<code>{{{{raw}}}} {{_date "2020-03-11T03:24:00"}} {{{{/raw}}}}</code>' +
182
- '<p>{{_date "2020-03-11T03:24:00"}}</p>' +
201
+ <h4>Date given through handlebars variable:</h4>
202
+ <code>{{{{raw}}}} {{_date myDate}} {{{{/raw}}}}</code>
203
+ <p>&#x2192; {{_date myDate}}</p>
183
204
 
184
- '<h4>Date given in milliseconds since begin of unix epoch:</h4>' +
185
- '<code>{{{{raw}}}} {{_date 1583922952743}} {{{{/raw}}}}</code>' +
186
- '<p>{{_date 1583922952743}}</p>' +
205
+ <h4>Date formatted by custom configuration (subset "custom-year-only"):</h4>
206
+ <code>{{{{raw}}}} {{_date myDate format="custom-year-only"}} {{{{/raw}}}}</code>
207
+ <p>&#x2192; {{_date myDate format="custom-year-only"}}</p>
187
208
 
188
- '<h4>Date given as javascript date parameter array:</h4>' +
189
- '<code>{{{{raw}}}} {{_date "[2012, 11, 20, 3, 0, 0]"}} {{{{/raw}}}}</code>' +
190
- '<p>{{_date "[2012, 11, 20, 3, 0, 0]"}}</p>' +
209
+ <h4>Date formatted by custom configuration (subset "custom-date-short"):</h4>
210
+ <code>{{{{raw}}}} {{_date myDate format="custom-date-short"}} {{{{/raw}}}}</code>
211
+ <p>&#x2192; {{_date myDate format="custom-date-short"}}</p>
191
212
 
192
- '<h4>Todays date with with specific format attributes:</h4>' +
193
- '<code>{{{{raw}}}} {{_date "today" year="2-digit" month="2-digit" day="2-digit"}} {{{{/raw}}}}</code>' +
194
- '<p>{{_date "today" year="2-digit" month="2-digit" day="2-digit"}}</p>' +
213
+ <h4>Date formatted by custom configuration (subset "custom-time"):</h4>
214
+ <code>{{{{raw}}}} {{_date myDate format="custom-time"}} {{{{/raw}}}}</code>
215
+ <p>&#x2192; {{_date myDate format="custom-time"}}</p>
195
216
 
196
- '<h4>Date given through handlebars variable:</h4>' +
197
- '<code>{{{{raw}}}} {{_date myDate}} {{{{/raw}}}}</code>' +
198
- '<p>{{_date myDate}}</p>' +
217
+ <h3>Relative date representation</h3>
199
218
 
200
- '<h4>Date formated by custom configuration (subset "custom-year-only"):</h4>' +
201
- '<code>{{{{raw}}}} {{_date myDate format="custom-year-only"}} {{{{/raw}}}}</code>' +
202
- '<p>{{_date myDate format="custom-year-only"}}</p>' +
219
+ <button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>
203
220
 
204
- '<h4>Date formated by custom configuration (subset "custom-date-short"):</h4>' +
205
- '<code>{{{{raw}}}} {{_date myDate format="custom-date-short"}} {{{{/raw}}}}</code>' +
206
- '<p>{{_date myDate format="custom-date-short"}}</p>' +
221
+ <h4>Relative date event in the future:</h4>
222
+ <code>{{{{raw}}}} {{_dateRel 7 unit="hour"}} {{{{/raw}}}}</code>
223
+ <p>&#x2192; {{_dateRel 7 unit="hour"}}</p>
207
224
 
208
- '<h4>Date formated by custom configuration (subset "custom-time"):</h4>' +
209
- '<code>{{{{raw}}}} {{_date myDate format="custom-time"}} {{{{/raw}}}}</code>' +
210
- '<p>{{_date myDate format="custom-time"}}</p>' +
225
+ <h4>Relative date event in the past:</h4>
226
+ <code>{{{{raw}}}} {{_dateRel 7 unit="hour"}} {{{{/raw}}}}</code>
227
+ <p>&#x2192; {{_dateRel -7 unit="hour"}}</p>
211
228
 
229
+ <h4>Date difference:</h4>
230
+ <code>{{{{raw}}}} {{_dateDiff "1996-12-07T00:00:00" "1996-12-08T00:00:00" unit="day"}} {{{{/raw}}}}</code>
231
+ <p>&#x2192; {{_dateDiff "1996-12-07T00:00:00" "1996-12-08T00:00:00" unit="day"}}</p>
212
232
 
213
- '<p>&nbsp;</p><button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>';
233
+ <h4>Date difference by custom configuration (subset "date-rel-spec"):</h4>
234
+ <code>{{{{raw}}}} {{_dateDiff mydate "1995-12-17T00:00:00" format="date-rel-spec"}} {{{{/raw}}}}</code>
235
+ <p>&#x2192; {{_dateDiff mydate "1995-12-17T00:00:00" format="date-rel-spec"}}</p>
214
236
 
237
+ <p>&nbsp;</p><button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>`;
215
238
 
216
- // -- Ignore this. It is just a helper to display un-rendered {{code}} between the <code> Tags
239
+ // -- Ignore this. It’s just a helper to display un-rendered {{handlebars code}} between the <code> Tags
217
240
  Handlebars.registerHelper('raw', function(options) {
218
241
  return options.fn();
219
242
  });
@@ -224,7 +247,7 @@
224
247
  document.getElementById('demo').innerHTML = compiled(data);
225
248
  }
226
249
 
227
- // -- Switch language function (Button)
250
+ // -- Switch language function for the button
228
251
  function changeLang() {
229
252
  var changeTo = i18next.language == 'en' ? 'de' : 'en';
230
253
  i18next.changeLanguage(changeTo).then(function() {
package/examples/node-example/simple-example.js CHANGED
@@ -2,7 +2,6 @@
2
2
  * A simple example using handlebars-i18n.js
3
3
  *
4
4
  * @author: Florian Walzel
5
- * @date: 2021-01
6
5
  *
7
6
  * usage:
8
7
  * $ npm run example:js
@@ -14,6 +13,7 @@
14
13
  const Handlebars = require('handlebars');
15
14
  const i18next = require('i18next');
16
15
  const HandlebarsI18n = require('../../dist/handlebars-i18n.js');
16
+ const htmlEntities = require('html-entities');
17
17
 
18
18
  // -- The translation phrases for i18next
19
19
  i18next
@@ -72,101 +72,155 @@ HandlebarsI18n.configure([
72
72
  ['en', 'DateTimeFormat', { year:'numeric', month:'numeric', day:'numeric' }, 'custom-date-short'],
73
73
  ['de', 'DateTimeFormat', { year:'numeric', month:'numeric', day:'numeric' }, 'custom-date-short'],
74
74
  ['en', 'DateTimeFormat', { hour:'numeric', minute:'numeric', second:'numeric', hour12:false}, 'custom-time'],
75
- ['de', 'DateTimeFormat', { hour:'numeric', minute:'numeric', second:'numeric', hour12:false}, 'custom-time']
75
+ ['de', 'DateTimeFormat', { hour:'numeric', minute:'numeric', second:'numeric', hour12:false}, 'custom-time'],
76
+ // custom formats for relative dates:
77
+ ['en', 'RelativeTimeFormat', { style: 'short', unit: 'year' }, 'date-rel-spec'],
78
+ ['de', 'RelativeTimeFormat', { style: 'short', unit: 'year' }, 'date-rel-spec']
76
79
  ]);
77
80
 
78
81
  let template;
79
82
 
80
- template = '\n' + 'EXAMPLE OUTPUT:' + '\n';
81
- template += '------------------------' + '\n';
83
+ /**
84
+ * Replaces curly brackets by html entities so that it does not compile as handlebars.
85
+ * Also adds line breaks and an arrow symbol.
86
+ * Will be re-transformed with htmlEntities.decode() before logging
87
+ * @param str
88
+ * @returns {string}
89
+ */
90
+ const raw = (str) => '\n\n' + str.replace(/{/g, '&lcub;').replace(/}/g, '&rcub;') + '\n&nbsp&#x2192;&nbsp;&nbsp;';
91
+
92
+ template = '\n' + 'HandlebarsI18n example output:' + '\n';
93
+ template += '-------------------------------------';
82
94
 
83
95
  // Translations
84
96
  // ----------------------------------------
85
97
 
86
98
  // Simple translation, key given as string:
87
- template += '{{__ "key1"}}' + '\n';
99
+ template += raw('{{__ "key1"}}');
100
+ template += '{{__ "key1"}}';
88
101
 
89
102
  // Translation with variable replacement:
90
- template += '{{__ "key2" what=sayWhat}}' + '\n';
103
+ template += raw('{{__ "key2" what=sayWhat}}');
104
+ template += '{{__ "key2" what=sayWhat}}';
91
105
 
92
106
  // Phrase with [singular] / plural:
93
- template += '{{__ "key3WithCount" count=1}}' + '\n';
107
+ template += raw('{{__ "key3WithCount" count=1}}');
108
+ template += '{{__ "key3WithCount" count=1}}';
94
109
 
95
110
  // Phrase with singular / [plural]:
96
- template += '{{__ "key3WithCount" count=7}}' + '\n';
111
+ template += raw('{{__ "key3WithCount" count=7}}');
112
+ template += '{{__ "key3WithCount" count=7}}';
97
113
 
98
114
  // Override language to use:
99
- template += '{{__ "key1" lng="de"}}' + '\n';
115
+ template += raw('{{__ "key1" lng="de"}}');
116
+ template += '{{__ "key1" lng="de"}}';
100
117
 
101
118
 
102
119
  // Output selected language
103
120
  // ----------------------------------------
104
121
 
105
122
  // Translation key given through handlebars variable and _locale output:
106
- template += '{{__ holdKey4}} {{_locale}}' + '\n';
123
+ template += raw('{{__ holdKey4}} {{_locale}}');
124
+ template += '{{__ holdKey4}} {{_locale}}';
107
125
 
108
126
  // Check against selected language:
109
- template += '{{#if (localeIs "en")}}English {{else}}Deutsch {{/if}}' + '\n';
127
+ template += raw('{{#if (localeIs "en")}}English {{else}}Deutsch {{/if}}');
128
+ template += '{{#if (localeIs "en")}}English {{else}}Deutsch {{/if}}';
110
129
 
111
130
 
112
131
  // Number representation
113
132
  // ----------------------------------------
114
133
 
115
134
  // Number representation as configured for all languages:
116
- template += '{{_num 7000}}' + '\n';
135
+ template += raw('{{_num 7000}}');
136
+ template += '{{_num 7000}}';
117
137
 
118
138
  // Number representation with specific format attribute:
119
- template += '{{_num 3.1415926 maximumFractionDigits=0}}' + '\n';
139
+ template += raw('{{_num 3.1415926 maximumFractionDigits=0}}');
140
+ template += '{{_num 3.1415926 maximumFractionDigits=0}}';
120
141
 
121
142
  // Number and attribute given through handlebars variables:
122
- template += '{{_num mynumber maximumFractionDigits=myMaxDigits}}' + '\n';
143
+ template += raw('{{_num mynumber maximumFractionDigits=myMaxDigits}}');
144
+ template += '{{_num mynumber maximumFractionDigits=myMaxDigits}}';
123
145
 
124
146
 
125
147
  // Price representation
126
148
  // ----------------------------------------
127
149
 
128
150
  // Price representation as configured per language:
129
- template += '{{_price 9999.99}}' + '\n';
151
+ template += raw('{{_price 9999.99}}');
152
+ template += '{{_price 9999.99}}';
130
153
 
131
154
  // Price representation with specific format attributes:
132
- template += '{{_price 1000.99 currency="JPY" minimumFractionDigits=0}}' + '\n';
155
+ template += raw('{{_price 1000.99 currency="JPY" minimumFractionDigits=0}}');
156
+ template += '{{_price 1000.99 currency="JPY" minimumFractionDigits=0}}';
133
157
 
134
- // Price given through handlebars variable and with with specific format attribute:
135
- template += '{{_price myPrice currency="DKK"}}' + '\n';
158
+ // Price given through handlebars variable and with specific format attribute:
159
+ template += raw('{{_price myPrice currency="DKK"}}');
160
+ template += '{{_price myPrice currency="DKK"}}';
136
161
 
137
162
 
138
- // date representation
163
+ // Date representation
139
164
  // ----------------------------------------
140
165
 
141
- // Todays date as configured per language:
142
- template += '{{_date}}' + '\n';
166
+ // Todays’ date as configured per language:
167
+ template += raw('{{_date}}');
168
+ template += '{{_date}}';
143
169
 
144
170
  // Date given as date string:
145
- template += '{{_date "2020-03-11T03:24:00"}}' + '\n';
171
+ template += raw('{{_date "2020-03-11T03:24:00"}}');
172
+ template += '{{_date "2020-03-11T03:24:00"}}';
146
173
 
147
174
  // Date given in milliseconds since begin of unix epoch:
148
- template += '{{_date 1583922952743}}' + '\n';
175
+ template += raw('{{_date 1583922952743}}');
176
+ template += '{{_date 1583922952743}}';
149
177
 
150
178
  // Date given as javascript date parameter array:
151
- template += '{{_date "[2012, 11, 20, 3, 0, 0]"}}' + '\n';
179
+ template += raw('{{_date "[2012, 11, 20, 3, 0, 0]"}}');
180
+ template += '{{_date "[2012, 11, 20, 3, 0, 0]"}}';
152
181
 
153
- // Todays date with with specific format attributes:
154
- template += '{{_date "today" year="2-digit" month="2-digit" day="2-digit"}}' + '\n';
182
+ // Todays’ date with specific format attributes:
183
+ template += raw('{{_date "today" year="2-digit" month="2-digit" day="2-digit"}}');
184
+ template += '{{_date "today" year="2-digit" month="2-digit" day="2-digit"}}';
155
185
 
156
186
  // Date given through handlebars variable:
157
- template += '{{_date myDate}}' + '\n';
187
+ template += raw('{{_date myDate}}');
188
+ template += '{{_date myDate}}';
189
+
190
+ // Date formatted by custom configuration (subset "custom-year-only"):
191
+ template += raw('{{_date myDate format="custom-year-only"}}');
192
+ template += '{{_date myDate format="custom-year-only"}}';
193
+
194
+ // Date formatted by custom configuration (subset "custom-date-short"):
195
+ template += raw('{{_date myDate format="custom-date-short"}}');
196
+ template += '{{_date myDate format="custom-date-short"}}';
197
+
198
+ // Date formatted by custom configuration (subset "custom-date-short"):
199
+ template += raw('{{_date myDate format="custom-time"}}');
200
+ template += '{{_date myDate format="custom-time"}}';
201
+
202
+ // Relative date representation
203
+ // ----------------------------------------
204
+
205
+ // Relative date event in the future:
206
+ template += raw('{{_dateRel 7 unit="hour"}}');
207
+ template += '{{_dateRel 7 unit="hour"}}';
158
208
 
159
- // Date formated by custom configuration (subset "custom-year-only"):
160
- template += '{{_date myDate format="custom-year-only"}}' + '\n';
209
+ // Relative date event in the past:
210
+ template += raw('{{_dateRel -7 unit="hour"}}');
211
+ template += '{{_dateRel -7 unit="hour"}}';
161
212
 
162
- // Date formated by custom configuration (subset "custom-date-short"):
163
- template += '{{_date myDate format="custom-date-short"}}' + '\n';
213
+ // Date difference:
214
+ template += raw('{{_dateDiff "1996-12-07T00:00:00" "1996-12-08T00:00:00" unit="day"}}');
215
+ template += '{{_dateDiff "1996-12-07T00:00:00" "1996-12-08T00:00:00" unit="day"}}';
164
216
 
165
- // Date formated by custom configuration (subset "custom-date-short"):
166
- template += '{{_date myDate format="custom-time"}}' + '\n';
217
+ // Date difference by custom configuration (subset "date-rel-spec"):
218
+ template += raw('{{_dateDiff mydate "1995-12-17T00:00:00" format="date-rel-spec"}}');
219
+ template += '{{_dateDiff mydate "1995-12-17T00:00:00" format="date-rel-spec"}}';
167
220
 
168
221
 
169
- let compiled = Handlebars.compile(template);
222
+ const compiled = Handlebars.compile(template);
170
223
  i18next.changeLanguage('de'); // --> Test the changes by replacing 'de' with 'en'
224
+ const decoded = htmlEntities.decode(compiled(data));
171
225
 
172
- console.log('\x1b[36m%s\x1b[0m', compiled(data));
226
+ console.log('\x1b[36m%s\x1b[0m', decoded);
package/examples/typescript/index.ts CHANGED
@@ -8,7 +8,6 @@ import { readFileSync } from "fs";
8
8
  * with TypeScript.
9
9
  *
10
10
  * @author: Dief Bell
11
- * @date: 2023-02
12
11
  *
13
12
  * usage:
14
13
  * $ npm run example:ts
@@ -30,7 +29,7 @@ myI18nInstance
30
29
  "key4": "Selected Language is:"
31
30
  }
32
31
  },
33
- "de-DE": {
32
+ "de": {
34
33
  translation: {
35
34
  "key0": "Sprache wechseln zu",
36
35
  "key1": "Was ist gut?",
@@ -68,23 +67,27 @@ HandlebarsI18n.configure([
68
67
 
69
68
  // generic configurations per language for price representation:
70
69
  [ "en-GB", "PriceFormat", { currency: "USD" } ],
71
- [ "de-DE", "PriceFormat", { currency: "EUR" } ],
70
+ [ "de", "PriceFormat", { currency: "EUR" } ],
72
71
 
73
72
  // generic configurations per language for date representation:
74
73
  [ "en-GB", "DateTimeFormat", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric" } ],
75
- [ "de-DE", "DateTimeFormat", { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", hour12: false } ],
74
+ [ "de", "DateTimeFormat", { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", hour12: false } ],
76
75
 
77
76
  // configurations per language with custom formats for date:
78
77
  [ "en-GB", "DateTimeFormat", { year: "numeric" }, "custom-year-only" ],
79
- [ "de-DE", "DateTimeFormat", { year: "numeric" }, "custom-year-only" ],
78
+ [ "de", "DateTimeFormat", { year: "numeric" }, "custom-year-only" ],
80
79
  [ "en-GB", "DateTimeFormat", { year: "numeric", month: "numeric", day: "numeric" }, "custom-date-short" ],
81
- [ "de-DE", "DateTimeFormat", { year: "numeric", month: "numeric", day: "numeric" }, "custom-date-short" ],
80
+ [ "de", "DateTimeFormat", { year: "numeric", month: "numeric", day: "numeric" }, "custom-date-short" ],
82
81
  [ "en-GB", "DateTimeFormat", { hour: "numeric", minute: "numeric", second: "numeric", hour12: false }, "custom-time" ],
83
- [ "de-DE", "DateTimeFormat", { hour: "numeric", minute: "numeric", second: "numeric", hour12: false }, "custom-time" ]
82
+ [ "de", "DateTimeFormat", { hour: "numeric", minute: "numeric", second: "numeric", hour12: false }, "custom-time" ],
83
+
84
+ // custom formats for relative dates:
85
+ ["en-GB", "RelativeTimeFormat", { style: "short", unit: "year" }, "date-rel-spec"],
86
+ ["de", "RelativeTimeFormat", { style: "short", unit: "year" }, "date-rel-spec"]
84
87
  ]);
85
88
 
86
89
  const template = readFileSync(__dirname + "/test.hbs", { encoding: "utf-8" });
87
90
  const compiled = myHandlebarsInstance.compile(template);
88
- myI18nInstance.changeLanguage("de-DE"); // --> Test the changes by replacing "de-DE" with "en-GB"
91
+ myI18nInstance.changeLanguage("de"); // --> Test the changes by replacing "de" with "en-GB"
89
92
 
90
93
  console.log("\x1b[36m%s\x1b[0m", compiled(data));
package/examples/typescript/test.hbs CHANGED
@@ -1,3 +1,6 @@
1
+ HandlebarsI18n example output from TS:
2
+ -------------------------------------------
3
+
1
4
  // Simple translation, key given as string:
2
5
  {{__ "key1"}}
3
6
 
@@ -11,7 +14,7 @@
11
14
  {{__ "key3WithCount" count=7}}
12
15
 
13
16
  // Override language to use:
14
- {{__ "key1" lng="de-DE"}}
17
+ {{__ "key1" lng="de"}}
15
18
 
16
19
 
17
20
  // Output selected language
@@ -46,14 +49,14 @@
46
49
  // Price representation with specific format attributes:
47
50
  {{_price 1000.99 currency="JPY" minimumFractionDigits=0}}
48
51
 
49
- // Price given through handlebars variable and with with specific format attribute:
52
+ // Price given through handlebars variable and with specific format attribute:
50
53
  {{_price myPrice currency="DKK"}}
51
54
 
52
55
 
53
56
  // date representation
54
57
  // ----------------------------------------
55
58
 
56
- // Todays date as configured per language:
59
+ // Todays’ date as configured per language:
57
60
  {{_date}}
58
61
 
59
62
  // Date given as date string:
@@ -65,17 +68,32 @@
65
68
  // Date given as javascript date parameter array:
66
69
  {{_date "[2012, 11, 20, 3, 0, 0]"}}
67
70
 
68
- // Todays date with with specific format attributes:
71
+ // Todays’ date with specific format attributes:
69
72
  {{_date "today" year="2-digit" month="2-digit" day="2-digit"}}
70
73
 
71
74
  // Date given through handlebars variable:
72
75
  {{_date myDate}}
73
76
 
74
- // Date formated by custom configuration (subset "custom-year-only"):
77
+ // Date formatted by custom configuration (subset "custom-year-only"):
75
78
  {{_date myDate format="custom-year-only"}}
76
79
 
77
- // Date formated by custom configuration (subset "custom-date-short"):
80
+ // Date formatted by custom configuration (subset "custom-date-short"):
78
81
  {{_date myDate format="custom-date-short"}}
79
82
 
80
- // Date formated by custom configuration (subset "custom-date-short"):
83
+ // Date formatted by custom configuration (subset "custom-time"):
81
84
  {{_date myDate format="custom-time"}}
85
+
86
+ // Relative date representation
87
+ // ----------------------------------------
88
+
89
+ // Relative date event in the future:
90
+ {{_dateRel 7 unit="hour"}}
91
+
92
+ // Relative date event in the past:
93
+ {{_dateRel -7 unit="hour"}}
94
+
95
+ // Date difference:
96
+ {{_dateDiff "1996-12-07T00:00:00" "1996-12-08T00:00:00" unit="day"}}
97
+
98
+ // Date difference by custom configuration (subset "date-rel-spec"):
99
+ {{_dateDiff mydate "1995-12-17T00:00:00" format="date-rel-spec"}}