Merge pull request #745 from trheyi/main

[add] SUI real-time rendering mode supports event binding (page event  only)
This commit is contained in:
Max 2024-09-02 17:05:12 +08:00 committed by GitHub
commit 657224bff3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 98 additions and 87 deletions

File diff suppressed because one or more lines are too long

View file

@ -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. // 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) { func (parser *TemplateParser) BindEvent(sel *goquery.Selection, ns string, cn string) {
sel.FindMatcher(eventMatcher).Each(func(i int, s *goquery.Selection) { sel.FindMatcher(eventMatcher).Each(func(i int, s *goquery.Selection) {
script := GetEventScript(parser.sequence, s, ns, cn, "event-jit", false) id := fmt.Sprintf("%s-%d", ns, parser.sequence)
if script != nil { sel.SetAttr("s:event-jit", id)
script.Component = "" ReplaceEventData(sel)
script.Parent = "body" sel.SetAttr("s:event-cn", cn)
parser.scripts = append(parser.scripts, *script)
parser.sequence++
}
}) })
} }

View file

@ -65,6 +65,12 @@ func (parser *TemplateParser) parseJitComponent(sel *goquery.Selection) {
} }
parser.parseElementComponent(comsel) parser.parseElementComponent(comsel)
sel.ReplaceWithSelection(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) { func (parser *TemplateParser) newJitComponentSel(sel *goquery.Selection, comp *JitComponent) (*goquery.Selection, error) {

View file

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

View file

@ -166,8 +166,7 @@ function __sui_event_handler(event, dataKeys, jsonKeys, target, root, handler) {
} }
function __sui_event_init(elm: Element) { function __sui_event_init(elm: Element) {
const eventElms = elm.querySelectorAll("[s\\:event]"); const bindEvent = (eventElm) => {
eventElms.forEach((eventElm) => {
const cn = eventElm.getAttribute("s:event-cn") || ""; const cn = eventElm.getAttribute("s:event-cn") || "";
if (cn == "") { if (cn == "") {
console.error("[SUI] Component name is required for event binding", elm); console.error("[SUI] Component name is required for event binding", elm);
@ -204,7 +203,9 @@ function __sui_event_init(elm: Element) {
continue; 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 handler = comp[bind];
const root = comp.root; const root = comp.root;
const target = eventElm; const target = eventElm;
@ -212,7 +213,12 @@ function __sui_event_init(elm: Element) {
__sui_event_handler(event, dataKeys, jsonKeys, target, root, handler); __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) { function __sui_store(elm) {