feat(svelte): add support for async rendering (#14430)

* feat: add support for async rendering

* Tidy up fixture

* Format and dedupe

Author: ascorbic

.changeset/spicy-foxes-end.md

@@ -0,0 +1,31 @@
+---
+'@astrojs/svelte': minor
+---
+
+Adds support for async server rendering
+
+Svelte 5.36 added experimental support for async rendering. This allows you to use `await` in your components in several new places. This worked out of the box with client-rendered components, but server-rendered components needed some extra help. This update adds support for async server rendering in Svelte components used in Astro.
+
+To use async rendering, you must enable it in your Svelte config:
+
+```js
+// svelte.config.js
+export default {
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
+};
+```
+
+Then you can use `await` in your components:
+
+```svelte
+<script>
+  let data = await fetch('/api/data').then(res => res.json());
+</script>
+<h1>{data.title}</h1>
+```
+
+See [the Svelte docs](https://svelte.dev/docs/svelte/await-expressions) for more information on using `await` in Svelte components, including inside `$derived` blocks and directly in markup.

examples/framework-multiple/package.json

@@ -22,7 +22,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "solid-js": "^1.9.9",
-    "svelte": "^5.38.10",
+    "svelte": "^5.39.3",
     "vue": "^3.5.21"
   }
 }

examples/framework-svelte/package.json

@@ -12,6 +12,6 @@
   "dependencies": {
     "@astrojs/svelte": "^7.1.1",
     "astro": "^5.13.10",
-    "svelte": "^5.38.10"
+    "svelte": "^5.39.3"
   }
 }

packages/integrations/svelte/package.json

@@ -32,7 +32,8 @@
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",
     "build:ci": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist",
-    "dev": "astro-scripts dev \"src/**/*.ts\""
+    "dev": "astro-scripts dev \"src/**/*.ts\"",
+    "test": "astro-scripts test \"test/**/*.test.js\""
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
@@ -42,7 +43,8 @@
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "svelte": "^5.38.7"
+    "cheerio": "1.1.2",
+    "svelte": "^5.39.3"
   },
   "peerDependencies": {
     "astro": "^5.0.0",

packages/integrations/svelte/src/server.ts

@@ -54,7 +54,7 @@ async function renderToStaticMarkup(
 		}));
 	}
 
-	const result = render(Component, {
+	const result = await render(Component, {
 		props: {
 			...props,
 			children,

packages/integrations/svelte/test/async-rendering.test.js

@@ -0,0 +1,47 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { load as cheerioLoad } from 'cheerio';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+let fixture;
+
+describe('Async rendering', () => {
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/async-rendering/', import.meta.url),
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('Can render async components', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerioLoad(html);
+
+			assert.ok($('.weather').text().startsWith('The current temperature at KSC is'));
+		});
+	});
+
+	describe('dev', () => {
+		/** @type {import('../../../astro/test/test-utils.js').Fixture} */
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('Can render async components', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerioLoad(html);
+
+			assert.ok($('.weather').text().startsWith('The current temperature at KSC is'));
+		});
+	});
+});

packages/integrations/svelte/test/fixtures/async-rendering/astro.config.mjs

@@ -0,0 +1,9 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import svelte from '@astrojs/svelte';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [svelte()]
+});

packages/integrations/svelte/test/fixtures/async-rendering/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "async-rendering",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/svelte": "^7.1.1",
+    "astro": "^5.13.10",
+    "svelte": "^5.39.3"
+  }
+}

packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet
+	}
+
+	let { children }: Props = $props();
+	let count = $state(0);
+
+	function add() {
+		count += 1;
+	}
+
+	function subtract() {
+		count -= 1;
+	}
+</script>
+
+<div class="counter">
+	<button onclick={subtract}>-</button>
+	<pre>{count}</pre>
+	<button onclick={add}>+</button>
+</div>
+<div class="message">
+	{@render children?.()}
+</div>
+
+<style>
+	.counter {
+		display: grid;
+		font-size: 2em;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		margin-top: 2em;
+		place-items: center;
+	}
+
+	.message {
+		text-align: center;
+	}
+</style>

packages/integrations/svelte/test/fixtures/async-rendering/src/components/Waiter.svelte

@@ -0,0 +1,9 @@
+<script>
+	const req = await fetch("https://api.open-meteo.com/v1/forecast?latitude=28.52&longitude=-80.68&current=temperature_2m,wind_speed_10m");
+	const weather = await req.json();
+</script>
+
+
+<p class="weather">The current temperature at KSC is {weather.current.temperature_2m}{weather.current_units.temperature_2m}, with a 
+wind speed of {weather.current.wind_speed_10m} {weather.current_units.wind_speed_10m}. 🚀
+</p>