Support <script id="data" type="application/json"> blocks for more easily embedding data in html

[marceloverdijk]

Body

Summary

Please add support for <script id="data" type="application/json"> blocks based on data from frontmatter.

Background & Motivation

Currently there are 2 ways to pass frontmatter data to client script:

1. https://docs.astro.build/en/guides/client-side-scripts/#pass-frontmatter-variables-to-scripts
2. https://docs.astro.build/en/reference/directives-reference/#definevars

The first suggests to use data-* attributes on components or html elements, and the second suggests:

<script define:vars={{ people }}>
  // do something
</script>

causing the data var to be put in a IIFE:

<script>
  (function() {
    const people = [ ... ];
  })();
</script>

which is not useful in all cases, as it cannot be accessed outside.

For SSG websites it would be useful to be able to more easily embed data in html,
and the good thing is html has something for that:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html

<script id="people-data" type="application/json">
[
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
]
</script>


<script>
  const people = JSON.parse(document.getElementById("people-data").text);
  // do something
</script>

Goals

A concise, bulleted-list outlining the intended goals of this RFC.

• More easily embed (static) data in html
• More easily pass frontmatter variables to scripts

Example

---

const people = [..];

<script id="people-data" type="application/json"> {JSON.stringify(people)} </script>

[florian-lefebvre]

It's already possible using set:html={JSON.stringify(data)}

[marceloverdijk]

You are absolutely correct!