@sveltejs/kit 3.0.0-next.0 → 3.0.0-next.10

package/src/runtime/client/remote-functions/shared.svelte.js

@@ -1,7 +1,8 @@
-/** @import { RemoteFunctionResponse, RemoteSingleflightMap, RemoteSingleflightEntry } from 'types' */
+/** @import { RemoteFunctionResponse, RemoteFunctionData, RemoteFunctionDataNode } from 'types' */
 /** @import { RemoteQueryUpdate } from '@sveltejs/kit' */
+/** @import { CacheEntry } from './cache.svelte.js' */
 import * as devalue from 'devalue';
-import { app, goto, live_query_map, query_map } from '../client.js';
+import { app, _goto, live_query_map, query_map, query_responses } from '../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { untrack } from 'svelte';
 import { create_remote_key, split_remote_key } from '../../shared.js';
@@ -77,6 +78,20 @@ export function pin_while_resolving(cache_map, cache, id, payload, then) {
 /**
  * @returns {{ 'x-sveltekit-pathname': string, 'x-sveltekit-search': string }}
  */
+/**
+ * Unwraps a `RemoteFunctionDataNode` that was serialized during SSR,
+ * rethrowing serialized errors so the consuming resource ends up
+ * in the same failed state it had on the server
+ * @param {RemoteFunctionDataNode} node
+ */
+export function unwrap_node(node) {
+	if (node.e) {
+		throw new HttpError(node.e.status, node.e);
+	}
+
+	return node.v;
+}
+
 export function get_remote_request_headers() {
 	// This will be the correct value of the current or soon-current url,
 	// even in forks because it's state-based - therefore not using window.location.
@@ -93,25 +108,82 @@ export function get_remote_request_headers() {
 
 /**
  * @param {string} url
- * @param {HeadersInit} headers
+ * @param {RequestInit} [init]
  */
-export async function remote_request(url, headers) {
-	const response = await fetch(url, {
-		headers: {
-			'Content-Type': 'application/json',
-			...headers
-		}
-	});
+export async function remote_request(url, init) {
+	const response = await fetch(url, init);
 
 	if (!response.ok) {
-		throw new HttpError(500, 'Failed to execute remote function');
+		const result = await response.json().catch(() => ({
+			type: 'error',
+			status: response.status,
+			error: response.statusText
+		}));
+
+		throw new HttpError(
+			result.error?.status ?? result.status ?? response.status ?? 500,
+			result.error
+		);
 	}
 
 	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 
-	const resolved = await handle_side_channel_response(result);
+	if (result.type === 'error') {
+		throw new HttpError(result.error.status, result.error);
+	}
+
+	const data = /** @type {RemoteFunctionData} */ (
+		result.data ? devalue.parse(result.data, app.decoders) : {}
+	);
+
+	/**
+	 * @param {string} key
+	 * @param {CacheEntry | undefined} entry
+	 * @param {any} result
+	 */
+	function refresh(key, entry, result) {
+		if (entry?.resource) {
+			if (result.e) {
+				entry.resource.fail(new HttpError(result.e.status, result.e));
+			} else {
+				entry.resource.set(result.v);
+			}
+		} else if (!result.e) {
+			// `query_responses` stores `{ v }`/`{ e }` nodes, not raw values.
+			// Errors are deliberately dropped here: they are responses to a specific
+			// refresh, not durable state a future resource should initialize with
+			query_responses[key] = result;
+		}
+	}
+
+	// update queries with refreshed data
+	if (data.q) {
+		for (const key in data.q) {
+			const parts = split_remote_key(key);
+			const entry = query_map.get(parts.id)?.get(parts.payload);
+
+			refresh(key, entry, data.q[key]);
+		}
+	}
+
+	// reconnect live queries
+	if (data.l) {
+		for (const key in data.l) {
+			const parts = split_remote_key(key);
+			const entry = live_query_map.get(parts.id)?.get(parts.payload);
 
-	return resolved.result;
+			refresh(key, entry, data.l[key]);
+
+			// `fail()` is terminal, so only reconnect on the success path —
+			// reconnecting after a hard failure would wipe the error state and
+			// restart the stream (see commit 63a3e83 regression).
+			if (!data.l[key].e) {
+				void entry?.resource.reconnect();
+			}
+		}
+	}
+
+	return data;
 }
 
 /**
@@ -120,12 +192,13 @@ export async function remote_request(url, headers) {
  */
 export async function handle_side_channel_response(response) {
 	if (response.type === 'redirect') {
-		await goto(response.location);
+		// Use internal version to allow redirects to external URLs
+		await _goto(response.location, {}, 0);
 		throw new Redirect(307, response.location);
 	}
 
 	if (response.type === 'error') {
-		throw new HttpError(response.status ?? 500, response.error);
+		throw new HttpError(response.error.status, response.error);
 	}
 
 	return response;
@@ -206,50 +279,3 @@ export function categorize_updates(updates) {
 
 	return { overrides, refreshes };
 }
-
-/**
- * @template TResource
- * @param {string} stringified_singleflight
- * @param {Map<string, Map<string, { resource: TResource }>>} map
- * @param {(resource: TResource, value: RemoteSingleflightEntry) => void} callback
- */
-function apply_singleflight(stringified_singleflight, map, callback) {
-	const singleflight = /** @type {RemoteSingleflightMap} */ (
-		devalue.parse(stringified_singleflight, app.decoders)
-	);
-
-	for (const [key, value] of Object.entries(singleflight)) {
-		const parts = split_remote_key(key);
-		const entry = map.get(parts.id)?.get(parts.payload);
-		if (entry?.resource) {
-			callback(entry.resource, value);
-		}
-	}
-}
-
-/**
- * Apply refresh data from the server to the relevant queries
- *
- * @param {string} stringified_refreshes
- */
-export const apply_refreshes = (stringified_refreshes) => {
-	apply_singleflight(stringified_refreshes, query_map, (resource, value) => {
-		if (value.type === 'result') {
-			resource?.set(value.data);
-		} else {
-			resource?.fail(new HttpError(value.status ?? 500, value.error));
-		}
-	});
-};
-
-/** @param {string} stringified_reconnects */
-export const apply_reconnections = (stringified_reconnects) => {
-	apply_singleflight(stringified_reconnects, live_query_map, (resource, value) => {
-		if (value.type === 'result') {
-			resource?.set(value.data);
-			void resource?.reconnect();
-		} else {
-			resource?.fail(new HttpError(value.status ?? 500, value.error));
-		}
-	});
-};

package/src/runtime/client/sse.js

@@ -0,0 +1,32 @@
+import { read_stream } from './stream.js';
+
+/**
+ * @param {string} block
+ * @returns {string | undefined}
+ */
+function parse_sse_event_data(block) {
+	const lines = block.split('\n');
+	let data = '';
+
+	for (const line of lines) {
+		if (line.startsWith('data:')) {
+			data += (data ? '\n' : '') + line.slice(5).trimStart();
+		}
+	}
+
+	return data || undefined;
+}
+
+/**
+ * Yields parsed JSON objects from a ReadableStream of Server-Sent Events.
+ * Each yielded value is the raw `JSON.parse`'d object from a `data:` field.
+ * @param {ReadableStreamDefaultReader<Uint8Array>} reader
+ */
+export async function* read_sse(reader) {
+	for await (const block of read_stream(reader, '\n\n')) {
+		const data = parse_sse_event_data(block);
+		if (data) {
+			yield JSON.parse(data);
+		}
+	}
+}

package/src/runtime/client/state.svelte.js

@@ -1,54 +1,70 @@
-import { onMount } from 'svelte';
-import { updated_listener } from './utils.js';
+import { version } from '$app/env';
+import { assets } from '$app/paths/internal/client';
+import { BROWSER, DEV } from 'esm-env';
 
 /** @type {import('@sveltejs/kit').Page} */
-export let page;
-
-/** @type {{ current: import('@sveltejs/kit').Navigation | null }} */
-export let navigating;
-
-/** @type {{ current: boolean }} */
-export let updated;
-
-// this is a bootleg way to tell if we're in old svelte or new svelte
-const is_legacy =
-	onMount.toString().includes('$$') || /function \w+\(\) \{\}/.test(onMount.toString());
-
-const placeholder_url = 'a:';
-
-if (is_legacy) {
-	page = {
-		data: {},
-		form: null,
-		error: null,
-		params: {},
-		route: { id: null },
-		state: {},
-		status: -1,
-		url: new URL(placeholder_url)
-	};
-	navigating = { current: null };
-	updated = { current: false };
-} else {
-	page = new (class Page {
-		data = $state.raw({});
-		form = $state.raw(null);
-		error = $state.raw(null);
-		params = $state.raw({});
-		route = $state.raw({ id: null });
-		state = $state.raw({});
-		status = $state.raw(-1);
-		url = $state.raw(new URL(placeholder_url));
-	})();
-
-	navigating = new (class Navigating {
-		current = $state.raw(null);
-	})();
-
-	updated = new (class Updated {
-		current = $state.raw(false);
-	})();
-	updated_listener.v = () => (updated.current = true);
+export const page = new (class Page {
+	data = $state.raw({});
+	form = $state.raw(null);
+	error = $state.raw(null);
+	params = $state.raw({});
+	route = $state.raw({ id: null });
+	state = $state.raw({});
+	status = $state.raw(-1);
+	url = $state.raw(new URL('a:'));
+})();
+
+export const navigating = new (class Navigating {
+	/** @type {import('@sveltejs/kit').Navigation | null} */
+	current = $state.raw(null);
+})();
+
+export const updated = new (class Updated {
+	current = $state.raw(false);
+	// eslint-disable-next-line @typescript-eslint/require-await
+	check = async () => false;
+})();
+
+if (!DEV && BROWSER) {
+	const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
+
+	/** @type {number} */
+	let timeout;
+
+	/** @type {() => Promise<boolean>} */
+	async function check() {
+		window.clearTimeout(timeout);
+
+		if (interval) timeout = window.setTimeout(check, interval);
+
+		try {
+			const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
+				headers: {
+					'cache-control': 'no-cache'
+				}
+			});
+
+			if (!res.ok) {
+				return false;
+			}
+
+			const data = await res.json();
+			const new_update = data.version !== version;
+
+			if (new_update) {
+				updated.current = true;
+				window.clearTimeout(timeout);
+			}
+
+			return new_update;
+		} catch {
+			return false;
+		}
+	}
+
+	if (interval) timeout = window.setTimeout(check, interval);
+
+	updated.check = check;
 }
 
 /**

package/src/runtime/client/stream.js

@@ -0,0 +1,38 @@
+/**
+ * Reads from a stream, decoding it as text and yielding each block of content
+ * separated by `delimiter`. The trailing block (if any) is yielded once the
+ * stream closes.
+ * @param {ReadableStreamDefaultReader<Uint8Array>} reader
+ * @param {string} delimiter
+ */
+export async function* read_stream(reader, delimiter) {
+	let done = false;
+	let buffer = '';
+	const decoder = new TextDecoder();
+
+	while (true) {
+		let split = buffer.indexOf(delimiter);
+		while (split !== -1) {
+			yield buffer.slice(0, split);
+			buffer = buffer.slice(split + delimiter.length);
+			split = buffer.indexOf(delimiter);
+		}
+
+		if (done) {
+			if (buffer) {
+				yield buffer;
+			}
+			return;
+		}
+
+		const chunk = await reader.read();
+		done = chunk.done;
+		if (chunk.value) {
+			buffer += decoder.decode(chunk.value, { stream: true });
+		}
+
+		if (done) {
+			buffer += decoder.decode();
+		}
+	}
+}

package/src/runtime/client/types.d.ts

@@ -10,6 +10,7 @@ import {
 	Uses
 } from 'types';
 import { Page, ParamMatcher } from '@sveltejs/kit';
+import { RenderNode } from '../types.js';
 
 export interface SvelteKitApp {
 	/**
@@ -39,7 +40,7 @@ export interface SvelteKitApp {
 	dictionary: Record<string, [leaf: number, layouts: number[], errors?: number[]]>;
 
 	/**
-	 * A map of `[matcherName: string]: (..) => boolean`, which is used to match route parameters.
+	 * A map of `[matcherName: string]: ParamMatcher`, which is used to match and parse route parameters.
 	 *
 	 * In case of router.resolution=server, this object is empty, as resolution happens on the server.
 	 */
@@ -57,7 +58,11 @@ export interface SvelteKitApp {
 	 */
 	hash: boolean;
 
-	root: typeof SvelteComponent;
+	/**
+	 * Lazily loads the contents of src/error.html, used as a last-resort
+	 * error page when the root layout's load function throws during client-side rendering.
+	 */
+	get_error_template: () => Promise<(data: { status: number; message: string }) => string>;
 }
 
 export type NavigationIntent = {
@@ -77,6 +82,7 @@ export type NavigationResult = NavigationRedirect | NavigationFinished;
 
 export type NavigationRedirect = {
 	type: 'redirect';
+	status: number;
 	location: string;
 };
 
@@ -84,13 +90,10 @@ export type NavigationFinished = {
 	type: 'loaded';
 	state: NavigationState;
 	props: {
-		constructors: Array<typeof SvelteComponent>;
-		errors?: Array<typeof SvelteComponent | undefined>;
-		components?: SvelteComponent[];
 		page: Page;
 		form?: Record<string, any> | null;
 		error?: App.Error;
-		[key: `data_${number}`]: Record<string, any>;
+		tree: RenderNode;
 	};
 };
 
@@ -119,7 +122,8 @@ export interface NavigationState {
 }
 
 export interface HydrateOptions {
-	status: number;
+	/** Provided in the case of a form action that returns `fail`, but otherwise derived from `error` */
+	status?: number;
 	error: App.Error | null;
 	node_ids: number[];
 	params: Record<string, string>;

package/src/runtime/client/utils.js

@@ -1,12 +1,6 @@
 import { BROWSER, DEV } from 'esm-env';
-import { writable } from 'svelte/store';
-import { assets } from '$app/paths';
-import { version } from '$app/env';
-import { noop } from '../../utils/functions.js';
 import { PRELOAD_PRIORITIES } from './constants.js';
 
-/* global __SVELTEKIT_APP_VERSION_FILE__, __SVELTEKIT_APP_VERSION_POLL_INTERVAL__ */
-
 export const origin = BROWSER ? location.origin : '';
 
 /** @param {string | URL} url */
@@ -211,96 +205,6 @@ export function get_router_options(element) {
 	};
 }
 
-/** @param {any} value */
-export function notifiable_store(value) {
-	const store = writable(value);
-	let ready = true;
-
-	function notify() {
-		ready = true;
-		store.update((val) => val);
-	}
-
-	/** @param {any} new_value */
-	function set(new_value) {
-		ready = false;
-		store.set(new_value);
-	}
-
-	/** @param {(value: any) => void} run */
-	function subscribe(run) {
-		/** @type {any} */
-		let old_value;
-		return store.subscribe((new_value) => {
-			if (old_value === undefined || (ready && new_value !== old_value)) {
-				run((old_value = new_value));
-			}
-		});
-	}
-
-	return { notify, set, subscribe };
-}
-
-export const updated_listener = {
-	v: noop
-};
-
-export function create_updated_store() {
-	const { set, subscribe } = writable(false);
-
-	if (__SVELTEKIT_DEV__ || !BROWSER) {
-		return {
-			subscribe,
-			// eslint-disable-next-line @typescript-eslint/require-await
-			check: async () => false
-		};
-	}
-
-	const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
-
-	/** @type {NodeJS.Timeout} */
-	let timeout;
-
-	/** @type {() => Promise<boolean>} */
-	async function check() {
-		clearTimeout(timeout);
-
-		if (interval) timeout = setTimeout(check, interval);
-
-		try {
-			const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
-				headers: {
-					'cache-control': 'no-cache'
-				}
-			});
-
-			if (!res.ok) {
-				return false;
-			}
-
-			const data = await res.json();
-			const updated = data.version !== version;
-
-			if (updated) {
-				set(true);
-				updated_listener.v();
-				clearTimeout(timeout);
-			}
-
-			return updated;
-		} catch {
-			return false;
-		}
-	}
-
-	if (interval) timeout = setTimeout(check, interval);
-
-	return {
-		subscribe,
-		check
-	};
-}
-
 /**
  * Is external if
  * - origin different

package/src/runtime/components/root.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import type { Page } from '@sveltejs/kit';
+	import type { RenderNode } from '../types.js';
+
+	interface Props {
+		page: Page;
+		tree: RenderNode;
+		components: any[];
+		resetters: Array<(() => void) | undefined>;
+		form?: any;
+		error?: App.Error;
+	}
+
+	const { page, components, resetters, tree, form, error }: Props = $props();
+
+	let mounted = $state(false);
+	let navigated = $state(false);
+	let title = $state('');
+
+	afterNavigate(() => {
+		if (mounted) {
+			navigated = true;
+			title = document.title || 'untitled page';
+		} else {
+			mounted = true;
+		}
+	});
+</script>
+
+{#snippet node(n: RenderNode, depth: number)}
+	{const Component = $derived(n.component)}
+	{const Error = $derived(n.error)}
+	{const data = $derived(n.data)}
+
+	<svelte:boundary onerror={(_, reset) => (resetters[depth] = reset)}>
+		{#if n.child}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<Component bind:this={components[depth]} {data} {form} params={page.params}>
+				{@render node(n.child, depth + 1)}
+			</Component>
+		{:else}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<Component bind:this={components[depth]} {data} {form} params={page.params} {error} />
+		{/if}
+
+		{#snippet failed(error)}
+			<Error {error} />
+		{/snippet}
+	</svelte:boundary>
+{/snippet}
+
+{@render node(tree, 0)}
+
+{#if mounted}
+	<div
+		id="svelte-announcer"
+		aria-live="assertive"
+		aria-atomic="true"
+		style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px"
+	>
+		{#if navigated}
+			{title}
+		{/if}
+	</div>
+{/if}

package/src/runtime/env/dynamic/private.js

@@ -0,0 +1,7 @@
+import { DEV } from 'esm-env';
+import * as env from '../../app/env/private.js';
+export { env };
+
+if (DEV) {
+	console.warn('`$env/dynamic/private` is deprecated, use `$app/env/private` instead');
+}

package/src/runtime/env/dynamic/public.js

@@ -0,0 +1,7 @@
+import { DEV } from 'esm-env';
+import * as env from '../../app/env/public/index.js';
+export { env };
+
+if (DEV) {
+	console.warn('`$env/dynamic/public` is deprecated, use `$app/env/public` instead');
+}

package/src/runtime/env/static/private.js

@@ -0,0 +1,6 @@
+import { DEV } from 'esm-env';
+export * from '../../app/env/private.js';
+
+if (DEV) {
+	console.warn('`$env/static/private` is deprecated, use `$app/env/private` instead');
+}

package/src/runtime/env/static/public.js

@@ -0,0 +1,6 @@
+import { DEV } from 'esm-env';
+export * from '../../app/env/public/index.js';
+
+if (DEV) {
+	console.warn('`$env/static/public` is deprecated, use `$app/env/public` instead');
+}