From 257b4a0fda30d38e740f4e85ce791f2b15373b4f Mon Sep 17 00:00:00 2001
From: juliangojani <julian@gojani.xyz>
Date: Tue, 5 Mar 2024 15:26:05 +0100
Subject: [PATCH] Added event . helping operator

---
 example.html                       |  2 +-
 package.json                       |  2 +-
 src/template/TemplateDOMAdapter.js | 30 ++++++++++++++++++++++++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/example.html b/example.html
index 2da2409..78ba35a 100644
--- a/example.html
+++ b/example.html
@@ -110,7 +110,7 @@ <h2>Yee</h2>
 
 
 
-    /**
+
     const myHTML = html`
 
         <!-- ${waitforme()} -->
diff --git a/package.json b/package.json
index 3a7a8db..760cc63 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "A wrapper for query selector and html elements",
   "main": "index.js",
 
diff --git a/src/template/TemplateDOMAdapter.js b/src/template/TemplateDOMAdapter.js
index e326e25..88231e6 100644
--- a/src/template/TemplateDOMAdapter.js
+++ b/src/template/TemplateDOMAdapter.js
@@ -104,7 +104,7 @@ export default class TemplateDOMAdapter {
                 }
 
                 if (value instanceof Hook) {
-                    value.listeners.push(() => {
+                    value.addListener(() => {
                         setValue(key, value.value)
                     })
                     setValue(key, value.value)
@@ -130,7 +130,33 @@ export default class TemplateDOMAdapter {
                 elem.value = model.value
             }
 
-            Object.entries(events).forEach(([key, value]) => elem.addEventListener(key, value))
+            for (const [key, value] of Object.entries(events)) {
+                const eventNameParts = key.split('.')
+                const eventName = eventNameParts.shift()
+                let handler = typeof value === 'function' ? value : () => {}
+
+                if (eventNameParts.length > 0) {
+                    const events = []
+                    for (const part of eventNameParts) {
+                        switch (part.toLowerCase()) {
+                            case 'prevent':
+                                events.push(e => e.preventDefault())
+                                break
+                            case 'stop':
+                                events.push(e => e.stopPropagation())
+                                break
+                        }
+                    }
+
+                    const oldHandler = handler
+                    handler = e => {
+                        events.forEach(ev => ev(e))
+                        oldHandler(e)
+                    }
+                }
+
+                elem.addEventListener(eventName, handler)
+            }
             onCreate(elem)
         }