convert virtual DOM nodes into HTML elements
let heading = manifest({
tag: "h1",
attributes: { class: "foo" },
children: [ "hello world" ]
})
document.body.appendChild(heading)
console.log(document.body.outerHTML)
// <body><h1 class="foo">hello world</h1></body>
We can extend the definition of a virtual node as specified by hyper2/h2spec
to cover primitive values. Doing so enables us to create "text nodes" out of raw strings, numbers, etc. and greatly simplifies vnode conversion. When used with primitive values, this function is practically equivalent to calling document.createTextNode
, as in the following (impractical) example:
let foo = manifest("foo")
let bar = document.createTextNode("bar")
document.body.appendChild(foo)
document.body.appendChild(bar)
console.log(document.body.outerHTML)
// <body>foobar</body>
To use this module in your project, package your code together using a bundler like rollup
together with rollup-plugin-node-resolve
.
semibran/patch
: efficient patch operation for HTML elements