SVG support (Namespace Element support)

[andrewgryan]

SVG has a slightly different DOM API for element creation than ordinary DOM elements. Referred to as "namespace" elements in the spec (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS)

I noticed while trying to add icons to an app using VanJS that the element in the devtools <svg width="100" ...><circle cx="50" ...></circle></svg> while visually identical to the namespace element didn't render on my page.

// SVG namespace element API
const el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
el.setAttribute("width", "100")
// etc.

Would it be possible to add support for SVG in VanJS without sacrificing the amazing developer experience?

Either switch to createElementNS for known namespace tags, e.g. path, p, circle etc. or allow users to opt-in somehow?

[andrewgryan]

Perhaps ship with a ns_tags Proxy similar to this line but with the creation API switch:

van/src/van.js

Line 49 in 3f98060

let tags = new Proxy((name, ...args) => {

[Tao-VanJS]

Yes. SVG support can be considered. I'm not familiar with native API for creating SVG elements. Could you please share a piece of code with native API and I will think through how to extend VanJS to support it.

[andrewgryan]

I've been playing around with the code and spotted a great opportunity for a breaking change. Naturally, this isn't a serious proposal, but I've noticed the number of exports is minimal and I don't want to add extra exports.

// Warning: this breaks everyones code
let { div } = van.tags.html
let { svg, circle } = van.tags.svg

I can submit a speculative (WIP) PR if you'd like to peruse the diffs of the library code?

And the custom NS or indeed any type of element route is exposed to the hard-code coder

// Needs some polish as it's weird to specify the tagName and destructure
let { foo } = van.tags.ns(tagName => document.createElementNS("uri", tagName))

That's all my thoughts for now. I can also do the less breaking-change ideas above too if needs be.

[andrewgryan]

Further refinement of the above idea, available here: #29

[Tao-VanJS]

I prefer const {circle, svg} = van.tagsNS(...) :-) Breaking changes are not enjoyable to users, thus better to avoid them even before 1.0.

[andrewgryan]

Could certainly be a 1.x candidate as it is a more robust solution, and maps to the idea that tags fit into namespaces.

An alternative approach is to keep van.tags with the same behaviour, no breaking change, an carve new ground under a different identifier. van.elements.svg, for instance.

[andrewgryan]

I've updated #29 to reflect my current thinking. I'd like to take the test suite and type system for a spin to see if I've mucked anything up, but overall I'm happy with the new syntax and could contribute to the docs too if needs be

[andrewgryan]

I got curious and looked up how SolidJS implemented their SVG support.

SolidJS internals

They use a constant for the namespace string SVG_NAMESPACE = "http://www.w3.org/2000/svg"; and a flag, isSVG = false as an optional argument to their custom createElement function. Both of these are private implementation details hidden from the user and indeed the curious open source contributor.

https://github.com/solidjs/solid/blob/44a0fdeb585c4f5a3b9bccbf4b7d6c60c7db3ecd/packages/solid/web/src/index.ts#L41

Exhaustive list of valid SVG elements

To make the difference between HTML and SVG elements invisible to the user they maintain an exhaustive list of SVG/HTML element names, which they import from a third-party package maintained by the SolidJS creator, babel-plugin-jsx-dom-expressions which is a whopping 132kb or 100 times VanJS.

https://github.com/ryansolid/dom-expressions/blob/3bfbff5cbc154aa27f896f73cedc4015ae8877fb/packages/dom-expressions/src/constants.js#L111

I'm not suggesting we follow in SolidJS's footsteps, too much memory overhead. I'd like to point out my latest proposal contains no breaking changes since vans.tags is untouched. I'm open to suggestions for better ways to achieve SVG support without burdening the app developer with camelCase or function calls or obscure strings.

[andrewgryan]

How about we remove a layer of indirection in the spirit of the current Van API?

const { div } = van.tags
const { svg, circle } = van.svgs

Just a thought, easier to remember I think, and is less code than my previous idea.

[andrewgryan]

@Tao-VanJS what do I need to do next to get SVG support over the line?

[Tao-VanJS]

Thanks for your contribution! I will get it merged to VanJS's next major release.

[Tao-VanJS]

FYI, SVG (and MathML or other HTML elements with namespaceURI) is supported in 0.12.0. See https://vanjs.org/tutorial#svg-and-mathml-support.

[Ashvith10]

Is there a way to read SVG or raw HTML tags without having to convert it to a function?

[Tao-VanJS]

Unfortunately, I don't think the converter library supports elements with namespace URIs.

[Ashvith10]

@Tao-VanJS Maybe I've not read the documentation thoroughly, but is there a way of allowing raw HTML/XML strings, which can then be converted to innerHTML elements?

[Ashvith10]

I've also tried this:

import icon from '../assets/brand.svg?raw'

...

a(
    { href: '/' },
    () => new DOMParser().parseFromString(icon, "image/svg+xml")
)

but this does not work:

Uncaught DOMException: Element.append: May not add a Document as a child
    add van.js:90
    tag van.js:115
    Navbar navbar.js:10
    App app.js:6
    <anonymous> main.js:6
van.js:90:4

[Ashvith10]

I think I have figured this out - all I had to do was read the documentElement attribute from the above code snippet, something like:

import van from '#vanjs'
import icon from '../assets/brand.svg?raw'

const { a, button, div, img, li, nav, ul } = van.tags

export const Navbar = () => {
  const svgElement = new DOMParser().parseFromString(icon, "image/svg+xml").documentElement
 
  return nav(
    a(
      { href: '/' },
      svgElement
    )
  )
}

Perhaps, there is a better, alternative way to do this?

[Ashvith10]

@Tao-VanJS it looks like what I've done is probably not the right way - because the linter keeps complaining about DOMParser missing.

[thednp]

@Ashvith10 You might want to give this a try?

For now

npm install vite-plugin-vanjs-svg