@semibran/manifest

convert vdom nodes into html elements

Usage no npm install needed!

<script type="module">
  import semibranManifest from 'https://cdn.skypack.dev/@semibran/manifest';
</script>

README

manifest

convert vdom 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>

install

npm badge

To use this module in your project, package your code together using a bundler like rollup together with rollup-plugin-node-resolve.

license

MIT © Brandon Semilla