diff --git a/.prettierrc b/.prettierrc index 9f180e907..f237f8b06 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,12 @@ { + "svelteSortOrder" : "options-styles-scripts-markup", + "svelteStrictMode": true, + "svelteAllowShorthand": false, + "svelteIndentScriptAndStyle": false, "bracketSameLine": true, "singleQuote": true, "arrowParens": "avoid", "printWidth": 120, - "trailingComma": "all" + "trailingComma": "all", + "plugins": ["prettier-plugin-svelte"] } - diff --git a/package.json b/package.json index 8a5933263..e58c1df74 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "scripts": { "build": "concurrently \"yarn --cwd packages/frontend build\" \"yarn --cwd packages/backend build\"", "watch": "concurrently \"yarn --cwd packages/frontend watch\" \"yarn --cwd packages/backend watch\"", - "format:check": "prettier --check \"**/src/**/*.ts\"", - "format:fix": "prettier --write \"**/src/**/*.ts\"", + "format:check": "prettier --check \"**/src/**/*.{ts,svelte}\"", + "format:fix": "prettier --write \"**/src/**/*.{ts,svelte}\"", "lint:check": "eslint . --ext js,ts,tsx", "lint:fix": "eslint . --fix --ext js,ts,tsx", "test:backend": "vitest run -r packages/backend --passWithNoTests --coverage", @@ -39,7 +39,8 @@ "eslint-plugin-no-null": "^1.0.2", "eslint-plugin-redundant-undefined": "^1.0.0", "eslint-plugin-sonarjs": "^0.23.0", - "prettier": "^3.1.1", + "prettier": "^3.2.5", + "prettier-plugin-svelte": "^3.1.2", "typescript": "5.3.3", "vite": "^5.0.10", "vitest": "^1.1.0" diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 812f2d249..c807b8ad0 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -8,8 +8,6 @@ "build": "vite build", "test": "vitest run --coverage", "test:watch": "vitest watch --coverage", - "format:check": "prettier --check \"src/**/*.ts\"", - "format:fix": "prettier --write \"src/**/*.ts\"", "watch": "vite --mode development build -w" }, "dependencies": { diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte index 33d0d0435..06e49d903 100644 --- a/packages/frontend/src/App.svelte +++ b/packages/frontend/src/App.svelte @@ -27,48 +27,47 @@ onMount(() => { }); -
- + - + - + - + - + - + - + - + - +
diff --git a/packages/frontend/src/Route.svelte b/packages/frontend/src/Route.svelte index c45d45c14..a200cebcb 100644 --- a/packages/frontend/src/Route.svelte +++ b/packages/frontend/src/Route.svelte @@ -27,8 +27,8 @@ const route = createRouteObject({ meta = newMeta; params = meta.params; - if(isAppMounted) { - saveRouterState({url: newMeta.url}); + if (isAppMounted) { + saveRouterState({ url: newMeta.url }); } }, }); diff --git a/packages/frontend/src/lib/Card.svelte b/packages/frontend/src/lib/Card.svelte index 11ae9e1aa..2383d8fa9 100644 --- a/packages/frontend/src/lib/Card.svelte +++ b/packages/frontend/src/lib/Card.svelte @@ -1,17 +1,17 @@ @@ -19,7 +19,9 @@ export let primaryBackground: string = "bg-charcoal-800"
{#if icon} - {/if} @@ -37,4 +39,3 @@ export let primaryBackground: string = "bg-charcoal-800"
- diff --git a/packages/frontend/src/lib/ErrorMessage.svelte b/packages/frontend/src/lib/ErrorMessage.svelte index 7751df732..d286e2497 100644 --- a/packages/frontend/src/lib/ErrorMessage.svelte +++ b/packages/frontend/src/lib/ErrorMessage.svelte @@ -1,10 +1,10 @@ {#if icon} diff --git a/packages/frontend/src/lib/ExpandableMessage.svelte b/packages/frontend/src/lib/ExpandableMessage.svelte index 073d36fc9..07dbecf4a 100644 --- a/packages/frontend/src/lib/ExpandableMessage.svelte +++ b/packages/frontend/src/lib/ExpandableMessage.svelte @@ -1,7 +1,7 @@ {#if message} diff --git a/packages/frontend/src/lib/NavPage.svelte b/packages/frontend/src/lib/NavPage.svelte index e8e218f8e..a565f0333 100644 --- a/packages/frontend/src/lib/NavPage.svelte +++ b/packages/frontend/src/lib/NavPage.svelte @@ -14,54 +14,54 @@ export let contentBackground = '';
-
-
- {#if icon} -
- -
- {/if} -

{title}

-
- +
+
+ {#if icon} +
+ +
+ {/if} +

{title}

+ +
-
- {#if searchEnabled} -
-
-
- - - - -
+
+ {#if searchEnabled} +
+
+
+ + + +
- {/if} -
+
+ {/if}
+
{#if loading} - + {:else} {/if} diff --git a/packages/frontend/src/lib/Navigation.svelte b/packages/frontend/src/lib/Navigation.svelte index 6056e8601..663bdbe09 100644 --- a/packages/frontend/src/lib/Navigation.svelte +++ b/packages/frontend/src/lib/Navigation.svelte @@ -17,7 +17,6 @@ export let meta: TinroRouteMeta;
- diff --git a/packages/frontend/src/lib/RecipeDetails.svelte b/packages/frontend/src/lib/RecipeDetails.svelte index bf4177eb3..0f78f229a 100644 --- a/packages/frontend/src/lib/RecipeDetails.svelte +++ b/packages/frontend/src/lib/RecipeDetails.svelte @@ -20,70 +20,58 @@ $: model = $catalog.models.find(m => m.id === selectedModelId); let open: boolean = true; const onPullingRequest = () => { - studioClient.pullApplication(recipeId) - .catch((err: unknown) => { - console.error('Something went wrong while pulling application', err); - }) -} + studioClient.pullApplication(recipeId).catch((err: unknown) => { + console.error('Something went wrong while pulling application', err); + }); +}; const onClickRepository = () => { - if (!recipe) - return; + if (!recipe) return; - studioClient.openURL(recipe.repository) - .catch((err: unknown) => { - console.error('Something went wrong while opening url', err); - }) -} + studioClient.openURL(recipe.repository).catch((err: unknown) => { + console.error('Something went wrong while opening url', err); + }); +}; const toggle = () => { console.log('on toggle', open); open = !open; -} - +}; -
-
+
+
Application Details - +
{#if recipeStatus !== undefined && recipeStatus.tasks.length > 0} {#if recipeStatus.state === 'error'} - + {:else if recipeStatus.state === 'loading' || recipeStatus.state === 'running'} - {/if} {:else} - + {/if}
- This will git clone the application, download the model, build images, and run the application as a pod locally. + This will git clone the application, download the model, build images, and run the application as a pod + locally.
{#if recipeStatus !== undefined && recipeStatus.tasks.length > 0}
- +
{/if}
@@ -102,7 +90,9 @@ const toggle = () => {
{#if model?.license}
-
+
{model.license}
@@ -111,8 +101,7 @@ const toggle = () => {
{#if recipe?.models?.[0] === model.id}
- * This is the default, recommended model for this recipe. - You can swap for a different compatible model. + * This is the default, recommended model for this recipe. You can swap for a different compatible model.
{/if}
@@ -120,17 +109,21 @@ const toggle = () => {
Repository
- +
- {getDisplayName(recipe?.repository)} + {getDisplayName(recipe?.repository)}
-
-
- +
+
diff --git a/packages/frontend/src/lib/RecipesCard.svelte b/packages/frontend/src/lib/RecipesCard.svelte index 249b1627f..a4c7fd880 100644 --- a/packages/frontend/src/lib/RecipesCard.svelte +++ b/packages/frontend/src/lib/RecipesCard.svelte @@ -4,16 +4,16 @@ import { getIcon } from '/@/utils/categoriesUtils'; import type { Category } from '@shared/src/models/ICategory'; import { catalog } from '/@/stores/catalog'; -export let category: Category +export let category: Category; $: categories = $catalog.categories; -$: recipes = $catalog.recipes.filter(r => r.categories.includes(category.id)).map(r => ({...r, icon: category.id})); +$: recipes = $catalog.recipes.filter(r => r.categories.includes(category.id)).map(r => ({ ...r, icon: category.id })); -export let primaryBackground: string = "bg-charcoal-800" -export let secondaryBackground: string = "bg-charcoal-700" +export let primaryBackground: string = 'bg-charcoal-800'; +export let secondaryBackground: string = 'bg-charcoal-700'; -export let displayCategory: boolean = true -export let displayDescription: boolean = true +export let displayCategory: boolean = true; +export let displayDescription: boolean = true; @@ -27,16 +27,14 @@ export let displayDescription: boolean = true href="/recipes/{recipe.id}" title="{recipe.name}" icon="{getIcon(recipe.icon)}" - classes="{secondaryBackground} flex-grow p-4" - > + classes="{secondaryBackground} flex-grow p-4">
{#if displayCategory} {#each recipe.categories as categoryId} + primaryBackground="{primaryBackground}" /> {/each} {/if} {#if displayDescription} diff --git a/packages/frontend/src/lib/SettingsNavItem.svelte b/packages/frontend/src/lib/SettingsNavItem.svelte index 22b1cdb39..fcd0407a9 100644 --- a/packages/frontend/src/lib/SettingsNavItem.svelte +++ b/packages/frontend/src/lib/SettingsNavItem.svelte @@ -1,6 +1,6 @@ + -{text} +{text} diff --git a/packages/frontend/src/lib/markdown/MarkdownRenderer.svelte b/packages/frontend/src/lib/markdown/MarkdownRenderer.svelte index e5a1d19d1..fb381c65d 100644 --- a/packages/frontend/src/lib/markdown/MarkdownRenderer.svelte +++ b/packages/frontend/src/lib/markdown/MarkdownRenderer.svelte @@ -1,10 +1,9 @@
- +
- diff --git a/packages/frontend/src/lib/progress/TasksProgress.svelte b/packages/frontend/src/lib/progress/TasksProgress.svelte index 7acd785b2..afafb86b2 100644 --- a/packages/frontend/src/lib/progress/TasksProgress.svelte +++ b/packages/frontend/src/lib/progress/TasksProgress.svelte @@ -2,40 +2,57 @@ import type { Task } from '@shared/src/models/ITask'; import ExpandableMessage from '/@/lib/ExpandableMessage.svelte'; export let tasks: Task[] = []; -
    - {#each tasks as task}
  • {#if task.state === 'success'} - - + + {:else if task.state === 'loading'} - + + fill="currentColor"> + fill="currentFill"> {:else} - - + + {/if}
    - {task.name} {#if task.progress}({Math.floor(task.progress)}%){/if} - + {task.name} + {#if task.progress}({Math.floor(task.progress)}%){/if} +
    - +
    • {/each}
diff --git a/packages/frontend/src/lib/table/TestTable.svelte b/packages/frontend/src/lib/table/TestTable.svelte index 41bff3358..d6453f490 100644 --- a/packages/frontend/src/lib/table/TestTable.svelte +++ b/packages/frontend/src/lib/table/TestTable.svelte @@ -64,5 +64,5 @@ const row = new Row({ columns="{columns}" row="{row}" defaultSortColumn="Id" - headerBackground={headerBackground}> + headerBackground="{headerBackground}"> diff --git a/packages/frontend/src/lib/table/environment/ColumnActions.svelte b/packages/frontend/src/lib/table/environment/ColumnActions.svelte index d9500453e..9132ffcf7 100644 --- a/packages/frontend/src/lib/table/environment/ColumnActions.svelte +++ b/packages/frontend/src/lib/table/environment/ColumnActions.svelte @@ -1,38 +1,28 @@ - {#if object.status === 'stopping' || object.status === 'removing'}
{:else} - deleteEnvironment()} - title="Delete Environment" - /> + - restartEnvironment()} - title="Restart Environment" - /> + {/if} - diff --git a/packages/frontend/src/lib/table/environment/ColumnName.svelte b/packages/frontend/src/lib/table/environment/ColumnName.svelte index 8378f3f75..d5bb676be 100644 --- a/packages/frontend/src/lib/table/environment/ColumnName.svelte +++ b/packages/frontend/src/lib/table/environment/ColumnName.svelte @@ -1,5 +1,5 @@
diff --git a/packages/frontend/src/lib/table/model/ModelColumnActions.svelte b/packages/frontend/src/lib/table/model/ModelColumnActions.svelte index 9601978f1..b4214a7f7 100644 --- a/packages/frontend/src/lib/table/model/ModelColumnActions.svelte +++ b/packages/frontend/src/lib/table/model/ModelColumnActions.svelte @@ -1,13 +1,13 @@ openModelFolder()} + icon="{faFolderOpen}" + onClick="{() => openModelFolder()}" title="Open Model Folder" - enabled="{object.file !== undefined && !object.state}" -/> + enabled="{object.file !== undefined && !object.state}" /> deleteModel()} + icon="{faTrash}" + onClick="{() => deleteModel()}" title="Delete Model" - enabled={object.file !== undefined && !object.state} -/> + enabled="{object.file !== undefined && !object.state}" /> diff --git a/packages/frontend/src/lib/table/model/ModelColumnCreation.svelte b/packages/frontend/src/lib/table/model/ModelColumnCreation.svelte index 12ffbc59a..8ea826801 100644 --- a/packages/frontend/src/lib/table/model/ModelColumnCreation.svelte +++ b/packages/frontend/src/lib/table/model/ModelColumnCreation.svelte @@ -1,11 +1,11 @@
- {#if (object.file?.creation)} - {humanizeAge(object.file.creation.getTime()/1000)} + {#if object.file?.creation} + {humanizeAge(object.file.creation.getTime() / 1000)} {/if}
diff --git a/packages/frontend/src/lib/table/model/ModelColumnHW.svelte b/packages/frontend/src/lib/table/model/ModelColumnHW.svelte index 56033b778..716aa3ecc 100644 --- a/packages/frontend/src/lib/table/model/ModelColumnHW.svelte +++ b/packages/frontend/src/lib/table/model/ModelColumnHW.svelte @@ -1,6 +1,6 @@
diff --git a/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte b/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte index f326aa3b2..d5df10d1e 100644 --- a/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte +++ b/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte @@ -1,6 +1,6 @@
diff --git a/packages/frontend/src/lib/table/model/ModelColumnName.svelte b/packages/frontend/src/lib/table/model/ModelColumnName.svelte index 1fbd6c011..c27e70a36 100644 --- a/packages/frontend/src/lib/table/model/ModelColumnName.svelte +++ b/packages/frontend/src/lib/table/model/ModelColumnName.svelte @@ -1,11 +1,11 @@
@@ -193,14 +188,15 @@
Prompt
{#key playgroundState?.status} - + {/key}
@@ -211,8 +207,7 @@ readonly disabled rows="20" - bind:value={result} + bind:value="{result}" class="w-full p-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"> {/if}
- diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte index 16a4f3c83..5ff5b78bf 100644 --- a/packages/frontend/src/pages/Models.svelte +++ b/packages/frontend/src/pages/Models.svelte @@ -39,33 +39,33 @@ let filteredModels: ModelInfo[] = []; function filterModels(): void { // Let's collect the models we do not want to show (loading, error). const modelsId: string[] = tasks.reduce((previousValue, currentValue) => { - if(currentValue.labels !== undefined) { - previousValue.push(currentValue.labels["model-pulling"]); + if (currentValue.labels !== undefined) { + previousValue.push(currentValue.labels['model-pulling']); } return previousValue; }, [] as string[]); - filteredModels = models.filter((model) => !modelsId.includes(model.id)); + filteredModels = models.filter(model => !modelsId.includes(model.id)); } onMount(() => { // Pulling update const modelsPullingUnsubscribe = modelsPulling.subscribe(runningTasks => { // Only display error | loading tasks. - tasks = runningTasks.filter((task) => task.state !== 'success'); + tasks = runningTasks.filter(task => task.state !== 'success'); loading = false; filterModels(); }); // Subscribe to the models store - const localModelsUnsubscribe = modelsInfo.subscribe((value) => { + const localModelsUnsubscribe = modelsInfo.subscribe(value => { models = value; filterModels(); - }) + }); return () => { modelsPullingUnsubscribe(); localModelsUnsubscribe(); - } + }; }); @@ -79,18 +79,13 @@ onMount(() => {
Downloading models
- +
{/if} {#if filteredModels.length > 0} - -
+
{:else}
There is no model yet
{/if} diff --git a/packages/frontend/src/pages/Preferences.svelte b/packages/frontend/src/pages/Preferences.svelte index f25a965b8..be07c4a58 100644 --- a/packages/frontend/src/pages/Preferences.svelte +++ b/packages/frontend/src/pages/Preferences.svelte @@ -1,5 +1,4 @@
Preferences
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte index 6d3149085..6c3158d6f 100644 --- a/packages/frontend/src/pages/Recipe.svelte +++ b/packages/frontend/src/pages/Recipe.svelte @@ -24,7 +24,11 @@ $: if (recipe && recipe.id !== recipeTelemetry) { } - + @@ -34,16 +38,16 @@ $: if (recipe && recipe.id !== recipeTelemetry) {
- - + + - +
- +
@@ -52,8 +56,7 @@ $: if (recipe && recipe.id !== recipeTelemetry) { {#each recipe?.categories || [] as categoryId} + classes="bg-charcoal-800 p-1 text-xs w-fit" /> {/each}
diff --git a/packages/frontend/src/pages/RecipeModels.svelte b/packages/frontend/src/pages/RecipeModels.svelte index 33fb4dbe6..da7bc26aa 100644 --- a/packages/frontend/src/pages/RecipeModels.svelte +++ b/packages/frontend/src/pages/RecipeModels.svelte @@ -1,39 +1,33 @@ + {#if models}
- -
+
diff --git a/packages/frontend/src/pages/Recipes.svelte b/packages/frontend/src/pages/Recipes.svelte index bcbfd716c..1910b97e8 100644 --- a/packages/frontend/src/pages/Recipes.svelte +++ b/packages/frontend/src/pages/Recipes.svelte @@ -11,13 +11,11 @@ $: categories = $catalog.categories;
- + displayDescription="{false}" /> {#each categories as category} @@ -25,8 +23,7 @@ $: categories = $catalog.categories; category="{category}" primaryBackground="" secondaryBackground="bg-charcoal-800" - displayCategory="{false}" - /> + displayCategory="{false}" /> {/each}
diff --git a/packages/frontend/src/pages/Registries.svelte b/packages/frontend/src/pages/Registries.svelte index 038b3ece8..bf0b16eea 100644 --- a/packages/frontend/src/pages/Registries.svelte +++ b/packages/frontend/src/pages/Registries.svelte @@ -1,5 +1,4 @@
Registries
diff --git a/yarn.lock b/yarn.lock index dfc26c5da..82053b886 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3362,10 +3362,15 @@ prelude-ls@^1.2.1: resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prettier@^3.1.1: - version "3.1.1" - resolved "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz" - integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw== +prettier-plugin-svelte@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.0.tgz#78a03894e2dab1b0bd93c4df993cd849001822f2" + integrity sha512-3474Zxxw8z4k64aqZmwTfcGdh/ULM2zNQslORdXEkNjKqqsSxBmiASazoxdCrmaqsbKD2Y0rxKhBEn1u0Y+j9g== + +prettier@^3.2.5: + version "3.2.5" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" + integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A== pretty-format@^27.0.2: version "27.5.1"