fix: apply prettier to svelte files (#290) (#291)

Signed-off-by: lstocchi <[email protected]>
containers · Feb 13, 2024 · 82e16e2 · 82e16e2
1 parent 8e06f4c
commit 82e16e2
Show file tree

Hide file tree

Showing 41 changed files with 423 additions and 433 deletions.
diff --git 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
@@ -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
@@ -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
@@ -27,48 +27,47 @@ onMount(() => {
 });
 </script>
 
-
 <Route path="/*" breadcrumb="Home" isAppMounted="{isMounted}" let:meta>
   <main class="flex flex-col w-screen h-screen overflow-hidden bg-charcoal-700">
     <div class="flex flex-row w-full h-full overflow-hidden">
-      <Navigation meta="{meta}"/>
+      <Navigation meta="{meta}" />
 
       <!-- Dashboard -->
       <Route path="/" breadcrumb="IA Studio Dashboard Page">
-        <Dashboard/>
+        <Dashboard />
       </Route>
 
       <!-- Recipes Catalog -->
       <Route path="/recipes" breadcrumb="Recipes Catalog">
-        <Recipes/>
+        <Recipes />
       </Route>
 
       <!-- Environments -->
       <Route path="/environments" breadcrumb="Environments">
-        <Environments/>
+        <Environments />
       </Route>
 
       <!-- Models -->
       <Route path="/models" breadcrumb="Models">
-        <Models/>
+        <Models />
       </Route>
 
       <!-- Registries -->
       <Route path="/registries" breadcrumb="Registries">
-        <Registries/>
+        <Registries />
       </Route>
 
       <!-- Preferences -->
       <Route path="/preferences" breadcrumb="Preferences">
-        <Preferences/>
+        <Preferences />
       </Route>
 
       <Route path="/recipes/:id/*" breadcrumb="Recipe Details" let:meta>
-        <Recipe recipeId="{meta.params.id}"/>
+        <Recipe recipeId="{meta.params.id}" />
       </Route>
 
       <Route path="/models/:id/*" breadcrumb="Model Details" let:meta>
-        <Model modelId="{meta.params.id}"/>
+        <Model modelId="{meta.params.id}" />
       </Route>
     </div>
   </main>

diff --git 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
@@ -1,25 +1,27 @@
 <script lang="ts">
 import Fa from 'svelte-fa';
 import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
-import { createEventDispatcher } from 'svelte'
-const dispatch = createEventDispatcher()
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
 
 export let title: string | undefined = undefined;
-export let classes: string = "";
+export let classes: string = '';
 
 export let href: string | undefined = undefined;
 
-export let icon: IconDefinition | undefined = undefined
+export let icon: IconDefinition | undefined = undefined;
 
-export let primaryBackground: string = "bg-charcoal-800"
+export let primaryBackground: string = 'bg-charcoal-800';
 </script>
 
 <a class="no-underline" href="{href}">
   <div class="{classes} rounded-md flex-nowrap overflow-hidden" role="region">
     <div class="flex flex-row">
       <div class="flex flex-row items-center">
         {#if icon}
-          <button on:click={() => dispatch('click')} class="{primaryBackground} rounded-full w-8 h-8 flex items-center justify-center mr-3">
+          <button
+            on:click="{() => dispatch('click')}"
+            class="{primaryBackground} rounded-full w-8 h-8 flex items-center justify-center mr-3">
             <Fa size="20" class="text-purple-500 cursor-pointer" icon="{icon}" />
           </button>
         {/if}
@@ -37,4 +39,3 @@ export let primaryBackground: string = "bg-charcoal-800"
     </div>
   </div>
 </a>
-
diff --git a/packages/frontend/src/lib/ErrorMessage.svelte b/packages/frontend/src/lib/ErrorMessage.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import Fa from 'svelte-fa';
-  import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-  import Tooltip from './Tooltip.svelte';
+import Fa from 'svelte-fa';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import Tooltip from './Tooltip.svelte';
 
-  export let error: string;
-  export let icon = false;
+export let error: string;
+export let icon = false;
 </script>
 
 {#if icon}

diff --git a/packages/frontend/src/lib/ExpandableMessage.svelte b/packages/frontend/src/lib/ExpandableMessage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  export let message: string | undefined = undefined;
-  export let title: string = 'Expand';
-  let showMessage: boolean = false;
+export let message: string | undefined = undefined;
+export let title: string = 'Expand';
+let showMessage: boolean = false;
 </script>
 
 {#if message}

diff --git a/packages/frontend/src/lib/NavPage.svelte b/packages/frontend/src/lib/NavPage.svelte
@@ -14,54 +14,54 @@ export let contentBackground = '';
 <div class="flex flex-col w-full h-full shadow-pageheader">
   <div class="flex flex-col w-full h-full pt-4" role="region" aria-label="{title}">
     <div class="flex pb-2 px-5" role="region" aria-label="header">
-        <div class="flex flex-col">
-          <div class="flex flex-row">
-            {#if icon}
-              <div class="bg-charcoal-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">
-                <Fa size="20" class="text-purple-500" icon="{icon}" />
-              </div>
-            {/if}
-            <h1 class="text-xl first-letter:uppercase">{title}</h1>
-          </div>
-          <slot name="subtitle" />
+      <div class="flex flex-col">
+        <div class="flex flex-row">
+          {#if icon}
+            <div class="bg-charcoal-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">
+              <Fa size="20" class="text-purple-500" icon="{icon}" />
+            </div>
+          {/if}
+          <h1 class="text-xl first-letter:uppercase">{title}</h1>
         </div>
+        <slot name="subtitle" />
+      </div>
 
-        <div class="flex flex-1 justify-end">
-          {#if searchEnabled}
-            <div class="flex flex-row" role="region" aria-label="search">
-              <div class="pl-5 lg:w-[35rem] w-[22rem] flex justify-end items-center">
-                <div class="w-full flex items-center bg-charcoal-800 text-gray-700 rounded-sm">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-5 h-5 ml-2 mr-2"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                  </svg>
-                  <input
-                    bind:value="{searchTerm}"
-                    type="text"
-                    name="containerSearchName"
-                    placeholder="Search {title}...."
-                    class="w-full py-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700" />
-                </div>
+      <div class="flex flex-1 justify-end">
+        {#if searchEnabled}
+          <div class="flex flex-row" role="region" aria-label="search">
+            <div class="pl-5 lg:w-[35rem] w-[22rem] flex justify-end items-center">
+              <div class="w-full flex items-center bg-charcoal-800 text-gray-700 rounded-sm">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="w-5 h-5 ml-2 mr-2"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+                <input
+                  bind:value="{searchTerm}"
+                  type="text"
+                  name="containerSearchName"
+                  placeholder="Search {title}...."
+                  class="w-full py-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700" />
               </div>
             </div>
-          {/if}
-        </div>
+          </div>
+        {/if}
       </div>
+    </div>
 
     <div class="flex flex-row px-2 border-b border-charcoal-400">
       <slot name="tabs" />
     </div>
     <div class="flex w-full h-full {contentBackground} overflow-auto" role="region" aria-label="content">
       {#if loading}
-        <LinearProgress/>
+        <LinearProgress />
       {:else}
         <slot name="content" />
       {/if}

diff --git a/packages/frontend/src/lib/Navigation.svelte b/packages/frontend/src/lib/Navigation.svelte
@@ -17,7 +17,6 @@ export let meta: TinroRouteMeta;
     </div>
   </div>
   <div class="h-full overflow-hidden hover:overflow-y-auto" style="margin-bottom:auto">
-
     <SettingsNavItem title="Recipe Catalog" href="/recipes" bind:meta="{meta}" />
 
     <SettingsNavItem title="Environments" href="/environments" bind:meta="{meta}" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,6 @@ export let meta: TinroRouteMeta; @@
         </div>
       </div>
       <div class="h-full overflow-hidden hover:overflow-y-auto" style="margin-bottom:auto">
         <SettingsNavItem title="Recipe Catalog" href="/recipes" bind:meta="{meta}" />
         <SettingsNavItem title="Environments" href="/environments" bind:meta="{meta}" />
@@ Expand Down @@