fix: resolve Svelte 5 reactivity warnings

josecelano · josecelano · commit 2d8a07347091 · 2025-12-21T15:32:00.000Z
- Use $derived for all computed values that depend on props
- Fix Button, Cards, RelatedCard, and TagCard components
- Fix all blog post pages and layouts
- Fix date formatting in BlogPreview, BlogPostCard, etc.
- Fix CodeBlock syntax highlighting reactivity
- Update blog +page to use derived filtering

This eliminates 41 of 42 warnings. The remaining warning in Toc.svelte
is intentional as the selector is passed to a third-party library that
doesn't support dynamic updates.
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
@@ -30,16 +30,16 @@
 		...rest
 	}: Props = $props();
 
-	const isExternalLink = !!href && HttpRegex.test(href);
+	const isExternalLink = $derived(!!href && HttpRegex.test(href));
 
-	target = target ?? (isExternalLink ? '_blank' : '_self');
-	rel = rel ?? (isExternalLink ? 'noopener noreferrer' : undefined);
+	const finalTarget = $derived(target ?? (isExternalLink ? '_blank' : '_self'));
+	const finalRel = $derived(rel ?? (isExternalLink ? 'noopener noreferrer' : undefined));
 
 	let tag = $derived(href ? 'a' : 'button');
 	let linkProps = $derived({
 		href,
-		target,
-		rel
+		target: finalTarget,
+		rel: finalRel
 	});
 </script>
 
diff --git a/src/lib/components/atoms/Cards.svelte b/src/lib/components/atoms/Cards.svelte
@@ -19,10 +19,10 @@
 		...rest
 	}: Props = $props();
 
-	const isExternalLink = !!href && HttpRegex.test(href);
+	const isExternalLink = $derived(!!href && HttpRegex.test(href));
 
-	target = target ?? (isExternalLink ? '_blank' : '_self');
-	rel = rel ?? (isExternalLink ? 'noopener noreferrer' : undefined);
+	const finalTarget = $derived(target ?? (isExternalLink ? '_blank' : '_self'));
+	const finalRel = $derived(rel ?? (isExternalLink ? 'noopener noreferrer' : undefined));
 
 	function getRandomColor() {
 		const letters = '0123456789ABCDEF';
@@ -45,8 +45,8 @@
 	let tag = $derived(href ? 'a' : 'article');
 	let linkProps = $derived({
 		href,
-		target,
-		rel
+		target: finalTarget,
+		rel: finalRel
 	});
 </script>
 
diff --git a/src/lib/components/atoms/RelatedCard.svelte b/src/lib/components/atoms/RelatedCard.svelte
@@ -21,16 +21,16 @@
 		...rest
 	}: Props = $props();
 
-	const isExternalLink = !!href && HttpRegex.test(href);
+	const isExternalLink = $derived(!!href && HttpRegex.test(href));
 
-	target = isExternalLink ? '_blank' : '_self';
-	rel = isExternalLink ? 'noopener noreferrer' : undefined;
+	const finalTarget = $derived(isExternalLink ? '_blank' : '_self');
+	const finalRel = $derived(isExternalLink ? 'noopener noreferrer' : undefined);
 
 	let tag = $derived(href ? 'a' : 'article');
 	let linkProps = $derived({
 		href,
-		target,
-		rel
+		target: finalTarget,
+		rel: finalRel
 	});
 </script>
 
diff --git a/src/lib/components/atoms/TagCard.svelte b/src/lib/components/atoms/TagCard.svelte
@@ -23,16 +23,16 @@
 		...rest
 	}: Props = $props();
 
-	const isExternalLink = !!href && HttpRegex.test(href);
+	const isExternalLink = $derived(!!href && HttpRegex.test(href));
 
-	target = isExternalLink ? '_blank' : '_self';
-	rel = isExternalLink ? 'noopener noreferrer' : undefined;
+	const finalTarget = $derived(isExternalLink ? '_blank' : '_self');
+	const finalRel = $derived(isExternalLink ? 'noopener noreferrer' : undefined);
 
 	let tag = $derived(href ? 'a' : 'article');
 	let linkProps = $derived({
 		href,
-		target,
-		rel
+		target: finalTarget,
+		rel: finalRel
 	});
 </script>
 
diff --git a/src/lib/components/atoms/Toc.svelte b/src/lib/components/atoms/Toc.svelte
@@ -10,6 +10,8 @@
 
 	let { class: classes, selector = '#toc-contents' }: Props = $props();
 
