Identify blocks outside of keyed each

[Oreilles]

Consider this sample code

let array = [{foo:'bar'},{foo:'baz'}]

<div class=array>
    {#each array as element}
    <div class=element>
        {#if element}
            <div class=element
             in:receive={{key:element}}
             out:send={{key:element}}
            />
        {/if}
        </div>
    {/each}
</div>

In that context, if you swap array[0] and array[1], none of the receive and send transition will be triggered, because Svelte considerers that <div class=element /> did not went out, then in the DOM, even though it does not correspond to the same array element before and after the swap.
https://svelte.dev/repl/92dca5bdbeef4b939a10eb426b5807e5?version=3.20.1

There is however a way to make it work using a keyed each block wrapper around the element you want to use send and receive with.

<div class=array>
    {#each array as element}
    <div class=element>
        {#if element}
            {#each [element] as element(element)}
                <div class=element
                 in:receive={{key:element}}
                 out:send={{key:element}}
                />
            {/each}
        {/if}
        </div>
    {/each}
</div>

Using a keyed each block wrapper makes Svelte acknowledge that the elements actually changed, and then trigger the receive and send transition.
https://svelte.dev/repl/da8f3f844c07429c8a8fe401adde3092?version=3.20.1

It however seems like a hack since a keyed eachblock wasn't designed for this. Could there be any other way to handle this ?

[Conduitry]

This sounds like a duplicate of #1469.

[Oreilles]

Indeed