fix: replace navigating.current.x with navigating.x (#13174)

* fix: replace navigating.current.x with navigating.x

* ugh

* regenerate

Author: Rich-Harris

.changeset/neat-buses-collect.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: replace `navigating.current.<x>` with `navigating.<x>`

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

@@ -59,19 +59,39 @@ export const page = {
 };
 
 /**
- * An object with a reactive `current` property.
- * When navigation starts, `current` is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
- * When navigation finishes, `current` reverts to `null`.
- *
- * On the server, this value can only be read during rendering. In the browser, it can be read at any time.
- * @type {{ get current(): import('@sveltejs/kit').Navigation | null; }}
+ * An object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
+ * Values are `null` when no navigation is occurring, or during server rendering.
+ * @type {import('@sveltejs/kit').Navigation | { from: null, to: null, type: null, willUnload: null, delta: null, complete: null }}
  */
+// @ts-expect-error
 export const navigating = {
-	get current() {
-		return _navigating.current;
+	get from() {
+		return _navigating.current ? _navigating.current.from : null;
+	},
+	get to() {
+		return _navigating.current ? _navigating.current.to : null;
+	},
+	get type() {
+		return _navigating.current ? _navigating.current.type : null;
+	},
+	get willUnload() {
+		return _navigating.current ? _navigating.current.willUnload : null;
+	},
+	get delta() {
+		return _navigating.current ? _navigating.current.delta : null;
+	},
+	get complete() {
+		return _navigating.current ? _navigating.current.complete : null;
 	}
 };
 
+Object.defineProperty(navigating, 'current', {
+	get() {
+		// between 2.12.0 and 2.12.1 `navigating.current` existed
+		throw new Error('Replace navigating.current.<prop> with navigating.<prop>');
+	}
+});
+
 /**
  * A reactive value that's initially `false`. If [`version.pollInterval`](https://svelte.dev/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update `current` to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
  * @type {{ get current(): boolean; check(): Promise<boolean>; }}

packages/kit/src/runtime/app/state/server.js

@@ -45,9 +45,12 @@ export const page = {
 };
 
 export const navigating = {
-	get current() {
-		return (__SVELTEKIT_DEV__ ? context_dev('navigating.current') : context()).navigating;
-	}
+	from: null,
+	to: null,
+	type: null,
+	willUnload: null,
+	delta: null,
+	complete: null
 };
 
 export const updated = {

packages/kit/test/apps/basics/src/routes/state/navigating/+layout.svelte

@@ -9,10 +9,10 @@
 </nav>
 
 <div id="nav-status">
-	{#if navigating.current}
+	{#if navigating.to}
 		<!-- prettier-ignore -->
 		<p id="navigating">
-			navigating from {navigating.current.from.url.pathname} to {navigating.current.to.url.pathname} ({navigating.current.type})
+			navigating from {navigating.from.url.pathname} to {navigating.to.url.pathname} ({navigating.type})
 		</p>
 	{:else}
 		<p id="not-navigating">not currently navigating</p>

packages/kit/types/index.d.ts

@@ -2293,14 +2293,16 @@ declare module '$app/state' {
 	 * */
 	export const page: import("@sveltejs/kit").Page;
 	/**
-	 * An object with a reactive `current` property.
-	 * When navigation starts, `current` is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
-	 * When navigation finishes, `current` reverts to `null`.
-	 *
-	 * On the server, this value can only be read during rendering. In the browser, it can be read at any time.
+	 * An object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
+	 * Values are `null` when no navigation is occurring, or during server rendering.
 	 * */
-	export const navigating: {
-		get current(): import("@sveltejs/kit").Navigation | null;
+	export const navigating: import("@sveltejs/kit").Navigation | {
+		from: null;
+		to: null;
+		type: null;
+		willUnload: null;
+		delta: null;
+		complete: null;
 	};
 	/**
 	 * A reactive value that's initially `false`. If [`version.pollInterval`](https://svelte.dev/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update `current` to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.

playgrounds/basic/src/routes/+layout.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { page, navigating } from '$app/state';
+
+	let { children } = $props();
+
+	$inspect(navigating.to);
+</script>
+
+<nav>
+	<a href="/">/</a>
+	<a href="/a">/a</a>
+	<a href="/b">/b</a>
+	<a href="/c">/c</a>
+	<a href="/d">/d</a>
+	<a href="/e">/e</a>
+</nav>
+
+{@render children()}

playgrounds/basic/src/routes/[slug]/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>{page.params.slug}</h1>