Package Exports
- nanohtml
- nanohtml/lib/append-child
- nanohtml/lib/browser
- nanohtml/lib/browser.js
- nanohtml/lib/server
- nanohtml/lib/set-attribute
- nanohtml/raw
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nanohtml) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
nanohtml
HTML template string rendering for Node & Browsers. Nanohtml is a consolidation of bel, nanomorph, yo-yoify and pelo.
Installation
$ npm install nanohtmlUsage
var html = require('nanohtml')
var el = html`
<body>
<h1>Hello planet</h1>
</body>
`
html.render(document.body, el)Node
Node doesn't have a DOM available. So in order to render HTML we use string concatenation instead. This has the fun benefit of being quite efficient, which in turn means it's great for server rendering!
var html = require('nanohtml')
var el = html`
<body>
<h1>Hello planet</h1>
</body>
`
console.log(el.toString())Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
var raw = require('nanohtml/raw')
var html = require('nanohtml')
var string = '<h1>This a regular string.'
var el = html`
<body>
${raw(string)}
</body>
`
html.render(document.body, el)Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically, ahead of time can speed up rendering by about 2x.
Browserify
$ browserify -t nanohtml index.js > bundle.jsWebpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!