Selecting template literals

A template literal in JavaScript is delimited with backticks (`) and has three distinct portions: strings, expressions, and an optional tag function:

html`
  <div>${x}</div>
`

Where the html is the tag function, and the ${x} is an expression, and the rest being string portions. This primer was necessary because selecting templates can be tricky.

(tpl) selects template literals and has the following signature:

(tpl [strings] [expressions] [tag])

As with other selectors we've seen before, a template literal's string portion can be matched by a string or a pattern:

(tpl "foo") ; `foo`
(tpl /foo/) ; `... ${...} foo ${...} ...`

For the expressions portion, you may use any expression selector, as the value can be any valid expression, including a template literal in turn!

(tpl _ (id x)) ; `${x}`
(tpl _ (tpl x)) ; `${`x`}`

And finally, the tag can be matched by an identifier, a pattern, or any expression selector since it too can be any valid JavaScript expression:

(tpl _ _ (id html)) ; html``
(tpl _ _ /html?/)   ; htm`` and html``