migrate some more stuff

Author: Rich-Harris

apps/svelte.dev/src/lib/remote/auth.remote.ts

@@ -0,0 +1,7 @@
+import { getRequestEvent, query } from '$app/server';
+import * as session from '$lib/db/session';
+
+export const get_user = query(() => {
+	const { request } = getRequestEvent();
+	return session.from_cookie(request.headers.get('cookie'));
+});

apps/svelte.dev/src/routes/(authed)/apps/+page.server.js

@@ -3,8 +3,9 @@
 	import { ago } from '$lib/time';
 	import { goto, invalidateAll } from '$app/navigation';
 	import { get_app_context } from '../app-context.js';
-
-	let { data } = $props();
+	import { get_user } from '$lib/remote/auth.remote.js';
+	import { get_gists } from './data.remote.js';
+	import { page } from '$app/state';
 
 	const { login, logout } = get_app_context();
 
@@ -14,6 +15,17 @@
 	let selected: string[] = $state([]);
 	const selecting = $derived(selected.length > 0);
 
+	const user = $derived(await get_user());
+
+	const search = page.url.searchParams.get('search') ?? '';
+
+	const { gists, next } = $derived(
+		await get_gists({
+			search,
+			offset: parseInt(page.url.searchParams.get('offset') ?? '0')
+		})
+	);
+
 	async function destroy_selected() {
 		const confirmed = confirm(
 			`Are you sure you want to delete ${selected.length} ${
@@ -54,17 +66,17 @@
 </svelte:head>
 
 <div class="apps">
-	{#if data.user}
+	{#if user}
 		<header>
 			<h1>Your apps</h1>
 			<div class="user">
 				<img
 					class="avatar"
-					alt="{data.user.github_name || data.user.github_login} avatar"
-					src={data.user.github_avatar_url}
+					alt="{user.github_name || user.github_login} avatar"
+					src={user.github_avatar_url}
 				/>
 				<span>
-					{data.user.github_name || data.user.github_login}
+					{user.github_name || user.github_login}
 					(<a onclick={(e) => (e.preventDefault(), logout())} href="/auth/logout">log out</a>)
 				</span>
 			</div>
@@ -92,15 +104,15 @@
 						placeholder="Search"
 						aria-label="Search"
 						name="search"
-						value={data.search}
+						value={page.url.searchParams.get('search')}
 					/>
 				</form>
 			{/if}
 		</div>
 
-		{#if data.gists.length > 0}
+		{#if gists.length > 0}
 			<ul class:selecting>
-				{#each data.gists as gist}
+				{#each gists as gist}
 					<li class:selected={selected.includes(gist.id)}>
 						<a href={selecting ? undefined : `/playground/${gist.id}`}>
 							<h2>{gist.name}</h2>
@@ -121,12 +133,10 @@
 
 			<div class="pagination">
 				<!-- TODO more sophisticated pagination -->
-				{#if data.next !== null && !selecting}
-					<a
-						href="/apps?offset={data.next}{data.search
-							? `&search=${encodeURIComponent(data.search)}`
-							: ''}">Next page...</a
-					>
+				{#if next !== null && !selecting}
+					<a href="/apps?offset={next}{search ? `&search=${encodeURIComponent(search)}` : ''}">
+						Next page...
+					</a>
 				{/if}
 			</div>
 		{:else}

apps/svelte.dev/src/routes/(authed)/apps/+page.svelte

@@ -0,0 +1,20 @@
+import { query } from '$app/server';
+import * as gist from '$lib/db/gist';
+import { get_user } from '$lib/remote/auth.remote';
+import * as v from 'valibot';
+
+export const get_gists = query(
+	v.object({
+		search: v.string(),
+		offset: v.optional(v.number())
+	}),
+	async ({ search, offset = 0 }) => {
+		const user = await get_user();
+
+		if (!user) {
+			return { gists: [], next: null };
+		}
+
+		return gist.list(user, { offset, search });
+	}
+);

apps/svelte.dev/src/routes/(authed)/apps/data.remote.ts

@@ -1,8 +1,9 @@
-import * as session from '$lib/db/session';
 import * as gist from '$lib/db/gist';
+import { get_user } from '$lib/remote/auth.remote.js';
 
+// TODO this should be a `form` or `command`
 export async function POST({ request }) {
-	const user = await session.from_cookie(request.headers.get('cookie'));
+	const user = await get_user();
 	if (!user) return new Response(undefined, { status: 401 });
 
 	const body = await request.json();

apps/svelte.dev/src/routes/(authed)/apps/destroy/+server.js

@@ -12,6 +12,7 @@
 	import { page } from '$app/state';
 	import type { File } from '@sveltejs/repl/workspace';
 	import { get_example, get_example_index, get_gist } from '../data.remote.js';
+	import { get_user } from '$lib/remote/auth.remote.js';
 
 	let { data, params } = $props();
 
@@ -181,7 +182,9 @@
 		}
 	}
 
-	const relaxed = $derived(gist.relaxed || (data.user && data.user.id === gist.owner));
+	const user = $derived(await get_user());
+
+	const relaxed = $derived(gist.relaxed || (user && user.id === gist.owner));
 </script>
 
 <svelte:head>
@@ -214,7 +217,7 @@
 <div class="repl-outer">
 	<AppControls
 		{examples}
-		user={data.user}
+		{user}
 		{gist}
 		forked={handle_fork}
 		saved={handle_save}

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -10,10 +10,10 @@
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import type { File } from '@sveltejs/repl/workspace';
 	import type { Repl } from '@sveltejs/repl';
+	import { get_user } from '$lib/remote/auth.remote';
 
 	interface Props {
 		examples: Array<{ title: string; examples: any[] }>;
-		user: User | null;
 		repl: ReturnType<typeof Repl>;
 		gist: Gist;
 		name: string;
@@ -25,7 +25,6 @@
 	let {
 		name = $bindable(),
 		modified = $bindable(),
-		user,
 		repl,
 		gist,
 		examples,
@@ -44,6 +43,8 @@
 		return new Promise((f) => setTimeout(f, ms));
 	}
 
+	const user = $derived(await get_user());
+
 	const canSave = $derived(user && gist && gist.owner === user.id);
 
 	function handleKeydown(event: KeyboardEvent) {

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -7,6 +7,7 @@
 	import { page } from '$app/state';
 	import { decode_and_decompress_text } from '../gzip.js';
 	import type { File } from '@sveltejs/repl/workspace';
+	import { get_user } from '$lib/remote/auth.remote.js';
 
 	let { data } = $props();
 
@@ -51,7 +52,9 @@
 		set_files();
 	});
 
-	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
+	const user = $derived(await get_user());
+
+	const relaxed = $derived(data.gist.relaxed || (user && user.id === data.gist.owner));
 </script>
 
 <svelte:head>

apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

@@ -1,9 +1,9 @@
 import * as gist from '$lib/db/gist';
-import * as session from '$lib/db/session';
+import { get_user } from '$lib/remote/auth.remote.js';
 import { error, json } from '@sveltejs/kit';
 
 export async function POST({ request }) {
-	const user = await session.from_cookie(request.headers.get('cookie'));
+	const user = await get_user();
 	if (!user) error(401);
 
 	const body = await request.json();

apps/svelte.dev/src/routes/(authed)/playground/create.json/+server.js

@@ -1,10 +1,10 @@
 import * as gist from '$lib/db/gist';
-import * as session from '$lib/db/session';
+import { get_user } from '$lib/remote/auth.remote.js';
 import { error } from '@sveltejs/kit';
 
 // TODO reimplement as an action
 export async function PUT({ params, request }) {
-	const user = await session.from_cookie(request.headers.get('cookie'));
+	const user = await get_user();
 	if (!user) error(401, 'Unauthorized');
 
 	const body = await request.json();