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 😁).

See Also

• virtual-dom
• virtual-hyperscript-svg
• main-loop
• virtual-html
• vdom-to-html

License

MIT