How to render Go-side strings inside <script> tags?

[metaleap]

Scenario:

templ Foo(obj MyStruct) {
    <div>foo</div>
    if obj.MyGlobalVarValue() != "" {
        <script>
        previouslyDeclaredJSGlobal = '{ obj.MyGlobalVarValue() }' // <---plz!
        </script>
    }
}

Generated Go output unfortunately roughly:

		if obj.MyGlobalVarValue() != "" {
			_, err = templBuffer.WriteString("<script>")
			if err != nil {
				return err
			}
			var_4 := `
        previouslyDeclaredJSGlobal = '{ obj.MyGlobalVarValue() }' // <---oh-noez!
                `
			_, err = templBuffer.WriteString(var_4)
			if err != nil {
				return err
			}
			_, err = templBuffer.WriteString("</script>")
			if err != nil {
				return err
			}
		}

Using " or \`` instead of '`, similar outcome.

Evidently {-} is not operative inside <script> tags (sanely so, considering). So what's the syntax? Because I tried {{ expr }} and @expr too...

[a-h]

Hi, and sorry for the late reply.

<script> tags are not currently interpreted by templ, i.e. there's currently no way to place Go strings directly inside script tags within templ.

This is for safety. The script handling templates that templ does provide allow for the creation of JavaScript functions that accept parameters. These functions use JSON escaping for Go inputs to those functions to prevent malicious user-controlled strings from being used in unsafe contexts as per Google's SafeHTML.

It could be possible to update templ to do context-aware escaping within script elements in future, but it's not supported today.

However, templ is flexible, you can do whatever you want in Go code, even if it's unsafe. So, for this use case, if you're sure you want to do it, you can drop into a bit of Go.

func RenderGlobalVariable(updated string) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		// This is unsafe - there's no escaping of the updated value here.
		s := fmt.Sprintf("<script>previouslyDeclaredJSGlobal = '%s';</script>", updated)
		_, err := w.Write([]byte(s))
		return err
	})
}

And you can use that inside your component, passing arbitrary Go strings.

@RenderGlobalVariable("myVariableName")

There's a conversation going on around being able to call templ script templates from places other than element event handlers, that will provide an alternative solution to this when it ships.

// Create a constant client-side variable.
templ page() {
  <script>let globalVariable = "";</script>
}

// This creates a script tag with an "updateGlobal" JavaScript function inside it.
script updateGlobal(value string) {
  globalVariable = value;
}

// This will render a script tag that calls the "updateGlobal" JavaScript function.
templ updateGlobalOnRender(withValue string) {
  templ.Call(updateGlobal(withValue))
}

[iburris]

There's a conversation going on around being able to call templ script templates from places other than element event handlers, that will provide an alternative solution to this when it ships.

@a-h, do I understand correctly that you can only call ComponentScript from event handlers? If so, does that mean the console example at the end of https://templ.guide/syntax-and-usage/script-templates is not valid?

[a-h]

My comment about only being able to call ComponentScripts from event handlers was true on October 16th, but since abe23c6 (released in https://github.com/a-h/templ/releases/tag/v0.2.476), you're able to render a ComponentScript directly in templates.