my website at ewancroft.uk
refactor(BlueskyPostCard): migrate to Svelte 5 runes
Replace lifecycle hooks (onMount/onDestroy) with $effect rune and convert
reactive state variables to use $state rune for Svelte 5 compatibility.
+19
-23
+19
-23
src/lib/components/layout/main/card/BlueskyPostCard.svelte
+19
-23
src/lib/components/layout/main/card/BlueskyPostCard.svelte
···
1
1
<script lang="ts">
2
-
import { onMount, onDestroy } from 'svelte';
3
2
import { Card } from '$lib/components/ui';
4
3
import { fetchLatestBlueskyPost, type BlueskyPost } from '$lib/services/atproto';
5
4
import { formatRelativeTime } from '$lib/utils/formatDate';
···
7
6
import { Heart, Repeat2, MessageCircle, ExternalLink, X } from '@lucide/svelte';
8
7
import Hls from 'hls.js';
9
8
10
-
let post: BlueskyPost | null = null;
11
-
let loading = true;
12
-
let error: string | null = null;
13
-
let lightboxImage: { url: string; alt: string } | null = null;
14
-
let pollInterval: ReturnType<typeof setInterval> | null = null;
9
+
let post = $state<BlueskyPost | null>(null);
10
+
let loading = $state(true);
11
+
let error = $state<string | null>(null);
12
+
let lightboxImage = $state<{ url: string; alt: string } | null>(null);
15
13
let videoElements = new Map<string, { element: HTMLVideoElement; hls: Hls | null }>();
16
14
17
15
// Detect system locale, fallback to en-GB
···
36
34
}
37
35
}
38
36
39
-
onMount(async () => {
37
+
// Initial load and polling setup using $effect
38
+
$effect(() => {
40
39
// Initial load
41
-
await loadPost();
40
+
loadPost();
42
41
43
42
// Set up polling for new posts
44
-
pollInterval = setInterval(async () => {
43
+
const pollInterval = setInterval(async () => {
45
44
console.log('[BlueskyPostCard] Polling for new posts...');
46
45
await loadPost();
47
46
}, POLL_INTERVAL);
48
-
});
49
47
50
-
onDestroy(() => {
51
-
// Clean up interval on component destroy
52
-
if (pollInterval) {
48
+
// Cleanup function
49
+
return () => {
53
50
clearInterval(pollInterval);
54
-
pollInterval = null;
55
-
}
56
-
// Clean up all HLS instances
57
-
videoElements.forEach(({ hls }) => {
58
-
if (hls) {
59
-
hls.destroy();
60
-
}
61
-
});
62
-
videoElements.clear();
51
+
// Clean up all HLS instances
52
+
videoElements.forEach(({ hls }) => {
53
+
if (hls) {
54
+
hls.destroy();
55
+
}
56
+
});
57
+
videoElements.clear();
58
+
};
63
59
});
64
60
65
61
function getPostUrl(uri: string): string {
···
528
524
{/if}
529
525
</div>
530
526
</div>
531
-
{/if}
527
+
{/if}