fix: afterNavigate callback not running after hydration when experimental async is enabled

.changeset/ten-rats-spend.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: `afterNavigate` callback not running after hydration when experimental async is enabled
+fix: Snapshot `restore` method not called after reload when experimental async is enabled

.github/workflows/ci.yml

@@ -181,6 +181,40 @@ jobs:
           retention-days: 3
           name: test-failure-server-side-route-resolution-${{ matrix.mode }}-${{ github.run_id }}
           path: test-results-server-side-route-resolution-${{ matrix.mode }}.tar.gz
+  test-kit-svelte-async:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - mode: 'dev'
+          - mode: 'build'
+    steps:
+      - run: git config --global core.autocrlf false
+      - uses: actions/checkout@v5
+      - uses: pnpm/[email protected]
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm playwright install chromium
+      - run: pnpm run sync-all
+      - run: pnpm test:svelte-async:${{ matrix.mode }}
+      - name: Print flaky test report
+        run: node scripts/print-flaky-test-report.js
+      - name: Archive test results
+        if: failure()
+        shell: bash
+        run: find packages -type d -name test-results -not -empty | tar -czf test-results-svelte-async-${{ matrix.mode }}.tar.gz --files-from=-
+      - name: Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v5
+        with:
+          retention-days: 3
+          name: test-failure-svelte-async-${{ matrix.mode }}-${{ github.run_id }}
+          path: test-results-svelte-async-${{ matrix.mode }}.tar.gz
   test-others:
     runs-on: ubuntu-latest
     strategy:

package.json

@@ -10,6 +10,8 @@
 		"test:cross-platform:build": "pnpm run --dir packages/kit test:cross-platform:build",
 		"test:server-side-route-resolution:dev": "pnpm run --dir packages/kit test:server-side-route-resolution:dev",
 		"test:server-side-route-resolution:build": "pnpm run --dir packages/kit test:server-side-route-resolution:build",
+		"test:svelte-async:dev": "pnpm run --dir packages/kit test:svelte-async:dev",
+		"test:svelte-async:build": "pnpm run --dir packages/kit test:svelte-async:build",
 		"test:vite-ecosystem-ci": "pnpm --dir packages/kit test",
 		"test:others": "pnpm -r --filter='./packages/*' --filter=!./packages/kit/ --workspace-concurrency=1 test",
 		"check": "pnpm -r prepublishOnly && pnpm -r check",

packages/kit/package.json

@@ -80,6 +80,8 @@
 		"test:cross-platform:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:cross-platform:build",
 		"test:server-side-route-resolution:dev": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:server-side-route-resolution:dev",
 		"test:server-side-route-resolution:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:server-side-route-resolution:build",
+		"test:svelte-async:dev": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:svelte-async:dev",
+		"test:svelte-async:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:svelte-async:build",
 		"test:unit:dev": "vitest --config kit.vitest.config.js run",
 		"test:unit:prod": "NODE_ENV=production vitest --config kit.vitest.config.js run csp.spec.js cookie.spec.js",
 		"test:unit": "pnpm test:unit:dev && pnpm test:unit:prod",

packages/kit/src/runtime/client/client.js

@@ -572,7 +572,7 @@ async function _preload_code(url) {
  * @param {HTMLElement} target
  * @param {boolean} hydrate
  */
-function initialize(result, target, hydrate) {
+async function initialize(result, target, hydrate) {
 	if (DEV && result.state.error && document.querySelector('vite-error-overlay')) return;
 
 	current = result.state;
@@ -590,6 +590,10 @@ function initialize(result, target, hydrate) {
 		sync: false
 	});
 
+	// Wait for a microtask in case svelte experimental async is enabled,
+	// which causes component script blocks to run asynchronously
+	void (await Promise.resolve());
+
 	restore_snapshot(current_navigation_index);
 
 	if (hydrate) {
@@ -1737,7 +1741,7 @@ async function navigate({
 
 		has_navigated = true;
 	} else {
-		initialize(navigation_result, target, false);
+		await initialize(navigation_result, target, false);
 	}
 
 	const { activeElement } = document;
@@ -2845,7 +2849,7 @@ async function _hydrate(
 		result.props.page.state = {};
 	}
 
-	initialize(result, target, hydrate);
+	await initialize(result, target, hydrate);
 }
 
 /**

packages/kit/test/apps/basics/package.json

@@ -15,6 +15,8 @@
 		"test:cross-platform:build": "node test/setup.js && playwright test test/cross-platform/",
 		"test:server-side-route-resolution:dev": "node test/setup.js && DEV=true ROUTER_RESOLUTION=server playwright test",
 		"test:server-side-route-resolution:build": "node test/setup.js && PUBLIC_PRERENDERING=false ROUTER_RESOLUTION=server playwright test",
+		"test:svelte-async:dev": "node test/setup.js && DEV=true SVELTE_ASYNC=true playwright test",
+		"test:svelte-async:build": "node test/setup.js && PUBLIC_PRERENDERING=false SVELTE_ASYNC=true playwright test",
 		"test:unit": "vitest run"
 	},
 	"devDependencies": {

packages/kit/test/apps/basics/svelte.config.js

@@ -71,6 +71,10 @@ const config = {
 		router: {
 			resolution: /** @type {'client' | 'server'} */ (process.env.ROUTER_RESOLUTION) || 'client'
 		}
+	},
+
+	compilerOptions: {
+		experimental: { async: process.env.SVELTE_ASYNC === 'true' }
 	}
 };
 

packages/kit/test/apps/basics/test/client.test.js

@@ -864,7 +864,7 @@
 });
 
 test.describe('data-sveltekit attributes', () => {
 	test('data-sveltekit-preload-code', async ({ page }) => {
 		/** @type {string[]} */
 		const responses = [];
 
@@ -1318,7 +1318,7 @@
 			await expect(page.locator('p.streamed')).toHaveText('streamed');
 		});
 
 		test('Catches fetch errors from server load functions (direct hit)', async ({ page }) => {
 			page.goto('/streaming/server-error');
 			await expect(page.locator('p.eager')).toHaveText('eager');
 			await expect(page.locator('p.fail')).toHaveText('fail');
@@ -1673,6 +1673,7 @@
 	});
 
 	test('Apply reroute to preload data', async ({ page }) => {
+		if (process.env.SVELTE_ASYNC === 'true') return; // TODO investigate
 		await page.goto('/reroute/preload-data');
 		await page.click('button');
 		await page.waitForSelector('pre');