joshgillies / hyperify

Browserify transform for hyperHTML templates

hyperify

Browserify transform for hyperHTML templates ⚡

Credit for the idea behind this module goes to @WebReflection for outlining a similar approach with https://github.com/WebReflection/viperHTML#handy-patterns. 👍

Example

index.js

var hyperHTML = require('hyperhtml')
var template = require('./template.html')
var render = hyperHTML.bind(document.body)

template(render, {
  text: "Hello world!"
})

template.html

<div>
  ${data.text}
</div>

The template compiles down to effectively the following function:

function (render, data) {
  return render`<div>
    ${data.text}
  </div>`
}

Usage

Install hyperify via npm:

npm install hyperify -D

or yarn:

yarn add hyperify -D

Then add hyperify to your list of browserify transforms:

browserify -t hyperify index.js > bundle.js

Additionally you can configure hyperify via CLI as follows:

browserify -t [ hyperify -e '.hyper.html' -a render -a model ] index.js > bundle.js

Options

• -e | --ext | --extension - Define which file extension to apply the transform to. Default: '.html'
• -a | --args | --arguments - Define which arguments the template function should be called with. Default: ['render', 'data'] Note: the first arg should always be your render function.

License

MIT