v0.0.7: Switched to lowercase decorators.

packages/csx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerxes/csx",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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

@@ -6,7 +6,7 @@ import { trackValue } from "../decorator-utils/track-value";
  * @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) {
+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 ...
@@ -25,17 +25,17 @@ export function Prop(opts) {
             //console.log(`Prop ${key} was set: ` + JSON.stringify(value));
             if (opts.reflect) {
                 if ((value ?? false) === false) {
-                    this.removeAttribute(attrName);
+                    if(this.hasAttribute(attrName)) this.removeAttribute(attrName);
                 } else if (value === true) {
-                    this.setAttribute(attrName, "");
+                    if(!this.hasAttribute(attrName)) this.setAttribute(attrName, "");
                 } else {
-                    this.setAttribute(attrName, value);
+                    let strValue = value?.toString() || "";
+                    if(this.getAttribute(attrName)!== strValue) this.setAttribute(attrName, strValue);
                 }
             }
             this.markDirty && this.markDirty();
         });
         
-        
         // Registering as attr and subscribing to relevant callbacks
         if (opts.attr !== false || opts.attr === undefined) {
             let oldCallback = target.attributeChangedCallback;

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

@@ -4,7 +4,7 @@ import {trackValue} from "../decorator-utils/track-value";
 /**
  * Decorate a variable as part of the component-state, and will thus trigger a re-render whenever it is changed
  */
-export function State() {
+export function state() {
     return function decorator(target, key, descriptor){
         // Dev-note: Tis is run for every instance made of the decorated class ...
         // console.log("State " + key, target);

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

@@ -110,6 +110,9 @@ export const NodeTreeRenderer = {
 const VNODE_SPECIAL_PROPS = {
     ['key']: false,
     ['ref']: false,
+    ['value']: ({host,  newVal, oldVal, key})=>{
+      if(newVal!==oldVal) host.value = newVal;
+    },
     ['className']: ({host,  newVal, oldVal, key})=>{
         let oldClasses = new Set();
         let newClasses = new Set();

tests/basic/index.jsx

@@ -16,3 +16,14 @@ document.body.appendChild(render(<ExamplePage pageWidth={200} />));
  *  - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
  *  - Supporting fragments <>...</>?
  */
+// Private vars are visible, because of loose mode, not desirable...
+class PrivTest{
+    #privatevar = 1;
+    get someVar(){
+        console.log(Object.getOwnPropertyDescriptors(this));
+        return this.#privatevar;
+    }
+}
+let a = new PrivTest();
+console.log(a);
+console.log(a.someVar);

tests/basic/page.jsx

@@ -1,9 +1,9 @@
-import {defineElement, render, CustomElement, Prop, State} 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'})
+    @prop({reflect: true, attr: 'page-width'})
     set pageWidth(value){
         if(value!==this.#pageWidth){
             this.#pageWidth = value;

tests/pdf/index.jsx

@@ -1,5 +1,5 @@
 import kaartStyle from "./index.pcss";
-import {render, defineElement, CustomElement, Host, State, Prop, ShadowDOM} from "../../packages/csx";
+import {render, defineElement, CustomElement, Host, state, prop, ShadowDOM} from "../../packages/csx";
 
 // Style
 document.head.appendChild(render(<style>{kaartStyle}</style>));
@@ -8,7 +8,7 @@ document.head.appendChild(render(<style>{kaartStyle}</style>));
 @defineElement("pasta-buffet-kaart")
 class PastaBuffetKaart extends CustomElement{
     
-    @Prop() eigenExemplaar;
+    @prop() eigenExemplaar;
     
     render(){
         return <div className="kaart">

tests/svg/svg-loader.jsx

@@ -1,4 +1,4 @@
-import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} 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,8 +13,8 @@ export class SvgLoader extends CustomElement{
     // Private properties
     
     // Properties
-    @Prop({reflect: true}) inverted;
+    @prop({reflect: true}) inverted;
-    @Prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000";
+    @prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000";
     
     // Handlers
     

tests/svg/svg-tester-two.jsx

@@ -1,4 +1,4 @@
-import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
+import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
 import {SvgLoader} from "./svg-loader";
 
 @defineElement('svg-tester-two')
@@ -18,7 +18,7 @@ export class SvgTesterTwo extends CustomElement{
     ];
     
     // Properties
-    @State() state = this.states[0];
+    @state() state = this.states[0];
     
     // Handlers
     

tests/svg/svg-tester.jsx

@@ -1,4 +1,4 @@
-import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
+import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
 import {SvgLoader} from "./svg-loader";
 
 @defineElement('svg-tester')
@@ -18,7 +18,7 @@ export class SvgTester extends CustomElement{
     ];
     
     // Properties
-    @State() state = this.states[0];
+    @state() state = this.states[0];
     
     // Handlers
     

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

@@ -1,4 +1,4 @@
-import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx";
+import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx";
 
 import style from './my-todo.scss';
 import {TodoInput} from './todo-input';
@@ -7,7 +7,7 @@ import {TodoItem} from './todo-item';
 @defineElement('my-todo')
 export class MyTodo extends CustomElement{
     uid = 1;
-    @State() todos = [
+    @state() todos = [
         {id: this.uid++, text: "my initial todo", checked: false },
         {id: this.uid++, text: "Learn about Web Components", checked: false },
     ];

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

@@ -1,9 +1,9 @@
-import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx";
+import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx";
 import style from './todo-input.scss';
 
 @defineElement('todo-input')
 export class TodoInput extends CustomElement{
-    @State() value = "";
+    @state() value = "";
     
     render(){
         return (

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

@@ -1,10 +1,10 @@
-import {defineElement, render, CustomElement, Host, ShadowDOM, State, Prop} from "../../../packages/csx";
+import {defineElement, render, CustomElement, Host, ShadowDOM, state, prop} from "../../../packages/csx";
 import style from './todo-item.scss';
 
 @defineElement('todo-item')
 export class TodoItem extends CustomElement{
-    @Prop({reflect: true}) checked = false;
+    @prop({reflect: true}) checked = false;
-    @Prop() model;
+    @prop() model;
     
     render(){
         return (