Make hx-header and hx-vals JS eval more consistent with expectations

[samfurr]

... while also preserving deprecated hx-vars functionality.

Description

Corresponding issue: #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

• I have read the contribution guidelines
• I have targeted this PR against the correct branch (master for website changes, dev for
  source changes)
• This is either a bugfix, a documentation update, or a new feature that has been explicitly
  approved via an issue
• I ran the test suite locally (npm run test) and verified that it succeeded