feat: separate tweet component and load tweets one by one

Author: ryoppippi

package.json

@@ -50,6 +50,7 @@
 		"typescript": "^5.8.3",
 		"typescript-svelte-plugin": "^0.3.47",
 		"unocss": "^66.1.3",
+		"valibot": "^1.1.0",
 		"vite": "npm:rolldown-vite@latest",
 		"vite-plugin-favicons": "^0.1.7"
 	},

pnpm-lock.yaml

@@ -0,0 +1,14 @@
+<script lang='ts'>
+	import { Tweet as Sveltweet } from 'sveltweet';
+	import { getTweet } from './getTweet.remote';
+
+	type Props = Parameters<typeof getTweet>[0];
+
+	const { id }: Props = $props();
+</script>
+
+<svelte:boundary>
+	{#snippet pending()} loading{/snippet}
+	<!-- eslint-disable-next-line antfu/no-top-level-await -->
+	<Sveltweet tweet={await getTweet({ id })} />
+</svelte:boundary>

src/lib/Tweet/Tweet.svelte

@@ -0,0 +1,28 @@
+import { prerender } from '$app/server';
+import { retry } from '@std/async';
+import { error } from '@sveltejs/kit';
+import * as sveltweet from 'sveltweet/api';
+import * as v from 'valibot';
+
+const getTweetPropsSchema = v.object({
+	id: v.string(),
+});
+
+/**
+ * tweet を取得するRemote function
+ * https://svelte.dev/docs/kit/remote-functions#form
+ */
+export const getTweet = prerender(getTweetPropsSchema, async ({ id }) => {
+	const tweet = await retry(async () => {
+		const _tweet = await sveltweet.getTweet(id);
+
+		if (_tweet == null) {
+			throw new Error(`Retry: Tweet not found: ${id}`);
+		}
+		return _tweet;
+	});
+	if (tweet == null) {
+		error(404, `Tweet not found: ${id}`);
+	}
+	return tweet;
+});

src/lib/Tweet/getTweet.remote.ts

@@ -0,0 +1,3 @@
+import Tweet from './Tweet.svelte';
+
+export { Tweet };

src/lib/Tweet/index.ts

@@ -1,17 +1,15 @@
 <script lang='ts'>
 	import { Heading } from '$/lib/Heading';
-	import { Tweet } from 'sveltweet';
-	import { getTweets } from './tweet.remote';
-
-	const tweets = getTweets();
+	import { LISTENERS_TWEET_IDS } from '$/lib/links';
+	import { Tweet } from '$/lib/Tweet';
 </script>
 
 <section>
 	<Heading title='リスナーの声' />
 	<svelte:boundary>
 		<div data-theme='dark'>
-			{#each tweets.current as tweet (tweet.id_str)}
-				<Tweet {tweet} />
+			{#each LISTENERS_TWEET_IDS as id (id)}
+				<Tweet {id} />
 			{/each}
 		</div>
 	</svelte:boundary>