sveltejs · elliott-with-the-longest-name-on-github · Dec 5, 2025 · Dec 5, 2025 · Dec 5, 2025
diff --git a/packages/kit/test/apps/async/README.md b/packages/kit/test/apps/async/README.md
@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/packages/kit/test/apps/async/package.json b/packages/kit/test/apps/async/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "test-async",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && tsc && svelte-check",
+		"test": "pnpm test:dev && pnpm test:build",
+		"test:dev": "DEV=true playwright test",
+		"test:build": "playwright test"
+	},
+	"devDependencies": {
+		"@sveltejs/kit": "workspace:^",
+		"@sveltejs/vite-plugin-svelte": "catalog:",
+		"svelte": "catalog:",
+		"svelte-check": "catalog:",
+		"typescript": "^5.5.4",
+		"valibot": "catalog:",
+		"vite": "catalog:"
+	}
+}
diff --git a/packages/kit/test/apps/async/playwright.config.js b/packages/kit/test/apps/async/playwright.config.js
@@ -0,0 +1,11 @@
+import process from 'node:process';
+import { config } from '../../utils.js';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	...config,
+	webServer: {
+		command: process.env.DEV ? `pnpm dev` : `pnpm build && pnpm preview`,
+		port: process.env.DEV ? 5173 : 4173
+	}
+});
diff --git a/packages/kit/test/apps/async/src/app.html b/packages/kit/test/apps/async/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/packages/kit/test/apps/async/src/hooks.js b/packages/kit/test/apps/async/src/hooks.js
@@ -0,0 +1,9 @@
+import { Foo } from '$lib';
+
+/** @type {import("@sveltejs/kit").Transport} */
+export const transport = {
+	Foo: {
+		encode: (value) => value instanceof Foo && [value.message],
+		decode: ([message]) => new Foo(message)
+	}
+};
diff --git a/packages/kit/test/apps/async/src/hooks.server.js b/packages/kit/test/apps/async/src/hooks.server.js
@@ -0,0 +1,11 @@
+/** @type {import('@sveltejs/kit').HandleValidationError} */
+export const handleValidationError = ({ issues }) => {
+	return { message: issues[0].message };
+};
+
+/** @type {import('@sveltejs/kit').HandleServerError} */
+export const handleError = ({ error: e, status, message }) => {
+	const error = /** @type {Error} */ (e);
+
+	return { message: `${error.message} (${status} ${message})` };
+};
diff --git a/packages/kit/test/apps/async/src/lib/assets/favicon.svg b/packages/kit/test/apps/async/src/lib/assets/favicon.svg
diff --git a/packages/kit/test/apps/async/src/lib/index.js b/packages/kit/test/apps/async/src/lib/index.js
@@ -0,0 +1,9 @@
+export class Foo {
+	constructor(message) {
+		this.message = message;
+	}
+
+	bar() {
+		return this.message + '!';
+	}
+}
diff --git a/packages/kit/test/apps/async/src/routes/+error.svelte b/packages/kit/test/apps/async/src/routes/+error.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { page } from '$app/state';
+
+	console.log('hi');
+</script>
+
+<svelte:head>
+	<title>Custom error page: {page.error.message}</title>
+</svelte:head>
+
+<h1>{page.status}</h1>
+
+<p id="message">This is your custom error page saying: "<b>{page.error.message}</b>"</p>
+
+<style>
+	h1,
+	p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+		color: red;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
diff --git a/packages/kit/test/apps/async/src/routes/+layout.svelte b/packages/kit/test/apps/async/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { setup } from '../../../../setup.js';
+
+	const { children } = $props();
+
+	setup();
+</script>
+
+{@render children?.()}
diff --git a/...st/apps/basics/src/routes/remote/+page.js → ...est/apps/async/src/routes/remote/+page.js b/...st/apps/basics/src/routes/remote/+page.js → ...est/apps/async/src/routes/remote/+page.js
diff --git a/...pps/basics/src/routes/remote/+page.svelte → ...apps/async/src/routes/remote/+page.svelte b/...pps/basics/src/routes/remote/+page.svelte → ...apps/async/src/routes/remote/+page.svelte
@@ -23,13 +23,12 @@
 </script>
 
 <p id="echo-result">{data.echo_result}</p>
