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. 👍

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>` }

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

• -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.

MIT