SVG handling

packages/csx/src/vdom/render.js

@@ -62,6 +62,10 @@ export function render(vnode, opts = {}) {
         let {item, meta, previous} = state.queue.splice(0,1)[0];
         let renderer = meta.renderer;
         if(!renderer) throw new Error("No renderer for vnode", item.vnode);
+    
+        // SVG handling..
+        if(!item.inSvg && item.vnode?.type === 'svg') item.inSvg = true;
+        else if(item.inSvg && item.vnode?.type === 'foreignObject') item.inSvg = false;
         
         // Create the element if no matching existing element was set
         let newlyCreated = false;

packages/csx/src/vdom/renderers/nodetree.js

@@ -13,6 +13,10 @@ const VNODEPROP_IGNORE = {
     ['ref']: true
 };
 
+let namespace = {
+    svg: "http://www.w3.org/2000/svg"
+}
+
 /**
  * Takes care of rendering a typical VNode (like div, span or any custom-element)
  *
@@ -28,7 +32,11 @@ export const NodeTreeRenderer = {
         let vnode = item.vnode;
         if(typeof(vnode.type) === 'string'){
             // String-type              -> DOM
-            return item.document.createElement(vnode.type);
+            if(item.inSvg){
+                return item.document.createElementNS(namespace.svg, vnode.type);
+            }else{
+                return item.document.createElement(vnode.type);
+            }
         }else if(vnode.type?.tagName){
             // Object-type              -> CUSTOM-ELEMENT
             return item.document.createElement(vnode.type.tagName);
@@ -90,7 +98,8 @@ export const NodeTreeRenderer = {
                 }
                 // TODO might want to support objects for defining events, so we can specifiy passive or not, and other event options
             }else{
-                if(!VNODEPROP_EXCLUDE_DIRECT[key]){
+                if(!VNODEPROP_EXCLUDE_DIRECT[key] && !item.inSvg){
+                    // TODO there are many properties we do not want to be setting directly.. (transform attr on svg's is a good example...)
                     // Unless otherwise excluded, set the prop directly on the Element as well (because this is what we'd typically want to do passing complex objects into custom-elements)
                     host[key] = newVal;
                 }