Skip to content

Simple lightweight string interpolation helper. Especially for implementations like dynamic class names, sql, graphql etc.

License

Notifications You must be signed in to change notification settings

isaozler/tagged-templates-io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

*/

About

Simple lightweight string interpolation helper. Especially for implementations like dynamic class names, sql, graphql etc.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published