Read me

In most projects we use interpolations for several reasons. This could be simple html class-names, sql queries, or even more complicated strings that needs to be mutated on the fly. This is what this package is good for. You can easily create your own dynamic strings, with conditions, expressions or whatever you need.

API Reference

1taggedTemplate(pattern, values, conditions); // string

Pattern	Values	Conditions	Result
string	number, string, [number or string]	boolean, string, number, null, [boolean, string, number, null]	string
text {0}	'val 1'	null	'text val 1'
text {0} and {0}	'val 1'	null	'text val 1 and val 1'
text {0} and {1}	'val 1'	null	'text val 1 and val 1'
text {0} and {1}	['val 1', 'val 2']	null	'text val 1 and val 2'
text {0} and {1}	[ ['val 1.0', 'val 1.1'], ['val 2.0', 'val 2.1'] ]	[ true, false ]	'text val 1.0 and val 2.1'
text {0} and {1}	[ ['val 1.0', 'val 1.1'], ['val 2.0', 'val 2.1'] ]	[ true, null ]	'text val 1.0 and val 2.0'
text {key1} and {key2}	{ key1: ['val 1.1', 'val 1.2'], key2: ['val 2.1', 'val 2.2'] }	null	'text val 1.1,val 1.2 and val 2.1,val 2.2'
text {key1} and {key2}	{ key1: ['val 1.1', 'val 1.2'], key2: ['val 2.1', 'val 2.2'] }	{ key1: true, key2: false }	'text val 1.1 and val 2.2'
text {key1} and {key2}	{ key1: ['val 1.1', 'val 1.2'], key2: ['val 2.1', 'val 2.2'] }	{ key1: 'true', key2: null }	'text val 1.1 and val 2.2'
(key) => `text ${key}`	'val 1'	null	'text val 1'
(key) => `text ${key}`	['val 1']	null	'text val 1'
(key) => `text ${key}`	['val 1']	true	'text val 1'
(key) => `text ${key}`	['val 1']	[true]	'text val 1'
(key) => `text ${key}`	['val 1']	[false] or false	'text val 1'
(key1, key2) => `text ${key1} and ${key2}`	[['val 1.1','val 1.2'],['val 2.1', 'val 2.2']]	[true, false]	'text val 1.1 and val 2.2'

Examples

Html class names

1const isFirstNavItem = index === 0;
2
3const className = taggedTemplate(
4  `link__{1}--{0} link__type--{1}`,
5  [['active',''], 'nav'],
6  [isFirstNavItem, true]
7);
8
9<h1 :class="className">Title</h1> // VueJs Sample
10
11// Output
12
13// <h1 class="link__nav--active link__type--nav">Title</h1>
14

SQL

1const isClient = true;
2const as = 'age';
3const from = ['clientTable', 'relationTable'];
4const fromCondition = isClient;
5const where = `${as} = ${42}`;
6const start = 0, end = 10;
7
8const a = taggedTemplate(`
9  SELECT {select} AS {as}
10  FROM {from}
11  WHERE {where}
12  LIMIT {start}, {end}
13`,
14  { select: 'age_col', as, from, where, start, end },
15  { from: fromCondition },
16)
17

Render HTML

1
2const classHandler = (id, activeIndex, classes) => {
3  if (!!classes) {
4     return taggedTemplate(
5       `class="{0}"`, 
6       [[Array.from(new Set(classes)).join(' '), classes[0]]],
7       [id === activeIndex]
8     );
9  }
10};
11
12const activeIndex = 1;
13
14const result = taggedTemplate(
15  (listWrapper, listItems, activeClass, activeIndex) => `
16    <ul class="${listWrapper}">
17        ${listItems.reduce((ul, {id, label}) => {
18          return ul+`<li id="${id}" ${classHandler(id, activeIndex, activeClass)}>${label}</li>`;
19        }, '')}
20    </ul>
21  `,
22  [
23    'list__wrapper',
24    [
25      { id: 1, label: 'Item 1' },
26      { id: 2, label: 'Item 2' }
27    ],
28    ['list__item','list__item--active'],
29    activeIndex
30  ]
31);
32
33/** 
34 * Outputs
35
36<ul class="list__wrapper">
37  <li id="1" class="list__item list__item--active">
38    Item 1</li>
39  <li id="2" class="list__item">
40    Item 2</li>
41</ul>
42
43*/