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

Forked by Gawker to add the ability to specify a function for setting any property hooks on the element.

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>');

Specifying property hooks

virtual-dom supports property hooks, which let you define custom getter/setter behavior for a property. You can have convertHTML set them by specifying a getVHooks function like:

var converted = convertHTML({
    getVHooks: function (attributes) {
        var hooks = {}, CustomSetterHook;
        if (attributes.dataset.customSetter) {
           CustomSetterHook = function () {};
           CustomSetterHook.prototype.hook = function (node, property) {
              window.setTimeout(function () {
                node.setAttribute('customAttributeName', property);
              }, 0);
           }
           CustomSetterHook.prototype.unhook = function (node, property) {};
        }
        hooks.hookedProperty = new CustomSetterHook();
        return hooks;
    }
}, '<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