Small and dependency free library for ES2015 template string tags that compose well.
npm install composable-tags
function t(TerminatingTag, ...Tags)
Call the t function with one terminating tag and any number of composable tags. They are applied from right to left.
import {t, stripCommonIndent, id, render} from 'composable-tags'
const name = 'you';
const tag = t(render, stripCommonIndent({newLine: '\n'}), id);
console.log(tag`
Hallo ${name},
I just wanted to tell you that
1+1 = ${1+1}.
Sincerely yours.
`);
/* prints:
Hallo you,
I just wanted to tell you that
1+1 = 2.
Sincerely yours.
*/
Combine these as you want. Or create your own: they all are a function of the form {parts: [String], values: [Any]} -> {parts: [String], values: [Any]}
const id // Tag
Does nothing. I.e. this identity holds:
t(...someTagsLeft, id, ...someTagsRight) == t(...someTagsLeft,...someTagsRight)
function stripCommonIndent({newLine = '\n', indentation = " "} = {}) // Tag
Strips common ident on all lines except the first.
function stripEmptyLines({ newLine = "\n", leading = true, within = false, trailing = true, trailingNewLine = true} = {}) // Tag
Strips empty lines. If trailingNewLine
is true
one trailing newline at the end will be enforced. If within
is true
all empty lines between first and last non-empty line will be removed as well.
You can use one terminating tag at the end of the list of tags. You must not use any other tags left of a terminating one - otherweise things will explode.
const render // TerminatingTag
Terminates the sequence of tags and renders it as string
t(render)`abc` === `abc`
function box(foreignTag) // TerminatingTag
Use any tag from other libraies as the terminating tag.
You want to leverage syntax highlighting for your, e.g. GraphQL, template string in your editor without changing the semantics? Just do the following:
import {t, render} from 'composable-tags'
const gql = t(render) // equivalent to not use any tags.
// if you want to strip indentaion as well just use
// const gql = t(render, stripCommonIndent()) instead
const query = gql`
query userWithSyntaxHighlighting($email: String!) {
allUser(email: $email) {
id
}
}
`
Your more than welcome to add your own helpful tags. After all what is a composable tag system worth if it doesn't contain the tags you want to compose?