virtualdom2

A virtual DOM library with focus on simplicitymodularity, powerful features and performance.

Usage no npm install needed!

<script type="module">
  import virtualdom2 from 'https://cdn.skypack.dev/virtualdom2';
</script>

README

Virtual dom

Install

npm install virtualdom2 --save

Or use cdn

<script src="xxx/xxx/virtualdom2/dist/index.umd.js"></script>

Useage

<div class="app"></div>

const { createVNode: h, patch } = new Virtualdom();

let vnode = h('div', { attrs: { class: 'app' } }, [
    h('h1', {}, [
        h('text', { attrs: { textContent: 'Hi, Virtual Dom' } })
    ])
]);

let oldVNode = patch(document.querySelector('.app'), vnode); // first view

setTimeout(() => {
    vnode = h('div', { attrs: { class: 'app', style: 'text-align:center' } }, [
        h('h1', { attrs: { style: 'color:red' } }, [
            h('text', { attrs: { textContent: 'Hi, Virtual Dom' } })
        ]),
        h('p', {}, [
            h('text', { attrs: { textContent: 'A virtual DOM library with focus on simplicitymodularity, powerful features and performance.' } })
        ])
    ]);
    oldVNode = patch(oldVNode, vnode); // last view
}, 2000)