Feature request: Ability to key a non-each component

[jacobmischka]

It would be handy if we could force recreation of components sometimes, even if they're not within an each block.

For example, in react I could have used a key to workaround my issue in #1467 and force the component to remake itself from scratch and readd the defaults.

Thanks again!

[dodas]

I would like to see this as well.
Meanwhile, we can workaround it using each: https://svelte.dev/repl/98b4af7d68594958b89d9fc9e069171c?version=3.2.2

<script>
let key = 1;

setInterval(() => {
  key++;
}, 1000);
</script>

{#each [key] as k (k)}
  <div>
    {Math.random()}
  </div>
{/each}

[jacobmischka]

Ha oh duh, that's clever; wish I'd thought of that.

[stijnvanderlaan]

This would be nice! But great workaround!

[Conduitry]

So it's not lost in Discord:

https://discordapp.com/channels/457912077277855764/506988048375087114/607596367577088035

[tivac]

{#key <id>}...{/key} is my strong preference for both back-compat and clarity.

[jacobmischka]

Agreed, I think {#key} syntax would be perfect.

[rixo]

+1 for {#key}, I find it more aligned with Svelte principle of not requiring a unique root node.

Meanwhile, I wrapped the workaround into a component and published it as an npm package: https://github.com/rixo/svelte-key

[jesseskinner]

I agree about {#key id}. I think this is really useful at times, and often lets you write much simpler components. The workaround with {#each [x] as x (x)} works but is inelegant. Using svelte-key is the best option we have at the moment but I'd rather it be built-in.

I'd be happy to take on the work of implementing if this proposal gets approved.