A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.
As npm package
npm i -S @alexcambose/virtual-domStandalone script file
<script src="dist/virtual-dom.js"></script>let newContent = null;
// the function that will create virtual-dom object
const createDom = title => (
h('div', null,
h('h1', { className: 'header' }, title),
h('p', null , 'Lorem ipsum'),
h('footer', { className: 'footer' }, 'The footer'),
)
);
// create virtual-dom object
let content = createDom('Some title');
// render the virtual dom object into the real dom
render(content, document.getElementById('app'));
const rerender = () => {
// create the virtual-dom object again but with dfferent properties
newContent = createDom('Some other title');
// patches object that will be used to modify changed elements
const patches = diff(content, newContent);
//appy patches
patch(appContainer, patches);
// update content
content = newContent;
};h(tagName, props, ...children)- Function to define virtual-dom using hyperscript style
h('div', { className: 'section' },
h('h1', { style: {color: 'red'} }, 'Section title'),
));will output
{
type: "div",
props: {
className: "section",
children: [
{
type: "h1",
props: {
style: {
color: "red"
},
children: [
"Section title"
]
}
}
]
}
}render(VDOM, domElement)- renders the virtual dom object into a specified element in dom
// content = h(..., h(...))
render(content, document.getElementById('app'));diff(oldVDOM, newVDOM)- create a patches object that contains all the differences between two virtual-dom objects, should be used withpatch
const oldVDOM = h('h1', null, 'Hello title');
const newVDOM = h('h1', { className: 'header' }, 'Hello new class');
const patches = diff(oldVDOM, newVDOM);patches will look something like this
{
0:{
childrenPatches: {
0: {
selfPatch: {
type: PATCH_TEXT_NODE,
payload: "Hello new class"
}
}
}
}
}patch(domElement, patches)- updates the dom based on the patches produced bydiff
const patches = diff(oldVDOM, newVDOM);
patch(document.getElementById('app'), patches);MIT