proposal: add templ.JSONScript and templ.JSON functions

[a-h]

The page at https://templ.guide/syntax-and-usage/script-templates currently mentions the use of the templ script script template as the main way to pass Go data to scripts, and demonstrates the use of onclick attributes, which are listed as not best practice in MDN.

In the draft PR at https://github.com/a-h/templ/pull/738/files I demonstrate how to use data attributes and script elements to pass data, and following the best practice described in MDN docs.

However, I needed to create:

• A function to create a JSON string from a given set of data, so that it can be used to populate an attribute (the proposed templ.JSON function)
• A function to create a <script> element containing JSON data (the proposed templ.JSONScript function).

I propose:

• Updating the docs based on PR docs: add typescript usage example #738 so that it:
  • Demonstrates how to use attributes and script tags to pass data from backend to frontend
  • Demonstrates use of the NPM ecosystem
  • Demonstrates the use of esbuild to bundle
  • Recommends against the use of templ script, on the basis that the developer experience of writing JS/TS inside a TS file is better, and can more easily include intellisense etc.
• Adding the templ.JSONScript and templ.JSON functions.

Thoughts?

[a-h]

As per #601, the templ.JSONScript function should also include a CSP nonce in the <script> tag as an additional requirement.

[joerdav]

This makes a lot of sense to me, I think external JS/TS files is the way to go for DX, we can't match and keep up with that experience in templ scripts without a ton of complexity. I like that it's a step towards the rendered HTML being more similar to the originally written template too.

Additional functions proposed make sense too, we've seen enough people asking how to do this that a runtime function seems fitting.

[CoreyCole]

This sounds great to me. I am exploring incremental adoption of templ SSR in a react project with a go api.

[a-h]

Added PR in #745