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

taggedTemplate(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

const isFirstNavItem = index === 0;

const className = taggedTemplate(
  `link__{1}--{0} link__type--{1}`,
  [['active',''], 'nav'],
  [isFirstNavItem, true]
);

<h1 :class="className">Title</h1> // VueJs Sample

// Output

// <h1 class="link__nav--active link__type--nav">Title</h1>

SQL

const isClient = true;
const as = 'age';
const from = ['clientTable', 'relationTable'];
const fromCondition = isClient;
const where = `${as} = ${42}`;
const start = 0, end = 10;

const a = taggedTemplate(`
  SELECT {select} AS {as}
  FROM {from}
  WHERE {where}
  LIMIT {start}, {end}
`,
  { select: 'age_col', as, from, where, start, end },
  { from: fromCondition },
)

Render HTML

const classHandler = (id, activeIndex, classes) => {
  if (!!classes) {
     return taggedTemplate(
       `class="{0}"`, 
       [[Array.from(new Set(classes)).join(' '), classes[0]]],
       [id === activeIndex]
     );
  }
};

const activeIndex = 1;

const result = taggedTemplate(
  (listWrapper, listItems, activeClass, activeIndex) => `
    <ul class="${listWrapper}">
        ${listItems.reduce((ul, {id, label}) => {
          return ul+`<li id="${id}" ${classHandler(id, activeIndex, activeClass)}>${label}</li>`;
        }, '')}
    </ul>
  `,
  [
    'list__wrapper',
    [
      { id: 1, label: 'Item 1' },
      { id: 2, label: 'Item 2' }
    ],
    ['list__item','list__item--active'],
    activeIndex
  ]
);

/** 
 * Outputs

<ul class="list__wrapper">
  <li id="1" class="list__item list__item--active">
    Item 1</li>
  <li id="2" class="list__item">
    Item 2</li>
</ul>

*/