html-tagged-literals

Tagged literals for modifying newlines and whitespace in HTML string literals.


Keywords
es6, html, tagged literals
License
MIT
Install
npm install html-tagged-literals@1.0.2

Documentation

html-tagged-literals

NPM Build Status js-standard-style Greenkeeper badge

Install

npm install html-tagged-literals --save

Usage

ES2015 template strings are nice for generating HTML, but can be annoying because of stuff like this:

const html = () => {
  const css = '/path/to/theme.css'
  const js = '/path/to/app.js'

  // The code looks readable and nice but now the html will have leading and
  // trailing newlines and each line will be indented by 4 extra spaces
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="${css}">
      </head>
      <body>
        <div id="container">
        </div>
      </body>
      <script src="${js}"></script>
    </html>
  `
}

This module gives you a few tagged template literals for either stripping all newlines and whitespace or just unindenting the string literal:

import {minify, unindent} from 'html-tagged-literals'

const html = () => {
  const css = '/path/to/theme.css'
  const js = '/path/to/app.js'

  // This will now be a single line of html.
  // Use unindent to preserve the original indentation but to get rid of
  // leading/trailing newlines and the first 4 spaces before each line.
  return minify`
    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="${css}">
      </head>
      <body>
        <div id="container">
        </div>
      </body>
      <script src="${js}"></script>
    </html>
  `
}

API

  • minify

This will take the template string and remove all newlines followed by any number of spaces.

  • unindent

This will take the template string and do the following:

  • Remove leading/trailing newliens
  • Remove empty lines
  • Count the number of whitespace before the first non-empty line and remove those from the start of each line

LICENSE

MIT