bitinn / html-to-vdom

Converts an HTML string into a virtual DOM

html-to-vdom

About

This is yet another library to convert HTML into a vtree. It's used in conjunction with virtual-dom to convert template based views into virtual-dom views.

Note

As of v0.5.1, html-to-vdom no longer supports browsers without a full ES5 implementation.

As of v0.3.0, the VNode and VText classes need to be passed in during library initialization from the virtual-dom module you are using.
This is to reduce incompatibilties you might have due to depending on a different version of virtual-dom than the one this library would use.

Usage

var VNode = require('virtual-dom/vnode/vnode');
var VText = require('virtual-dom/vnode/vtext');

var convertHTML = require('html-to-vdom')({
    VNode: VNode,
    VText: VText
});

var html = '<div>Foobar</div>';

var vtree = convertHTML(html);
var createElement = require('virtual-dom/create-element');
var el = createElement(vTree);
document.body.appendChild(el);

Specifying a key

In order for virtual-dom to detect moves it needs a key. To specify your own custom method of finding a key pass in a method that takes the current tag and returns the key.

var convertHTML = require('html-to-vdom')({
    VNode: VNode,
    VText: VText
});

convertHTML({
    getVNodeKey: function (attributes) {
        return attributes.id;
    }
}, '<div id="foo"></div>');

If you have a single key method you can also pass the options first, allowing you to create a single bound method for all key lookups:

var convertHTMLWithKey = convertHTML.bind(null, {
    getVNodeKey: function (attributes) {
        return attributes.id;
    }   
});

convertHTMLWithKey('<div id="foo"></div>');

Credits

Thanks to:

• @mattferrin for noticing that promises could be removed from the API and contributing a PR to do so
• @tiagorg for contributing a PR for style attribute parsing
• @dariusriggins for adding VNode key support
• @jsyang for removing the lodash dependency for a leaner build and improved performance
• @bregenspan for making the dataset conversion standards-compliant
• @jesseditson for adding <script> and <style> tag support