Variable scope, <script> tage with type="module" option? (firebase)

I’m trying to use a firebase database in p5js to read and write a high score table for a game. I followed Shiffman’s Firebase: Saving Data - Programming with Text video, but it’s now out of date. I’m trying to build an example like his, but with up-to-date firebase API syntax. I’m not there yet, but have a general question about scope.

If I declare a variable in my index.html like this:

<script language="javascript">
 // DEBUG try to use in p5js
  var testData = { "name":"AWS", "score":36 };
</script>

I can use the variable testData in my p5js code, i.e. its scope extends into my p5js code. However, if I include type=“module” in the script tag, like this:

<script language="javascript" type="module">
 // DEBUG try to use in p5js
  var testData = { "name":"AWS", "score":36 };
</script>

The scope of testData doesn’t extend into the p5js script.

This matters because in the new firebase syntax, the libraries/functions for the firebase API need the type=“module” option in the script tag. This prevents me from using the API functions inside my p5js code.

Any advice?

Albert

Perhaps not the best solution but, if I do the following, I can get a global variable:

<script> var globalTestData; </script>
<script language="javascript" type="module">
 // DEBUG try to use in p5js
  var testData = { "name":"AWS", "score":36 };
  globalTestData = testData;
</script>

Then I can access globalTestData in my p5js script.

Easiest way to make something globally accessed is appending a property to the window or globalThis:

globalThis.testData = { name: "AWS", score: 36 };

No need to declare a global variable testData for it. :wink: