Loading data

import type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';

export const const load: PageLoadconst load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = ({ params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams }) => {
	return {
		
post: {
    title: string;
    content: string;
}
post: {
    title: string;
    content: string;
}post: {
			title: stringtitle: stringtitle: `Title for ${params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams.slug} goes here`,
			content: stringcontent: stringcontent: `Content for ${params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams.slug} goes here`
		}
	};
};

/** @type {import('./$types').PageLoad} */
export function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}load({ params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams }) {
	return {
		
post: {
    title: string;
    content: string;
}
post: {
    title: string;
    content: string;
}post: {
			title: stringtitle: stringtitle: `Title for ${params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams.slug} goes here`,
			content: stringcontent: stringcontent: `Content for ${params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams.slug} goes here`
		}
	};
}

<script lang="ts">
	import type { PageProps } from './$types';

	let { data }: PageProps = $props();
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

<script>
	/** @type {import('./$types').PageProps} */
	let { data } = $props();
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

// @filename: ambient.d.ts
declare module '$lib/server/database' {
	export function 
function getPost(slug: string): Promise<{
    title: string;
    content: string;
}>
function getPost(slug: string): Promise<{
    title: string;
    content: string;
}>getPost(slug: stringslug: stringslug: string): interface Promise<T>
Represents the completion of an asynchronous operationinterface Promise<T>
Represents the completion of an asynchronous operationPromise<{ title: stringtitle: stringtitle: string, content: stringcontent: stringcontent: string }>
}

// @filename: index.ts
// cut
import * as module "$lib/server/database"db from '$lib/server/database';
import type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';

export const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async ({ params: Record<string, any>
The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
In the context of a remote function request initiated by the client, this relates to the page the remote function
was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine
whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.params }) => {
	return {
		
post: {
    title: string;
    content: string;
}post: await module "$lib/server/database"db.
function getPost(slug: string): Promise<{
    title: string;
    content: string;
}>getPost(params: Record<string, any>
The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
In the context of a remote function request initiated by the client, this relates to the page the remote function
was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine
whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.params.slug)
	};
};

// @filename: ambient.d.ts
declare module '$lib/server/database' {
	export function 
function getPost(slug: string): Promise<{
    title: string;
    content: string;
}>
function getPost(slug: string): Promise<{
    title: string;
    content: string;
}>getPost(slug: stringslug: stringslug: string): interface Promise<T>
Represents the completion of an asynchronous operationinterface Promise<T>
Represents the completion of an asynchronous operationPromise<{ title: stringtitle: stringtitle: string, content: stringcontent: stringcontent: string }>
}

// @filename: index.js
// cut
import * as module "$lib/server/database"db from '$lib/server/database';

/** @type {import('./$types').PageServerLoad} */
export async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageServerLoad}load({ params: Record<string, any>
The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
In the context of a remote function request initiated by the client, this relates to the page the remote function
was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine
whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.params }) {
	return {
		
post: {
    title: string;
    content: string;
}post: await module "$lib/server/database"db.
function getPost(slug: string): Promise<{
    title: string;
    content: string;
}>getPost(params: Record<string, any>
The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
In the context of a remote function request initiated by the client, this relates to the page the remote function
was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine
whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.params.slug)
	};
}

// @filename: ambient.d.ts
declare module '$lib/server/database' {
	export function 
function getPostSummaries(): Promise<Array<{
    title: string;
    slug: string;
}>>
function getPostSummaries(): Promise<Array<{
    title: string;
    slug: string;
}>>getPostSummaries(): interface Promise<T>
Represents the completion of an asynchronous operationinterface Promise<T>
Represents the completion of an asynchronous operationPromise<interface Array<T>interface Array<T>Array<{ title: stringtitle: stringtitle: string, slug: stringslug: stringslug: string }>>
}

