Svelte

Setup

npm install @likftc/core @likftc/svelte

Usage

<Likftc keys={frame} let:get />

<!-- custom generator -->
<script>
  import { v4 } from "uuid";
</script>
<Likftc keys={frame} generator={v4} let:get />

Types:

type keys = (string | number)[];
type generator = (() => string | number) | undefined;

and replace the key with get(key):

- {#each keys as key (key)}
+ {#each keys as key (get(key))}
    <li
      animate:flip={{ duration: 1000 }}
      transition:fade|local={{ duration: 1000 }}
    >
      {key}
    </li>
  {/each}

Demo

<script lang="ts">
  import Likftc from "@likftc/svelte";
  import { flip } from "svelte/animate";
  import { fade } from "svelte/transition";
  import { v4 } from "uuid";
  import Frame from "./Frame.svelte";
</script>

<ul>
  <Frame let:frame>
    <Likftc keys={frame} generator={v4} let:get>
      {#each frame as item (get(item))}
        <li
          animate:flip={{ duration: 1000 }}
          transition:fade|local={{ duration: 1000 }}
        >
          {item}
        </li>
      {/each}
    </Likftc>
  </Frame>
</ul>

<script lang="ts">
  import { flip } from "svelte/animate";
  import { fade } from "svelte/transition";
  import Frame from "./Frame.svelte";
</script>

<ul>
  <Frame let:frame>
    {#each frame as item (item)}
      <li
        animate:flip={{ duration: 1000 }}
        transition:fade|local={{ duration: 1000 }}
      >
        {item}
      </li>
    {/each}
  </Frame>
</ul>

Check the full demo code here.