marcelklehr / vdom-virtualize

Virtualize a DOM node

vdom-virtualize

New in v2.0: removed support for virtualize.fromHTML -- doing this right and supporting all platforms is a job for another library.

New in v1.0: vdom-virtualize now supports comments and does now use peerDependencies to depend on virtual-dom.

API

virtualize(node:DOMNode)

• node {DOMNode}

• returns {VNode}: A virtual-dom tree

virtualize.fromHTML(html:String)

• html {String}

• returns {VNode}: A virtual-dom tree

Turn a DOMNode into a virtual-dom node.

vdom-virtualize's Issues

Server-side HTML parsing

As I mentioned at TimBeyer/html-to-vdom#1 I'm using vdom-virtualize in my rendering, and it's working splendidly. I would like to use the same render code on the server, however.

I believe we could get most of the way there if we check for window === undefined and switch to parse5 for DOM tree creation in the fromHTML method. Unfortunately, there are several discrepancies between the browser and parse5 trees for which we would have to do further processing or pass a custom treeAdapter into parse5:

1. In the parse5 tree there's no nodeType property, but nodeName is either the tag name or "#text".
2. Text nodes have their text in "value", not "nodeValue".
3. Nodes in the default parse5 tree have childNodes but not children.
4. Rather than create properties on the node, parse5 leaves attributes as they are and sticks them in an "attrs" array.

I'm thinking a custom treeAdapter would make sense, though I'm not excited about mapping attributes to HTMLElement properties.

Support use within require.js client side app

I'd really like to use this within a Backbone/require.js application running in a browser. I can't just browserify the module from NPM and run it within my require.js container with any sort of shim I know of. Plz halp?

Skip the property when its value is a dom element

e.g.

<form>
  <input name="id" value="id">
  <input name="accept" value="accept">
</form>

form.id and form.accept will be the entire input element.

fromHTML adds nodes to the document, but doesn't delete them

See this RequireBin.

250+ nodes were created in ~10 seconds:

I believe this is because DOM nodes are continually created but not reused or removed.

Please let me know if you see something wrong with my test case.

Remove special case for contentEditable

introduced in #22

see Matt-Esch/virtual-dom#176 (comment) for why it's not necessary...

use without browserfy

Hey @marcelklehr ,

Thanks for this great work! Is it possible for me to use this without browserfy, with virtual-dom?

I saw that there was a dist.js file in mercury : https://github.com/Raynos/mercury/blob/master/dist/mercury.js

but I am not sure if that contains this lib.

Thanks!
Ge

Issue with Browserify bundle

Hi!

I found a JSPerf test from 2015 that is using your library to test the performance of Virtual-Dom however it appears that there is a problem with the browserified bundle of vdom-virtualize.

https://wzrd.in/bundle/vdom-virtualize@latest
https://wzrd.in/standalone/vdom-virtualize@latest

---FLAGRANT SYSTEM ERROR---

(logs uuid: 44b82b80-c401-11e5-ab1a-5789981fbb2a )

Error: "npm exited with code 1"

code: 1
stdout: 
stderr: npm ERR! Linux 3.8.0-19-generic
npm ERR! argv "node" "/home/admin/browserify-cdn/node_modules/.bin/npm" "install" "--production" "--registry" "http://registry.npmjs.org/"
npm ERR! node v0.10.26
npm ERR! npm  v2.14.15

npm ERR! Cannot read property 'virtual-dom' of undefined
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /tmp/vdom-virtualize116026-18761-sgvwxu/node_modules/vdom-virtualize/npm-debug.log

dirPath: /tmp/vdom-virtualize116026-18761-sgvwxu

This is probably an issue with the package, and not browserify-cdn itself.
If you feel differently, feel free to file a bug report at:

    https://github.com/jfhbrook/browserify-cdn/issues

Include the ENTIRETY of the contents of this message, and the maintainer(s)
can try to help you out.

Have a nice day!

Dataset attributes should be added as normal attributes

Matt-Esch/vdom#14 (comment)

As said in the above issue, it might be better to change this section to use attributes even though they are actually dataset values. Any thoughts on this?

Complete the list of properties

Nice list of properties: https://github.com/Raynos/react/blob/dom-property-config/src/browser/ui/dom/DefaultDOMPropertyConfig.js

Support for virtual-dom keys

I think it would be beneficial to have some way to have virtualize handle keys from virtual-dom (https://github.com/Matt-Esch/virtual-dom/blob/master/virtual-hyperscript/README.md#key).

Maybe we can use a non-standard HTML attribute (such as key="someKey") and create the node with the attribute.

I'm happy to make a PR for whatever people are happy with, I just think something like this would be helpful!

IE8 issues

Following stuff fails in IE8:

• IMG tag
• style attribute
• data-attributes are not saved: there is no dataset

fromHTML strips root tags

The use of a

for parsing HTML with the browser causes the root tags (, , ) to be removed from the returned document.

Add a Licence file.

To be able to use this module it needs a licence.

Your package.json says MIT but there should be a licence file in git.

See dom-delegator for an example of file based boilerplate.

Also consider npm i raynos-ngen -g && ngen vdom-virtualize to scaffold file boilerplate.

Support for attributes?

Hi @marcelklehr ,

Does vdom-virtualize support attributes? For example, I have alt attribute in my dom that contains crucial information that I can't leave inside the element.

I saw your comment in #1. Is this a problem with virtual-dom or it is something that we can change by patching up this virtualizer?

Thanks!
Ge

Virtualize and Virtual-dom: class lost patching a virtualized element.

Hi,
I'm trying to write a simple proof of concept.
I would like to virtualize an existing DOM node, generate a new VTree with h, then diff the two and patch the DOM node.

What I do is:

var vtree = h('div', null, [
                h('button', {onclick: onClick}, 'Modify')
              , h('div.vdom-content', null, [])
              ])
              , rootNode = createElement(vtree)

              node.appendChild(rootNode)

and then, when the button is clicked, I select the .vdom-content element and pass it to the view function:

function render() {
        return h('div.vdom-content', null, [])
      }

      function view(node) {
        var oldVtree = virtualize(node)
            , newVtree = render()
            , patches = diff(oldVtree, newVtree)

        patch(node, patches)
      }

This results in the vdom-content class in my patch being removed, which is quite surprising. The only difference between the oldVtree and the newVtree is that oldVtree, generated by virtualize, has the properties.attributes object, and newVtree does not:

attributes: { class: "vdom-content" }

They both have properties.className, set as vdom-content.

The calculated patches object looks like this:

Is this expected? Obviously I would like to be able to correctly diff between virtualizd nodes and virtual nodes.

I'll post this same issue on the virtual-dom board, because I don't know where the problem is.

Improve performance of getProperties

Didn't you forget the type ?

I can't manage to use this with virtual-dom. If I pass a virtual node made through your library to virtual-dom createElement method, the return value is always null because the type of the object isn't VirtualNode.

Here is a quick sample trying to change a div into vdom:

let Rx = require("rxjs");
let virtualize = require('vdom-virtualize');
let h = require("virtual-dom/h")
let diff = require("virtual-dom/diff")
let createElement = require("virtual-dom/create-element")
let patch = require("virtual-dom/patch")



let d = document.getElementById('d');
let t = virtualize(d);
console.log(t); //VirtualNode {tagName: "DIV", properties: Object, children: Array[5], key: undefined, namespace: null…}
debugger
let rootNode = createElement(d)
console.log(rootNode); //root is null