snabbdom-virtualize
Advanced tools
Library for turning strings and DOM nodes into virtual DOM nodes compatible with snabbdom.
Library for turning strings and DOM nodes into virtual DOM nodes compatible with Snabbdom.
virtualize(nodes, options)nodes: Element|String - Either a DOM Element or a string of HTML to turn into a set of virtual DOM nodes.options: Object - A hash of options to pass into the virtualize call. Available options are currently:
context: Document - An alternative DOM document to use (default is window.document).hooks: Object - An object specifying hooks to call during the virtualization process. See the hooks section below.Add it to your application with
npm install --save snabbdom-virtualize
Require/import it.
// ES6
import virtualize from 'snabbdom-virtualize';
// Require.
let virtualize = require('snabbdom-virtualize').default;
Pass it a set of DOM nodes or a string representing DOM nodes with one root node.
// Actual DOM nodes
let topNode = document.createElement('div');
let textNode = document.createTextNode('Click ');
let linkNode = document.createElement('a');
linkNode.setAttribute('href', 'http://example.com');
linkNode.textContent = 'here';
topNode.appendChild(textNode);
topNode.appendChild(linkNode);
let vnode = virtualize(topNode);
// String
let vnode = virtualize('<div>Click <a href="http://example.com">here</a></div>');
You can specify a different DOM document (other than the default window.document in a browser) by passing a context option into your calls to virtualize. This will allow for usage in a server-side setting, where there is no browser. One option is to use jsdom to create a DOM document that can be used:
const virtualize = require('snabbdom-virtualize').default;
const jsdom = require('jsdom').jsdom;
virtualizeString('<div>Click <a href="http://example.com">here</a></div>', {
context: jsdom('<html></html>')
});
If you'd prefer to import just the function for virtualizing DOM nodes or just
the function for virtualizing HTML strings, you're in luck. Just import
snabbdom-virtualize/nodes or snabbdom-virtualize/strings and use in the
same way:
// DOM nodes.
import virtualize from 'snabbdom-virtualize/nodes';
let topNode = document.createElement('div');
let textNode = document.createTextNode('Click ');
let linkNode = document.createElement('a');
linkNode.setAttribute('href', 'http://example.com');
linkNode.textContent = 'here';
topNode.appendChild(textNode);
topNode.appendChild(linkNode);
let vnode = virtualize(topNode);
// HTML strings.
import virtualize from 'snabbdom-virtualize/strings';
let vnode = virtualize('<div>Click <a href="http://example.com">here</a></div>');
You can register a create hook with any of the virtualize functions. This will be called once for each vnode that was created. It's called after the virtualization process is completed. The function receives one argument - the VNode that was created.
// The function passed as the 'create' hook is called 3 times: once for the
// <div>, once for the <span> and once for the text node inside the <span>.
virtualize("<div><span>Hi!</span></div>", {
hooks: {
create: function(vnode) { ... }
}
});
Hooks allow you to perform some operations on your VNodes after virtualization but before patching with snabbdom.
Written in ES6, compiled using Babel. To get started:
npm install
npm run build
This will output compiled files in the lib directory.
Tests can be run with npm test.
FAQs
Library for turning strings and DOM nodes into virtual DOM nodes compatible with snabbdom.
The npm package snabbdom-virtualize receives a total of 74 weekly downloads. As such, snabbdom-virtualize popularity was classified as not popular.
We found that snabbdom-virtualize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.