common-tags
🔖 A set of well-tested, commonly used template literal tag functions for use in ES2015+.
🌟 Plus some extra goodies for easily making your own tags.
Example
Project Status
Table of Contents
Introduction
common-tags
initially started out as two template tags I'd always find myself writing - one for stripping indents, and one for trimming multiline strings down to a single line. In it's prime, I was an avid user of CoffeeScript, which had this behaviour by default as part of it's block strings feature. I also started out programming in Ruby, which has a similar mechanism called Heredocs.
Over time, I found myself needing a few more template tags to cover edge cases - ones that supported including arrays, or ones that helped to render out tiny bits of HTML not large enough to deserve their own file or an entire template engine. So I packaged all of these up into this module.
As more features were proposed, and I found myself needing a way to override the default settings to cover even more edge cases, I realized that my initial implementation wouldn't be easy to scale.
So I re-wrote this module on top of a core architecture that makes use of transformer plugins which can be composed, imported independently and re-used.
Why You Should Care
Tagged templates in ES2015 are a welcome feature. But, they have their downsides. One such downside is that they preserve all whitespace by default - which makes multiline strings in source code look terrible.
Source code is not just for computers to interpret. Humans have to read it too 😁. If you care at all about how neat your source code is, or come from a CoffeeScript background and miss the block string syntax, then you will love common-tags
, as it was initially intended to bring this feature "back" to JS since it's initial commit.
common-tags
also exposes a means of composing pipelines of dynamic transformer plugins. As someone with a little experience writing tagged templates, I can admit that it is often the case that one tag might need to do the same thing as another tag before doing any further processing; for example - a typical tag that renders out HTML could strip initial indents first, then worry about handling character escapes. Both steps could easily be useful as their own separate template tags, but there isn't an immediately obvious way of composing the two together for maximum re-use. common-tags
offers not one, but two ways of doing this.
Furthermore, I try to keep this project as transparently stable and updated as frequently as I possibly can. As you may have already seen by the project status table, common-tags
is linted, well tested, tests are well covered, tests pass on both Unix and Windows operating systems, the popularity bandwidth is easily referenced and dependency health is in plain sight 😄. common-tags
is also already used in production on a number of proprietary sites and dependent projects, and contributions are always welcome, as are suggestions.
See Who Is Using common-tags
common-tags
Installation
Requirements
The official recommendation for running common-tags
is as follows:
Node.js v5.0.0 or higher
In order to use
common-tags
, your environment will also need to support ES2015 tagged templates (pssst… check Babel out)You might also want to polyfill some features if you plan on supporting older browsers:
Array.prototype.includes
It might work with below versions of Node, but this is not a guarantee.
Instructions
common-tags
is a Node module. So, as long as you have Node.js and NPM installed, installing common-tags
is as simple as running this in a terminal at the root of your project:
With unpkg
common-tags
is also available at unpkg. Just put this code in your HTML:
This will make the library available under a global variable commonTags
.
Usage
Imports
Like all modules, common-tags
begins with an import
. In fact, common-tags
supports two styles of import:
Named imports:
Direct module imports:
(Useful if your bundler doesn't support tree shaking but you still want to only include modules you need).
Available Tags
common-tags
exports a bunch of wonderful pre-cooked template tags for your eager consumption. They are as follows:
html
html
Aliases: source
, codeBlock
You'll often find that you might want to include an array in a template. Typically, doing something like ${array.join(', ')}
would work - but what if you're printing a list of items in an HTML template and want to maintain the indentation? You'd have to count the spaces manually and include them in the .join()
call - which is a bit ugly for my taste. This tag properly indents arrays, as well as newline characters in string substitutions, by converting them to an array split by newline and re-using the same array inclusion logic:
Outputs:
safeHtml
safeHtml
A tag very similar to html
but it does safe HTML escaping for strings coming from substitutions. When combined with regular html
tag, you can do basic HTML templating that is safe from XSS (Cross-Site Scripting) attacks.
Outputs:
oneLine
oneLine
Allows you to keep your single-line strings under 80 characters without resorting to crazy string concatenation.
oneLineTrim
oneLineTrim
Allows you to keep your single-line strings under 80 characters while trimming the new lines:
stripIndent
stripIndent
If you want to strip the initial indentation from the beginning of each line in a multiline string:
Important note: this tag will not indent multiline strings coming from the substitutions. If you want that behavior, use the html
tag (aliases: source
, codeBlock
).
stripIndents
stripIndents
If you want to strip all of the indentation from the beginning of each line in a multiline string:
inlineLists
inlineLists
Allows you to inline an array substitution as a list:
oneLineInlineLists
oneLineInlineLists
Allows you to inline an array substitution as a list, rendered out on a single line:
commaLists
commaLists
Allows you to inline an array substitution as a comma-separated list:
commaListsOr
commaListsOr
Allows you to inline an array substitution as a comma-separated list, the last of which is preceded by the word "or":
commaListsAnd
commaListsAnd
Allows you to inline an array substitution as a comma-separated list, the last of which is preceded by the word "and":
oneLineCommaLists
oneLineCommaLists
Allows you to inline an array substitution as a comma-separated list, and is rendered out on to a single line:
oneLineCommaListsOr
oneLineCommaListsOr
Allows you to inline an array substitution as a comma-separated list, the last of which is preceded by the word "or", and is rendered out on to a single line:
oneLineCommaListsAnd
oneLineCommaListsAnd
Allows you to inline an array substitution as a comma-separated list, the last of which is preceded by the word "and", and is rendered out on to a single line:
Advanced Usage
Tail Processing
It's possible to pass the output of a tagged template to another template tag in pure ES2015+:
We can make this neater. Every tag common-tags
exports can delay execution if it receives a function as it's first argument. This function is assumed to be a template tag, and is called via an intermediary tagging process before the result is passed back to our tag. Use it like so (this code is equivalent to the previous code block):
Using Tags on Regular String Literals
Sometimes you might want to use a tag on a normal string (e.g. for stripping the indentation). For that purpose just call a tag as a function with the passed string:
Type Definitions
There are third-party type definitions for common-tags
on npm. Just install them like so:
Please note that these type definitions are not officially maintained by the authors of common-tags
- they are maintained by the TypeScript community.
Make Your Own Template Tag
common-tags
exposes an interface that allows you to painlessly create your own template tags.
Class is in Session: TemplateTag
common-tags
exports a TemplateTag
class. This class is the foundation of common-tags
. The concept of the class works on the premise that transformations occur on a template either when the template is finished being processed (onEndResult
), or when the tag encounters a string (onString
) or a substitution (onSubstitution
). Any tag produced by this class supports tail processing.
The easiest tag to create is a tag that does nothing:
The Anatomy of a Transformer
TemplateTag
receives either an array or argument list of transformers
. A transformer
is just a plain object with three optional methods - onString
, onSubstitution
and onEndResult
- it looks like this:
Plugin Transformers
You can wrap a transformer in a function that receives arguments in order to create a dynamic plugin:
note - if you call
new TemplateTag(substitutionReplacer)
,substitutionReplacer
will automatically be initiated with no arguments.
Plugin Pipeline
You can pass a list of transformers, and TemplateTag
will call them on your tag in the order they are specified:
When multiple transformers are passed to TemplateTag
, they will be iterated three times - first, all transformer onString
methods will be called. Once they are done processing, onSubstitution
methods will be called. Finally, all transformer onEndResult
methods will be called.
Returning Other Values from a Transformer
This is super easy. Transformers are just objects, after all. They have full access to this
:
List of Built-in Transformers
Since common-tags
is built on the foundation of this TemplateTag class, it comes with its own set of built-in transformers:
trimResultTransformer([side])
Trims the whitespace surrounding the end result. Accepts an optional side
(can be "start"
or "end"
or alternatively "left"
or "right"
) that when supplied, will only trim whitespace from that side of the string.
stripIndentTransformer([type='initial'])
Strips the indents from the end result. Offers two types: all
, which removes all indentation from each line, and initial
, which removes the shortest indent level from each line. Defaults to initial
.
replaceResultTransformer(replaceWhat, replaceWith)
Replaces a value or pattern in the end result with a new value. replaceWhat
can be a string or a regular expression, replaceWith
is the new value.
replaceSubstitutionTransformer(replaceWhat, replaceWith)
Replaces the result of all substitutions (results of calling ${ ... }
) with a new value. Same as for replaceResultTransformer
, replaceWhat
can be a string or regular expression and replaceWith
is the new value.
replaceStringTransformer(replaceWhat, replaceWith)
Replaces the result of all strings (what's not in ${ ... }
) with a new value. Same as for replaceResultTransformer
, replaceWhat
can be a string or regular expression and replaceWith
is the new value.
inlineArrayTransformer(opts)
Converts any array substitutions into a string that represents a list. Accepts an options object:
splitStringTransformer(splitBy)
Splits a string substitution into an array by the provided splitBy
substring, only if the string contains the splitBy
substring.
How to Contribute
Please see the Contribution Guidelines.
License
MIT. See license.md.
Other ES2015 Template Tag Modules
If common-tags
doesn't quite fit your bill, and you just can't seem to find what you're looking for - perhaps these might be of use to you?
tage - make functions work as template tags too
is-tagged - Check whether a function call is initiated by a tagged template string or invoked in a regular way
es6-template-strings - Compile and resolve template strings notation as specified in ES6
t7 - A light-weight virtual-dom template library
html-template-tag - ES6 Tagged Template for compiling HTML template strings.
clean-tagged-string - A simple utility function to clean ES6 template strings.
multiline-tag - Tags for template strings making them behave like coffee multiline strings
deindent - ES6 template string helper for deindentation.
heredoc-tag - Heredoc helpers for ES2015 template strings
regx - Tagged template string regular expression compiler.
regexr - Provides an ES6 template tag function that makes it easy to compose regexes out of template strings without double-escaped hell.
url-escape-tag - A template tag for escaping url parameters based on ES2015 tagged templates.
shell-escape-tag - An ES6+ template tag which escapes parameters for interpolation into shell commands.
sql-tags - ES6 tagged template string functions for SQL statements.
sql-tag - A template tag for writing elegant sql strings.
sequelize-sql-tag - A sequelize plugin for sql-tag
pg-sql-tag - A pg plugin for sql-tag
sql-template-strings - ES6 tagged template strings for prepared statements with mysql and postgres
sql-composer - Composable SQL template strings for Node.js
pg-template-tag - ECMAScript 6 (2015) template tag function to write queries for node-postgres.
digraph-tag - ES6 string template tag for quickly generating directed graph data
es2015-i18n-tag - ES2015 template literal tag for i18n and l10n translation and localization
Last updated