Merge pull request #359 from vim-jp-radio/remote

Remote function

Author: ryoppippi

package.json

@@ -29,7 +29,7 @@
 		"@std/collections": "jsr:^1.0.8",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/enhanced-img": "^0.6.0",
-		"@sveltejs/kit": "^2.21.2",
+		"@sveltejs/kit": "^2.27.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@types/node": "^20.17.57",
 		"@unocss/eslint-plugin": "^66.1.3",
@@ -42,14 +42,15 @@
 		"lint-staged": "^16.1.0",
 		"renovate": "^40.40.1",
 		"std-env": "^3.9.0",
-		"svelte": "^5.33.14",
+		"svelte": "^5.37.2",
 		"svelte-check": "^4.2.1",
 		"svelte-eslint-parser": "^1.2.0",
 		"svelte-preprocess-budoux": "^1.1.2",
 		"sveltweet": "^0.4.3",
 		"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,13 @@
+<script lang='ts'>
+	import { Tweet as Sveltweet } from 'sveltweet';
+	import { getTweet } from './getTweet.remote';
+
+	type Props = Parameters<typeof getTweet>[0];
+
+	const { id }: Props = $props();
+	const tweet = getTweet({ id });
+</script>
+
+{#if tweet.current != null}
+	<Sveltweet tweet={tweet.current} />
+{/if}

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
+ */
+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

@@ -6,9 +6,6 @@
 	import Personalities from './Personalities.svelte';
 	import Platforms from './Platforms.svelte';
 	import RadioLetter from './RadioLetter.svelte';
-
-	/* +page.server.ts からデータを取得 */
-	const { data } = $props();
 </script>
 
 <Header />
@@ -18,7 +15,7 @@
 	<Platforms />
 	<Personalities />
 	<RadioLetter />
-	<ListenersTweets tweets={data.tweets} />
+	<ListenersTweets />
 </main>
 
 <Footer />

src/routes/+page.server.ts

@@ -1,16 +1,14 @@
 <script lang='ts'>
-	import type { Tweet as TweetT } from 'sveltweet/api';
 	import { Heading } from '$/lib/Heading';
-	import { Tweet } from 'sveltweet';
-
-	const { tweets }: { tweets: TweetT[] } = $props();
+	import { LISTENERS_TWEET_IDS } from '$/lib/links';
+	import { Tweet } from '$/lib/Tweet';
 </script>
 
 <section>
 	<Heading title='リスナーの声' />
 	<div data-theme='dark'>
-		{#each tweets as tweet (tweet.id_str)}
-			<Tweet {tweet} />
+		{#each LISTENERS_TWEET_IDS as id (id)}
+			<Tweet {id} />
 		{/each}
 	</div>
 </section>

src/routes/+page.svelte

@@ -19,6 +19,12 @@ const config = {
 		budouxPreprocess({ language: 'ja', attribute: 'data-budoux' }), // budouxを使って日本語の改行をいい感じにする。 https://github.com/google/budoux/tree/main/javascript https://github.com/ryoppippi/svelte-preprocess-budoux
 	],
 
+	compilerOptions: {
+		experimental: {
+			async: true,
+		},
+	},
+
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
@@ -27,6 +33,10 @@ const config = {
 			fallback: '404.html',
 		}),
 
+		experimental: {
+			remoteFunctions: true,
+		},
+
 		typescript: {
 			config(config) {
 				config.include.push(path.join(import.meta.dirname, 'uno.config.ts'));