// @filename: index.ts
// cut
import * as module "$lib/server/database"db from '$lib/server/database';
import type { type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';

export const const load: LayoutServerLoadload: type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = async () => {
	return {
		
posts: {
    title: string;
    slug: string;
}[]posts: await module "$lib/server/database"db.
function getPostSummaries(): Promise<Array<{
    title: string;
    slug: string;
}>>getPostSummaries()
	};
};

// @filename: ambient.d.ts
declare module '$lib/server/database' {
	export function 
function getPostSummaries(): Promise<Array<{
    title: string;
    slug: string;
}>>
function getPostSummaries(): Promise<Array<{
    title: string;
    slug: string;
}>>getPostSummaries(): interface Promise<T>
Represents the completion of an asynchronous operationinterface Promise<T>
Represents the completion of an asynchronous operationPromise<interface Array<T>interface Array<T>Array<{ title: stringtitle: stringtitle: string, slug: stringslug: stringslug: string }>>
}

// @filename: index.js
// cut
import * as module "$lib/server/database"db from '$lib/server/database';

/** @type {import('./$types').LayoutServerLoad} */
export async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').LayoutServerLoad}load() {
	return {
		
posts: {
    title: string;
    slug: string;
}[]posts: await module "$lib/server/database"db.
function getPostSummaries(): Promise<Array<{
    title: string;
    slug: string;
}>>getPostSummaries()
	};
}

<script lang="ts">
	import type { LayoutProps } from './$types';

	let { data, children }: LayoutProps = $props();
</script>

<main>
	<!-- +page.svelte is `@render`ed here -->
	{@render children()}
</main>

<aside>
	<h2>More posts</h2>
	<ul>
		{#each data.posts as post}
			<li>
				<a href="/blog/{post.slug}">
					{post.title}
				</a>
			</li>
		{/each}
	</ul>
</aside>

<script>
	/** @type {import('./$types').LayoutProps} */
	let { data, children } = $props();
</script>

<main>
	<!-- +page.svelte is `@render`ed here -->
	{@render children()}
</main>

<aside>
	<h2>More posts</h2>
	<ul>
		{#each data.posts as post}
			<li>
				<a href="/blog/{post.slug}">
					{post.title}
				</a>
			</li>
		{/each}
	</ul>
</aside>

<script lang="ts">
	import { page } from '$app/state';

	/** @type {import('./$types').PageProps} */
	let { data } = $props();

	// we can access `data.posts` because it's returned from
	// the parent layout `load` function
	let index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));
	let next = $derived(data.posts[index + 1]);
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

{#if next}
	<p>Next post: <a href="/blog/{next.slug}">{next.title}</a></p>
{/if}

<script>
	import { page } from '$app/state';

	/** @type {import('./$types').PageProps} */
	let { data } = $props();

	// we can access `data.posts` because it's returned from
	// the parent layout `load` function
	let index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));
	let next = $derived(data.posts[index + 1]);
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

{#if next}
	<p>Next post: <a href="/blog/{next.slug}">{next.title}</a></p>
{/if}

<script lang="ts">
	import { const page: Page<Record<string, string>, string | null>
A read-only 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)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto, pushState or replaceState (also see goto and 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
<!--- 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}
Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
<!--- file: +page.svelte --->
<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>
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.page } from '$app/state';
</script>

<svelte:head>
	<title>{const page: Page<Record<string, string>, string | null>
A read-only 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)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto, pushState or replaceState (also see goto and 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
<!--- 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}
Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
<!--- file: +page.svelte --->
<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>
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.page.Page<Record<string, string>, string | null>.data: App.PageData & Record<string, any>
The merged result of all data from all load functions on the current page. You can type a common denominator through App.PageData.data.title}</title>
</svelte:head>

<script>
	import { const page: Page<Record<string, string>, string | null>
A read-only 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)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto, pushState or replaceState (also see goto and 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
<!--- 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}
Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
<!--- file: +page.svelte --->
<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>
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.page } from '$app/state';
</script>

<svelte:head>
	<title>{const page: Page<Record<string, string>, string | null>
A read-only 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)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto, pushState or replaceState (also see goto and 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
<!--- 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}
Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
<!--- file: +page.svelte --->
<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>
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.page.Page<Record<string, string>, string | null>.data: App.PageData & Record<string, any>
The merged result of all data from all load functions on the current page. You can type a common denominator through App.PageData.data.title}</title>
</svelte:head>

