{#await expression catch error} control structure for #await block

There are cases where a dev may use data returned from a single promise in multiple places within a template. In the event of an error, it may be desirable to display an error message in a single location rather than in catch scope every place there is an #await block associated with that promise. Currently, the Svelte syntax does not make this easy to do. For example:

<script>
  let promise = fetchSomeData();
</script>

{#await promise}
  <p>waiting for the promise to resolve...</p>
{:then value}
  <p>The value is {value.firstPart}</p>
{:catch error}
  <p>Something went wrong: {error.message}</p>
{/await}

...

{#await promise}
  <p>waiting for the promise to resolve...</p>
{:then value}
  <p>The value is {value.secondPart}</p>
{:catch error}
  <p>I'm starting to repeat myself: {error.message}</p>
{/await}

Proposed solution

Svelte currently provides three control structures within an #await block:

{#await expression}...{:then name}...{:catch name}...{/await} {#await expression}...{:then name}...{/await} {#await expression then name}...{/await}

I propose adding a fourth:

{#await expression catch name}...{/await}

In the event that no error is thrown the content within this structure would never be rendered. This would allow you to address the problem as below:

<script>
  let promise = fetchSomeData();
</script>

{#await promise catch error}
  <p>You're not going to see anything below because of {error.message}</p>
{/await}

...

{#await promise}
  <p>waiting for the promise to resolve...</p>
{:then value}
  <p>The value is {value.firstPart}</p>
{/await}

...

{#await promise}
  <p>waiting for the promise to resolve...</p>
{:then value}
  <p>The value is {value.secondPart}</p>
{/await}

Possible alternatives

I considered whether this could already be achieved in some manner within Svelte. However, a structure such as the following currently returns no output under any conditions:

{#await promise}
{:catch error}
  <p>{error.message} in one place</p>
{/await}

That’s probably a good thing as such a structure is not very idiomatic. To achieve something that’s comparable with the proposed solution above you have to insert empty tags or insert some content for the sake of it, which is also not ideal:

{#await promise}
    <p></p>
{:then value}
    <p></p>
{:catch error}
  <p>{error.message} in one place</p>
{/await}

This is not a make-or-break feature for me but would be a nice addition to Svelte, I suspect it would be unlikely to clash with other features, and would make the syntax even more expressive.

Thanks for the great library!

[Conduitry]

#3734 fixes up the parsing here, and lets you use {#await} with a {:catch} and no {:then}. I don’t think we really need another form {#await expression catch error} probably, so I’m closing this.

[Conduitry]

I would expect something like

{#await Promise.reject('foo')}
{:catch error}
  <p>{error}</p>
{/await}

to work, but it looks like that’s not getting parsed correctly. I think we should support at least that, but your proposed new syntax might also be nice.