Merge pull request #738 from trheyi/main

Optimize event binding in SUI components

sui/core/build.go

@@ -418,7 +418,7 @@ func (page *Page) parseProps(from *goquery.Selection, to *goquery.Selection, ext
 	for _, attr := range attrs {
 
 		// Copy Event
-		if strings.HasPrefix(attr.Key, "s:event") || strings.HasPrefix(attr.Key, "data:") || strings.HasPrefix(attr.Key, "json:") {
+		if strings.HasPrefix(attr.Key, "s:event") || strings.HasPrefix(attr.Key, "s:on-") || strings.HasPrefix(attr.Key, "data:") || strings.HasPrefix(attr.Key, "json:") {
 			to.SetAttr(attr.Key, attr.Val)
 			continue
 		}

sui/core/event.go

@@ -18,11 +18,15 @@ func (page *Page) BindEvent(ctx *BuildContext, sel *goquery.Selection, cn string
 		if comp, has := s.Attr("is"); has && ctx.isJitComponent(comp) {
 			return
 		}
-		script := GetEventScript(ctx.sequence, s, page.namespace, cn, "event", ispage)
+		id := fmt.Sprintf("%s-%d", page.namespace, ctx.sequence)
-		if script != nil {
+		s.SetAttr("s:event", id)
-			ctx.scripts = append(ctx.scripts, *script)
+		ReplaceEventData(s)
-			ctx.sequence++
+		ctx.sequence++
+		if ispage {
+			s.SetAttr("s:event-cn", "__page")
+			return
 		}
+		s.SetAttr("s:event-cn", cn)
 	})
 }
 
@@ -111,3 +115,24 @@ func GetEventScript(sequence int, sel *goquery.Selection, ns string, cn string,
 		Attrs:     []html.Attribute{{Key: "event", Val: id}},
 	}
 }
+
+// ReplaceEventData is a method that replaces the data- and json- attributes.
+func ReplaceEventData(sel *goquery.Selection) {
+	// Replace the data- and json- attributes
+	for _, attr := range sel.Nodes[0].Attr {
+
+		if strings.HasPrefix(attr.Key, "s:data-") {
+			name := strings.TrimPrefix(attr.Key, "s:data-")
+			sel.SetAttr(fmt.Sprintf("data:%s", name), attr.Val)
+			sel.RemoveAttr(fmt.Sprintf("s:data-%s", name))
+			continue
+		}
+
+		if strings.HasPrefix(attr.Key, "s:json-") {
+			name := strings.TrimPrefix(attr.Key, "s:json-")
+			sel.SetAttr(fmt.Sprintf("json:%s", name), attr.Val)
+			sel.RemoveAttr(fmt.Sprintf("s:json-%s", name))
+			continue
+		}
+	}
+}

sui/core/injections.go

@@ -64,6 +64,13 @@ const initScriptTmpl = `
 				}
 			});
 		} catch (e) {}
+
+		try {
+			__sui_event_init(document.body);
+		} catch (e) {
+		 	const message = e.message || e || "An error occurred";
+			console.error(` + "`[SUI] ${cn} Error: ${message}`" + `);
+		 }
 	});
 	%s
 `
@@ -136,6 +143,11 @@ const componentInitScriptTmpl = `
   		return r.Exec(name, data);
 	};
 
+	this.emit = function (name, data) {
+		const event = new CustomEvent(name, { detail: data });
+		__self.root.dispatchEvent(event);
+	};
+
 	%s
 
 	if (this.root.getAttribute("initialized") != 'true') {

sui/libsui/index.ts

@@ -125,6 +125,11 @@ function __sui_component(elm, component) {
     return __self.root.querySelectorAll(selector);
   };
 
+  this.emit = function (name, data) {
+    const event = new CustomEvent(name, { detail: data });
+    __self.root.dispatchEvent(event);
+  };
+
   this.render = function (name, data, option) {
     // @ts-ignore
     const r = new __Render(__self, option);
@@ -164,6 +169,10 @@ function __sui_event_init(elm: Element) {
   const eventElms = elm.querySelectorAll("[s\\:event]");
   eventElms.forEach((eventElm) => {
     const cn = eventElm.getAttribute("s:event-cn") || "";
+    if (cn == "") {
+      console.error("[SUI] Component name is required for event binding", elm);
+      return;
+    }
 
     // Data keys
     const events: Record<string, string> = {};