Await expressions

[Rich-Harris]

Just want to capture a thought I had the other day: it might be neat to have inline await 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>
  async function fibonacci(n) {
    return await fibonacciWorker.calculate(n);
  }
</script>

<input type=number bind:value={n}>
<p>The {n}th Fibonacci number is {await fibonacci(n)}</p>

It would integrate with Suspense, so it'd be convenient for doing this sort of thing (where loadImage resolves to its input, but only after ensuring that the image is loaded):

<script>
  import loadImage from './utils.js';
</script>

{#each thumbnails as thumbnail}
  <img alt={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>

[nsivertsen]

This would make a lot of things easier, especially around lazy-loading.

One question: This would only ever run on the client, and not in SSR, correct?

[Rich-Harris]

With the current SSR process, yeah. I'd like to look into ways we could accommodate async/streaming SSR in v3 though

[tivac]

@Rich-Harris Your Suspense link is just a link back to this same issue. 🤔

[Rich-Harris]

D'oh. Fixed

[RedHatter]

I really like this. I tend to work with promises a lot and this would make most of my use cases a lot cleaner and easier.

[frederikhors]

It would be amazing! Please! :)

[ansarizafar]

Any new update?

[rohanrichards]

I was just looking over the docs today for inline awaits. I am predominantly an Angular developer and am used to this syntax in the templates (html)

<div>{{promiseResult | await}}</div>

I'm currently writing some Svelte UI code that right now looks like this:

{#await streamlabsInterface.getSourceNameFromId(node.sourceId) then name}{name}{/await}

Ignoring the over-verbosity of my class/method names, inline await would make this much nicer to work with, are pipes a possibility at all in Svelte?

[dummdidumm]

O more general solution would be to leverage the pipe syntax like rohan suggests. This would make it possible to provide other features besides await and users would be able to provide custom ones themselves.