virtual-dom-lite

0.1.1 • Public • Published

Coveralls – test coverageTravis – build statusDavid – status of dependenciesStability: unstableCode style: airbnb

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;
  1. 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!

License

MIT © Tomek Wiszniewski

Dependents (0)

Package Sidebar

Install

npm i virtual-dom-lite

Weekly Downloads

0

Version

0.1.1

License

MIT

Last publish

Collaborators

  • tomekwi