Top-level await integration and multiple script graphs #4419
Description
Consider this example, in the context of the upcoming TC39 top-level await proposal:
<!DOCTYPE html>
<script type=module src=a.mjs></script>
<script type=module src=b.mjs></script>// a.mjs
console.log("a1");
await new Promise(r => setTimeout(r, 100));
console.log("a2");// b.mjs
console.log("b");Should the output be:
- (Wait for start) a1, b, a2, or
- (Wait for finish) a1, a2, b?
That is, should the HTML script-execution infrastructure wait for the evaluation of the a.mjs script graph to run to completion and yield to the event loop, then start evaluating the b.mjs script graph? Or should it delay evaluating the b.mjs script graph until the a.mjs script graph's promise has settled?
Note that, per the TC39 semantics chosen, if instead the HTML file was
<!DOCTYPE html>
<script type=module>
import './a.mjs';
import './b.mjs';
</script>then the answer would be "wait for start". Should HTML depart from that?
My instinct is no; we should align <script>'s design with import's design and avoid earlier script graphs being able to indefinitely delay the evaluation of later ones. (Consider if a.mjs instead had await new Promise(() => {}).) The same reasoning given in the top-level await proposal seems to apply here; if b.mjs wants to wait on a.mjs, then b.mjs should take on an actual dependency (i.e., it should import './a.mjs'.) But, it is worth discussing, since we need to write the spec text and make a choice.
Since the issues are so similar between <script> and import, I encourage people to read the top-level await FAQ, which touches on import. Ideally we'd constrain this thread to discussing whether or not <script> should behave the same as import, and delegate the decision of how import behaves to that repository.
/cc @whatwg/modules