Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
A virtual DOM library with focus on simplicity, modularity, powerful features and performance.
A virtual DOM library with focus on simplicity, modularity, powerful features and performance.
Note: Snabbdom is mostly done. I'm currently only making minor tweaks. The documentation however is still quite lagging.
Virtual DOM is awesome. It allow us to express our applications view as a function of its state. But existing solutions were way way too bloated, too slow, lacked features, had an API biased towards OOP and/or lacked features I needed.
Snabbdom consists of an extremely simple, performant and extensible core that is only ≈ 200 SLOC. It offers a modular architecture with rich functionality for extensions through custom modules. To keep the core simple all non-essential functionality is delegated to modules.
You can mold Snabbdom into whatever you desire! Pick, choose and customize the functionality you want. Alternatively you can just use the default extensions and get a virtual DOM library with high performance, small size and all the features listed below.
var snabbdom = require('snabbdom');
var patch = snabbdom.init([ // Init patch function with choosen modules
require('snabbdom/modules/class'), // makes it easy to toggle classes
require('snabbdom/modules/props'), // for setting properties on DOM elements
require('snabbdom/modules/style'), // handles styling on elements with support for animations
require('snabbdom/modules/eventlisteners'), // attaches event listeners
]);
var h = require('snabbdom/h'); // helper function for creating VNodes
var vnode = h('div#container.two.classes', {on: {click: someFn}}, [
h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),
' and this is just normal text',
h('a', {props: {href: '/foo'}}, 'I\'ll take you places!')
]);
var container = document.getElementById('container');
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);
The core of Snabbdom provides only the most essential functionality. It is designed to be as simple as possible while still being fast and extendable.
snabbdom.init
The core exposes only one single function snabbdom.init
. init
takes a list of
modules and returns a patch
function that uses the specified set of modules.
var patch = snabbdom.init([
require('snabbdom/modules/class'),
require('snabbdom/modules/style'),
]);
patch
The patch
function returned by init
takes two arguments. The first is a DOM
element or a vnode representing the current view. The second is a vnode
representing the new updated view.
If a DOM element with a parent is passed newVnode
will be turned into a DOM
node and the passed element will be replaced by the created DOM node. If an old
vnode is passed Snabbdom will effeciently modify to match the description in
the new vnode.
Any old vnode passed must be the resulting vnode from a previous call to
patch
. This is necessary since Snabbdom stores information in the vnode.
This makes it possible to implement a simpler and more performant architecture.
This also avoids the creation of a new old vnode tree.
patch(oldVnode, newVnode);
snabbdom/h
It is recommended that you use snabbdom/h
to create VNodes. h
accepts a
tag/selector as a string, an optional data object and an optional string or
array of children.
var h = require('snabbdom/h');
var vnode = h('div', {style: {color: '#000'}}, [
h('h1', 'Headline'),
h('p', 'A paragraph'),
]);
Hooks are a way to hook into the lifecycle of DOM nodes. Snabbdom offers a rich selection of hooks.
Name | Triggered when | Arguments to callback |
---|---|---|
pre | the patch process begins. | none |
create | a DOM element has been created based on a VNode. | emptyVNode, vnode |
insert | an element has been inserted into the DOM. | vnode |
prepatch | an element is about to be patched. | oldVnode, vnode |
update | an element is being updated. | oldVnode, vnode |
postpatch | an element has been patched. | oldVnode, vnode |
remove | an element is directly being removed from the DOM. | vnode, removeCallback |
destroy | an element is being removed from the DOM or it's parent is. | vnode |
post | the patch process is done. | none |
To use hooks, pass them as an object to hook
field of the data object
argument.
h('div.row', {
key: movie.rank,
hook: {
insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight; }
}
});
insert
hookThis hook is invoked once the DOM element to a vnode has been inserted into the document and the rest of the patch cycle is done. This means that you can do DOM measurements (like using getBoundingClientRect in this hook safely knowing that no elements will be changed afterwards which could affect the position of the inserted elements.
remove
hookAllows you to hook into the removal of an element. The hook is called once a
vnode is to be removed from the DOM. The handling function recieves both the
vnode and a callback. You can control and delay the removal with the callback.
It should be invoked once the hook is done doing its business and the element
will only be removed once all remove
hooks have invoked their callback.
The hook is only triggered when and element is to be removed from its parent – not if it is the child of an element that is removed. For that see the destroy hook.
destroy
hookThis hook is invoked whenever an element removed from the DOM or the child to an element that is being removed.
To see the difference between this hook and the remove
hook consider an
example.
var vnode1 = h('div', [h('div', [h('span', 'Hello')])]);
var vnode2 = h('div', []);
patch(container, vnode1);
patch(vnode1, vnode2);
Here destroy
is triggered for both the inner div
element and the span
element it contains. remove
on the other hand is only triggered on the div
element because it is the only element being detached from its parent.
You can for instance use remove
to trigger an animation when an element is
being removed and use the destroy
hook to additionally animate the
disappearance of the removed elements children.
This describes the core modules. All modules are optional.
The class module provides an easy way to dynamically toggle classes on
elements. It expects an object in the class
data property. The object should
map class names to booleans that indicates whether or not the class should stay
or go on the VNode.
h('a', {class: {active: true, selected: false}}, 'Toggle');
Allows you to set properties on DOM elements.
h('a', {props: {href: '/foo'}, 'Go to Foo');
Same as props but set attributes instead of properties on DOM elements
h('a', { attrs: {href: '/foo'} }, 'Go to Foo');
Attributes are added and updated using setAttribute
. In case of an attribute
that has been previously added/set is no longer present in the attrs
object,
it is removed from the DOM element's attribute list using removeAttribute
.
In the case of boolean attributes (.e.g. disabled
, hidden
, selected
...).
The meaning doesn't depend on the attribute value (true
or false
) but depends
instead on the presence/absence of the attribute itself in the DOM element. Those
attributes are handled differently by the module : if a boolean attribute is set
to a falsy value (0
, -0
, null
, false
,NaN
, undefined
, or the empty
string (""
)) then the attribute will be removed from the attribute list of the
DOM element.
The style module is for making your HTML look slick and animate smoothly. At it's core it allows you to set CSS properties on elements.
h('span', {
style: {border: '1px solid #bada55', color: '#c0ffee', fontWeight: 'bold'}
}, 'Say my name, and every colour illuminates');
Note that the style module does not remove style attributes if they are removed as properties from the style object. To remove a style you should instead set it to the empty string.
h('div', {
style: {position: shouldFollow ? 'fixed' : ''}
}, 'I, I follow, I follow you');
You can specify properties as being delayed. Whenever these properties change the change is not applied until after the next frame.
h('span', {
style: {opacity: '0', transition: 'opacity 1s', delayed: {opacity: '1'}}
}, 'Imma fade right in!');
This makes it easy to declaratively animate the entry of elements.
remove
Styles set in the remove
property will take effect once the element is about
to be moved from the DOM. The applied styles should be animated with CSS
transitions. Only once all the styles is done animating will the element be
removed from the DOM.
h('span', {
style: {opacity: '1', transition: 'opacity 1s',
remove: {opacity: '0'}}
}, 'It\'s better to fade out than to burn away');
This makes it easy to declaratively animate the removal of elements.
destroy
h('span', {
style: {opacity: '1', transition: 'opacity 1s',
destroy: {opacity: '0'}}
}, 'It\'s better to fade out than to burn away');
The event listeners module gives powerful capabilities for attaching event listeners.
You can attach a function to an event on a VNode by supplying an object at on
with a property corresponding to the name of the event you want to listen to.
The function will be called when the event happens and will be passed the event
object that belongs to it.
function clickHandler(ev) { console.log('got clicked'); }
h('div', {on: {click: clickHandler}});
Very often however you're not really interested in the event object itself. Often you have some data associated with the element that triggers an event and you want that data passed along instead.
Consider a counter application with three buttons, one to increment the counter by 1, one to increment the counter by 2 and one to increment the counter by 3. You're don't really care exactly which button was pressed. Instead you're interested in what number was associated with the clicked button. The event listeners module allows one to express that by supplying an array at the named event property. The first element in the array should be a function that will be invoked with the value in the second element once the event occurs.
function clickHandler(number) { console.log('button ' + number + ' was clicked!'); }
h('div', [
h('a', {on: {click: [clickHandler, 1]}}),
h('a', {on: {click: [clickHandler, 2]}}),
h('a', {on: {click: [clickHandler, 3]}}),
]);
Snabbdom allows swapping event handlers between renders. This happens without actually touching the event handlers attached to the DOM.
FAQs
A virtual DOM library with focus on simplicity, modularity, powerful features and performance.
The npm package snabbdom receives a total of 19,969 weekly downloads. As such, snabbdom popularity was classified as popular.
We found that snabbdom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.