Reworked how decorators are used to get to our initial steps of actually updating the DOM on a state change. *phew*

test/.babelrc

@@ -7,7 +7,7 @@
     }]
   ],
   "plugins": [
-    [ "@babel/plugin-proposal-decorators", { "legacy": true }],
+    [ "@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
     [ "@babel/plugin-proposal-class-properties", { "loose":  true } ],
     [ "@babel/plugin-proposal-private-methods", {"loose":  true } ],
     [ "@babel/plugin-proposal-optional-chaining" ],

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

@@ -1,4 +1,4 @@
-import {defineElement, render, CustomElement, Host} from "../../../packages/csx-custom-elements";
+import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx-custom-elements";
 
 import style from './my-todo.scss';
 import {TodoInput} from './todo-input';
@@ -7,7 +7,8 @@ import {TodoItem} from './todo-item';
 @defineElement('my-todo')
 export class MyTodo extends CustomElement{
     uid = 1;
-    todos = [
+    // @State Won't work;
+    @State() todos = [
         {id: this.uid++, text: "my initial todo", checked: false },
         {id: this.uid++, text: "Learn about Web Components", checked: false },
     ];
@@ -36,7 +37,10 @@ export class MyTodo extends CustomElement{
     }
     
     handleSubmit = ({ detail: text }) => {
-        this.todos = [...this.todos, { id: this.uid++, text, checked: false }];
+        if(text) {
+            console.log("Submit rcvd: " + text);
+            this.todos = [...this.todos, { id: this.uid++, text, checked: false }];
+        }
     };
     handleCheck = ({detail: checked}, id) => {
         let indexOf = this.todos.findIndex(t=>t.id===id);

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

@@ -27,7 +27,7 @@ export class TodoItem extends CustomElement{
     
     handleChange = ()=>{
         this.dispatchEvent(new CustomEvent('check', {
-            detail: (this.checked=!this.checked)
+            detail: (this.checked=!this.checked),
         }));
     };
     handleClick = ()=>{