-<!-- TODO use await here once async lands -->
 {#if browser}
 	<p id="count-result">
-		{#await count then result}{result}{/await} / {count.current} ({count.loading})
+		{await count} / {count.current} ({count.loading})
 	</p>
 	<!-- this is just here to check that it is re-requested after the command -->
-	{#await add({ a: 2, b: 2 }) then result}{result}{/await}
+	{await add({ a: 2, b: 2 })}
 {/if}
 <p id="command-result">{command_result}</p>
 
@@ -110,4 +109,8 @@
 </button>
 <button id="resolve-deferreds" onclick={() => resolve_deferreds()}>Resolve Deferreds</button>
 
-<a href="/remote/event">/remote/event</a>
+<!-- 
+	TODO: preloading currently breaks this, because the fork is run on the current route
+	or something like that. Remove `data-sveltekit-preload-data="off"` when fixed.
+-->
+<a href="/remote/event" data-sveltekit-preload-data="off">/remote/event</a>
diff --git a/...src/routes/remote/accessing-env.remote.js → ...src/routes/remote/accessing-env.remote.js b/...src/routes/remote/accessing-env.remote.js → ...src/routes/remote/accessing-env.remote.js
diff --git a/...s/basics/src/routes/remote/batch/+page.js → ...ps/async/src/routes/remote/batch/+page.js b/...s/basics/src/routes/remote/batch/+page.js → ...ps/async/src/routes/remote/batch/+page.js
diff --git a/...sics/src/routes/remote/batch/+page.svelte → ...sync/src/routes/remote/batch/+page.svelte b/...sics/src/routes/remote/batch/+page.svelte → ...sync/src/routes/remote/batch/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import {
 		get_todo,
 		set_todo_title_server_refresh,
@@ -17,13 +17,19 @@
 <ul>
 	{#each todos as { id, promise }, idx (idx)}
 		<li>
-			{#await promise}
-				<span id="batch-result-{idx + 1}">Loading todo {id}...</span>
-			{:then todo}
-				<span id="batch-result-{idx + 1}">{todo.title}</span>
-			{:catch error}
-				<span id="batch-result-{idx + 1}">Error loading todo {id}: {error.body.message}</span>
-			{/await}
+			<svelte:boundary>
+				<span id="batch-result-{idx + 1}">{(await promise).title}</span>
+
+				{#snippet pending()}
+					<span id="batch-result-{idx + 1}">Loading todo {id}...</span>
+				{/snippet}
+
+				{#snippet failed(error)}
+					<span id="batch-result-{idx + 1}"
+						>Error loading todo {id}: {(error as any).body.message}</span
+					>
+				{/snippet}
+			</svelte:boundary>
 		</li>
 	{/each}
 </ul>

diff --git a/...s/src/routes/remote/batch/batch.remote.js → ...c/src/routes/remote/batch/batch.remote.js b/...s/src/routes/remote/batch/batch.remote.js → ...c/src/routes/remote/batch/batch.remote.js
diff --git a/...basics/src/routes/remote/dev/+page.svelte → .../async/src/routes/remote/dev/+page.svelte b/...basics/src/routes/remote/dev/+page.svelte → .../async/src/routes/remote/dev/+page.svelte
diff --git a/...routes/remote/dev/preload/+page.server.js → ...routes/remote/dev/preload/+page.server.js b/...routes/remote/dev/preload/+page.server.js → ...routes/remote/dev/preload/+page.server.js
diff --git a/...rc/routes/remote/dev/preload/+page.svelte → ...rc/routes/remote/dev/preload/+page.svelte b/...rc/routes/remote/dev/preload/+page.svelte → ...rc/routes/remote/dev/preload/+page.svelte
diff --git a/...utes/remote/dev/preload/example.remote.js → ...utes/remote/dev/preload/example.remote.js b/...utes/remote/dev/preload/example.remote.js → ...utes/remote/dev/preload/example.remote.js
diff --git a/...s/src/routes/remote/dev/preload/schema.js → ...c/src/routes/remote/dev/preload/schema.js b/...s/src/routes/remote/dev/preload/schema.js → ...c/src/routes/remote/dev/preload/schema.js
diff --git a/packages/kit/test/apps/async/src/routes/remote/event/+page.svelte b/packages/kit/test/apps/async/src/routes/remote/event/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { get_event } from './data.remote.js';
+
+	const event = await get_event();
+</script>
+
+<p data-id="route">route: {event.route.id}</p>
+<p data-id="pathname">pathname: {event.url.pathname}</p>
diff --git a/...cs/src/routes/remote/event/data.remote.ts → ...nc/src/routes/remote/event/data.remote.ts b/...cs/src/routes/remote/event/data.remote.ts → ...nc/src/routes/remote/event/data.remote.ts
diff --git a/...utes/remote/form/[test_name]/+page.svelte → ...utes/remote/form/[test_name]/+page.svelte b/...utes/remote/form/[test_name]/+page.svelte → ...utes/remote/form/[test_name]/+page.svelte
@@ -16,10 +16,7 @@
 
 <p>message.current: {message.current}</p>
 
-<!-- TODO use await here once async lands -->
-{#await message then m}
-	<p>await get_message(): {m}</p>
-{/await}
+<p>await get_message(): {await message}</p>
 
 <hr />
 

diff --git a/...es/remote/form/[test_name]/form.remote.ts → ...es/remote/form/[test_name]/form.remote.ts b/...es/remote/form/[test_name]/form.remote.ts → ...es/remote/form/[test_name]/form.remote.ts
diff --git a/...utes/remote/form/file-upload/+page.svelte → ...utes/remote/form/file-upload/+page.svelte b/...utes/remote/form/file-upload/+page.svelte → ...utes/remote/form/file-upload/+page.svelte
diff --git a/...es/remote/form/file-upload/form.remote.ts → ...es/remote/form/file-upload/form.remote.ts b/...es/remote/form/file-upload/form.remote.ts → ...es/remote/form/file-upload/form.remote.ts
diff --git a/...outes/remote/form/imperative/+page.svelte → ...outes/remote/form/imperative/+page.svelte b/...outes/remote/form/imperative/+page.svelte → ...outes/remote/form/imperative/+page.svelte
diff --git a/...s/remote/form/preflight-only/+page.svelte → ...s/remote/form/preflight-only/+page.svelte b/...s/remote/form/preflight-only/+page.svelte → ...s/remote/form/preflight-only/+page.svelte
@@ -11,12 +11,9 @@
 	});
 </script>
 
-<!-- TODO use await here once async lands -->
-{#await data then { a, b, c }}
-	<p>a: {a}</p>
-	<p>b: {b}</p>
-	<p>c: {c}</p>
-{/await}
+<p>a: {(await data).a}</p>
+<p>b: {(await data).b}</p>
+<p>c: {(await data).c}</p>
 
 <hr />
 

diff --git a/...remote/form/preflight-only/form.remote.ts → ...remote/form/preflight-only/form.remote.ts b/...remote/form/preflight-only/form.remote.ts → ...remote/form/preflight-only/form.remote.ts
diff --git a/...routes/remote/form/preflight/+page.svelte → ...routes/remote/form/preflight/+page.svelte b/...routes/remote/form/preflight/+page.svelte → ...routes/remote/form/preflight/+page.svelte
@@ -13,10 +13,7 @@
 
 <p>number.current: {number.current}</p>
 
-<!-- TODO use await here once async lands -->
-{#await number then n}
-	<p>await get_number(): {n}</p>
-{/await}
+<p>await get_number(): {await number}</p>
 
 <hr />
 

diff --git a/...utes/remote/form/preflight/form.remote.ts → ...utes/remote/form/preflight/form.remote.ts b/...utes/remote/form/preflight/form.remote.ts → ...utes/remote/form/preflight/form.remote.ts
diff --git a/...remote/form/select-untouched/+page.svelte → ...remote/form/select-untouched/+page.svelte b/...remote/form/select-untouched/+page.svelte → ...remote/form/select-untouched/+page.svelte
diff --git a/...mote/form/select-untouched/form.remote.ts → ...mote/form/select-untouched/form.remote.ts b/...mote/form/select-untouched/form.remote.ts → ...mote/form/select-untouched/form.remote.ts
diff --git a/...routes/remote/form/submitter/+page.svelte → ...routes/remote/form/submitter/+page.svelte b/...routes/remote/form/submitter/+page.svelte → ...routes/remote/form/submitter/+page.svelte
diff --git a/...utes/remote/form/submitter/form.remote.ts → ...utes/remote/form/submitter/form.remote.ts b/...utes/remote/form/submitter/form.remote.ts → ...utes/remote/form/submitter/form.remote.ts
diff --git a/...outes/remote/form/underscore/+page.svelte → ...outes/remote/form/underscore/+page.svelte b/...outes/remote/form/underscore/+page.svelte → ...outes/remote/form/underscore/+page.svelte
diff --git a/...tes/remote/form/underscore/form.remote.ts → ...tes/remote/form/underscore/form.remote.ts b/...tes/remote/form/underscore/form.remote.ts → ...tes/remote/form/underscore/form.remote.ts
diff --git a/.../routes/remote/form/validate/+page.svelte → .../routes/remote/form/validate/+page.svelte b/.../routes/remote/form/validate/+page.svelte → .../routes/remote/form/validate/+page.svelte
diff --git a/...outes/remote/form/validate/form.remote.ts → ...outes/remote/form/validate/form.remote.ts b/...outes/remote/form/validate/form.remote.ts → ...outes/remote/form/validate/form.remote.ts
diff --git a/...src/routes/remote/form/value/+page.svelte → ...src/routes/remote/form/value/+page.svelte b/...src/routes/remote/form/value/+page.svelte → ...src/routes/remote/form/value/+page.svelte
diff --git a/.../routes/remote/form/value/value.remote.ts → .../routes/remote/form/value/value.remote.ts b/.../routes/remote/form/value/value.remote.ts → .../routes/remote/form/value/value.remote.ts
diff --git a/.../src/routes/remote/prerender/+page.svelte → .../src/routes/remote/prerender/+page.svelte b/.../src/routes/remote/prerender/+page.svelte → .../src/routes/remote/prerender/+page.svelte
diff --git a/.../remote/prerender/functions-only/+page.js → .../remote/prerender/functions-only/+page.js b/.../remote/prerender/functions-only/+page.js → .../remote/prerender/functions-only/+page.js
diff --git a/...ote/prerender/functions-only/+page.svelte → ...ote/prerender/functions-only/+page.svelte b/...ote/prerender/functions-only/+page.svelte → ...ote/prerender/functions-only/+page.svelte
diff --git a/...utes/remote/prerender/prerender.remote.js → ...utes/remote/prerender/prerender.remote.js b/...utes/remote/prerender/prerender.remote.js → ...utes/remote/prerender/prerender.remote.js
diff --git a/...sics/src/routes/remote/prerender/test.txt → ...sync/src/routes/remote/prerender/test.txt b/...sics/src/routes/remote/prerender/test.txt → ...sync/src/routes/remote/prerender/test.txt
diff --git a/...utes/remote/prerender/whole-page/+page.js → ...utes/remote/prerender/whole-page/+page.js b/...utes/remote/prerender/whole-page/+page.js → ...utes/remote/prerender/whole-page/+page.js
diff --git a/.../remote/prerender/whole-page/+page.svelte → .../remote/prerender/whole-page/+page.svelte b/.../remote/prerender/whole-page/+page.svelte → .../remote/prerender/whole-page/+page.svelte
diff --git a/...src/routes/remote/query-command.remote.js → ...src/routes/remote/query-command.remote.js b/...src/routes/remote/query-command.remote.js → ...src/routes/remote/query-command.remote.js
diff --git a/packages/kit/test/apps/async/src/routes/remote/query-non-exported/+page.svelte b/packages/kit/test/apps/async/src/routes/remote/query-non-exported/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { total } from './data.remote.js';
+</script>
+
+<h1>{await total()}</h1>
diff --git a/.../remote/query-non-exported/data.remote.ts → .../remote/query-non-exported/data.remote.ts b/.../remote/query-non-exported/data.remote.ts → .../remote/query-non-exported/data.remote.ts
diff --git a/...routes/remote/query-redirect/+page.svelte → ...routes/remote/query-redirect/+page.svelte b/...routes/remote/query-redirect/+page.svelte → ...routes/remote/query-redirect/+page.svelte
diff --git a/...es/kit/test/apps/async/src/routes/remote/query-redirect/from-common-layout/+layout.svelte b/...es/kit/test/apps/async/src/routes/remote/query-redirect/from-common-layout/+layout.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { page } from '$app/state';
+	import { layoutRedirect } from '../redirect.remote';
+
+	let { children } = $props();
+</script>
+
+<p id="layout-query">
+	on page {await layoutRedirect(page.url.pathname)} (== {page.url.pathname})
+</p>
+
+{@render children()}
diff --git a/...-redirect/from-common-layout/+page.svelte → ...-redirect/from-common-layout/+page.svelte b/...-redirect/from-common-layout/+page.svelte → ...-redirect/from-common-layout/+page.svelte
diff --git a/...rom-common-layout/redirected/+page.svelte → ...rom-common-layout/redirected/+page.svelte b/...rom-common-layout/redirected/+page.svelte → ...rom-common-layout/redirected/+page.svelte
diff --git a/packages/kit/test/apps/async/src/routes/remote/query-redirect/from-page/+page.svelte b/packages/kit/test/apps/async/src/routes/remote/query-redirect/from-page/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { pageRedirect } from '../redirect.remote';
+</script>
+
+<svelte:boundary>
+	{await pageRedirect()}
+	<p>should never see this</p>
+</svelte:boundary>
diff --git a/.../remote/query-redirect/redirect.remote.js → .../remote/query-redirect/redirect.remote.js b/.../remote/query-redirect/redirect.remote.js → .../remote/query-redirect/redirect.remote.js
diff --git a/...te/query-redirect/redirected/+page.svelte → ...te/query-redirect/redirected/+page.svelte b/...te/query-redirect/redirected/+page.svelte → ...te/query-redirect/redirected/+page.svelte
diff --git a/...outes/remote/server-endpoint/+page.svelte → ...outes/remote/server-endpoint/+page.svelte b/...outes/remote/server-endpoint/+page.svelte → ...outes/remote/server-endpoint/+page.svelte
diff --git a/...tes/remote/server-endpoint/api/+server.ts → ...tes/remote/server-endpoint/api/+server.ts b/...tes/remote/server-endpoint/api/+server.ts → ...tes/remote/server-endpoint/api/+server.ts
diff --git a/...remote/server-endpoint/internal.remote.ts → ...remote/server-endpoint/internal.remote.ts b/...remote/server-endpoint/internal.remote.ts → ...remote/server-endpoint/internal.remote.ts
diff --git a/packages/kit/test/apps/async/src/routes/remote/transport/+page.svelte b/packages/kit/test/apps/async/src/routes/remote/transport/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { greeting } from './data.remote.js';
+</script>
+
+<h1>{(await greeting()).bar()}</h1>
diff --git a/...rc/routes/remote/transport/data.remote.ts → ...rc/routes/remote/transport/data.remote.ts b/...rc/routes/remote/transport/data.remote.ts → ...rc/routes/remote/transport/data.remote.ts
diff --git a/...src/routes/remote/validation/+page.svelte → ...src/routes/remote/validation/+page.svelte b/...src/routes/remote/validation/+page.svelte → ...src/routes/remote/validation/+page.svelte
diff --git a/...es/remote/validation/validation.remote.js → ...es/remote/validation/validation.remote.js b/...es/remote/validation/validation.remote.js → ...es/remote/validation/validation.remote.js
diff --git a/packages/kit/test/apps/async/static/robots.txt b/packages/kit/test/apps/async/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
diff --git a/packages/kit/test/apps/async/svelte.config.js b/packages/kit/test/apps/async/svelte.config.js
@@ -0,0 +1,16 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	},
+
+	kit: {
+		experimental: {
+			remoteFunctions: true
+		}
+	}
+};
+
+export default config;