chore: enable svelte/require-each-key (#2694)

* chore: enable svelte/require-each-key
Signed-off-by: Philippe Martin <[email protected]>

* test: make keys unique in tests
Signed-off-by: Philippe Martin <[email protected]>

Author: feloy

eslint.config.mjs

@@ -234,7 +234,6 @@ export default [
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/ban-types': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',
-      'svelte/require-each-key': 'off',
       'svelte/infinite-reactive-loop': 'off',
     },
   },

packages/frontend/src/lib/RecipeCardTags.svelte

@@ -117,7 +117,7 @@ function toggleExpanded(): void {
   class="w-full flex flex-row gap-2 py-2"
   class:overflow-hidden={!expanded}
   class:flex-wrap={expanded}>
-  {#each TAGS as tag, i}
+  {#each TAGS as tag, i (tag)}
     <div bind:this={divTags[i]}>
       <Badge class="{getBGColor(tag)} {getTextColor(tag)}" content={updateContent(tag)} />
     </div>

packages/frontend/src/lib/RecipesCard.svelte

@@ -14,7 +14,7 @@ export let recipes: Recipe[];
       <div class="text-gray-400 mt-2">There is no recipe in this category for now ! Come back later</div>
     {/if}
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4">
-      {#each recipes as recipe}
+      {#each recipes as recipe (recipe.id)}
         <RecipeCard recipe={recipe} />
       {/each}
     </div>

packages/frontend/src/lib/conversation/ChatMessage.svelte

@@ -55,7 +55,7 @@ function elapsedTime(msg: AssistantChat): string {
     class:bg-[var(--pd-content-card-inset-bg)]={isAssistantChat(message)}
     class:ml-8={isAssistantChat(message)}
     class:mr-8={isUserChat(message)}>
-    {#each getMessageParagraphs(message) as paragraph}
+    {#each getMessageParagraphs(message) as paragraph (paragraph)}
       <p>{paragraph}</p>
     {/each}
   </div>

packages/frontend/src/lib/progress/TasksProgress.svelte

@@ -7,7 +7,7 @@ export let tasks: Task[] = [];
 </script>
 
 <ul class="space-y-2 text-[var(--pd-content-card-text)] list-inside">
-  {#each tasks as task}
+  {#each tasks as task (task.id)}
     <li class="flex flex-col rounded-md bg-[var(--pd-content-card-bg)] p-2">
       <TaskItem task={task} />
       <ExpandableMessage message={task.error} title="View Error" />

packages/frontend/src/lib/table/service/ServiceColumnModelName.spec.ts

@@ -31,6 +31,7 @@ test('the model name should be displayed', async () => {
       health: undefined,
       models: [
         {
+          id: 'model1',
           name: 'dummyName',
         } as unknown as ModelInfo,
       ],
@@ -51,9 +52,11 @@ test('multiple models name should be displayed as list', async () => {
       health: undefined,
       models: [
         {
+          id: 'model1',
           name: 'dummyName-1',
         } as unknown as ModelInfo,
         {
+          id: 'model2',
           name: 'dummyName-2',
         } as unknown as ModelInfo,
       ],

packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte

@@ -10,7 +10,7 @@ export let object: InferenceServer;
   </span>
 {:else}
   <ul>
-    {#each object.models as model}
+    {#each object.models as model (model.id)}
       <li class="text-[var(--pd-table-body-text)]">{model.name}</li>
     {/each}
   </ul>

packages/frontend/src/pages/ImportModel.svelte

@@ -176,7 +176,7 @@ function handleDragLeave(): void {
               on:change={onBackendChange}
               name="backend"
               class="border rounded-lg w-full focus:ring-purple-500 focus:border-purple-500 block p-2.5 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white">
-              {#each Object.values(InferenceType) as type}
+              {#each Object.values(InferenceType) as type (type)}
                 <option value={type}>{type}</option>
               {/each}
             </select>

packages/frontend/src/pages/InferenceServerDetails.svelte

@@ -266,7 +266,7 @@ function handleOnChange(): void {
                       {service.models.length > 1 ? 'Models' : 'Model'}
                     </span>
                     <div>
-                      {#each service.models as model}
+                      {#each service.models as model (model.id)}
                         <div>
                           <div
                             class="w-full bg-[var(--pd-label-bg)] text-[var(--pd-label-text)] rounded-md px-2 py-1 flex flex-col gap-y-4">
@@ -331,7 +331,7 @@ function handleOnChange(): void {
                     id="languages"
                     class="border ml-1 text-sm rounded-lg bg-[var(--pd-action-button-details-bg)] block p-1 border-[var(--pd-action-button-details-bg)] placeholder-gray-700 text-[var(--pd-action-button-details-text)]"
                     name="languages">
-                    {#each $snippetLanguages as language}
+                    {#each $snippetLanguages as language (language.key)}
                       <option class="my-1" value={language.key}>{language.label}</option>
                     {/each}
                   </select>
@@ -345,7 +345,7 @@ function handleOnChange(): void {
                       disabled={variants.length === 1}
                       class="border ml-1 text-sm rounded-lg bg-[var(--pd-action-button-details-bg)] block p-1 border-[var(--pd-action-button-details-bg)] placeholder-gray-700 text-[var(--pd-action-button-details-text)]"
                       name="variants">
-                      {#each variants as variant}
+                      {#each variants as variant (variant.key)}
                         <option class="my-1" value={variant.key}>{variant.key}</option>
                       {/each}
                     </select>

packages/frontend/src/pages/Playground.svelte

@@ -223,7 +223,7 @@ function handleOnClick(): void {
                       {/key}
                       <!-- show all message except the system prompt -->
                       <ul>
-                        {#each messages as message}
+                        {#each messages as message (message.id)}
                           <li>
                             <ChatMessage message={message} />
                           </li>