From a8d151993e4bdc9b0fbc9804dab68cf583db8585 Mon Sep 17 00:00:00 2001
From: Max <shadow.iqka@qq.com>
Date: Mon, 29 Jul 2024 17:34:13 +0800
Subject: [PATCH] Refactor component event injection to handle missing event
 selectors

---
 sui/core/injections.go | 56 ++++++++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/sui/core/injections.go b/sui/core/injections.go
index c532e2c8..49250e7f 100644
--- a/sui/core/injections.go
+++ b/sui/core/injections.go
@@ -30,6 +30,13 @@ func libsui(minify bool) (string, error) {
 
 const libsuisource = `
 
+	function __sui_component_root(elm, name) {
+		while (elm && elm.getAttribute("s:cn") !== name) {
+			elm = elm.parentElement;
+		}
+		return elm;
+	}
+
 	function __sui_state(component) {
 		this.handlers = component.watch || {};
 		this.Set = async function (key, value) {
@@ -112,25 +119,28 @@ const libsuisource = `
 		return null;
 	}
 
-	function __sui_event_handler(event, dataKeys, jsonKeys, elm, handler) {
+	function __sui_event_handler(event, dataKeys, jsonKeys, target, root, handler) {
 		const data = {};
-		dataKeys.forEach(function (key) {
-			const value = elm.getAttribute("data:" + key);
-			data[key] = value;
-		})
-		jsonKeys.forEach(function (key) {
-			const value = elm.getAttribute("json:" + key);
-			data[key] = null;
-			if (value && value != "") {
-				try {
-					data[key] = JSON.parse(value);
-				} catch (e) {
-				 	const message = e.message || e || "An error occurred";
-					console.error(` + "`[SUI] Event Handler Error: ${message}`" + `, elm);
+		target = target || null;
+		if (target) {
+			dataKeys.forEach(function (key) {
+				const value = target.getAttribute("data:" + key);
+				data[key] = value;
+			})
+			jsonKeys.forEach(function (key) {
+				const value = target.getAttribute("json:" + key);
+				data[key] = null;
+				if (value && value != "") {
+					try {
+						data[key] = JSON.parse(value);
+					} catch (e) {
+						const message = e.message || e || "An error occurred";
+						console.error(` + "`[SUI] Event Handler Error: ${message}`" + `, target);
+					}
 				}
-			}
-		})
-		handler && handler(event, data, elm);
+			})
+		}
+		handler && handler(event, data, root, target);
 	};
 
 	function __sui_store(elm) {
@@ -211,7 +221,9 @@ const pageEventScriptTmpl = `
 	document.querySelector("[s\\:event=%s]").addEventListener("%s", function (event) {
 		const dataKeys = %s;
 		const jsonKeys = %s;
-		__sui_event_handler(event, dataKeys, jsonKeys, this, %s);
+		const root = document.body;
+		const target = this;
+		__sui_event_handler(event, dataKeys, jsonKeys, target, root, %s);
 	});
 `
 
@@ -220,8 +232,10 @@ const compEventScriptTmpl = `
 		document.querySelector("[s\\:event=%s]").addEventListener("%s", function (event) {
 			const dataKeys = %s;
 			const jsonKeys = %s;
-			handler = new %s(this).%s;
-			__sui_event_handler(event, dataKeys, jsonKeys, this, handler);
+			const root = __sui_component_root(this, "%s");
+			handler = new %s(root).%s;
+			const target = event.target || null;
+			__sui_event_handler(event, dataKeys, jsonKeys, target, root, handler);
 		});
 	}
 `
@@ -264,7 +278,7 @@ func pageEventInjectScript(eventID, eventName, dataKeys, jsonKeys, handler strin
 }
 
 func compEventInjectScript(eventID, eventName, component, dataKeys, jsonKeys, handler string) string {
-	return fmt.Sprintf(compEventScriptTmpl, eventID, eventID, eventName, dataKeys, jsonKeys, component, handler)
+	return fmt.Sprintf(compEventScriptTmpl, eventID, eventID, eventName, dataKeys, jsonKeys, component, component, handler)
 }
 
 func componentInitScript(root string) string {