Typelating

Strongly typed templating with string literals.

Installation

npm i typelating

Usage

Import html or render from typelating, depending on whether you want HTML escaping of interpolations by default. See the docs for specifics on the behaviour of html and render.

In addition to these, the following helpers are provided:

iff(condition, output) / unless(condition, output)

Include/exclude output based on whether condition is truthy.

type WelcomeParams = {
  user: {
    name: string
    isNew: boolean
    loginMessage?: string
  }
}

const welcome = ({ user }: WelcomeParams) => html`
  <div>Welcome ${unless(user.isNew, html`back `)}, ${user.name}</div>
  ${iff(user.adminData, html`<div>Secrets: ${user.adminData}</div>`)}
`

each(iterable, outputFunction) / times(count, outputFunction)

each maps outputFunction over iterable to produce its output. times will just call outputFunction with an iteration index from 0 to count-1.

type MarketStallParams = {
  apples: number
  oranges: number
  specials: string[]
}

const marketStall = ({ apples, oranges, specials }: MarketStallParams) => html`
  <div>
    Today we have:
    <ul>
      <li>Apples ${times(apples, () => '🍎')}</li>
      <li>Oranges ${times(oranges, () => '🍊')}</li>
      ${each(specials, (special) => html` <li>${special}</li> `)}
    </ul>

    Shopping is as easy as${times(3, (i) => ` ${i + 1}`)}.
  </div>
`

raw(safeHtmlContent) / escapeHtml(unescapedContent)

raw will mark safeHtmlContent as not needing escaping, such that it can be interpolated into html without being escaped.

escapeHtml will perform HTML escaping on unescapedContent, such that it won't produce HTML even when passed to render.

Calling escapeHtml inside html or raw inside render is unnecessary, but won't break anything. In particular, html will not cause the output of escapeHtml to be double escaped.