Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

as-html

DylanPiercey53MIT2.0.1

HTML templating with es6 quasi literals.

as-html, html, literal, quasi, template, templating, test

readme

as-html

Simple html templates with es6 quasi literals. You can also minify the templates using babel-plugin-as-html.

Inspired by http://www.2ality.com/2015/01/template-strings-html.html.

Installation

Npm

$ npm install as-html

Example

// commonjs
var html = require('as-html')

// es6
import html from 'as-html'

// examples
let planet = 'world'

html`
  <div>Hello ${planet}</div>
` //-> '<div>Hello world</div>'

// safe by default
planet = 'crazy<planet>'

html`
  <div>Hello ${planet}</div>
` //-> '<div>Hello crazy&lt;planet&gt;</div>'

// or insert html by prefixing with a bang!
html`
  <div>Hello !${planet}</div>
` //-> '<div>Hello crazy<planet></div>'

// arrays are supported as well (automatically unescaped)!
let planets = ['a', 'b', 'c']

html`
  <div>
    ${planets.map(planet => html`
      <b>${planet}</b>
    `)}
  </div>
` //-> '<div><b>a</b><b>b</b><b>c</b></div>'

Contributions

  • Use npm test to run tests.

Please feel free to create a PR!