Prop-decorators and supporting DOMElements as VNodes in the renderer

test/svg/svg-tester.jsx

@@ -0,0 +1,42 @@
+import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
+import {SvgLoader} from "./svg-loader";
+
+@defineElement('svg-tester')
+export class SvgTester extends CustomElement{
+    // Constructor
+    constructor(){
+        super();
+    }
+    
+    // Private properties
+    states = [
+        { inverted: true, invertedColor: "#F00"},
+        { inverted: true, invertedColor: "#FF0"},
+        { inverted: true, invertedColor: "#0FF"},
+        { inverted: false},
+        { inverted: true, invertedColor: "#0F0"},
+    ];
+    
+    // Properties
+    @State() state = this.states[0];
+    
+    // Handlers
+    
+    // CustomElement
+    connectedCallback() {
+        setInterval(()=>{
+            // Moving state
+            let curIndex = this.states.indexOf(this.state);
+            this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
+        }, 1000);
+        super.connectedCallback();
+    }
+    
+    render(){
+        return (
+            <Host>
+                <SvgLoader inverted={this.state.inverted} inverted-color={this.state.invertedColor} />
+            </Host>
+        );
+    }
+}