nanohtml-node

Get a full DOM object back from nanohtml on the server side.

About

Currently the nanohtml package returns a string when used in Node.js. The reason is to provide a performant server-rendering experience. What it doesn't allow is easy testing.

This package behaves a little like nanohtml did back when it was called bel. It uses domino, a Node.js implementation of the DOM, so that when using nanohtml it returns a DOM element.

This lets us test our nanohtml elements much more thoroughly than comparing strings. Returning a DOM element allows us to test attributes and event handlers without a bunch of hassle.

Install

npm install --save nanohtml-node

Usage

Here's a very simple example testing interaction with a button click handler:

const test = require('tape')
const html = require('nanohtml-node')
 
test('test that element', function (t) {
  t.plan(4)
 
  function onclick (e) {
    t.ok(typeof e === 'object')
    t.ok(e.target.childNodes.length === 1)
    const child = e.target.childNodes[0]
    t.ok(child.nodeValue === 'ok')
  }
 
  const result = html`<button onclick=${onclick}>ok</button>`
  t.ok(result.outerHTML === '<button>ok</button>')
  result.click()
})

You might not need this

This package is a simple wrapper around domino and nanohtml. You may find that you have slightly different needs than this package allows. The good news is that the code is very small and easy to copy/paste:

const domino = require('domino')
const nanohtml = require('nanohtml/lib/browser')
 
const dom = domino.createDOMImplementation()
global.document = dom.createHTMLDocument()
 
module.exports = nanohtml
module.exports.default = module.exports

You can use domino to create a document as part of the setup of your tests instead of relying on this package. Up to you!

Contributing

Contributions are welcome! Please read the contributing guidelines first.

Conduct

It's important that this project contributes to a friendly, safe, and welcoming environment for all, particularly for folks that are historically underrepresented in technology. Read this project's code of conduct

Change log

Read about the changes to this project in CHANGELOG.md. The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

Contact

• chat – You can chat about this project in the #choo irc channel on freenode
• issues – Please open issues in the issues queue

License

ISC