From 7bf37d75db7d3c33f4f1812b0ea9e74271217b0f Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 9 Dec 2023 00:11:32 +0100
Subject: [PATCH] feat: use standard event handler props

---
 examples/templating/index.js |  4 ++--
 package.json                 |  2 +-
 src/utils/create-element.js  | 12 ++----------
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/examples/templating/index.js b/examples/templating/index.js
index ead3fad..80b7256 100644
--- a/examples/templating/index.js
+++ b/examples/templating/index.js
@@ -6,8 +6,8 @@ export class Counter extends WebComponent {
   };
   get template() {
     return html`
-      <button on:click=${() => this.props.count = 'hey'}>
-        ${this.props.count}
+      <button onclick=${() => ++this.props.count} style="background-color: black; color: white;">
+        <span>${this.props.count}</span>
       </button>
     `;
   }
diff --git a/package.json b/package.json
index b58e5c8..3af9467 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
   "type": "module",
   "exports": {
diff --git a/src/utils/create-element.js b/src/utils/create-element.js
index 380f303..abee9e3 100644
--- a/src/utils/create-element.js
+++ b/src/utils/create-element.js
@@ -7,16 +7,8 @@ export function createElement(tree) {
     return document.createTextNode(tree);
   } else {
     const el = document.createElement(tree.type);
-    const eventAttrs = tree.props
-      ? Object.keys(tree.props)
-          .filter((key) => key.startsWith("on:"))
-          .map((key) => ({ key, cb: tree.props[key] }))
-      : [];
-    eventAttrs.forEach((onEvent) => {
-      const { key, cb } = onEvent;
-      const eventId = key.replace("on:", "");
-      el.addEventListener(eventId, cb);
-    });
+    if (tree.props)
+        Object.keys(tree.props).forEach(prop => el[prop] = tree.props[prop])
     tree.children?.forEach((child) => {
       const childEl = createElement(child);
       if (childEl) {