import type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';

export const const load: PageServerLoadconst load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async () => {
	return {
		serverMessage: stringserverMessage: stringserverMessage: 'hello from server load function'
	};
};

/** @type {import('./$types').PageServerLoad} */
export async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageServerLoad}function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageServerLoad}load() {
	return {
		serverMessage: stringserverMessage: stringserverMessage: 'hello from server load function'
	};
}

import type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';
export const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ data: Record<string, any> | null
Contains the data returned by the route's server load function (in +layout.server.js or +page.server.js), if any.data }) => {
	return {
		serverMessage: anyserverMessage: data.serverMessage,
'data' is possibly 'null'.
		universalMessage: stringuniversalMessage: 'hello from universal load function'
	};
};

/** @type {import('./$types').PageLoad} */
export async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}load({ data: Record<string, any> | null
Contains the data returned by the route's server load function (in +layout.server.js or +page.server.js), if any.data }) {
	return {
		serverMessage: anyserverMessage: data.serverMessage,
'data' is possibly 'null'.
		universalMessage: stringuniversalMessage: 'hello from universal load function'
	};
}

import type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';

export const const load: PageLoadconst load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = ({ 
route: {
    id: string | null;
}
Info about the current route
route: {
    id: string | null;
}
Info about the current routeroute }) => {
	var console: Consolevar console: Consoleconsole.Console.log(...data: any[]): void
The console.log() static method outputs a message to the console.
MDN ReferenceConsole.log(...data: any[]): void
The console.log() static method outputs a message to the console.
MDN Referencelog(
route: {
    id: string | null;
}
Info about the current route
route: {
    id: string | null;
}
Info about the current routeroute.id: string | null
The ID of the current route - e.g. for src/routes/blog/[slug], it would be /blog/[slug]. It is null when no route is matched.id: string | null
The ID of the current route - e.g. for src/routes/blog/[slug], it would be /blog/[slug]. It is null when no route is matched.id); // '/a/[b]/[...c]'
};

/** @type {import('./$types').PageLoad} */
export function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}load({ 
route: {
    id: string | null;
}
Info about the current route
route: {
    id: string | null;
}
Info about the current routeroute }) {
	var console: Consolevar console: Consoleconsole.Console.log(...data: any[]): void
The console.log() static method outputs a message to the console.
MDN ReferenceConsole.log(...data: any[]): void
The console.log() static method outputs a message to the console.
MDN Referencelog(
route: {
    id: string | null;
}
Info about the current route
route: {
    id: string | null;
}
Info about the current routeroute.id: string | null
The ID of the current route - e.g. for src/routes/blog/[slug], it would be /blog/[slug]. It is null when no route is matched.id: string | null
The ID of the current route - e.g. for src/routes/blog/[slug], it would be /blog/[slug]. It is null when no route is matched.id); // '/a/[b]/[...c]'
}

import type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';

export const const load: PageLoadconst load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ 
fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}
fetch is equivalent to the native fetch web API, with a few additional features:
It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
You can learn more about making credentialed requests with cookies here
fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}
fetch is equivalent to the native fetch web API, with a few additional features:
It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
You can learn more about making credentialed requests with cookies herefetch, params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams }) => {
	const const res: Responseconst res: Responseres = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)
MDN Referencefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)
MDN Referencefetch(`/api/items/${params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams.id}`);
	const const item: anyconst item: anyitem = await const res: Responseconst res: Responseres.Body.json(): Promise<any>
MDN ReferenceBody.json(): Promise<any>
MDN Referencejson();

	return { item: anyitem: anyitem };
};

/** @type {import('./$types').PageLoad} */
export async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}load({ 
fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}
fetch is equivalent to the native fetch web API, with a few additional features:
It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
You can learn more about making credentialed requests with cookies here
fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}
fetch is equivalent to the native fetch web API, with a few additional features:
It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
You can learn more about making credentialed requests with cookies herefetch, params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams }) {
	const const res: Responseconst res: Responseres = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)
