// import { h, create, diff, patch } from 'virtual-dom';

const { h, create, diff, patch } = virtualDom;

// Set Count method
const setCount = count => updateState({ count });

// Your component
const CounterComponent = ({ count }) => h('div', null, [
    h('h3', null, ['Counter']),
    h('div', null, [
        h('button', { onclick: () => setCount(count - 1) }, ['<']),
        h('span', { style: 'display: inline-block; padding: 0 .5em;' }, [`${state.count}`]),
        h('button', { onclick: () => setCount(count + 1) }, ['>']),
    ]),
]);

// Component state
let state = { count: 0 };

let componentTree = CounterComponent(state);
let rootNode = create(componentTree);
document.body.appendChild(rootNode);

// Update the state and rerender
const updateState = newState => {

    // Update the state
    state = Object.assign({}, state, newState);

    // Check for changes
    const newComponentTree = CounterComponent(state);
    const changes = diff(componentTree, newComponentTree);

    // Patch the changes to the rootNode
    rootNode = patch(rootNode, changes);
    componentTree = newComponentTree;
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://gitcdn.xyz/cdn/Matt-Esch/virtual-dom/master/dist/virtual-dom.js