upgrade svelte to fix weird rendering hydration issue

therealpaulgg · therealpaulgg · commit efe788b94e10 · 2025-08-17T17:25:26.000-07:00
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "postcss": "^8.4.32",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^5.33.1",
+    "svelte": "^5.38.1",
     "svelte-check": "^3.6.2",
     "svelte-preprocess": "^5.1.3",
     "tailwindcss": "^3.4.1",
diff --git a/src/components/Recipe.svelte b/src/components/Recipe.svelte
@@ -32,8 +32,8 @@
     <div class="bg-zinc-600 min-h-[32px] rounded-b">
         {#if recipe.metadata.tags}
             <div class="flex gap-2 p-1 flex-wrap">
-                {#each recipe.metadata.tags as name}
-                    <Tag {category} {name} />
+                {#each recipe.metadata.tags as tag}
+                    <Tag {category} name={tag} />
                 {/each}
             </div>
         {/if}
diff --git a/src/models/RecipeMetadata.ts b/src/models/RecipeMetadata.ts
@@ -43,4 +43,5 @@ export type RecipeMetadata = {
 export type Recipe = {
     metadata: RecipeMetadata
     content: string
+    slug: string
 }
diff --git a/src/routes/category/[slug]/+page.ts b/src/routes/category/[slug]/+page.ts
@@ -1,6 +1,7 @@
 import { base } from "$app/paths";
+import type { Recipe } from "src/models/RecipeMetadata"
 export async function load({ fetch, params }) {
     const slug = params.slug;
-    const recipes = await fetch(`${base}/category/${slug}.json`).then((r) => r.json());
+    const recipes: Recipe[] = await fetch(`${base}/category/${slug}.json`).then((r) => r.json());
     return { recipes, slug };
 }

Original file line number	Diff line number	Diff line change
`@@ -43,4 +43,5 @@ export type RecipeMetadata = {`
`43`	`43`	`export type Recipe = {`
`44`	`44`	`metadata: RecipeMetadata`
`45`	`45`	`content: string`
	`46`	`+ slug: string`
`46`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import { base } from "$app/paths";`
	`2`	`+import type { Recipe } from "src/models/RecipeMetadata"`
`2`	`3`	`export async function load({ fetch, params }) {`
`3`	`4`	`const slug = params.slug;`
`4`		- const recipes = await fetch(`${base}/category/${slug}.json`).then((r) => r.json());
	`5`	+ const recipes: Recipe[] = await fetch(`${base}/category/${slug}.json`).then((r) => r.json());
`5`	`6`	`return { recipes, slug };`
`6`	`7`	`}`