From 3426055df4e5a6bfee85745ad0a0b43b94d42e5b Mon Sep 17 00:00:00 2001
From: afterlifepro <96529802+Afterlifepro@users.noreply.github.com>
Date: Sat, 23 Nov 2024 23:08:23 +0000
Subject: [PATCH 1/2] Fix filename of htmlangElement test file

- there was an extra L in the name
- i cloned the project to have a nosey and it annoyed me lol
---
 .../{htmllangElement.test.ts => htmlangElement.test.ts}           | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{htmllangElement.test.ts => htmlangElement.test.ts} (100%)

diff --git a/src/components/htmllangElement.test.ts b/src/components/htmlangElement.test.ts
similarity index 100%
rename from src/components/htmllangElement.test.ts
rename to src/components/htmlangElement.test.ts

From f8b736764370a9bf1cd0637280ae5bf27996b645 Mon Sep 17 00:00:00 2001
From: afterlifepro <96529802+Afterlifepro@users.noreply.github.com>
Date: Sun, 24 Nov 2024 00:18:43 +0000
Subject: [PATCH 2/2] Add <event-> component

on attribute refers to the event which is triggered (click, blur, etc)
target attribute refers to the elements which will recive the event listener (css selector: #button, button.primary, a, etc)

children of the <event-> component are triggered whenever the event listener fires and on first page load (the later is an unintentional side effect which idk how to fix lol) (its late and idk web components well)
---
 index.html              |  6 ++++++
 src/components/event.ts | 27 +++++++++++++++++++++++++++
 src/main.ts             |  2 ++
 3 files changed, 35 insertions(+)
 create mode 100644 src/components/event.ts

diff --git a/index.html b/index.html
index b482e24..a4858de 100644
--- a/index.html
+++ b/index.html
@@ -75,5 +75,11 @@
       </scope->
     </scope->
     <console- log(="Hi, my name is {name} again" )></console->
+
+    <button>Click me!</button>
+    <button>Click me too!</button>
+    <event- on="click" target="button">
+      <console- log(="Clicked! {i} + {j} + 2 = {k}" )></console->
+    </event->
   </body>
 </html>
diff --git a/src/components/event.ts b/src/components/event.ts
new file mode 100644
index 0000000..81245d3
--- /dev/null
+++ b/src/components/event.ts
@@ -0,0 +1,27 @@
+import { traverseChildren } from '../main';
+import { BaseHtmlangElement } from './htmlangElement';
+
+export class EventDash extends BaseHtmlangElement {
+  static getTagName = () => 'event' as const;
+
+  execute = (): void => {
+    const on = this.getAttribute('on');
+    if (!on) {
+      return;
+    }
+
+    const target = this.getAttribute('target');
+    if (!target) {
+      return;
+    }
+
+    const targetElements = document.querySelectorAll(target);
+    if (!targetElements) {
+      return;
+    }
+
+    targetElements.forEach((element) => {
+      element.addEventListener(on, () => traverseChildren(this));
+    });
+  };
+}
diff --git a/src/main.ts b/src/main.ts
index fc037a6..c8a7079 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,7 @@ import { ConsoleDash } from './components/console';
 import { ConstDash } from './components/const';
 import { ElseDash } from './components/else';
 import { ElseIfDash } from './components/elseIf';
+import { EventDash } from './components/event';
 import { ForDash } from './components/for';
 import { BaseHtmlangElement, HtmlangElement } from './components/htmlangElement';
 import { IfDash } from './components/if';
@@ -22,6 +23,7 @@ export function defineElements(): void {
     ConstDash,
     ElseDash,
     ElseIfDash,
+    EventDash,
     ForDash,
     IfDash,
     LetDash,