+	// Note: selector is intentionally captured at initialization for createTableOfContents.
+	// This library call doesn't support dynamic selector updates, so reactivity isn't needed.
 	const {
 		elements: { item },
 		states: { activeHeadingIdxs, headingsTree }
diff --git a/src/lib/components/molecules/BlogPostCard.svelte b/src/lib/components/molecules/BlogPostCard.svelte
@@ -11,7 +11,7 @@
 
 	let { title, coverImage = undefined, slug, date, contributor }: Props = $props();
 
-	const formattedDate = formatDate(date);
+	const formattedDate = $derived(formatDate(date));
 </script>
 
 <a href="/blog/{slug}" class="container">
diff --git a/src/lib/components/molecules/BlogPreview.svelte b/src/lib/components/molecules/BlogPreview.svelte
@@ -3,7 +3,7 @@
 
 	let { post_data } = $props();
 
-	const formattedDate = formatDate(post_data.date);
+	const formattedDate = $derived(formatDate(post_data.date));
 </script>
 
 <div class="container">
diff --git a/src/lib/components/molecules/CodeBlock.svelte b/src/lib/components/molecules/CodeBlock.svelte
@@ -40,9 +40,9 @@
 		return code.replace(/\\n/g, '\n');
 	}
 
-	let normalizedCode = normalizeIndentation(processCodeForDisplay(code));
+	let normalizedCode = $derived(normalizeIndentation(processCodeForDisplay(code)));
 
-	let highlightedCode = hljs.highlight(normalizedCode, { language: lang }).value;
+	let highlightedCode = $derived(hljs.highlight(normalizedCode, { language: lang }).value);
 </script>
 
 <div class="code-block" class:full-bleed={fullBleed} bind:this={codeBlockElement}>
diff --git a/src/lib/components/molecules/RelatedPostCard.svelte b/src/lib/components/molecules/RelatedPostCard.svelte
@@ -14,7 +14,7 @@
 
 	let { title, excerpt, slug, tags, readingTime = undefined, date }: Props = $props();
 
-	const formattedDate = formatDate(date);
+	const formattedDate = $derived(formatDate(date));
 </script>
 
 <RelatedCard href="/{slug}" target="_self">
diff --git a/src/lib/components/molecules/TagCard.svelte b/src/lib/components/molecules/TagCard.svelte
@@ -12,7 +12,7 @@
 
 	let { title, coverImage, slug, date, excerpt }: Props = $props();
 
-	const formattedDate = formatDate(date);
+	const formattedDate = $derived(formatDate(date));
 </script>
 
 <TagCard href="/blog/{slug}" target="_self">
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -11,7 +11,7 @@
 	}
 
 	let { data }: Props = $props();
-	let { allPosts: blogPosts = [] } = data || {};
+	let allPosts = $derived(data?.allPosts || []);
 	let searchTerm = $state('');
 
 	type Post = {
@@ -21,11 +21,9 @@
 		slug: string;
 	};
 
-	// Default to an empty array if blogPosts is undefined
-	let posts = $state<Post[]>([]);
-
-	if (blogPosts && blogPosts.length > 0) {
-		posts = blogPosts.filter((post: BlogPost) => {
+	// Filter posts reactively based on searchTerm
+	let posts = $derived(
+		allPosts.filter((post: BlogPost) => {
 			const title = post?.title ?? '';
 			const contributor = post?.contributor ?? '';
 			const excerpt = post?.excerpt ?? '';
@@ -35,14 +33,14 @@
 				contributor.toLowerCase().includes(searchTerm.toLowerCase()) ||
 				excerpt.toLowerCase().includes(searchTerm.toLowerCase())
 			);
-		});
-	}
+		})
+	);
 </script>
 
 <div class="container">
 	<div class="header">
 		<h1>Blog</h1>
