Bugfix

packages/csx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerxes/csx",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "author": "Miel Truyen <miel.truyen@cerxes.net>",
   "description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
   "repository": {

packages/csx/src/custom-element/prop.js

@@ -3,14 +3,13 @@ import { trackValue } from "../decorator-utils/track-value";
 /**
  * Decorate a variable as a property of the custom-element.
  * @param {Object} opts
- * @param {boolean} opts.attr - Update the property when an attribute with specified name is set. Defaults to the property-name
+ * @param {boolean|string} opts.attr - Update the property when an attribute with specified name is set. Defaults to the property-name
  * @param {boolean} opts.reflect - Reflect the property back to attributes when the property is set
  */
 export function Prop(opts) {
     opts = opts || {};
     return function decorator(target, key, descriptor) {
         // Dev-note: Tis is run for every instance made of the decorated class ...
-        // console.log("Prop " + key, target);
         // TODO could check the prototype if a markDirty function exists, throw an error if it doesn't
         
         // Register this prop on the class, so the VDOM-renderer can find this and set the prop instead of the attribute (if @meta is every introduced as a built-in decorator, this would be the place to use it)

packages/csx/src/vdom/renderers/nodetree.js

@@ -83,8 +83,8 @@ export const NodeTreeRenderer = {
                 special({host, newVal, oldVal, key});
             }else if(key.slice(0,2)==='on' && key[2]>='A' && key[2]<='Z'){
                 // Event-prop
-                // Convert event name from camelCase to dash-case (this means that this on<EvenName> syntax might not be able to cover all custom-events)
+                // Convert event name from camelCase to lowercase
-                let eventName = key[2].toLowerCase()+key.slice(3).replace(/[A-Z]/g, function(c){return('-'+c.toLowerCase())});
+                let eventName = key[2].toLowerCase()+key.slice(3).toLowerCase(); // This used to dash case things: .replace(/[A-Z]/g, function(c){return('-'+c.toLowerCase())});
                 if(!newVal){
                     host.removeEventListener(eventName, oldVal);
                 }else{
@@ -145,9 +145,9 @@ const VNODE_SPECIAL_PROPS = {
                         host.style[key]=null;
                     }
                 }
-                for(let key in newVal){
+            }
-                    host.style[key] = newVal[key];
+            for(let key in newVal){
-                }
+                host.style[key] = newVal[key];
             }
         }else if(!newVal){
             host.removeAttribute('style');

tests/basic/index.jsx

@@ -8,7 +8,7 @@ document.body.appendChild(render(<div class="center-me" iCanDoUpperCaseAttrs={ "
 </div>));
 
 //document.body.appendChild(render(<example-page />));
-document.body.appendChild(render(<ExamplePage />));
+document.body.appendChild(render(<ExamplePage pageWidth={200} />));
 
 /**
  * Continuation suggestionss:

tests/basic/page.jsx

@@ -1,12 +1,32 @@
-import {defineElement, render, CustomElement} from "../../packages/csx";
+import {defineElement, render, CustomElement, Prop, State} from "../../packages/csx";
 
 @defineElement('example-page')
 export class ExamplePage extends CustomElement{
+    
+    @Prop({reflect: true, attr: 'page-width'})
+    set pageWidth(value){
+        if(value!==this.#pageWidth){
+            this.#pageWidth = value;
+        }
+    }
+    get pageWidth(){
+        return this.#pageWidth;
+    }
+    #pageWidth = undefined;
+    
+    render(){
+        return <div className="page" style={{width: `${this.pageWidth}px`}}>
+            <h1>This page is an example!</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit enim, lacinia in pellentesque ut, fermentum quis risus. Vivamus condimentum turpis ac mattis blandit. Ut scelerisque nulla suscipit, rhoncus justo eget, pulvinar ligula. Donec vel orci dolor. Etiam non neque non lorem venenatis tincidunt. Cras tristique mauris ut leo imperdiet, in bibendum elit ultricies. Morbi et felis sed arcu efficitur aliquam.<br/>
+                Nam ornare scelerisque vestibulum. In porta non risus a tristique. Donec tincidunt diam sed dictum iaculis. In faucibus placerat justo, ut pulvinar tortor hendrerit viverra. Aliquam erat volutpat. Quisque euismod leo at eros fringilla varius. Nam et vulputate nunc. Nunc mattis purus eu massa lacinia posuere.<br/>
+                In fermentum hendrerit purus non mollis. Duis vel leo nibh. Praesent at odio suscipit, consequat lorem quis, posuere lorem. Donec molestie sodales feugiat. Ut in nisi vel est luctus tristique non eget elit. Donec accumsan quam id scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu lacus convallis elit eleifend tristique id et sapien. Mauris cursus a enim ut scelerisque. Morbi auctor nisl sem, id dignissim lectus condimentum non. Ut tellus lacus, volutpat eget porttitor et, vulputate pharetra nunc. Donec nec ligula est. Donec eget odio tincidunt, laoreet mi sit amet, euismod odio. Donec vitae dignissim leo, nec ultricies quam.<br/>
+                Proin efficitur arcu sit amet congue commodo. Suspendisse non tristique libero. Maecenas tempor arcu ac felis posuere, eu gravida metus euismod. Vivamus hendrerit nisl id venenatis sodales. Phasellus pharetra arcu a arcu aliquam faucibus. Etiam sodales ligula nisl, sit amet posuere turpis ultricies id. Donec euismod nunc eros, at euismod neque tempor a. Nullam felis eros, imperdiet ac arcu id, lobortis lobortis tellus. Duis mollis sodales leo, et tincidunt enim pretium luctus.<br/>ulputate lorem.
+            </p>
+        </div>
+    }
+    
     connectedCallback() {
-        this.appendChild(render(
+        super.connectedCallback();
-            <div class="page">
-                <h1>This page is an example!</h1>
-            </div>
-        ));
     }
 }

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

@@ -3,7 +3,7 @@ import style from './todo-item.scss';
 
 @defineElement('todo-item')
 export class TodoItem extends CustomElement{
-    @Prop() checked = false;
+    @Prop({reflect: true}) checked = false;
     @Prop() model;
     
     render(){