replace request.origin/path/query with request.url

examples/hn.svelte.dev/src/routes/[list]/[page].svelte

@@ -1,7 +1,8 @@
 <script context="module">
 	const valid_lists = new Set(['news', 'newest', 'show', 'ask', 'jobs']);
 
-	export async function load({ page: { params }, fetch }) {
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ params, fetch }) {
 		const list = params.list === 'top' ? 'news' : params.list === 'new' ? 'newest' : params.list;
 
 		if (!valid_lists.has(list)) {

examples/hn.svelte.dev/src/routes/__layout.svelte

@@ -1,25 +1,24 @@
 <script>
-	import { page, navigating } from '$app/stores';
+	import { url, navigating } from '$app/stores';
 	import Nav from '$lib/Nav.svelte';
 	import PreloadingIndicator from '$lib/PreloadingIndicator.svelte';
 	import ThemeToggler from '$lib/ThemeToggler.svelte';
 	import '../app.css';
 
-
-	$: section = $page.path.split('/')[1];
+	$: section = $url.pathname.split('/')[1];
 </script>
 
-<Nav {section}/>
+<Nav {section} />
 
 {#if $navigating}
-	<PreloadingIndicator/>
+	<PreloadingIndicator />
 {/if}
 
 <main>
-	<slot></slot>
+	<slot />
 </main>
 
-<ThemeToggler/>
+<ThemeToggler />
 
 <style>
 	main {

examples/hn.svelte.dev/src/routes/index.svelte

@@ -1,6 +1,7 @@
 <script context="module">
-	export function load({ page }) {
-		let host = page.host;
+	/** @type {import('@sveltejs/kit').Load} */
+	export function load({ url }) {
+		let host = url.host;
 		const i = host.indexOf(':');
 		if (i >= 0) {
 			host = host.substring(0, i);

examples/hn.svelte.dev/src/routes/item/[id].svelte

@@ -1,6 +1,7 @@
 <script context="module">
-	export async function load({ page, fetch }) {
-		const res = await fetch(`https://api.hnpwa.com/v0/item/${page.params.id}.json`);
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ params, fetch }) {
+		const res = await fetch(`https://api.hnpwa.com/v0/item/${params.id}.json`);
 		const item = await res.json();
 
 		return { props: { item } };
@@ -24,7 +25,10 @@
 			{#if item.domain}<small>{item.domain}</small>{/if}
 		</a>
 
-		<p class="meta">{item.points} points by <a href="/user/{item.user}">{item.user}</a> {item.time_ago}</p>
+		<p class="meta">
+			{item.points} points by <a href="/user/{item.user}">{item.user}</a>
+			{item.time_ago}
+		</p>
 
 		{#if item.content}
 			{@html item.content}
@@ -33,7 +37,7 @@
 
 	<div class="comments">
 		{#each item.comments as comment}
-			<Comment comment='{comment}'/>
+			<Comment {comment} />
 		{/each}
 	</div>
 </div>
@@ -44,13 +48,13 @@
 	}
 
 	.item {
-		border-bottom: 1em solid rgba(0,0,0,0.1);
+		border-bottom: 1em solid rgba(0, 0, 0, 0.1);
 		margin: 0 -2em 2em -2em;
 		padding: 0 2em 2em 2em;
 	}
 
 	:global(html).dark .item {
-		border-bottom: 1em solid rgba(255,255,255,0.1);;
+		border-bottom: 1em solid rgba(255, 255, 255, 0.1);
 	}
 
 	.main-link {
@@ -72,4 +76,4 @@
 	.comments > :global(.comment):first-child {
 		border-top: none;
 	}
-</style>
+</style>

examples/hn.svelte.dev/src/routes/user/[name].svelte

@@ -1,13 +1,14 @@
 <script context="module">
 	export const hydrate = false;
 
-	export async function load({ page, fetch }) {
-		const res = await fetch(`https://api.hnpwa.com/v0/user/${page.params.name}.json`);
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ params, fetch }) {
+		const res = await fetch(`https://api.hnpwa.com/v0/user/${params.name}.json`);
 		const user = await res.json();
 
 		return {
 			props: {
-				name: page.params.name,
+				name: params.name,
 				user
 			}
 		};
@@ -39,7 +40,7 @@
 
 	{#if user.about}
 		<div class="about">
-			{@html '<p>' + user.about }
+			{@html '<p>' + user.about}
 		</div>
 	{/if}
-</div>
+</div>

packages/create-svelte/templates/default/src/lib/header/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { url } from '$app/stores';
 	import logo from './svelte-logo.svg';
 </script>
 
@@ -15,9 +15,13 @@
 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
-			<li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-			<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
-			<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
+			<li class:active={$url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
+			<li class:active={$url.pathname === '/about'}>
+				<a sveltekit:prefetch href="/about">About</a>
+			</li>
+			<li class:active={$url.pathname === '/todos'}>
+				<a sveltekit:prefetch href="/todos">Todos</a>
+			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />

packages/kit/src/core/adapt/prerender.js

@@ -180,11 +180,10 @@ export async function prerender({ cwd, out, log, config, build_data, fallback, a
 
 		const rendered = await app.render(
 			{
+				url: `${config.kit.protocol || 'sveltekit'}://${config.kit.host || 'prerender'}${path}`,
 				method: 'GET',
 				headers: {},
-				path,
-				rawBody: null,
-				query: new URLSearchParams()
+				rawBody: null
 			},
 			{
 				prerender: {
@@ -330,11 +329,10 @@ export async function prerender({ cwd, out, log, config, build_data, fallback, a
 	if (fallback) {
 		const rendered = await app.render(
 			{
+				url: `${config.kit.host || 'sveltekit'}://${config.kit.host || 'prerender'}/[fallback]`,
 				method: 'GET',
 				headers: {},
-				path: '[fallback]', // this doesn't matter, but it's easiest if it's a string
-				rawBody: null,
-				query: new URLSearchParams()
+				rawBody: null
 			},
 			{
 				prerender: {

packages/kit/src/core/build/build_server.js

@@ -101,7 +101,7 @@ export class App {
 				: 'default_protocol'
 		};
 
-		return respond({ ...request, origin: protocol + '://' + host }, this.options, { prerender });
+		return respond({ ...request, url: new URL(request.url, protocol + '://' + host) }, this.options, { prerender });
 	}
 }
 `;

packages/kit/src/core/create_app/index.js

@@ -130,7 +130,7 @@ function generate_app(manifest_data) {
 	while (l--) {
 		pyramid = `
 			{#if components[${l + 1}]}
-				<svelte:component this={components[${l}]} {...(props_${l} || {})}>				
+				<svelte:component this={components[${l}]} {...(props_${l} || {})}>
 					${pyramid.replace(/\n/g, '\n\t\t\t\t\t')}
 				</svelte:component>
 			{:else}
@@ -148,22 +148,26 @@ function generate_app(manifest_data) {
 
 			// stores
 			export let stores;
-			export let page;
+			export let url;
+			export let params;
 
 			export let components;
 			${levels.map((l) => `export let props_${l} = null;`).join('\n\t\t\t')}
 
 			setContext('__svelte__', stores);
 
-			$: stores.page.set(page);
-			afterUpdate(stores.page.notify);
+			$: stores.url.set(url);
+			afterUpdate(stores.url.notify);
+
+			$: stores.params.set(params);
+			afterUpdate(stores.params.notify);
 
 			let mounted = false;
 			let navigated = false;
 			let title = null;
 
 			onMount(() => {
-				const unsubscribe = stores.page.subscribe(() => {
+				const unsubscribe = stores.url.subscribe(() => {
 					if (mounted) {
 						navigated = true;
 						title = document.title || 'untitled page';

packages/kit/src/core/dev/index.js

@@ -395,15 +395,11 @@ async function create_plugin(config, dir, https, get_manifest) {
 					return res.end(err.reason || 'Invalid request body');
 				}
 
-				const origin = `${https ? 'https' : 'http'}://${req.headers.host}`;
-
 				const rendered = await respond(
 					{
+						url: new URL(`${https ? 'https' : 'http'}://${req.headers.host}${req.url}`),
 						headers: /** @type {import('types/helper').RequestHeaders} */ (req.headers),
 						method: req.method,
-						origin,
-						path: parsed.pathname.replace(config.kit.paths.base, ''),
-						query: parsed.searchParams,
 						rawBody: body
 					},
 					{

packages/kit/src/core/preview/index.js

@@ -93,12 +93,11 @@ export async function preview({
 			const parsed = new URL(initial_url, 'http://localhost/');
 
 			const rendered =
-				parsed.pathname.startsWith(config.kit.paths.base) &&
+				initial_url.startsWith(config.kit.paths.base) &&
 				(await app.render({
+					url: `${use_https ? 'https' : 'http'}://${req.headers.host}${initial_url}`,
 					method: req.method,
 					headers: /** @type {import('types/helper').RequestHeaders} */ (req.headers),
-					path: parsed.pathname.replace(config.kit.paths.base, ''),
-					query: parsed.searchParams,
 					rawBody: body
 				}));
 

packages/kit/src/runtime/app/stores.js

@@ -20,8 +20,11 @@ export const getStores = () => {
 	const stores = getContext('__svelte__');
 
 	return {
-		page: {
-			subscribe: stores.page.subscribe
+		url: {
+			subscribe: stores.url.subscribe
+		},
+		params: {
+			subscribe: stores.params.subscribe
 		},
 		navigating: {
 			subscribe: stores.navigating.subscribe
@@ -38,11 +41,20 @@ export const getStores = () => {
 	};
 };
 
-/** @type {typeof import('$app/stores').page} */
-export const page = {
+/** @type {typeof import('$app/stores').url} */
+export const url = {
+	/** @param {(value: any) => void} fn */
+	subscribe(fn) {
+		const store = getStores().url;
+		return store.subscribe(fn);
+	}
+};
+
+/** @type {typeof import('$app/stores').url} */
+export const params = {
 	/** @param {(value: any) => void} fn */
 	subscribe(fn) {
-		const store = getStores().page;
+		const store = getStores().params;
 		return store.subscribe(fn);
 	}
 };