upgrade

Author: jogibear9988

README.md

@@ -71,12 +71,40 @@ use repeat:nameOfItem=[[enumerableExpression]] on a Template Element to repeat i
 You could also use 'index' variable in the repeat binding for the current number. The attribute "repeat-index" could be used to change the name of the index variable.
 on a repeat you could use the repeat-changed-item-callback="[[this.itemCreated(item, nodes)]]
 !!caution!! => the repeat binding is only a preview at the moment, it redraws all items on array change
-    
+
+## Event Code Bindings
+
+with for example @click="[[this.aa(event)]]" you could create a event binding wich could run any javascript code inside of the brackets.
+
+
 ### Binding extensions
 
  - Null/Undefined Extension {{? }} - If you start a binding with a questionmark (like this: {{?), the value of the binding is assigned as an empty string when null or undefined.
  - Invert extension {{! }} - If you use "!" on the start of a Binding, the bool value is inverted, and also asigned inverted (not yet developed, will do if needed)   
 
+## Declaritive Custom Element
+
+With the node-projects-dce element you could create a custom elment declaritively, see:
+
+Sample:
+
+    <node-projects-dce name="simple-dce-demo" properties='{"list":"Array", "list2":"Array", "ctx":{"type":"String","reflect":true}}' enable-bindings >
+        <template>
+            <style>h1 {color: red}</style>
+            <h1>Hello World</h1>
+            <div style="border: solid 3px black">Ctx: [[this.ctx]]</div>
+            <template repeat:myitem="[[this.list]]">
+                <button>[[myitem.toUpperCase()]] - <b>[[myitem.toLowerCase()]]</b> - [[index]]</button>
+                <ul>
+                <template repeat:myitem2="[[this.list2]]" repeat-index="inneridx">
+                    <button @click="[[this.ctx = myitem2]]" >[[myitem.toUpperCase()]] - <b>[[myitem2.toLowerCase()]]</b> - [[inneridx * 100]]</button>
+                </template>
+                </ul>
+            </template>
+        </template>
+    </node-projects-dce>
+    <simple-dce-demo list='["aa","bb","cc"]' list2='["hello", "you"]' ctx="TestCtx" style="position:absolute;left:184px;top:-53px;"></simple-dce-demo>
+
 ## Developing
 
   * Install dependencies

package.json

@@ -1,7 +1,7 @@
 {
   "description": "Base Custom Webcomponent",
   "name": "@node-projects/base-custom-webcomponent",
-  "version": "0.25.8",
+  "version": "0.25.9",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",

sample/index.html

@@ -70,7 +70,7 @@ <h1>Hello World</h1>
             <h1>Hello World</h1>
             <div>[[this.ctx]]</div>
             <template repeat:myitem="[[this.list]]">
-                <button @click="{{this.ctx = myitem}}">[[myitem]] - [[index]]</button>
+                <button @click="[[this.ctx = myitem]]">[[myitem]] - [[index]]</button>
             </template>
         </template>
     </node-projects-dce>

src/BaseCustomWebComponent.ts

@@ -232,37 +232,29 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
                             b(true, false);
                         }
                     } else if (a.value[0] === '{' && a.value[1] === '{' && a.value[a.value.length - 1] === '}' && a.value[a.value.length - 2] === '}') {
-                        if (a.name[0] === '@') {
-                            const event = a.name.substring(1);
-                            if (node[event] instanceof TypedEvent)
-                                (<TypedEvent<void>>node[event]).on((e) => this._bindingRunEvalInt(a.value.substring(2, a.value.length - 2), repeatBindingItems, <any>e, context));
-                            else
-                                node.addEventListener(event, (e) => this._bindingRunEvalInt(a.value.substring(2, a.value.length - 2), repeatBindingItems, e, context));
-                        } else {
-                            const attributeValues = a.value.substring(2, a.value.length - 2).split('::');
-                            let nm = a.name;
-                            if (nm[0] == '.')
-                                nm = nm.substring(1);
-                            let value = attributeValues[0];
-                            let event = (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) ? 'input' : (node instanceof HTMLSelectElement ? 'change' : nm + '-changed');
-                            if (attributeValues.length > 1 && attributeValues[1])
-                                event = attributeValues[1];
-                            const camelCased = nm.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-                            let noNull = false;
-                            if (value[0] === '?') {
-                                value = value.substring(1);
-                                noNull = true;
-                            }
-                            const b = (firstRun?: boolean, onlyWhenChanged?: boolean) => this._bindingSetNodeValue(firstRun, node, a, camelCased, value, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged);
-                            this._bindings.push([b, null]);
-                            b(true, false);
-                            if (event) {
-                                for (let x of event.split(';')) {
-                                    if (node[x] instanceof TypedEvent)
-                                        (<TypedEvent<void>>node[x]).on((e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
-                                    else
-                                        node.addEventListener(x, (e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
-                                }
+                        const attributeValues = a.value.substring(2, a.value.length - 2).split('::');
+                        let nm = a.name;
+                        if (nm[0] == '.')
+                            nm = nm.substring(1);
+                        let value = attributeValues[0];
+                        let event = (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) ? 'input' : (node instanceof HTMLSelectElement ? 'change' : nm + '-changed');
+                        if (attributeValues.length > 1 && attributeValues[1])
+                            event = attributeValues[1];
+                        const camelCased = nm.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                        let noNull = false;
+                        if (value[0] === '?') {
+                            value = value.substring(1);
+                            noNull = true;
+                        }
+                        const b = (firstRun?: boolean, onlyWhenChanged?: boolean) => this._bindingSetNodeValue(firstRun, node, a, camelCased, value, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged);
+                        this._bindings.push([b, null]);
+                        b(true, false);
+                        if (event) {
+                            for (let x of event.split(';')) {
+                                if (node[x] instanceof TypedEvent)
+                                    (<TypedEvent<void>>node[x]).on((e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
+                                else
+                                    node.addEventListener(x, (e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
                             }
                         }
                     }

src/DeclaritiveBaseCustomWebcomponent.ts

@@ -161,7 +161,7 @@ customElements.define("node-projects-dce", DeclaritiveBaseCustomWebcomponent);
             <button>[[myitem.toUpperCase()]] - <b>[[myitem.toLowerCase()]]</b> - [[index]]</button>
             <ul>
             <template repeat:myitem2="[[this.list2]]" repeat-index="inneridx">
-                <button @click="{{this.ctx = myItem2}}" >[[myitem.toUpperCase()]] - <b>[[myitem2.toLowerCase()]]</b> - [[inneridx * 100]]</button>
+                <button @click="[[this.ctx = myitem2]]" >[[myitem.toUpperCase()]] - <b>[[myitem2.toLowerCase()]]</b> - [[inneridx * 100]]</button>
             </template>
             </ul>
         </template>