MDN Referencefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)
MDN Referencefetch(`/api/items/${params: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams: Record<string, any>
The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } objectparams.id}`);
	const const item: anyconst item: anyitem = await const res: Responseconst res: Responseres.Body.json(): Promise<any>
MDN ReferenceBody.json(): Promise<any>
MDN Referencejson();

	return { item: anyitem: anyitem };
}

// @filename: ambient.d.ts
declare module '$lib/server/database' {
	export function 
function getUser(sessionid: string | undefined): Promise<{
    name: string;
    avatar: string;
}>
function getUser(sessionid: string | undefined): Promise<{
    name: string;
    avatar: string;
}>getUser(sessionid: string | undefinedsessionid: string | undefinedsessionid: string | undefined): interface Promise<T>
Represents the completion of an asynchronous operationinterface Promise<T>
Represents the completion of an asynchronous operationPromise<{ name: stringname: stringname: string, avatar: stringavatar: stringavatar: string }>
}

// @filename: index.ts
// cut
import * as module "$lib/server/database"db from '$lib/server/database';
import type { type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';

export const const load: LayoutServerLoadload: type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = async ({ cookies: Cookies
Get or set cookies related to the current requestcookies }) => {
	const const sessionid: string | undefinedsessionid = cookies: Cookies
Get or set cookies related to the current requestcookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefined
Gets a cookie that was previously set with cookies.set, or from the request headers.
@paramname the name of the cookie@paramopts the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options)get('sessionid');

	return {
		
user: {
    name: string;
    avatar: string;
}user: await module "$lib/server/database"db.
function getUser(sessionid: string | undefined): Promise<{
    name: string;
    avatar: string;
}>getUser(const sessionid: string | undefinedsessionid)
	};
};

// @filename: ambient.d.ts
declare module '$lib/server/database' {
	export function 
function getUser(sessionid: string | undefined): Promise<{
    name: string;
    avatar: string;
}>
function getUser(sessionid: string | undefined): Promise<{
    name: string;
    avatar: string;
}>getUser(sessionid: string | undefinedsessionid: string | undefinedsessionid: string | undefined): interface Promise<T>
Represents the completion of an asynchronous operationinterface Promise<T>
Represents the completion of an asynchronous operationPromise<{ name: stringname: stringname: string, avatar: stringavatar: stringavatar: string }>
}

// @filename: index.js
// cut
import * as module "$lib/server/database"db from '$lib/server/database';

/** @type {import('./$types').LayoutServerLoad} */
export async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').LayoutServerLoad}load({ cookies: Cookies
Get or set cookies related to the current requestcookies }) {
	const const sessionid: string | undefinedsessionid = cookies: Cookies
Get or set cookies related to the current requestcookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefined
Gets a cookie that was previously set with cookies.set, or from the request headers.
@paramname the name of the cookie@paramopts the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options)get('sessionid');

	return {
		
user: {
    name: string;
    avatar: string;
}user: await module "$lib/server/database"db.
function getUser(sessionid: string | undefined): Promise<{
    name: string;
    avatar: string;
}>getUser(const sessionid: string | undefinedsessionid)
	};
}

import type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';
export const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ 
fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}
fetch is equivalent to the native fetch web API, with a few additional features:
It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
You can learn more about making credentialed requests with cookies herefetch, setHeaders: (headers: Record<string, string>) => void
If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:
/// file: src/routes/blog/+page.js
export async function load({ fetch, setHeaders }) {
	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control')
	});

	return response.json();
}
Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.
You cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.
setHeaders has no effect when a load function runs in the browser.setHeaders }) => {
	const const url: "https://cms.example.com/products.json"url = `https://cms.example.com/products.json`;
	const const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)
MDN Referencefetch(const url: "https://cms.example.com/products.json"url);

	// Headers are only set during SSR, caching the page's HTML
	// for the same length of time as the underlying data.
	setHeaders: (headers: Record<string, string>) => void
