Merge pull request #719 from trheyi/main

Refactor component event injection to handle missing event selectors
This commit is contained in:
Max 2024-07-29 18:00:57 +08:00 committed by GitHub
commit 62c7b131fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 27 deletions

View file

@ -684,7 +684,7 @@ func (page *Page) BuildScripts(ctx *BuildContext, option *BuildOption, component
arguments := "document.body"
if !ispage {
arguments = "arguments[0]"
arguments = "component"
}
injectScript := componentInitScript(arguments)
@ -754,7 +754,7 @@ func (page *Page) BuildScripts(ctx *BuildContext, option *BuildOption, component
parent := "body"
if !ispage {
parent = "head"
code = fmt.Sprintf("function %s(){\n%s\n}\n", component, addTabToEachLine(code))
code = fmt.Sprintf("function %s( component ){\n%s\n}\n", component, addTabToEachLine(code))
}
scripts = append(scripts, ScriptNode{

View file

@ -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,17 +221,23 @@ 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);
});
`
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);
});
if (document.querySelector("[s\\:event=%s]")) {
document.querySelector("[s\\:event=%s]").addEventListener("%s", function (event) {
const dataKeys = %s;
const jsonKeys = %s;
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);
});
}
`
const componentInitScriptTmpl = `
@ -262,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, eventName, dataKeys, jsonKeys, component, handler)
return fmt.Sprintf(compEventScriptTmpl, eventID, eventID, eventName, dataKeys, jsonKeys, component, component, handler)
}
func componentInitScript(root string) string {