Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support go expressions in script elements #1065

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

a-h
Copy link
Owner

@a-h a-h commented Feb 9, 2025

Support the use of Go variables within <script> elements.

package testscriptexpressions

templ Script[T any](name string, data T) {
	<h1>{ name }</h1>
	<script>
		var a = {{ data }}
		var b = "{{ data }}"
		var c = '{{ data }}'
		var d = `{{ data }}`
	</script>
	<script>
		console.log({{ data }})
	</script>
}

templ AllTests() {
	@Script("string data", "hello")
	@Script("string data with quotes", "hello 'world'")
	@Script("numeric data", 123)
	@Script("boolean data", true)
	@Script("array data", []int{1, 2, 3})
	@Script("object data", struct {
		Name string
		Age  int
	}{"Alice", 30})
	@Script[*string]("null data", nil)
}

Result is:

<h1>string data</h1>
<script>
		var a = "hello"
		var b = "hello"
		var c = 'hello'
		var d = `hello`
</script>
<script>
		console.log("hello")
</script>
<h1>string data with quotes</h1>
<script>
		var a = "hello 'world'"
		var b = "hello \u0027world\u0027"
		var c = 'hello \u0027world\u0027'
		var d = `hello \u0027world\u0027`
</script>
<script>
		console.log("hello 'world'")
</script>
<h1>numeric data</h1>
<script>
		var a = 123
		var b = "123"
		var c = '123'
		var d = `123`
</script>
<script>
		console.log(123)
</script>
<h1>boolean data</h1>
<script>
		var a = true
		var b = "true"
		var c = 'true'
		var d = `true`
</script>
<script>
		console.log(true)
</script>
<h1>array data</h1>
<script>
		var a = [1,2,3]
		var b = "[1,2,3]"
		var c = '[1,2,3]'
		var d = `[1,2,3]`
</script>
<script>
		console.log([1,2,3])
</script>
<h1>object data</h1>
<script>
		var a = {"Name":"Alice","Age":30}
		var b = "{\u0022Name\u0022:\u0022Alice\u0022,\u0022Age\u0022:30}"
		var c = '{\u0022Name\u0022:\u0022Alice\u0022,\u0022Age\u0022:30}'
		var d = `{\u0022Name\u0022:\u0022Alice\u0022,\u0022Age\u0022:30}`
</script>
<script>
		console.log({"Name":"Alice","Age":30})
</script>
<h1>null data</h1>
<script>
		var a = null
		var b = "null"
		var c = 'null'
		var d = `null`
</script>
<script>
		console.log(null)
</script>

@a-h a-h marked this pull request as draft February 9, 2025 15:19
@a-h
Copy link
Owner Author

a-h commented Feb 9, 2025

Needs an update to the documentation.

}
} else {
// <script></script>
if err = g.writeElementScript(indentLevel, n.Attributes); err != nil {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was confusing at first, but I understand now. This handles script components.


type scriptElementParser struct{}

func (p scriptElementParser) Parse(pi *parse.Input) (n Node, ok bool, err error) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be a parseFunc.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IIRC, function vars cause an allocation on init, hence a minor preference for not having them.

@a-h a-h force-pushed the add_go_expressions_in_script_elements branch from d87fc9b to a06e960 Compare February 23, 2025 18:29
@a-h a-h marked this pull request as ready for review February 23, 2025 18:30
@a-h
Copy link
Owner Author

a-h commented Feb 23, 2025

I think this is ready for review now. I ran the fuzz tests for a few hours, getting through about 73M tests without issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants