Refactor component initialization script to include injected code

This commit is contained in:
Max 2024-08-07 11:02:43 +08:00
parent f44021d582
commit c5cf0babf9
2 changed files with 9 additions and 7 deletions

View file

@ -705,7 +705,6 @@ func (page *Page) BuildScripts(ctx *BuildContext, option *BuildOption, component
if !ispage { if !ispage {
arguments = "component" arguments = "component"
} }
injectScript := componentInitScript(arguments)
// Get the Constants and Helpers // Get the Constants and Helpers
var err error = nil var err error = nil
@ -730,14 +729,14 @@ func (page *Page) BuildScripts(ctx *BuildContext, option *BuildOption, component
var imports []string = nil var imports []string = nil
var source []byte = nil var source []byte = nil
if page.Codes.TS.Code != "" { if page.Codes.TS.Code != "" {
code := fmt.Sprintf("%s\n%s", injectScript, page.Codes.TS.Code) code := componentInitScript(arguments, page.Codes.TS.Code)
source, imports, err = page.CompileTS([]byte(code), option.ScriptMinify) source, imports, err = page.CompileTS([]byte(code), option.ScriptMinify)
if err != nil { if err != nil {
return nil, err return nil, err
} }
} else if page.Codes.JS.Code != "" { } else if page.Codes.JS.Code != "" {
code := fmt.Sprintf("%s\n%s", injectScript, page.Codes.JS.Code) code := componentInitScript(arguments, page.Codes.JS.Code)
source, imports, err = page.CompileJS([]byte(code), option.ScriptMinify) source, imports, err = page.CompileJS([]byte(code), option.ScriptMinify)
if err != nil { if err != nil {
return nil, err return nil, err

View file

@ -132,9 +132,11 @@ const componentInitScriptTmpl = `
return r.Exec(name, data); return r.Exec(name, data);
}; };
%s
if (this.root.getAttribute("initialized") != 'true') { if (this.root.getAttribute("initialized") != 'true') {
this.root.setAttribute("initialized", 'true'); __self.root.setAttribute("initialized", 'true');
this.root.addEventListener("state:change", function (event) { __self.root.addEventListener("state:change", function (event) {
const name = this.getAttribute("s:cn"); const name = this.getAttribute("s:cn");
const target = event.detail.target; const target = event.detail.target;
const key = event.detail.key; const key = event.detail.key;
@ -143,6 +145,7 @@ const componentInitScriptTmpl = `
const state = new __sui_state(component); const state = new __sui_state(component);
state.Set(key, value, target) state.Set(key, value, target)
}); });
__self.once && __self.once();
} }
` `
@ -181,8 +184,8 @@ func compEventInjectScript(eventID, eventName, component, dataKeys, jsonKeys, ha
return fmt.Sprintf(compEventScriptTmpl, eventID, eventID, eventName, dataKeys, jsonKeys, component, component, handler) return fmt.Sprintf(compEventScriptTmpl, eventID, eventID, eventName, dataKeys, jsonKeys, component, component, handler)
} }
func componentInitScript(root string) string { func componentInitScript(root string, source string) string {
return fmt.Sprintf(componentInitScriptTmpl, root) return fmt.Sprintf(componentInitScriptTmpl, root, source)
} }
// BackendScript inject the backend script // BackendScript inject the backend script