Efficiently create and render virtual-dom elements.
$ npm install velconst vel = require('vel')
const el = vel((h, state) => h.html(`<p>hello ${state.type} world</p>`))
const node = el({ type: 'cruel' })
document.body.appendChild(node)
// <p>hello cruel world</p>Initialize a new virtual element. Listen to the render event. Expects a
vdom tree to be returned. h accepts virtual-dom elements,
h.html accepts
HTML strings and h.svg
accepts
virtual-dom SVG elements.
Render the element's vdom tree to DOM nodes which can be mounted on the DOM.
Uses main-loop under the hood. Calling
the method again will re-render the DOM nodes with the new state. Alias:
el.render([state]).
Render the element's vdom tree to a string. For example useful to pre-render HTML on the server, or save to a static file.
Get the element's vdom tree. Useful for element composition.
Using virtual-dom requires quite some boilerplate. vel removes the need for
that boilerplate without adding extra features, making it easier to write
virtual-dom systems.
vel does one thing, and only one thing. Instead of including a state transport
mechanism I felt it made more sense to let users decide for themselves how they
want their state to flow between components.
react is an opinionated framework that uses non-standard syntax to create
systems. It forces users to write JS in OO style and is hard to switch from
once you buy into it. virtual-dom does away with those opinions, giving users
a blazingly fast rendering engine without the overhead of a framework.
Yeah, definitely! I'm actually a huge fan of
base-element. However I wanted
something a little more barebone favoring composition over inheritance. If
inheritance is your thing, definitely check out
base-element (and say hi to
@shama for me 😁).