Package Exports

@alexcambose/virtual-dom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@alexcambose/virtual-dom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

virtual-dom

A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.

DEMO

Installation

As npm package

npm i -S @alexcambose/virtual-dom

Standalone script file

<script src="dist/virtual-dom.js"></script>

Usage

let newContent = null;

// function thet 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;
};

API

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 with patch

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 by diff

const patches = diff(oldVDOM, newVDOM);
patch(document.getElementById('app'), patches);

License

MIT