[add] SUI real-time rendering mode supports event binding (page event only)

sui/core/event.go

@@ -33,13 +33,10 @@ func (page *Page) BindEvent(ctx *BuildContext, sel *goquery.Selection, cn string
 // BindEvent is a method that binds events to the component in just-in-time mode.
 func (parser *TemplateParser) BindEvent(sel *goquery.Selection, ns string, cn string) {
 	sel.FindMatcher(eventMatcher).Each(func(i int, s *goquery.Selection) {
-		script := GetEventScript(parser.sequence, s, ns, cn, "event-jit", false)
-		if script != nil {
-			script.Component = ""
-			script.Parent = "body"
-			parser.scripts = append(parser.scripts, *script)
-			parser.sequence++
-		}
+		id := fmt.Sprintf("%s-%d", ns, parser.sequence)
+		sel.SetAttr("s:event-jit", id)
+		ReplaceEventData(sel)
+		sel.SetAttr("s:event-cn", cn)
 	})
 }
 

sui/core/jit.go

@@ -65,6 +65,12 @@ func (parser *TemplateParser) parseJitComponent(sel *goquery.Selection) {
 	}
 	parser.parseElementComponent(comsel)
 	sel.ReplaceWithSelection(comsel)
+
+	// Bind the events (support for the page event only, full support is in the feature)
+	ns := comsel.AttrOr("s:ns", "")
+	if ns != "" {
+		parser.BindEvent(comsel, ns, "__page")
+	}
 }
 
 func (parser *TemplateParser) newJitComponentSel(sel *goquery.Selection, comp *JitComponent) (*goquery.Selection, error) {

sui/core/parser.go

@@ -68,25 +68,27 @@ var keepWords = map[string]bool{
 }
 
 var allowUsePropAttrs = map[string]bool{
-	"s:if":       true,
-	"s:elif":     true,
-	"s:for":      true,
-	"s:event":    true,
-	"s:event-cn": true,
-	"s:render":   true,
-	"s:public":   true,
-	"s:assets":   true,
+	"s:if":        true,
+	"s:elif":      true,
+	"s:for":       true,
+	"s:event":     true,
+	"s:event-jit": true,
+	"s:event-cn":  true,
+	"s:render":    true,
+	"s:public":    true,
+	"s:assets":    true,
 }
 
 var keepAttrs = map[string]bool{
-	"s:ns":       true,
-	"s:cn":       true,
-	"s:ready":    true,
-	"s:event":    true,
-	"s:event-cn": true,
-	"s:render":   true,
-	"s:public":   true,
-	"s:assets":   true,
+	"s:ns":        true,
+	"s:cn":        true,
+	"s:ready":     true,
+	"s:event":     true,
+	"s:event-jit": true,
+	"s:event-cn":  true,
+	"s:render":    true,
+	"s:public":    true,
+	"s:assets":    true,
 }
 
 // NewTemplateParser create a new template parser

sui/libsui/index.ts

@@ -166,8 +166,7 @@ function __sui_event_handler(event, dataKeys, jsonKeys, target, root, handler) {
 }
 
 function __sui_event_init(elm: Element) {
-  const eventElms = elm.querySelectorAll("[s\\:event]");
-  eventElms.forEach((eventElm) => {
+  const bindEvent = (eventElm) => {
     const cn = eventElm.getAttribute("s:event-cn") || "";
     if (cn == "") {
       console.error("[SUI] Component name is required for event binding", elm);
@@ -204,7 +203,9 @@ function __sui_event_init(elm: Element) {
         continue;
       }
 
-      const comp = new window[cn](eventElm.closest(`[s\\:cn=${cn}]`));
+      const component = eventElm.closest(`[s\\:cn=${cn}]`);
+      // @ts-ignore
+      const comp = new window[cn](component);
       const handler = comp[bind];
       const root = comp.root;
       const target = eventElm;
@@ -212,7 +213,12 @@ function __sui_event_init(elm: Element) {
         __sui_event_handler(event, dataKeys, jsonKeys, target, root, handler);
       });
     }
-  });
+  };
+
+  const eventElms = elm.querySelectorAll("[s\\:event]");
+  const jitEventElms = elm.querySelectorAll("[s\\:event-jit]");
+  eventElms.forEach((eventElm) => bindEvent(eventElm));
+  jitEventElms.forEach((eventElm) => bindEvent(eventElm));
 }
 
 function __sui_store(elm) {