0.1.1 • Published 9 years ago
virtual-dom-lite v0.1.1
virtual-dom-lite
A partial implementation of virtual-dom
3 separate modules á 200 bytes*.
Perfect for libraries.
* Transpiled to ES5 and minzipped, the last time I checked.
⚠ Heads up! This is totally a work in progress. Thoughts and ideas are very welcome.
Installation
$ npm install virtual-dom-lite
Usage
1) Import the module:
import {patchElement, vNode, vPatch} from 'virtual-dom-lite/module';
– or in ES5:
var virtualDOMLite = require('virtual-dom-lite');
var patchElement = virtualDOMLite.patchElement;
var vNode = virtualDOMLite.vNode;
var vPatch = virtualDOMLite.vPatch;
2) Profit!
const div = document.createElement('div');
const vDiv = vNode(div); // Compatible with virtual-dom as well!
const patch = vPatch({class: 'a b c'}); // Compatible with virtual-dom as well!
patchElement(div, patch);
div.outerHTML;
//» '<div class="a b c"></div>'
Caveats
vNode
and patchElement
only support the attributes
property. vPatch
only sets attributes. If you construct your diffs using virtual-dom, remember about it:
const {diff, h} = require('virtual-dom');
patchElement(div, diff(
h('div', {class: 'a'}),
h('div', {class: 'b'})
)); // Won’t work.
patchElement(div, diff(
h('div', {attributes: {class: 'a'}}),
h('div', {attributes: {class: 'b'}})
)); // Works!