Awesome
vel
Efficiently create and render virtual-dom elements.
Installation
$ npm install vel
Usage
const 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>
API
el = vel(cb(h, state))
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.
el([state])
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]).
el.toString([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.
vtree = el.vtree([data])
Get the element's vdom tree. Useful for element composition.
FAQ
why did you write this?
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.
why is there no state transport mechanism included?
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.
what's the difference between virtual-dom and react?
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.
this module sound lot like base-element!
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 :grin:).