-		<SearchBar bind:searchTerm {blogPosts} />
+		<SearchBar bind:searchTerm blogPosts={allPosts} />
 	</div>
 
 	{#if posts && posts.length > 0}
diff --git a/src/routes/blog/benchmarking-the-torrust-bittorrent-tracker/+page.svelte b/src/routes/blog/benchmarking-the-torrust-bittorrent-tracker/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/bencode-to-json-converter-in-rust/+page.svelte b/src/routes/blog/bencode-to-json-converter-in-rust/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/containerizing-rust-applications-best-practices/+page.svelte b/src/routes/blog/containerizing-rust-applications-best-practices/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/contributor-path/+page.svelte b/src/routes/blog/contributor-path/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/deploying-torrust-to-production/+page.svelte b/src/routes/blog/deploying-torrust-to-production/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/hash2torrent-retrieve-torrent-files-effortlessly/+page.svelte b/src/routes/blog/hash2torrent-retrieve-torrent-files-effortlessly/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/help-shape-the-torrust-2025-roadmap/+page.svelte b/src/routes/blog/help-shape-the-torrust-2025-roadmap/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/how-to-contribute-to-this-site/+page.svelte b/src/routes/blog/how-to-contribute-to-this-site/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
 	import Image from '$lib/components/atoms/Image.svelte';
diff --git a/src/routes/blog/how-to-run-a-local-demo/+page.svelte b/src/routes/blog/how-to-run-a-local-demo/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
 	import Callout from '$lib/components/molecules/Callout.svelte';
diff --git a/src/routes/blog/how-to-setup-the-development-environment/+page.svelte b/src/routes/blog/how-to-setup-the-development-environment/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/introducing-the-new-sample-torrent-migration-tool/+page.svelte b/src/routes/blog/introducing-the-new-sample-torrent-migration-tool/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/live-demo-beta-v3/+page.svelte b/src/routes/blog/live-demo-beta-v3/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
 	import Callout from '$lib/components/molecules/Callout.svelte';
diff --git a/src/routes/blog/profiling-the-torrust-bittorrent-udp-tracker/+page.svelte b/src/routes/blog/profiling-the-torrust-bittorrent-udp-tracker/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/released-v3-0-0-beta/+page.svelte b/src/routes/blog/released-v3-0-0-beta/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/released-v3-0-0/+page.svelte b/src/routes/blog/released-v3-0-0/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/review-and-setup-guide-for-unit3d/+page.svelte b/src/routes/blog/review-and-setup-guide-for-unit3d/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/setting-up-torrust-with-claude-code/+page.svelte b/src/routes/blog/setting-up-torrust-with-claude-code/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/the-enigmatic-torrent-source-field/+page.svelte b/src/routes/blog/the-enigmatic-torrent-source-field/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/torrust-enhancing-the-bittorrent-ecosystem/+page.svelte b/src/routes/blog/torrust-enhancing-the-bittorrent-ecosystem/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
diff --git a/src/routes/blog/visualize-tracker-metrics-prometheus-grafana/+page.svelte b/src/routes/blog/visualize-tracker-metrics-prometheus-grafana/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
 	import PagesWrapper from '$lib/components/atoms/PagesWrapper.svelte';
diff --git a/src/routes/blog/what-is-a-bittorent-tracker/+page.svelte b/src/routes/blog/what-is-a-bittorent-tracker/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	let { data } = $props();
-	let { currentPost, allPosts } = data;
+	let currentPost = $derived(data.currentPost);
+	let allPosts = $derived(data.allPosts);
 	import Toc from '$lib/components/atoms/Toc.svelte';
 	import Post from '$lib/components/organisms/Post.svelte';
 	import PagesWrapper from '$lib/components/atoms/PagesWrapper.svelte';
diff --git a/src/routes/contributor/+layout.svelte b/src/routes/contributor/+layout.svelte
@@ -16,7 +16,7 @@
 
 	let { data, children }: Props = $props();
 
-	let { posts } = data;
+	let posts = $derived(data.posts);
 
 	let currentUrl: string | undefined = '';
 	let splitUrl: string | undefined = '';

Original file line number	Diff line number	Diff line change
`@@ -40,9 +40,9 @@`
`40`	`40`	`return code.replace(/\\n/g, '\n');`
`41`	`41`	`}`
`42`	`42`
`43`		`- let normalizedCode = normalizeIndentation(processCodeForDisplay(code));`
	`43`	`+ let normalizedCode = $derived(normalizeIndentation(processCodeForDisplay(code)));`
`44`	`44`
`45`		`- let highlightedCode = hljs.highlight(normalizedCode, { language: lang }).value;`
	`45`	`+ let highlightedCode = $derived(hljs.highlight(normalizedCode, { language: lang }).value);`
`46`	`46`	`</script>`
`47`	`47`
`48`	`48`	`<div class="code-block" class:full-bleed={fullBleed} bind:this={codeBlockElement}>`