feat: add JSExpression to support passing arbitrary JS to script temp…

…lates (#851) Co-authored-by: Corné de Jong <[email protected]> Co-authored-by: Adrian Hesketh <[email protected]> Co-authored-by: Adrian Hesketh <[email protected]>
a-h · Aug 18, 2024 · ef4dde6 · ef4dde6
1 parent 211912f
commit ef4dde6
Show file tree

Hide file tree

Showing 8 changed files with 312 additions and 216 deletions.
diff --git a/docs/docs/03-syntax-and-usage/12-script-templates.md b/docs/docs/03-syntax-and-usage/12-script-templates.md
@@ -403,3 +403,25 @@ After building and running the executable, running `curl http://localhost:8080/`
 	</body>
 </html>
 ```
+
+The `JSExpression` type is used to pass arbitrary JavaScript expressions to a templ script template.
+
+A common use case is to pass the `event` or `this` objects to an event handler.
+
+```templ
+package main
+
+script showButtonWasClicked(event templ.JSExpression) {
+	const originalButtonText = event.target.innerText
+	event.target.innerText = "I was Clicked!"
+	setTimeout(() => event.target.innerText = originalButtonText, 2000)
+}
+
+templ page() {
+	<html>
+		<body>
+			<button type="button" onclick={ showButtonWasClicked(templ.JSExpression("event")) }>Click Me</button>
+		</body>
+	</html>
+}
+```
diff --git a/generator/test-script-usage/expected.html b/generator/test-script-usage/expected.html
@@ -12,6 +12,11 @@
 }
 </script>
 <button hx-on::click="__templ_onClick_657d()" type="button">Button E</button>
+<script type="text/javascript">
+  function __templ_whenButtonIsClicked_253e(event){console.log(event.target)
+}
+</script>
+<button onclick="__templ_whenButtonIsClicked_253e(event)">Button F</button>
 <script type="text/javascript">
   function __templ_conditionalScript_de41(){alert("conditional");
 }

diff --git a/generator/test-script-usage/template.templ b/generator/test-script-usage/template.templ
@@ -20,12 +20,17 @@ script withComment() {
 	//'
 }
 
+script whenButtonIsClicked(event templ.JSExpression) {
+	console.log(event.target)
+}
+
 templ ThreeButtons() {
 	@Button("A")
 	@Button("B")
 	<button onMouseover="console.log('mouseover')" type="button">Button C</button>
 	<button hx-on::click="alert('clicked inline')" type="button">Button D</button>
 	<button hx-on::click={ onClick() } type="button">Button E</button>
+	<button onclick={ whenButtonIsClicked(templ.JSExpression("event")) }>Button F</button>
 	@Conditional(true)
 	@ScriptOnLoad()
 }

diff --git a/generator/test-script-usage/template_templ.go b/generator/test-script-usage/template_templ.go
diff --git a/runtime.go b/runtime.go
@@ -5,7 +5,6 @@ import (
 	"context"
 	"crypto/sha256"
 	"encoding/hex"
-	"encoding/json"
 	"errors"
 	"fmt"
 	"html"
@@ -491,42 +490,7 @@ func RenderAttributes(ctx context.Context, w io.Writer, attributes Attributes) (
 	return nil
 }
 
-// Script handling.
-
-func safeEncodeScriptParams(escapeHTML bool, params []any) []string {
-	encodedParams := make([]string, len(params))
-	for i := 0; i < len(encodedParams); i++ {
-		enc, _ := json.Marshal(params[i])
-		if !escapeHTML {
-			encodedParams[i] = string(enc)
-			continue
-		}
-		encodedParams[i] = EscapeString(string(enc))
-	}
-	return encodedParams
-}
-
-// SafeScript encodes unknown parameters for safety for inside HTML attributes.
-func SafeScript(functionName string, params ...any) string {
-	encodedParams := safeEncodeScriptParams(true, params)
-	sb := new(strings.Builder)
-	sb.WriteString(functionName)
-	sb.WriteRune('(')
-	sb.WriteString(strings.Join(encodedParams, ","))
-	sb.WriteRune(')')
-	return sb.String()
-}
-
-// SafeScript encodes unknown parameters for safety for inline scripts.
-func SafeScriptInline(functionName string, params ...any) string {
-	encodedParams := safeEncodeScriptParams(false, params)
-	sb := new(strings.Builder)
-	sb.WriteString(functionName)
-	sb.WriteRune('(')
-	sb.WriteString(strings.Join(encodedParams, ","))
-	sb.WriteRune(')')
-	return sb.String()
-}
+// Context.
 
 type contextKeyType int
 
@@ -603,95 +567,6 @@ func getContext(ctx context.Context) (context.Context, *contextValue) {
 	return ctx, v
 }
 
-// ComponentScript is a templ Script template.
-type ComponentScript struct {
-	// Name of the script, e.g. print.
-	Name string
-	// Function to render.
-	Function string
-	// Call of the function in JavaScript syntax, including parameters, and
-	// ensures parameters are HTML escaped; useful for injecting into HTML
-	// attributes like onclick, onhover, etc.
-	//
-	// Given:
-	//    functionName("some string",12345)
-	// It would render:
-	//    __templ_functionName_sha(&#34;some string&#34;,12345))
-	//
-	// This is can be injected into HTML attributes:
-	//    <button onClick="__templ_functionName_sha(&#34;some string&#34;,12345))">Click Me</button>
-	Call string
-	// Call of the function in JavaScript syntax, including parameters. It
-	// does not HTML escape parameters; useful for directly calling in script
-	// elements.
-	//
-	// Given:
-	//    functionName("some string",12345)
-	// It would render:
-	//    __templ_functionName_sha("some string",12345))
-	//
-	// This is can be used to call the function inside a script tag:
-	//    <script>__templ_functionName_sha("some string",12345))</script>
-	CallInline string
-}
-
-var _ Component = ComponentScript{}
-
-func writeScriptHeader(ctx context.Context, w io.Writer) (err error) {
-	var nonceAttr string
-	if nonce := GetNonce(ctx); nonce != "" {
-		nonceAttr = " nonce=\"" + EscapeString(nonce) + "\""
-	}
-	_, err = fmt.Fprintf(w, `<script type="text/javascript"%s>`, nonceAttr)
-	return err
-}
-
-func (c ComponentScript) Render(ctx context.Context, w io.Writer) error {
-	err := RenderScriptItems(ctx, w, c)
-	if err != nil {
-		return err
-	}
-	if len(c.Call) > 0 {
-		if err = writeScriptHeader(ctx, w); err != nil {
-			return err
-		}
-		if _, err = io.WriteString(w, c.CallInline); err != nil {
-			return err
-		}
-		if _, err = io.WriteString(w, `</script>`); err != nil {
-			return err
-		}
-	}
-	return nil
-}
-
-// RenderScriptItems renders a <script> element, if the script has not already been rendered.
-func RenderScriptItems(ctx context.Context, w io.Writer, scripts ...ComponentScript) (err error) {
-	if len(scripts) == 0 {
-		return nil
-	}
-	_, v := getContext(ctx)
-	sb := new(strings.Builder)
-	for _, s := range scripts {
-		if !v.hasScriptBeenRendered(s.Name) {
-			sb.WriteString(s.Function)
-			v.addScript(s.Name)
-		}
-	}
-	if sb.Len() > 0 {
-		if err = writeScriptHeader(ctx, w); err != nil {
-			return err
-		}
-		if _, err = io.WriteString(w, sb.String()); err != nil {
-			return err
-		}
-		if _, err = io.WriteString(w, `</script>`); err != nil {
-			return err
-		}
-	}
-	return nil
-}
-
 var bufferPool = sync.Pool{
 	New: func() any {
 		return new(bytes.Buffer)

diff --git a/runtime_test.go b/runtime_test.go
@@ -377,85 +377,6 @@ func TestClassesFunction(t *testing.T) {
 	}
 }
 
-func TestRenderScriptItems(t *testing.T) {
-	s1 := templ.ComponentScript{
-		Name:     "s1",
-		Function: "function s1() { return 'hello1'; }",
-	}
-	s2 := templ.ComponentScript{
-		Name:     "s2",
-		Function: "function s2() { return 'hello2'; }",
-	}
-	tests := []struct {
-		name     string
-		toIgnore []templ.ComponentScript
-		toRender []templ.ComponentScript
-		expected string
-	}{
-		{
-			name:     "if none are ignored, everything is rendered",
-			toIgnore: nil,
-			toRender: []templ.ComponentScript{s1, s2},
-			expected: `<script type="text/javascript">` + s1.Function + s2.Function + `</script>`,
-		},
-		{
-			name: "if something outside the expected is ignored, if has no effect",
-			toIgnore: []templ.ComponentScript{
-				{
-					Name:     "s3",
-					Function: "function s3() { return 'hello3'; }",
-				},
-			},
-			toRender: []templ.ComponentScript{s1, s2},
-			expected: `<script type="text/javascript">` + s1.Function + s2.Function + `</script>`,
-		},
-		{
-			name:     "if one is ignored, it's not rendered",
-			toIgnore: []templ.ComponentScript{s1},
-			toRender: []templ.ComponentScript{s1, s2},
-			expected: `<script type="text/javascript">` + s2.Function + `</script>`,
-		},
-		{
-			name: "if all are ignored, not even style tags are rendered",
-			toIgnore: []templ.ComponentScript{
-				s1,
-				s2,
-				{
-					Name:     "s3",
-					Function: "function s3() { return 'hello3'; }",
-				},
-			},
-			toRender: []templ.ComponentScript{s1, s2},
-			expected: ``,
-		},
-	}
-	for _, tt := range tests {
-		tt := tt
-		t.Run(tt.name, func(t *testing.T) {
-			ctx := context.Background()
-			b := new(bytes.Buffer)
-
-			// Render twice, reusing the same context so that there's a memory of which classes have been rendered.
-			ctx = templ.InitializeContext(ctx)
-			err := templ.RenderScriptItems(ctx, b, tt.toIgnore...)
-			if err != nil {
-				t.Fatalf("failed to render initial scripts: %v", err)
-			}
-
-			// Now render again to check that only the expected classes were rendered.
-			b.Reset()
-			err = templ.RenderScriptItems(ctx, b, tt.toRender...)
-			if err != nil {
-				t.Fatalf("failed to render scripts: %v", err)
-			}
-
-			if diff := cmp.Diff(tt.expected, b.String()); diff != "" {
-				t.Error(diff)
-			}
-		})
-	}
-}
-
 type baseError struct {
 	Value int
 }