Full SVG support

[fregante]

The list of SVG tags is incomplete, by looking at this one: https://github.com/wooorm/svg-tag-names/blob/master/index.json

In there you can also see regular HTML tag names so it's not as easy as requiring that module.

This uncovers an issue: all the tags in <svg><iframe></iframe></svg> should be created with the SVG namespace, that's what the browser does:

The only way to do that is to also look for <svg> and <foreignElement> into the parents.

[vadimdemedes]

This uncovers an issue: all the tags in <iframe></iframe> should be created with the SVG namespace

Thanks for bringing this up!

The problem is h is invoked for the most nested elements first, going from the bottom of the tree upwards. That's why we can't do what Preact does, encounter <svg> element and enable isSVG, which would use SVG namespace for all children.

Not sure right now how to work around this.

[vadimdemedes]

Until there's a solution, dom-chef could use svg-tag-names and just exclude tags that are also html tags, like iframe and a. It wouldn't count as full SVG support, but still better than nothing.

[vadimdemedes]

Added more tags using svg-tag-names module via e2f07ae.

[pygy]

A solution would to have h create a vDOM tree as an IR, with a wrapper function called to materialize the DOM.

const el = domify(<svg><iframe></iframe></svg>);

where domify() propagates the NS from the root to the leafs.

[fregante]

I don't think this can be further resolved and probably it's fine. <iframe> works even without the SVG namespace.

Since babel-plugin-transform-react-jsx creates nested calls, h('iframe') won't know it's a child of h('svg') until the latter is created, and we can't safely correct the NS of the iframe once that happens.

The only way to support this would be by changing the babel transform to something that can be parsed at once, like JSX-IR, but really at that point it's best to just go with #7 (comment)

React either ignores this issue or is able to correct the NS before actually generating the dom because it has total control over it.