feat: support script templates for hx-on attributes (#134)

fixes #126

generator/generator.go

@@ -901,12 +901,21 @@ func (g *generator) writeElementCSS(indentLevel int, n parser.Element) (err erro
 	return g.writeAttributesCSS(indentLevel, n.Attributes)
 }
 
+func isScriptAttribute(name string) bool {
+	for _, prefix := range []string{"on", "hx-on:"} {
+		if strings.HasPrefix(name, prefix) {
+			return true
+		}
+	}
+	return false
+}
+
 func (g *generator) writeElementScript(indentLevel int, n parser.Element) (err error) {
 	var scriptExpressions []string
 	for i := 0; i < len(n.Attributes); i++ {
 		if attr, ok := n.Attributes[i].(parser.ExpressionAttribute); ok {
 			name := html.EscapeString(attr.Name)
-			if strings.HasPrefix(name, "on") {
+			if isScriptAttribute(name) {
 				scriptExpressions = append(scriptExpressions, attr.Expression.Value)
 			}
 		}
@@ -1006,7 +1015,7 @@ func (g *generator) writeExpressionAttribute(indentLevel int, elementName string
 			return err
 		}
 	} else {
-		if strings.HasPrefix(attr.Name, "on") {
+		if isScriptAttribute(attr.Name) {
 			// It's a JavaScript handler, and requires special handling, because we expect a JavaScript expression.
 			vn := g.createVariableName()
 			// var vn templ.ComponentScript =

generator/test-script-usage/expected.html

@@ -1,5 +1,12 @@
-	<script type="text/javascript">function __templ_withParameters_1056(a, b, c){console.log(a, b, c);}function __templ_withoutParameters_6bbf(){alert("hello");}</script>
-	<button onClick="__templ_withParameters_1056(&#34;test&#34;,&#34;A&#34;,123)" onMouseover="__templ_withoutParameters_6bbf()" type="button">A</button>
-	<button onClick="__templ_withParameters_1056(&#34;test&#34;,&#34;B&#34;,123)" onMouseover="__templ_withoutParameters_6bbf()" type="button">B</button>
-	<button onMouseover="console.log(&#39;mouseover&#39;)" type="button">Button C</button>
+<script type="text/javascript">
+	function __templ_withParameters_1056(a, b, c){console.log(a, b, c);}function __templ_withoutParameters_6bbf(){alert("hello");}
+</script>
+<button onClick="__templ_withParameters_1056(&#34;test&#34;,&#34;A&#34;,123)" onMouseover="__templ_withoutParameters_6bbf()" type="button">A</button>
+<button onClick="__templ_withParameters_1056(&#34;test&#34;,&#34;B&#34;,123)" onMouseover="__templ_withoutParameters_6bbf()" type="button">B</button>
+<button onMouseover="console.log(&#39;mouseover&#39;)" type="button">Button C</button>
+<button hx-on::click="alert('clicked inline')" type="button">Button D</button>
+<script type="text/javascript">
+  function __templ_onClick_657d(){alert("clicked");}
+</script>
+<button hx-on::click="__templ_onClick_657d()" type="button">Button E</button>
 

generator/test-script-usage/template.templ

@@ -8,13 +8,19 @@ script withoutParameters() {
 	alert("hello");
 }
 
+script onClick() {
+	alert("clicked");
+}
+
 templ Button(text string) {
 	<button onClick={ withParameters("test", text, 123) } onMouseover={ withoutParameters() } type="button">{ text }</button>
 }
 
 templ ThreeButtons() {
 	{! Button("A") }
-	{! Button("B") }
-	<button onMouseover="console.log('mouseover')" type="button">Button C</button>
+	@Button("B")
+	<button onMouseover="console.log(&#39;mouseover&#39;)" type="button">Button C</button>
+	<button hx-on::click="alert(&#39;clicked inline&#39;)" type="button">Button D</button>
+	<button hx-on::click={ onClick() } type="button">Button E</button>
 }