New rule proposal `prefer-boundaries`

[T1xx1]

Motivation

With async Svelte and remote functions, there are 2 ways to handle async values: await blocks and boundaries with pending/failed snippets.

In this video https://youtu.be/z0f7NLPdLYE?t=329 from Svelte society, boundaries are recommended over await blocks.

Await blocks are also not great when you need to await for 2 or more async values.

Description

prefer-boundaries which errors with await blocks

Examples

<!-- ✓ GOOD -->
<svelte:boundary>
    {@const asyncValue = await asyncValue()}
    ...

    {#snippet pending()}
        ...
    {/snippet}
    {#snippet failed()}
        ...
    {/snippet}
</svelte:boundary>

<!-- ✗ BAD -->
{#await asyncValue()}
    ...
{:then asyncValue}
    ...
{:catch error}
    ...
{/await}

<!-- Things can get really bad with nested awaits -->
<!-- ✓ GOOD -->
<svelte:boundary>
    {@const asyncValue = await asyncValue()}
    {@const asyncValue2 = await asyncValue2()}
    ...

    {#snippet pending()}
        ...
    {/snippet}
    {#snippet failed()}
        ...
    {/snippet}
</svelte:boundary>

<!-- ✗ BAD -->
{#await asyncValue()}
    {#await asyncValue()}
        ...
    {:then asyncValue}
        ...
    {:catch error}
        ...
    {/await}
{:then asyncValue}
    ...
{:catch error}
    ...
{/await}

Additional comments

No response

[marekdedic]

Hmm, is this applicable to all {#await} blocks? Because I remember using them even before async svelte and <svelte:boundary> were added...