Better strategy for dealing with svg

[Swatinem]

I had a hunch and the failing test I just commited (83e9ed9) proves it:
When using components to render children into a svg node, the children get the wrong namespace.

Looking at other frameworks, react and incremental-dom both rely on the parent element to determine which namespace to use for elements:
https://github.com/facebook/react/blob/master/src/renderers/dom/stack/client/ReactDOMComponent.js#L511-L533
https://github.com/google/incremental-dom/blob/master/src/nodes.js#L30-L40

Problem is that since we separated create from mount, we can’t really look at any parent at creation time. I think I also saw that some frameworks keep whitelists of svg tags, so that might be an option.

[Rich-Harris]

Ah, yeah. One option:

<circle cx='{{x}}' cy='{{cy}}' r='{{r}}'/>

<script>
  export default {
    namespace: 'http://www.w3.org/2000/svg' // maybe accept 'svg' as shorthand
  };
</script>

That way the compiler knows which namespace to use. We could use the element whitelist to print a warning if the namespace isn't present but should be.

[Ryuno-Ki]

@Rich-Harris What would you do, if one would want to generate Atom feeds with Svelte?
Atom has a namespace (https://www.w3.org/2005/Atom). I've saw static site generators like Hugo providing templates for feeds: https://gohugo.io/templates/rss/#the-embedded-rss-xml

So it is not that crazy to at least consider that.

[Rich-Harris]

@Ryuno-Ki that should work just fine, since it's an SSR concern – you'd never need to render an Atom feed in a browser (I'm not sure what that would even mean!) so there are no namespace quirks to deal with. This is purely about what the first argument to document.createElementNS(...) should be.

Now that you mention it, it does occur to me that we could fix sveltejs/v2.svelte.dev#4 by rendering RSS/Atom with svelte/ssr, which is quite cool. Would just need to add <?xml ...> declaration support.