fix: correctly resolve $app/state (alternative) (#13192)

fixes #13179 Uses the same approach as the other virtual modules to differentiate between client and server
sveltejs · Dec 19, 2024 · 5d30191 · 5d30191
1 parent 4d91b5c
commit 5d30191
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 46 deletions.
diff --git a/.changeset/odd-mirrors-fold.md b/.changeset/odd-mirrors-fold.md
@@ -0,0  1,5 @@
 ---
 '@sveltejs/kit': patch
 ---
 
 fix: correctly resolve `$app/state` on the server with Vite 5
diff --git a/packages/kit/scripts/generate-dts.js b/packages/kit/scripts/generate-dts.js
@@ -14,7  14,7 @@ await createBundle({
 		'$app/navigation': 'src/runtime/app/navigation.js',
 		'$app/paths': 'src/runtime/app/paths/types.d.ts',
 		'$app/server': 'src/runtime/app/server/index.js',
-		'$app/state': 'src/runtime/app/state/client.js',
 		'$app/state': 'src/runtime/app/state/index.js',
 		'$app/stores': 'src/runtime/app/stores.js'
 	},
 	include: ['src']

diff --git a/packages/kit/src/runtime/app/state/client.js b/packages/kit/src/runtime/app/state/client.js
@@ -5,32  5,6 @@ import {
 } from '../../client/state.svelte.js';
 import { stores } from '../../client/client.js';
 
-/**
- * A reactive object with information about the current page, serving several use cases:
- * - retrieving the combined `data` of all pages/layouts anywhere in your component tree (also see [loading data](https://svelte.dev/docs/kit/load))
- * - retrieving the current value of the `form` prop anywhere in your component tree (also see [form actions](https://svelte.dev/docs/kit/form-actions))
- * - retrieving the page state that was set through `goto`, `pushState` or `replaceState` (also see [goto](https://svelte.dev/docs/kit/$app-navigation#goto) and [shallow routing](https://svelte.dev/docs/kit/shallow-routing))
- * - retrieving metadata such as the URL you're on, the current route and its parameters, and whether or not there was an error
- *
- * ```svelte
- * <!--- file:  layout.svelte --->
- * <script>
- * 	import { page } from '$app/state';
- * </script>
- *
- * <p>Currently at {page.url.pathname}</p>
- *
- * {#if page.error}
- * 	<span class="red">Problem detected</span>
- * {:else}
- * 	<span class="small">All systems operational</span>
- * {/if}
- * ```
- *
- * On the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.
- *
- * @type {import('@sveltejs/kit').Page}
- */
 export const page = {
 	get data() {
 		return _page.data;
@@ -58,12  32,6 @@ export const page = {
 	}
 };
 
-/**
- * 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 from() {
 		return _navigating.current ? _navigating.current.from : null;
@@ -92,10  60,6 @@ Object.defineProperty(navigating, 'current', {
 	}
 });
 
-/**
- * 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>; }}
- */
 export const updated = {
 	get current() {
 		return _updated.current;

diff --git a/packages/kit/src/runtime/app/state/index.js b/packages/kit/src/runtime/app/state/index.js
@@ -0,0  1,53 @@
 import {
 	page as client_page,
 	navigating as client_navigating,
 	updated as client_updated
 } from './client.js';
 import {
 	page as server_page,
 	navigating as server_navigating,
 	updated as server_updated
 } from './server.js';
 import { BROWSER } from 'esm-env';
 
 /**
  * A reactive object with information about the current page, serving several use cases:
  * - retrieving the combined `data` of all pages/layouts anywhere in your component tree (also see [loading data](https://svelte.dev/docs/kit/load))
  * - retrieving the current value of the `form` prop anywhere in your component tree (also see [form actions](https://svelte.dev/docs/kit/form-actions))
  * - retrieving the page state that was set through `goto`, `pushState` or `replaceState` (also see [goto](https://svelte.dev/docs/kit/$app-navigation#goto) and [shallow routing](https://svelte.dev/docs/kit/shallow-routing))
  * - retrieving metadata such as the URL you're on, the current route and its parameters, and whether or not there was an error
  *
  * ```svelte
  * <!--- file:  layout.svelte --->
  * <script>
  * 	import { page } from '$app/state';
  * </script>
  *
  * <p>Currently at {page.url.pathname}</p>
  *
  * {#if page.error}
  * 	<span class="red">Problem detected</span>
  * {:else}
  * 	<span class="small">All systems operational</span>
  * {/if}
  * ```
  *
  * On the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.
  *
  * @type {import('@sveltejs/kit').Page}
  */
 export const page = BROWSER ? client_page : server_page;
 
 /**
  * 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 = BROWSER ? client_navigating : server_navigating;
 
 /**
  * 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>; }}
  */
 export const updated = BROWSER ? client_updated : server_updated;
diff --git a/packages/kit/src/runtime/app/state/package.json b/packages/kit/src/runtime/app/state/package.json