@itrocks/template 0.0.10 → 0.0.12

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/README.md CHANGED
@@ -17,13 +17,14 @@ npm i @itrocks/template
17
17
  ## Basic Usage
18
18
 
19
19
  ```ts
20
- console.log(
21
- await new Template({
22
- users: [
23
- { age: 10, name: 'kid' },
24
- { age: 20, name: 'old-timer' }
25
- ]
26
- })
20
+ import '@itrocks/template'
21
+
22
+ new Template({
23
+ users: [
24
+ { age: 10, name: 'kid' },
25
+ { age: 20, name: 'old-timer' }
26
+ ]
27
+ })
27
28
  .parseBuffer(`
28
29
  <ul>
29
30
  <!--users-->
@@ -31,7 +32,7 @@ console.log(
31
32
  <!--end-->
32
33
  </ul>
33
34
  `)
34
- )
35
+ .then(console.log)
35
36
  ```
36
37
 
37
38
  Result:
@@ -66,7 +67,8 @@ The `template.html` template file will validate W3C and display well in your bro
66
67
 
67
68
  Since the engine supports asynchronous operations (e.g., reading files, calling async functions, resolving async data),
68
69
  parsing returns a [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)
69
- that you should handle with [await](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await).
70
+ that you should handle with [await](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await)
71
+ or [then](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/then).
70
72
 
71
73
  This library is fully compatible with both ECMAScript modules (import) and CommonJS (require),
72
74
  adapting seamlessly to your project's module system.
@@ -195,9 +197,7 @@ if not properly spaced.
195
197
 
196
198
  Wrap a property in `{}` to display its value:
197
199
  ```ts
198
- console.log(
199
- await new Template({ var: 15 }).parseBuffer('<span>{var}</span>')
200
- )
200
+ new Template({ var: 15 }).parseBuffer('<span>{var}</span>').then(console.log)
201
201
  ```
202
202
  Result:
203
203
  ```html
@@ -208,9 +208,7 @@ Result:
208
208
 
209
209
  If a context property is a function, it will be called and its return value displayed:
210
210
  ```ts
211
- console.log(
212
- await new Template({ var: () => 15 }).parseBuffer('<span>{var}</span>')
213
- )
211
+ new Template({ var: () => 15 }).parseBuffer('<span>{var}</span>').then(console.log)
214
212
  ```
215
213
  Result:
216
214
  ```html
@@ -221,7 +219,7 @@ Result:
221
219
 
222
220
  Use `{.}` to reference the current data context:
223
221
  ```ts
224
- console.log(await new Template(15).parseBuffer('<span>{.}</span>'))
222
+ new Template(15).parseBuffer('<span>{.}</span>').then(console.log)
225
223
  ```
226
224
  Result:
227
225
  ```html
@@ -264,17 +262,15 @@ Result on data `{ user: { age: 10, name: 'kid' } }`:
264
262
 
265
263
  You can use dot notation within `{your.expression}`:
266
264
  ```ts
267
- console.log(
268
- await new Template({ user: { age: 10, name: 'kid' } })
269
- .parseBuffer('<span>{user.name} is {user.age} years old</span>')
270
- )
265
+ new Template({ user: { age: 10, name: 'kid' } })
266
+ .parseBuffer('<span>{user.name} is {user.age} years old</span>')
267
+ .then(console.log)
271
268
  ```
272
269
  Or use a block to avoid repeating:
273
270
  ```ts
274
- console.log(
275
- await new Template({ user: { age: 10, name: 'kid' } })
276
- .parseBuffer('<span><!--user-->{name} is {age} years old<!--end--></span>')
277
- )
271
+ new Template({ user: { age: 10, name: 'kid' } })
272
+ .parseBuffer('<span><!--user-->{name} is {age} years old<!--end--></span>')
273
+ .then(console.log)
278
274
  ```
279
275
  Both produce:
280
276
  ```html
@@ -285,10 +281,9 @@ Both produce:
285
281
 
286
282
  Use `*` to iterate over all values of an object:
287
283
  ```ts
288
- console.log(
289
- await new Template({ object: { first: 'kid', next: 'old-timer' } })
290
- .parseBuffer('<ul><!--object.*--><li>{.}<!--end--></ul>')
291
- )
284
+ new Template({ object: { first: 'kid', next: 'old-timer' } })
285
+ .parseBuffer('<ul><!--object.*--><li>{.}<!--end--></ul>')
286
+ .then(console.log)
292
287
  ```
293
288
  Result:
294
289
  ```html
@@ -298,10 +293,9 @@ Result:
298
293
  ### Iterating Over Arrays
299
294
 
300
295
  ```ts
301
- console.log(
302
- await new Template({ users: ['kid', 'old-timer'] })
303
- .parseBuffer('<ul><!--users--><li>{.}</li><!--end--></ul>')
304
- )
296
+ new Template({ users: ['kid', 'old-timer'] })
297
+ .parseBuffer('<ul><!--users--><li>{.}</li><!--end--></ul>')
298
+ .then(console.log)
305
299
  ```
306
300
  Result:
307
301
  ```html
@@ -311,13 +305,12 @@ Result:
311
305
  ### Iterating Over Arrays of Objects
312
306
 
313
307
  ```ts
314
- console.log(
315
- await new Template({
316
- users: [
317
- { age: 10, name: 'kid' },
318
- { age: 20, name: 'old-timer' }
319
- ]
320
- })
308
+ await new Template({
309
+ users: [
310
+ { age: 10, name: 'kid' },
311
+ { age: 20, name: 'old-timer' }
312
+ ]
313
+ })
321
314
  .parseBuffer(`
322
315
  <ul>
323
316
  <!--users-->
@@ -325,7 +318,7 @@ console.log(
325
318
  <!--end-->
326
319
  </ul>
327
320
  `)
328
- )
321
+ .then(console.log)
329
322
  ```
330
323
  Result:
331
324
  ```html
@@ -339,8 +332,7 @@ Result:
339
332
 
340
333
  Use `-` to go back up one level in the data context:
341
334
  ```ts
342
- console.log(
343
- await new Template({ name: 'Eddie', data: { age: 30, status: 'well' } })
335
+ new Template({ name: 'Eddie', data: { age: 30, status: 'well' } })
344
336
  .parseBuffer(`
345
337
  <!--data-->
346
338
  <ol>
@@ -350,7 +342,7 @@ console.log(
350
342
  </ol>
351
343
  <!--end-->
352
344
  `)
353
- )
345
+ .then(console.log)
354
346
  ```
355
347
  Result:
356
348
  ```html
@@ -374,10 +366,9 @@ If a descendant property or method isn't found on the current data object,
374
366
  the engine attempts to use the [Str](https://www.npmjs.com/package/@itrocks/rename#str-class) helper object,
375
367
  which provides string formatting functions. If no matching function is found, an error is thrown.
376
368
  ```ts
377
- console.log(
378
- await new Template({ name: 'EDITH' })
379
- .parseBuffer('<span>{name.lcFirst}</span>')
380
- )
369
+ new Template({ name: 'EDITH' })
370
+ .parseBuffer('<span>{name.lcFirst}</span>')
371
+ .then(console.log)
381
372
  ```
382
373
  Result:
383
374
  ```html
@@ -451,13 +442,12 @@ class MyTemplate extends Template
451
442
 
452
443
  Using this class:
453
444
  ```ts
454
- console.log(
455
- await new MyTemplate({ name: 'Nick' })
456
- .parseBuffer(`
457
- <h2>What is my name</h2>
458
- <p>My name is {name}</p>
459
- `)
460
- )
445
+ new MyTemplate({ name: 'Nick' })
446
+ .parseBuffer(`
447
+ <h2>What is my name</h2>
448
+ <p>My name is {name}</p>
449
+ `)
450
+ .then(console.log)
461
451
  ```
462
452
  Results in:
463
453
  ```html
@@ -468,13 +458,12 @@ Results in:
468
458
  [Inline HTML elements](https://developer.mozilla.org/docs/Web/HTML/Element#inline_text_semantics)
469
459
  are considered part of the phrase, so their text is also translated:
470
460
  ```ts
471
- console.log(
472
- await new MyTemplate({ name: 'Nick' })
473
- .parseBuffer(`
474
- <h2>What is my name</h2>
475
- <p>My <span>name</span> is {name}</p>
476
- `)
477
- )
461
+ new MyTemplate({ name: 'Nick' })
462
+ .parseBuffer(`
463
+ <h2>What is my name</h2>
464
+ <p>My <span>name</span> is {name}</p>
465
+ `)
466
+ .then(console.log)
478
467
  ```
479
468
  Results in:
480
469
  ```html
@@ -592,7 +581,7 @@ Beyond simply inserting the content of another template, you can:
592
581
 
593
582
  Example:
594
583
  ```ts
595
- await new Template({ name: 'Nick' })
584
+ const parsed = await new Template({ name: 'Nick' })
596
585
  .parseFile('child-template.html', 'container-template.html')
597
586
  ```
598
587
 
@@ -610,7 +599,7 @@ to print out parsing details to the console. It's extremely useful for diagnosin
610
599
  ```ts
611
600
  const template = new Template(data)
612
601
  template.debugEvents()
613
- await template.parseBuffer(yourTemplateString)
602
+ const parsed = await template.parseBuffer(yourTemplateString)
614
603
  ```
615
604
  As the template is parsed, the console will show events like:
616
605
  ```
package/cjs/template.d.ts CHANGED
@@ -73,4 +73,3 @@ export default class Template {
73
73
  startsExpression(char: string, open?: string, close?: string): boolean;
74
74
  trimEndLine(string: string): string;
75
75
  }
76
- //# sourceMappingURL=template.d.ts.map
package/cjs/template.js CHANGED
@@ -778,4 +778,3 @@ class Template {
778
778
  }
779
779
  exports.default = Template;
780
780
  exports.Template = Template;
781
- //# sourceMappingURL=template.js.map
package/esm/template.d.ts CHANGED
@@ -73,4 +73,3 @@ export default class Template {
73
73
  startsExpression(char: string, open?: string, close?: string): boolean;
74
74
  trimEndLine(string: string): string;
75
75
  }
76
- //# sourceMappingURL=template.d.ts.map
package/esm/template.js CHANGED
@@ -771,4 +771,3 @@ export default class Template {
771
771
  return string.substring(0, index);
772
772
  }
773
773
  }
774
- //# sourceMappingURL=template.js.map
package/package.json CHANGED
@@ -57,5 +57,5 @@
57
57
  "test": "jest"
58
58
  },
59
59
  "types": "./esm/template.d.ts",
60
- "version": "0.0.10"
60
+ "version": "0.0.12"
61
61
  }