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;
                 }

rollup.config.js

@@ -34,6 +34,30 @@ export default [
             })
         ]
     },
+    // SVG test
+    {
+        input: 'test/svg/index.jsx',
+        output: {
+            file: 'public/svg/index.js',
+            format: 'iife', // immediately-invoked function expression — suitable for <script> tags
+            sourcemap: true
+        },
+        plugins: [
+            sass(),
+            babel(), // babel
+            resolve({
+                extensions: [ '.mjs', '.js', '.jsx', '.json' ],
+            }), // node_modules
+            commonjs(), // CJS-modules
+            production && terser(), // minify, but only in production
+            copy({
+                targets: [
+                    { src: 'test/svg/index.html', dest: 'public/svg' }
+                ],
+                copyOnce: true
+            })
+        ]
+    },
     // Todos MVC
     {
         input: 'test/todos-mvc/index.jsx',

test/basic/index.jsx

@@ -10,21 +10,9 @@ document.body.appendChild(render(<div class="center-me" iCanDoUpperCaseAttrs={ "
 //document.body.appendChild(render(<example-page />));
 document.body.appendChild(render(<ExamplePage />));
 
-/**
- * Findings:
- *  - JSX does not allow dot-notation in attributes: language error
- *  - Current code lower-cases attributes that result: this a limitation of setAttribute
- *  - React uses on<EventName> to capture events and the IDE auto-suggests using this (can we generalize this approach for customEvents?)
- */
-
 /**
  * Continuation suggestionss:
- *  - ref={...} does not work yet
  *  - style-attribute untested
  *  - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
- *  - Need to support update an existing DOM-tree to a VNode-tree
- *  - Need to support the key-attribute for lists (linking with previous to have an idea how to update DOM-tree efficiently, are we going atomico/react/prect style diffing with a Virtual-DOM?)
- *  - <Host> and <ShadowDom> special handlers
  *  - Supporting fragments <>...</>?
- *  - Try working towards a simple ToDo-MVC application
  */

test/index.html

@@ -15,6 +15,9 @@
     <li>
         <a href="./basic/">Basic testing</a>
     </li>
+    <li>
+        <a href="./svg/">SVG Rendering</a>
+    </li>
     <li>
         <a href="./todos-mvc/">Todos MVC</a>
     </li>

test/svg/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cerxes - CustomElements - SVG</title>
+</head>
+    <body>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>

test/svg/index.jsx

@@ -0,0 +1,11 @@
+import {render} from "../../packages/csx";
+import style from "./index.scss";
+import {SvgLoader} from "./svg-loader";
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(
+    <div class="center-me">
+        <h3>SVG Loader</h3>
+        <SvgLoader />
+    </div>
+));

test/svg/index.scss

@@ -0,0 +1,19 @@
+html{
+  width: 100%;
+  height: 100%;
+}
+
+body{
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.center-me{
+  align-self: center;
+}

test/svg/svg-loader.jsx

@@ -0,0 +1,55 @@
+import {CustomElement, defineElement, Host, ShadowDOM, State} from "../../packages/csx";
+import loaderComponentShadowStyle from './svg-loader.shadow.scss';
+
+// TODO configurability, like inverted and not with props...
+
+@defineElement('svg-loader')
+export class SvgLoader extends CustomElement{
+    // Constructor
+    constructor(){
+        super();
+    }
+    
+    // Private properties
+    
+    // Properties
+    
+    // Handlers
+    
+    // CustomElement
+    render(){
+        return (
+            <Host>
+                <ShadowDOM>
+                    <style>
+                        { loaderComponentShadowStyle }
+                    </style>
+                    
+                    <div class="loader-content">
+                        <div class="spinner">
+                            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
+                                <g fill="none" fill-rule="evenodd">
+                                    <g transform="translate(1 1)" stroke-width="2">
+                                        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                                        <path d="M36 18c0-9.94-8.06-18-18-18">
+                                            <animateTransform
+                                                attributeName="transform"
+                                                type="rotate"
+                                                from="0 18 18"
+                                                to="360 18 18"
+                                                dur="1s"
+                                                repeatCount="indefinite"/>
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+    
+                        <slot>
+                        </slot>
+                    </div>
+                </ShadowDOM>
+            </Host>
+        )
+    }
+}

test/svg/svg-loader.shadow.scss

@@ -0,0 +1,10 @@
+:host{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .spinner{
+        padding: .5rem;
+    }
+}