Describe the problem

If you have something like this...

<script>
  let { children } = $props();

  let answer = await sleep().then(() => 42);
</script>

<h1>the answer is {answer}</h1>
{@render children()}

...then currently we don't start rendering the component until everything in the <script> has finished running. If the children includes a component that has its own async work, it means that the work is delayed unnecessarily by the await sleep().

Describe the proposed solution

We should render things as they're ready. This requires some static analysis — if we try and run {await foo()} eagerly, we may discover that foo() reads bar which isn't ready yet — and as such there will inevitably be some false positives. But we can optimise 95% of cases.

It would be nice, too, if we could parallelize independent deriveds. The same static analysis would permit us to calculate a and b at the same time, provided we can see that get_b doesn't read a.

let a = $derived(get_a());
let b = $derived(get_b());

Importance

nice to have