Accessing variables defined in `--- ---` in `<script>`

[loud panther]

Hello everyone,

as the title already explains the question I have, I still want to provide some context.

I am using the amcharts5 libary for creating dynamic maps for my blog. As I have a CMS connected to it I wanted to ask if the following is possible and if so, how.

Map.astro

---
// getting data from CMS (filler)
const data = "germany";

let country;
if (data == "germany") {
  country = "de_DE";
}
---
<div id="chartdiv"></div>
<script>
  import * as am5 from "@amcharts/amcharts5";

  let root = am5.Root.new("chartdiv");
  root.locale = country;
  /// simplified example
</script>

I am not able to do everything in the code fences because amcharts does not work that way. I would like to access Astro variables aswell in the <script> Tag but that does also not seem to be possible.

Am i missing something major or is my apporach just not possible.

Thanks in advance,
David

[lean mirage]

https://docs.astro.build/en/guides/client-side-scripts/#pass-frontmatter-variables-to-scripts

[loud panther]

thanks for that. I have missed that. But can I can't pass data-attributes to script tags. so I would have to create some sort of "config" div ?

[lean mirage]

You normally could, but not since you have an npm import in your script tag

[loud panther]

what would the best practice be in my sort of case

[lean mirage]

If your script tag could've been inline, you could've have used this instead: https://docs.astro.build/en/reference/directives-reference/#definevars

I guess a "config" div like you said isn't too bad