From 2da298cf9fa2eb4bd943a55a5737ddac7a28a7b6 Mon Sep 17 00:00:00 2001
From: juliangojani <julian@gojani.xyz>
Date: Sat, 9 Mar 2024 20:10:43 +0100
Subject: [PATCH] Added :ref-directive

---
 README.md                          | 6 +++---
 examples/example.html              | 8 +++++++-
 package.json                       | 2 +-
 src/template/TemplateDOMAdapter.js | 9 ++++++++-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 3aa78a1..e39cb5e 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# JDOM `3.1.8`
+# JDOM `3.1.9`
 ## A wrapper for query selector and html elements + templating & reactivity framework
 
 - [Installation or embedding](#install)
@@ -28,12 +28,12 @@ npm install jdomjs
 
 ### Module
 ```js
-import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.1.8'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.1.9'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/jdom@3.1.8/dist/jdom.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jdom@3.1.9/dist/jdom.js"></script>
 ```
 
 ## DOM Manipulation
diff --git a/examples/example.html b/examples/example.html
index cfd04a0..2f3304d 100644
--- a/examples/example.html
+++ b/examples/example.html
@@ -41,8 +41,14 @@ <h1  ${{name}}>${name}</h1>
         `
     }
 
+    const h1Element = state(null)
+
+    h1Element.addListener(el => {
+        console.log('öööööööööööööööööööööööö', el)
+    })
+
     html`
-        <h1>Test</h1>
+        <h1 :ref=${h1Element}>Test</h1>
 
         ${computed(() => [
             [
diff --git a/package.json b/package.json
index 59ac10f..5aeb804 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "description": "A wrapper for query selector and html elements",
   "main": "./index.js",
   "types": "./types/index.d.ts",
diff --git a/src/template/TemplateDOMAdapter.js b/src/template/TemplateDOMAdapter.js
index 3a89ad2..0bd7774 100644
--- a/src/template/TemplateDOMAdapter.js
+++ b/src/template/TemplateDOMAdapter.js
@@ -218,6 +218,14 @@ export default class TemplateDOMAdapter {
 
             if (key.startsWith('@')) {
                 events[key.substring(1)] = value
+            } else if(key === ':ref') {
+                if (value instanceof Hook) {
+                    value.value = el
+                } else if (typeof value.value === 'function') {
+                    value.value(el)
+                } else {
+                    console.error(':ref value is not a type of Hook or function.')
+                }
             } else if(key === ':bind') {
                 model = value
             } else if(key === ':html') {
@@ -331,7 +339,6 @@ export default class TemplateDOMAdapter {
 
             const isArray = Array.isArray(state.value)
 
-            let removeEl = () => {}
             let outputElement = null
 
             let stateListener