search

TimBeyer / html-to-vdom

Converts an HTML string into a virtual DOM
172 stars 41 forks source link

html strings with multiple tags #4

Closed chiplay closed 9 years ago

chiplay commented 9 years ago

Hey @TimBeyer. Thanks for your work on this awesome library - excited to give it a shot while experimenting converting our Backbone/Marionette app to use vdom / FRP under the hood. My goal is to still use our current templates (jade->html) that we import into our views using a text module importer, and then parse them into vtrees using your library, before turning them into a vtree stream (see https://github.com/staltz/cycle)

My first roadblock has come here: return htmlparserToVdom.convertTag(tags[0]); as our templates all contain more then one tag. I'm hoping to avoid adding boiler plate to all our views to wrap template code in an extra div to ensure only one root tag is returned from the parser, and I'm curious if you given any thought to that problem?

Thanks again!

TimBeyer commented 9 years ago

Hey @chiplay, what you're planning to do with this library is exactly the reason I wrote it, and we're doing the same thing with it (backbone + handlebars -> virtual dom).

To answer your question: I thought about being able to return multiple tags, but then realized that since we're dealing with a tree, they always need a root node anyway. The interface is html -> VNode, so I wanted to avoid being ambiguous about the types. It shouldn't return a VNode or an array of VNode just depending on the HTML. In backbone, that required root node would be View.el. So for conversion, I always wrap the templates in HTML generated from tagName, className etc.

It's not super pretty, but the code is hidden in the View so you only really need to code this once.

TimBeyer commented 9 years ago

Hey @chiplay, probably it's too late already but you might be happy to hear that as of https://github.com/TimBeyer/html-to-vdom/releases/tag/v0.6.0 I implemented conversion of sibling nodes without enclosing tags.
This now returns an array of VNodes.