Make hx-header and hx-vals JS eval more consistent with expectations
... while also preserving deprecated hx-vars functionality.
Description
Corresponding issue: https://github.com/bigskysoftware/htmx/issues/2619
The docs don't make it clear that the underlying getValuesForElement function adds curly braces for anything without, even when evaluating JS, causing weird cases where you can't just eval a function to add headers, you have to wrap in curly braces and spread the result.
This change makes it so anything in the string after js: or javascript: will be treated as you would normally expect an eval to go, while making it clear in the code that the curly-brace placement only applies for deprecated hx-vars.
Docs for hx-headers also updated with an example, similar to hx-vals, which uses the same function under the hood to evaluate.
Testing
Tests have been updated and code updated to match to make code execution possible.
Checklist
- [x] I have read the contribution guidelines
- [x] I have targeted this PR against the correct branch (
masterfor website changes,devfor source changes) - [x] This is either a bugfix, a documentation update, or a new feature that has been explicitly approved via an issue
- [x] I ran the test suite locally (
npm run test) and verified that it succeeded