Prop-decorators and supporting DOMElements as VNodes in the renderer

test/svg/index.jsx

@@ -1,11 +1,47 @@
 import {render} from "../../packages/csx";
 import style from "./index.scss";
 import {SvgLoader} from "./svg-loader";
+import {SvgTester} from "./svg-tester";
+import {SvgTesterTwo} from "./svg-tester-two";
+
+let loader = render(<SvgLoader inverted="yes"/>);
 
 document.body.appendChild(render(<style>{style}</style>));
 document.body.appendChild(render(
     <div class="center-me">
         <h3>SVG Loader</h3>
-        <SvgLoader />
+        {loader}
+        <h3>SVG Tester</h3>
+        <SvgTester/>
+        <h3>SVG Tester Two</h3>
+        <SvgTesterTwo/>
     </div>
-));
+));
+
+
+setTimeout(()=>{
+    console.log("Uninverting");
+    loader.removeAttribute("inverted");
+    
+    setTimeout(()=>{
+        console.log("Inverting");
+        loader.setAttribute("inverted", "ja");
+    
+        setTimeout(()=>{
+            console.log("Stays inverted");
+            loader.setAttribute("inverted", "");
+    
+            setTimeout(()=>{
+                console.log("Inverted color");
+                loader.setAttribute("inverted-color", "#0F0");
+            }, 1000);
+        }, 1000);
+    }, 1000);
+    
+    
+}, 1000);
+
+
+
+
+

test/svg/svg-loader.jsx

@@ -1,4 +1,4 @@
-import {CustomElement, defineElement, Host, ShadowDOM, State} from "../../packages/csx";
+import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
 import loaderComponentShadowStyle from './svg-loader.shadow.scss';
 
 // TODO configurability, like inverted and not with props...
@@ -13,6 +13,8 @@ export class SvgLoader extends CustomElement{
     // Private properties
     
     // Properties
+    @Prop({reflect: true}) inverted;
+    @Prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000";
     
     // Handlers
     
@@ -27,7 +29,7 @@ export class SvgLoader extends CustomElement{
                     
                     <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">
+                            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke={(this.inverted??false)!==false? this.invertedColor : "#F00"}>
                                 <g fill="none" fill-rule="evenodd">
                                     <g transform="translate(1 1)" stroke-width="2">
                                         <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>

test/svg/svg-tester-two.jsx

@@ -0,0 +1,43 @@
+import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
+import {SvgLoader} from "./svg-loader";
+
+@defineElement('svg-tester-two')
+export class SvgTesterTwo 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(){
+        // invertedColor instead of inverted-color is the only difference!
+        return (
+            <Host>
+                <SvgLoader inverted={this.state.inverted} invertedColor={this.state.invertedColor} />
+            </Host>
+        );
+    }
+}

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

test/todos-mvc/components/my-todo.jsx

@@ -18,19 +18,19 @@ export class MyTodo extends CustomElement{
                 <style>{ style }</style>
                 <h1>CSX Todo</h1>
                 <section>
-                    <todo-input onSubmit={this.handleSubmit}/>
+                    <TodoInput onSubmit={this.handleSubmit}/>
                     <ul id="list-container"
                         onCheck={this.handleCheck}
                         onRemove={this.handleRemove}
                     >
                         {this.todos.map(item =>
-                            <todo-item
+                            <TodoItem
                                 key={item.id}
                                 model={ item.id }
                                 checked={ item.checked }
                             >
                                 { item.text }
-                            </todo-item>
+                            </TodoItem>
                         )}
                     </ul>
                 </section>