Noodles, Poodles and More!

    nanohtml-node

    1.0.1 • Public • Published

    nanohtml-node

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

    npm travis standard conduct

    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

    Install

    npm i nanohtml-node

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    13.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • sethvincent