Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork4.6k
Description
Just want to capture a thought I had the other day: it might be neat to have inlineawait
expressions in templates. We already have{#await ...}
blocks but they're overkill in some situations — you have to declare a name for the resolved value, which you might only be using once, and you might not need to worry about error states depending on what you're doing.
Imagine something like this (v3 syntax):
<script>asyncfunctionfibonacci(n){returnawaitfibonacciWorker.calculate(n);}</script><inputtype=numberbind:value={n}><p>The {n}th Fibonacci number is {await fibonacci(n)}</p>
It would integrate withSuspense, so it'd be convenient for doing this sort of thing (whereloadImage
resolves to its input, but only after ensuring that the image is loaded):
<script>importloadImagefrom'./utils.js';</script>{#each thumbnails as thumbnail}<imgalt={thumbnail.description}src="{await loadImage(thumbnail.src)}">{/each}
Of course, you'd need some way to have placeholder content, for situations where you're not using Suspense. Maybe this?
<p>The {n}th Fibonacci number is {await fibonacci(n) or '...'}</p>