If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:
/// file: src/routes/blog/+page.js
export async function load({ fetch, setHeaders }) {
	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control')
	});

	return response.json();
}
Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.
You cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.
setHeaders has no effect when a load function runs in the browser.setHeaders({
		age: const response: Responseresponse.Response.headers: Headers
The headers read-only property of the Response interface contains the Headers object associated with the response.
MDN Referenceheaders.Headers.get(name: string): string | null
The get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn't exist in the Headers object, it returns null.
MDN Referenceget('age'),
Type 'string | null' is not assignable to type 'string'.
  Type 'null' is not assignable to type 'string'.
		'cache-control': const response: Responseresponse.Response.headers: Headers
The headers read-only property of the Response interface contains the Headers object associated with the response.
MDN Referenceheaders.Headers.get(name: string): string | null
The get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn't exist in the Headers object, it returns null.
MDN Referenceget('cache-control')
Type 'string | null' is not assignable to type 'string'.
  Type 'null' is not assignable to type 'string'.
	});

	return const response: Responseresponse.Body.json(): Promise<any>
MDN Referencejson();
};

/** @type {import('./$types').PageLoad} */
export async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').PageLoad}load({ 
fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}
fetch is equivalent to the native fetch web API, with a few additional features:
It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
You can learn more about making credentialed requests with cookies herefetch, setHeaders: (headers: Record<string, string>) => void
If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:
/// file: src/routes/blog/+page.js
export async function load({ fetch, setHeaders }) {
	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control')
	});

	return response.json();
}
Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.
You cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.
setHeaders has no effect when a load function runs in the browser.setHeaders }) {
	const const url: "https://cms.example.com/products.json"url = `https://cms.example.com/products.json`;
	const const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)
MDN Referencefetch(const url: "https://cms.example.com/products.json"url);

	// Headers are only set during SSR, caching the page's HTML
	// for the same length of time as the underlying data.
	setHeaders: (headers: Record<string, string>) => void
If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:
/// file: src/routes/blog/+page.js
export async function load({ fetch, setHeaders }) {
	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control')
	});

	return response.json();
}
Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.
You cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.
setHeaders has no effect when a load function runs in the browser.setHeaders({
		age: const response: Responseresponse.Response.headers: Headers
The headers read-only property of the Response interface contains the Headers object associated with the response.
MDN Referenceheaders.Headers.get(name: string): string | null
The get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn't exist in the Headers object, it returns null.
MDN Referenceget('age'),
Type 'string | null' is not assignable to type 'string'.
  Type 'null' is not assignable to type 'string'.
		'cache-control': const response: Responseresponse.Response.headers: Headers
The headers read-only property of the Response interface contains the Headers object associated with the response.
MDN Referenceheaders.Headers.get(name: string): string | null
The get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn't exist in the Headers object, it returns null.
MDN Referenceget('cache-control')
Type 'string | null' is not assignable to type 'string'.
  Type 'null' is not assignable to type 'string'.
	});

	return const response: Responseresponse.Body.json(): Promise<any>
MDN Referencejson();
}

import type { type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad } from './$types';

export const const load: LayoutLoadconst load: LayoutLoadload: type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad = () => {
	return { a: numbera: numbera: 1 };
};

/** @type {import('./$types').LayoutLoad} */
export function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').LayoutLoad}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>
@type{import('./$types').LayoutLoad}load() {
	return { a: numbera: numbera: 1 };
}

import type { type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad } from './$types';

export const const load: LayoutLoadconst load: LayoutLoadload: type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad = async ({ parent: () => Promise<Record<string, any>>
await parent() returns data from parent +layout.js load functions.
Implicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.
Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.parent: () => Promise<Record<string, any>>
await parent() returns data from parent +layout.js load functions.
Implicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.
Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.parent }) => {
	const { const a: anyconst a: anya } = await parent: () => Promise<Record<string, any>>
await parent() returns data from parent +layout.js load functions.
Implicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.
Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.parent: () => Promise<Record<string, any>>
await parent() returns data from parent +layout.js load functions.
Implicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.
Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.parent();
	return { b: anyb: anyb: const a: anyconst a: anya + 1 };
};