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.

[PierBover]

This would be handy.

I've resorted to using a fake array with one element as @dodas suggested for a router I'm working on:

<script>
  import Route from 'router/Route.svelte';
  import {currentRoute} from 'router';

  let configArray;

  $: {
    configArray = [{
      key: Date.now(),
      components: $currentRoute.components
    }]
  }
</script>

{#each configArray as config (config.key)}
  <Route components={config.components}></Route>
{/each}

[arafatamim]

I second this. Could be useful in animating list items outside an each block.

<div class="grid">
    {#each items as item, index (item.id)}
      <div animate:flip
        transition:fade
        class="grid-item"
        on:click={() => deleteItem(index)}
      >
      {item.value}
      </div>
    {/each}
    <button class="add-new" on:click={addItem}>
        Add item
    </button> <!-- Cannot apply animation to this element -->
</div>

[Conduitry]

You can now do {#key expression}...{/key} in 3.28.0 - thanks @tanhauhau! 🎉