@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.21

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

@@ -1,59 +1,98 @@
-import { onMount } from 'svelte';
-import { updated_listener } from './utils.js';
-
-/** @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);
-}
+/** @import { Navigation } from '$app/navigation' */
+/** @import { Page } from '$app/state' */
+import { version } from '$app/env';
+import { assets } from '#app/paths';
+import { BROWSER, DEV } from 'esm-env';
+
+/** @type {Page} */
+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 });
+	shallow = $state.raw(null);
+	state = $state.raw({});
+	status = $state.raw(-1);
+	url = $state.raw(new URL('a:'));
+})();
+
+export const navigating = new (class Navigating {
+	/** @type {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;
+})();
 
 /**
- * @param {import('@sveltejs/kit').Page} new_page
+ * Internal: mark `updated.current` as `true` if the given version differs.
+ * Called from the server response header path. No-op unless version checks
+ * are enabled (assigned below). Not exported on the public `updated` object.
+ * @type {(new_version: string | null) => void}
  */
-export function update(new_page) {
-	Object.assign(page, new_page);
+export let notify_version = () => {};
+
+if (!DEV && BROWSER) {
+	const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
+
+	/** @type {number | undefined} */
+	let timeout;
+
+	/** @type {Promise<boolean> | undefined} */
+	let checking;
+
+	if (__SVELTEKIT_APP_VERSION_CHECKS_ENABLED__) {
+		/**
+		 * Mark `updated.current` as `true` if the given version differs from the one
+		 * the app was hydrated with. Called from the server response header path.
+		 * Does NOT reset the poll timer — unlike `check()`, this is a passive observation
+		 * from a single server instance's response, not an explicit version check. The
+		 * poll timer continues on its original schedule as a backstop. This is important
+		 * for platforms that implement skew protection, where `x-sveltekit-version`
+		 * may be out of date — in this case we still need to poll for `version.json`.
+		 * @param {string | null} new_version
+		 */
+		notify_version = (new_version) => {
+			if (new_version && new_version !== version) {
+				updated.current = true;
+			}
+		};
+	}
+
+	/** @type {() => Promise<boolean>} */
+	updated.check = function check() {
+		window.clearTimeout(timeout);
+
+		if (updated.current) {
+			return Promise.resolve(true);
+		}
+
+		return (checking ??= (async () => {
+			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();
+				return (updated.current ||= data.version !== version);
+			} catch {
+				return false;
+			} finally {
+				checking = undefined;
+				if (interval && !updated.current) timeout = window.setTimeout(check, interval);
+			}
+		})());
+	};
+
+	if (interval) timeout = window.setTimeout(updated.check, interval);
 }

package/src/runtime/client/stream.js

@@ -4,11 +4,12 @@
  * stream closes.
  * @param {ReadableStreamDefaultReader<Uint8Array>} reader
  * @param {string} delimiter
+ * @param {TextDecoderOptions} [options]
  */
-export async function* read_stream(reader, delimiter) {
+export async function* read_stream(reader, delimiter, options) {
 	let done = false;
 	let buffer = '';
-	const decoder = new TextDecoder();
+	const decoder = new TextDecoder(undefined, options);
 
 	while (true) {
 		let split = buffer.indexOf(delimiter);

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from 'svelte';
 import {
 	ClientHooks,
 	CSRPageNode,
@@ -9,7 +8,9 @@ import {
 	TrailingSlash,
 	Uses
 } from 'types';
-import { Page, ParamMatcher } from '@sveltejs/kit';
+import { ParamMatcher } from '@sveltejs/kit/params';
+import { Page } from '$app/state';
+import { RenderNode } from '../props.svelte.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 */
@@ -37,10 +31,9 @@ const warned = new WeakSet();
 const valid_link_options = /** @type {const} */ ({
 	'preload-code': ['', 'false', 'tap', 'hover', 'viewport', 'eager'],
 	'preload-data': ['', 'false', 'tap', 'hover'],
-	keepfocus: ['', 'true', 'false'],
-	noscroll: ['', 'true', 'false'],
 	reload: ['', 'true', 'false'],
-	replacestate: ['', 'true', 'false']
+	replacestate: ['', 'true', 'false'],
+	reset: ['', 'true', 'false']
 });
 
 /**
@@ -129,6 +122,7 @@ export function get_link_info(a, base, uses_hash_router) {
 	/** @type {URL | undefined} */
 	let url;
 
+	// TODO replace the try/catch with `URL.parse` when browser support allows (Chrome 126, Firefox 126, Safari 18)
 	try {
 		url = new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
 
@@ -156,12 +150,6 @@ export function get_link_info(a, base, uses_hash_router) {
  * @param {HTMLFormElement | HTMLAnchorElement | SVGAElement} element
  */
 export function get_router_options(element) {
-	/** @type {ValidLinkOptions<'keepfocus'> | null} */
-	let keepfocus = null;
-
-	/** @type {ValidLinkOptions<'noscroll'> | null} */
-	let noscroll = null;
-
 	/** @type {ValidLinkOptions<'preload-code'> | null} */
 	let preload_code = null;
 
@@ -174,16 +162,31 @@ export function get_router_options(element) {
 	/** @type {ValidLinkOptions<'replacestate'> | null} */
 	let replace_state = null;
 
+	/** @type {ValidLinkOptions<'reset'> | null} */
+	let reset = null;
+
 	/** @type {Element} */
 	let el = element;
 
 	while (el && el !== document.documentElement) {
+		if (DEV) {
+			for (const name of ['keepfocus', 'noscroll']) {
+				const value = el.getAttribute(`data-sveltekit-${name}`);
+				if (value !== null && !warned.has(el)) {
+					warned.add(el);
+					console.warn(
+						`\`data-sveltekit-${name}="true"\` has been replaced with \`data-sveltekit-reset="false"\``
+					);
+					console.log(el);
+				}
+			}
+		}
+
 		if (preload_code === null) preload_code = link_option(el, 'preload-code');
 		if (preload_data === null) preload_data = link_option(el, 'preload-data');
-		if (keepfocus === null) keepfocus = link_option(el, 'keepfocus');
-		if (noscroll === null) noscroll = link_option(el, 'noscroll');
 		if (reload === null) reload = link_option(el, 'reload');
 		if (replace_state === null) replace_state = link_option(el, 'replacestate');
+		if (reset === null) reset = link_option(el, 'reset');
 
 		el = /** @type {Element} */ (parent_element(el));
 	}
@@ -204,100 +207,9 @@ export function get_router_options(element) {
 	return {
 		preload_code: levels[preload_code ?? 'false'],
 		preload_data: levels[preload_data ?? 'false'],
-		keepfocus: get_option_state(keepfocus),
-		noscroll: get_option_state(noscroll),
 		reload: get_option_state(reload),
-		replace_state: get_option_state(replace_state)
-	};
-}
-
-/** @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
+		replace_state: get_option_state(replace_state),
+		reset: get_option_state(reset) ?? true
 	};
 }
 

package/src/runtime/components/root.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import type { Props, RenderNode } from '../props.svelte.js';
+
+	const { page, components, onerror, 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}>
+		{#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: unknown)}
+			<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');
+}