From e435bfed7be787f4442cb540c44b0c9feff93c2a Mon Sep 17 00:00:00 2001
From: Evzen Gasta <evzen.ml@seznam.cz>
Date: Wed, 23 Apr 2025 10:02:04 +0200
Subject: [PATCH 1/2] refactor(svelte5): migrated component to svelte5

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>
---
 .../src/lib/select/ModelSelect.svelte         | 39 ++++++++++---------
 .../frontend/src/pages/StartRecipe.svelte     |  2 +-
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/src/lib/select/ModelSelect.svelte b/packages/frontend/src/lib/select/ModelSelect.svelte
index 8d8b1db54..9479920d0 100644
--- a/packages/frontend/src/lib/select/ModelSelect.svelte
+++ b/packages/frontend/src/lib/select/ModelSelect.svelte
@@ -4,16 +4,23 @@ import Select from './Select.svelte';
 import Fa from 'svelte-fa';
 import type { ModelInfo } from '@shared/models/IModelInfo';
 
-export let disabled: boolean = false;
-/**
- * Recommended model ids
- */
-export let recommended: string[] | undefined = undefined;
+interface Props {
+  disabled?: boolean;
+  /**
+   * Recommended model ids
+   */
+  recommended?: string[];
+  /**
+   * List of models
+   */
+  models: ModelInfo[];
+  /**
+   * Current value selected
+   */
+  value: ModelInfo | undefined;
+}
 
-/**
- * List of models
- */
-export let models: ModelInfo[];
+let { disabled = false, recommended = undefined, models, value = undefined }: Props = $props();
 
 function getModelSortingScore(modelInfo: ModelInfo): number {
   let score: number = 0;
@@ -22,21 +29,17 @@ function getModelSortingScore(modelInfo: ModelInfo): number {
   return score;
 }
 
-/**
- * Current value selected
- */
-export let value: ModelInfo | undefined = undefined;
-
 /**
  * Handy mechanism to provide the mandatory property `label` and `value` to the Select component
  */
-let selected: (ModelInfo & { label: string; value: string }) | undefined = undefined;
-$: {
+let selected: (ModelInfo & { label: string; value: string }) | undefined = $derived.by(() => {
   // let's select a default model
   if (value) {
-    selected = { ...value, label: value.name, value: value.id };
+    return { ...value, label: value.name, value: value.id };
+  } else {
+    return undefined;
   }
-}
+});
 
 function handleOnChange(nValue: (ModelInfo & { label: string; value: string }) | undefined): void {
   value = nValue;
diff --git a/packages/frontend/src/pages/StartRecipe.svelte b/packages/frontend/src/pages/StartRecipe.svelte
index 804fd18e3..f1139ec87 100644
--- a/packages/frontend/src/pages/StartRecipe.svelte
+++ b/packages/frontend/src/pages/StartRecipe.svelte
@@ -187,7 +187,7 @@ function handleOnClick(): void {
             <!-- model form -->
             <label for="select-model" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
               >Model</label>
-            <ModelSelect bind:value={model} disabled={loading} recommended={recipe.recommended} models={models} />
+            <ModelSelect value={model} disabled={loading} recommended={recipe.recommended} models={models} />
             {#if model && model.file === undefined}
               <div class="text-gray-800 text-sm flex items-center">
                 <Fa class="mr-2" icon={faWarning} />

From 2cb281ef0cfe39cd1644b7e7135719b542e4d812 Mon Sep 17 00:00:00 2001
From: Evzen Gasta <evzen.ml@seznam.cz>
Date: Wed, 23 Apr 2025 10:51:33 +0200
Subject: [PATCH 2/2] chore: applied suggestions

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>
---
 packages/frontend/src/lib/select/ModelSelect.svelte | 2 +-
 packages/frontend/src/pages/StartRecipe.svelte      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/lib/select/ModelSelect.svelte b/packages/frontend/src/lib/select/ModelSelect.svelte
index 9479920d0..97483f3a3 100644
--- a/packages/frontend/src/lib/select/ModelSelect.svelte
+++ b/packages/frontend/src/lib/select/ModelSelect.svelte
@@ -20,7 +20,7 @@ interface Props {
   value: ModelInfo | undefined;
 }
 
-let { disabled = false, recommended = undefined, models, value = undefined }: Props = $props();
+let { disabled = false, recommended, models, value = $bindable() }: Props = $props();
 
 function getModelSortingScore(modelInfo: ModelInfo): number {
   let score: number = 0;
diff --git a/packages/frontend/src/pages/StartRecipe.svelte b/packages/frontend/src/pages/StartRecipe.svelte
index f1139ec87..804fd18e3 100644
--- a/packages/frontend/src/pages/StartRecipe.svelte
+++ b/packages/frontend/src/pages/StartRecipe.svelte
@@ -187,7 +187,7 @@ function handleOnClick(): void {
             <!-- model form -->
             <label for="select-model" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
               >Model</label>
-            <ModelSelect value={model} disabled={loading} recommended={recipe.recommended} models={models} />
+            <ModelSelect bind:value={model} disabled={loading} recommended={recipe.recommended} models={models} />
             {#if model && model.file === undefined}
               <div class="text-gray-800 text-sm flex items-center">
                 <Fa class="mr-2" icon={faWarning} />