support svg

[dominictarr]

Would be cool if this supported svg. you can't create svg with html elements... and you can't detect an element is an svg element purely on the name of that tag, be cause <a> means different thing in svg land, also, svg seems to use attributes, not properties...

So, probably write a new module hypersvg...

Refactor hyperscript, so that most of the code can be the same...

[Raynos]

svg elements should live in a <svg> node.

[dominictarr]

I considered that, but I may want to have a function that say, returns a svg circle, so I can't use magic to make it know that function is being called as an argument to a h('svg') function.

Another possibility would be for h('svg', h('circle')) to realize it's an svg, and convert the circle element into an SVG element, but this too is magic.

simplest:

var h = require('hyperscript')
var s = require('hypersvg')
h('svg', s('circle'))

[Raynos]

We landed svg support in virtual-dom today ( https://github.com/Matt-Esch/virtual-dom/commit/be1d7923a805d2cf70bbeb2e041d980ddb8aa899 )

Maybe take inspiration from that implementation.

[staltz]

It would be really helpful if hyperscript and virtual-hyperscript would have the same API. Would be very useful to be able to swap between them whenever. I just ran into that issue while doing svg elements.

[dominictarr]

+1

[tomek-he-him]

It would be really helpful if hyperscript and virtual-hyperscript would have the same API. Would be very useful to be able to swap between them whenever. I just ran into that issue while doing svg elements.

Seems like virtual-hyperscript takes a namespace option. Can that be a good first step perhaps?

[tomek-he-him]

https://github.com/Matt-Esch/virtual-dom/blob/88534bbd34c5befbd1689fc71e2373c9145a9807/virtual-hyperscript/README.md#namespace

[tomek-he-him]

@staltz I think I’ve never used virtual-dom for SVG yet. Can you show us a minimal example what it looks like? Does h('svg', h('circle')) work there?

[staltz]

https://github.com/phadej/graafi/blob/master/graafi.js#L351-L365

[tomek-he-him]

Is Cycle.svg a separate module like @dominictarr suggested?

[staltz]

It's just a shortcut to virtual-dom's svg helper. Cycle.js is a framework on top of virtual-dom.

[tomek-he-him]

Thanks! So it looks like @dominictarr’s idea var s = require('hypersvg') is the way to go.

[tomek-he-him]

(BTW @staltz I have stumbled across Cycle.js before, but never used it for anything. Looks very interesting! I like the way you solved a couple of problems. But having been bitten by Angular and later Mithril I now prefer to compose libraries instead of sticking to a framework.)