Initial rendering of a Todos-MVC app. (events are called but don't trigger a re-rendering yet, renderin-function does not yet support updating DOM yet)

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

@@ -0,0 +1,50 @@
+import {defineElement, render, CustomElement, Host} from "../../../packages/csx-custom-elements";
+
+import style from './my-todo.scss';
+import {TodoInput} from './todo-input';
+import {TodoItem} from './todo-item';
+
+@defineElement('my-todo')
+export class MyTodo extends CustomElement{
+    uid = 1;
+    todos = [
+        {id: this.uid++, text: "my initial todo", checked: false },
+        {id: this.uid++, text: "Learn about Web Components", checked: false },
+    ];
+    
+    render(){
+        return (
+            <Host>
+                <style>{ style }</style>
+                <h1>CSX Todo</h1>
+                <section>
+                    <todo-input onSubmit={this.handleSubmit}/>
+                    <ul id="list-container"
+                        onCheck={this.handleCheck}
+                        onRemove={this.handleRemove}
+                    >
+                        {this.todos.map(item =>
+                            <todo-item
+                                model={ item.id }
+                                checked={( item.checked )}
+                            >{ item.text }</todo-item>
+                        )}
+                    </ul>
+                </section>
+            </Host>
+        );
+    }
+    
+    handleSubmit = ({ detail: text }) => {
+        this.todos = [...this.todos, { id: this.uid++, text, checked: false }];
+    };
+    handleCheck = ({detail: checked}, id) => {
+        let indexOf = this.todos.findIndex(t=>t.id===id);
+        let updated = {...this.todos[indexOf], checked};
+        this.todos = [...this.todos.slice(0,indexOf), updated, ...this.todos.slice(indexOf+1)];
+    };
+    handleRemove = (e,id)=>{
+        let indexOf = this.todos.findIndex(t=>t.id===id);
+        this.todos = [...this.todos.slice(0,indexOf), ...this.todos.slice(indexOf+1)];
+    }
+}