メインコンテンツへスキップ

@sveltejs/kit

import {
	class ServerServer,
	const VERSION: stringVERSION,
	function error(status: number, body: App.Error): never (+1 overload)

Throws an error with a HTTP status code and an optional message. When called during request handling, this will cause SvelteKit to return an error response without invoking handleError. Make sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.

@paramstatus The HTTP status code. Must be in the range 400-599.
@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.
@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.
@throwsError If the provided status is invalid (not between 400 and 599).
error
,
function fail(status: number): ActionFailure<undefined> (+1 overload)

Create an ActionFailure object.

@paramstatus The HTTP status code. Must be in the range 400-599.
fail
,
function isActionFailure(e: unknown): e is ActionFailure<undefined>

Checks whether this is an action failure thrown by {@link fail } .

@parame The object to check.
isActionFailure
,
function isHttpError<T extends number>(e: unknown, status?: T | undefined): e is HttpError_1 & {
    status: T extends undefined ? never : T;
}

Checks whether this is an error thrown by {@link error } .

@paramstatus The status to filter for.
isHttpError
,
function isRedirect(e: unknown): e is Redirect_1

Checks whether this is a redirect thrown by {@link redirect } .

@parame The object to check.
isRedirect
,
function json(data: any, init?: ResponseInit | undefined): Response

Create a JSON Response object from the supplied data.

@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json
,
function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never

Redirect a request. When called during request handling, SvelteKit will return a redirect response. Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.

@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.
redirect
,
function text(body: string, init?: ResponseInit | undefined): Response

Create a Response object from the supplied body.

@parambody The value that will be used as-is.
@paraminit Options such as status and headers that will be added to the response. A Content-Length header will be added automatically.
text
} from '@sveltejs/kit';

サーバー

class Server {}
constructor(manifest: SSRManifest);
init(options: ServerInitOptions): Promise<void>;
respond(request: Request, options: RequestOptions): Promise<Response>;

バージョン

const VERSION: string;

error

HTTPステータスコードとオプションのメッセージでエラーをスローします。リクエスト処理中に呼び出された場合、これは`handleError`を呼び出さずにSvelteKitにエラーレスポンスを返させます。SvelteKitがエラーを処理できなくなるため、スローされたエラーをキャッチしないようにしてください。

function error(status: number, body: App.Error): never;
function error(
	status: number,
	body?: {
		message: string;
	} extends App.Error
		? App.Error | string | undefined
		: never
): never;

fail

`ActionFailure`オブジェクトを作成します。

function fail(status: number): ActionFailure<undefined>;
function fail<
	T extends Record<string, unknown> | undefined = undefined
>(status: number, data: T): ActionFailure<T>;

isActionFailure

`fail`によってスローされたアクションエラーかどうかを確認します。

function isActionFailure(e: unknown): e is ActionFailure;

isHttpError

`error`によってスローされたエラーかどうかを確認します。

function isHttpError<T extends number>(
	e: unknown,
	status?: T | undefined
): e is HttpError_1 & {
	status: T extends undefined ? never : T;
};

isRedirect

`redirect`によってスローされたリダイレクトかどうかを確認します。

function isRedirect(e: unknown): e is Redirect_1;

json

指定されたデータからJSON `Response`オブジェクトを作成します。

function json(
	data: any,
	init?: ResponseInit | undefined
): Response;

redirect

リクエストをリダイレクトします。リクエスト処理中に呼び出された場合、SvelteKitはリダイレクトレスポンスを返します。SvelteKitが処理できなくなるため、スローされたリダイレクトをキャッチしないようにしてください。

function redirect(
	status:
		| 300
		| 301
		| 302
		| 303
		| 304
		| 305
		| 306
		| 307
		| 308
		| ({} & number),
	location: string | URL
): never;

text

指定されたボディから`Response`オブジェクトを作成します。

function text(
	body: string,
	init?: ResponseInit | undefined
): Response;

Action

`+page.server.js`内の`export const actions = {..}`の一部であるフォームアクションメソッドの形状。詳細はフォームアクションを参照してください。

type Action<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = (
	event: RequestEvent<Params, RouteId>
) => MaybePromise<OutputData>;

ActionFailure

interface ActionFailure<
	T extends Record<string, unknown> | undefined = undefined
> {}
status: number;
data: T;
[uniqueSymbol]: true;

ActionResult

fetch経由でフォームアクションを呼び出す場合、レスポンスはこれらの形状のいずれかになります。

<form method="post" use:enhance={() => {
	return ({ result }) => {
		// result is of type ActionResult
	};
}}
type ActionResult<
	Success extends
		| Record<string, unknown>
		| undefined = Record<string, any>,
	Failure extends
		| Record<string, unknown>
		| undefined = Record<string, any>
> =
	| { type: 'success'; status: number; data?: Success }
	| { type: 'failure'; status: number; data?: Failure }
	| { type: 'redirect'; status: number; location: string }
	| { type: 'error'; status?: number; error: any };

Actions

`+page.server.js`内の`export const actions = {..}`オブジェクトの形状。詳細はフォームアクションを参照してください。

type Actions<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = Record<string, Action<Params, OutputData, RouteId>>;

Adapter

アダプターは、本番ビルドを受け取り、選択したプラットフォームにデプロイできるものに変換する役割を担います。

interface Adapter {}
name: string;

ロギングに使用されるアダプターの名前。通常はパッケージ名に対応します。

adapt(builder: Builder): MaybePromise<void>;
  • `builder` アプリを適応させるためのメソッドを含むSvelteKitによって提供されるオブジェクト

この関数は、SvelteKitがアプリをビルドした後に呼び出されます。

supports?: {}

このアダプターで本番環境で特定の機能が動作するかどうかを判断するために、開発時とビルド時に呼び出されるチェック

read?: (details: { config: any; route: { id: string } }) => boolean;
  • `config` マージされたルート設定

`$app/server`からの`read`のテストサポート

emulate?(): MaybePromise<Emulator>;

アダプターが開発時、ビルド時、プリレンダリング時に環境に影響を与えることができる`Emulator`を作成します。

AfterNavigate

`afterNavigate`コールバックに渡される引数。

interface AfterNavigate extends Omit<Navigation, 'type'> {}
type: Exclude<NavigationType, 'leave'>;

ナビゲーションの種類

  • `enter`: アプリがハイドレートされました
  • `form`: ユーザーが`
    `を送信しました
  • `link`: リンククリックによってナビゲーションがトリガーされました
  • `goto`: `goto(...)`呼び出しまたはリダイレクトによってナビゲーションがトリガーされました
  • `popstate`: 前/後のナビゲーションによってナビゲーションがトリガーされました
willUnload: false;

`afterNavigate`コールバックはナビゲーションが完了した後に呼び出されるため、ページをアンロードするナビゲーションでは決して呼び出されません。

AwaitedActions

type AwaitedActions<
	T extends Record<string, (...args: any) => any>
> = OptionalUnion<
	{
		[Key in keyof T]: UnpackValidationError<
			Awaited<ReturnType<T[Key]>>
		>;
	}[keyof T]
>;

BeforeNavigate

`beforeNavigate`コールバックに渡される引数。

interface BeforeNavigate extends Navigation {}
cancel(): void;

ナビゲーションの開始を阻止するにはこれを使用します。

Builder

このオブジェクトは、アダプターの`adapt`関数に渡されます。アプリの適応に役立つさまざまなメソッドとプロパティが含まれています。

interface Builder {}
log: Logger;

コンソールにメッセージを出力します。`log.info`と`log.minor`は、Viteの`logLevel`が`info`でない限りサイレントです。

rimraf(dir: string): void;

`dir`とそのすべてのコンテンツを削除します。

mkdirp(dir: string): void;

`dir`と必要なすべての親ディレクトリを作成します。

config: ValidatedConfig;

完全に解決された`svelte.config.js`。

prerendered: Prerendered;

プリレンダリングされたページとアセットに関する情報(もしあれば)。

routes: RouteDefinition[];

すべてのルートの配列(プリレンダリングを含む)。

createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;
  • `fn` ルートのセットをエントリポイントにグループ化する関数
  • 非推奨 代わりに`builder.routes`を使用してください

アプリの1つ以上のルートにマップする個別の関数を作成します。

findServerAssets(routes: RouteDefinition[]): string[];

`routes`に属するサーバーファイルによってインポートされたすべてのアセットを見つけます。

generateFallback(dest: string): Promise<void>;

ルートが一致しない場合に静的Webサーバーが使用するフォールバックページを生成します。シングルページアプリに役立ちます。

generateEnvModule(): void;

ビルド時の環境変数を`$env/dynamic/public`として公開するモジュールを生成します。

generateManifest(opts: { relativePath: string; routes?: RouteDefinition[] }): string;
  • `opts` アプリのベースディレクトリへの相対パスと、オプションでマニフェストを生成する形式(esmまたはcjs)。

SvelteKit サーバーを初期化するサーバーサイドマニフェストを生成します。

getBuildDirectory(name: string): string;
  • `name` ビルドディレクトリに対する相対パス。

`outDir`内の`name`ディレクトリへの完全に解決されたパスを取得します(例:`/path/to/.svelte-kit/my-adapter`)。

getClientDirectory(): string;

`static`ディレクトリのコンテンツを含む、クライアントサイドアセットを含むディレクトリへの完全に解決されたパスを取得します。

getServerDirectory(): string;

サーバーサイドコードを含むディレクトリへの完全に解決されたパスを取得します。

getAppPath(): string;

設定された`base`パスを含むアプリケーションパスを取得します(例:`my-base-path/_app`)。

writeClient(dest: string): string[];
  • `dest` 宛先フォルダー
  • 戻り値 `dest`に書き込まれたファイルの配列

`dest`にクライアントアセットを書き込みます。

writePrerendered(dest: string): string[];
  • `dest` 宛先フォルダー
  • 戻り値 `dest`に書き込まれたファイルの配列

`dest`にプリレンダリングされたファイルを書き込みます。

writeServer(dest: string): string[];
  • `dest` 宛先フォルダー
  • 戻り値 `dest`に書き込まれたファイルの配列

`dest`にサーバーサイドコードを書き込みます。

copy(
	from: string,
	to: string,
	opts?: {
		filter?(basename: string): boolean;
		replace?: Record<string, string>;
	}
): string[];
  • `from` ソースファイルまたはディレクトリ
  • `to` 宛先ファイルまたはディレクトリ
  • `opts.filter` ファイルまたはディレクトリをコピーするかどうかを判断する関数
  • `opts.replace` 置換する文字列のマップ
  • 戻り値 コピーされたファイルの配列

ファイルまたはディレクトリをコピーします。

compress(directory: string): Promise<void>;
  • `directory` 圧縮するファイルを含むディレクトリ

`directory`内のファイルをgzipとbrotliで圧縮します(適切な場合)。元のファイルの横に`.gz`と`.br`ファイルを生成します。

Config

詳細は設定リファレンスを参照してください。

Cookies

interface Cookies {}
get(name: string, opts?: import('cookie').CookieParseOptions): string | undefined;
  • `name` クッキーの名前
  • `opts` オプション。`cookie.parse`に直接渡されます。ドキュメントはこちらを参照してください。

`cookies.set`で以前設定されたクッキー、またはリクエストヘッダーからクッキーを取得します。

getAll(opts?: import('cookie').CookieParseOptions): Array<{ name: string; value: string }>;
  • `opts` オプション。`cookie.parse`に直接渡されます。ドキュメントはこちらを参照してください。

`cookies.set`で以前設定されたすべてのクッキー、またはリクエストヘッダーからすべてのクッキーを取得します。

set(
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
): void;
  • `name` クッキーの名前
  • `value` クッキーの値
  • `opts` オプション。`cookie.serialize`に直接渡されます。ドキュメントはこちらを参照してください。

クッキーを設定します。これにより、レスポンスに`set-cookie`ヘッダーが追加されますが、現在のリクエスト中に`cookies.get`または`cookies.getAll`を使用してクッキーを利用することもできます。

`httpOnly`と`secure`オプションはデフォルトで`true`です(http://localhostでは`secure`は`false`です)。クライアントサイドJavaScriptでクッキーを読み取れるようにしたり、HTTP経由で送信できるようにするには、明示的に無効にする必要があります。`sameSite`オプションはデフォルトで`lax`です。

クッキーには`path`を指定する必要があります。ほとんどの場合、アプリ全体でクッキーを利用できるように`path: '/'`を明示的に設定する必要があります。相対パスを使用したり、`path: ''`を設定して、現在のパスとその子パスでのみクッキーを利用できるようにすることもできます。

delete(name: string, opts: import('cookie').CookieSerializeOptions & { path: string }): void;
  • `name` クッキーの名前
  • `opts` オプション。`cookie.serialize`に直接渡されます。削除するクッキーのパスと`path`は一致する必要があります。ドキュメントはこちらを参照してください。

値を空文字列に設定し、有効期限を過去に設定することでクッキーを削除します。

クッキーには`path`を指定する必要があります。ほとんどの場合、アプリ全体でクッキーを利用できるように`path: '/'`を明示的に設定する必要があります。相対パスを使用したり、`path: ''`を設定して、現在のパスとその子パスでのみクッキーを利用できるようにすることもできます。

serialize(
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
): string;
  • `name` クッキーの名前
  • `value` クッキーの値
  • `opts` オプション。`cookie.serialize`に直接渡されます。ドキュメントはこちらを参照してください。

`Set-Cookie`ヘッダー文字列にクッキーの名前と値のペアをシリアライズしますが、レスポンスには適用しません。

`httpOnly`と`secure`オプションはデフォルトで`true`です(http://localhostでは`secure`は`false`です)。クライアントサイドJavaScriptでクッキーを読み取れるようにしたり、HTTP経由で送信できるようにするには、明示的に無効にする必要があります。`sameSite`オプションはデフォルトで`lax`です。

クッキーには`path`を指定する必要があります。ほとんどの場合、アプリ全体でクッキーを利用できるように`path: '/'`を明示的に設定する必要があります。相対パスを使用したり、`path: ''`を設定して、現在のパスとその子パスでのみクッキーを利用できるようにすることもできます。

Emulator

開発時、ビルド時、プリレンダリング時に環境に影響を与える関数の集合

interface Emulator {}
platform?(details: { config: any; prerender: PrerenderOption }): MaybePromise<App.Platform>;

現在のルート`config`と`prerender`オプションを受け取り、`App.Platform`オブジェクトを返す関数

Handle

SvelteKitサーバーがリクエストを受信するたびに実行されるhandleフックは、レスポンスを決定します。リクエストを表すeventオブジェクトと、ルートをレンダリングしてResponseを生成するresolveという関数が渡されます。これにより、レスポンスヘッダーや本文を変更したり、SvelteKitを完全にバイパスしたりすることができます(たとえば、プログラムでルートを実装する場合など)。

type Handle = (input: {
	event: RequestEvent;
	resolve(
		event: RequestEvent,
		opts?: ResolveOptions
	): MaybePromise<Response>;
}) => MaybePromise<Response>;

HandleClientError

クライアント側のhandleErrorフックは、ナビゲーション中に予期しないエラーがスローされた場合に実行されます。

読み込み中またはその後のレンダリング中に予期しないエラーがスローされた場合、この関数はエラーとイベントとともに呼び出されます。この関数が決してエラーをスローしないようにしてください。

type HandleClientError = (input: {
	error: unknown;
	event: NavigationEvent;
	status: number;
	message: string;
}) => MaybePromise<void | App.Error>;

HandleFetch

handleFetchフックを使用すると、サーバー上で実行される(またはプリレンダリング中に実行される)load関数内で発生するfetchリクエストを変更(または置き換え)できます。

type HandleFetch = (input: {
	event: RequestEvent;
	request: Request;
	fetch: typeof fetch;
}) => MaybePromise<Response>;

HandleServerError

サーバー側のhandleErrorフックは、リクエストに応答中に予期しないエラーがスローされた場合に実行されます。

読み込み中またはレンダリング中に予期しないエラーがスローされた場合、この関数はエラーとイベントとともに呼び出されます。この関数が決してエラーをスローしないようにしてください。

type HandleServerError = (input: {
	error: unknown;
	event: RequestEvent;
	status: number;
	message: string;
}) => MaybePromise<void | App.Error>;

HttpError

error関数によって返されるオブジェクトです。

interface HttpError {}
status: number;

400~599の範囲のHTTPステータスコードです。

body: App.Error;

エラーの内容です。

KitConfig

詳細は設定リファレンスを参照してください。

LessThan

type LessThan<
	TNumber extends number,
	TArray extends any[] = []
> = TNumber extends TArray['length']
	? TArray[number]
	: LessThan<TNumber, [...TArray, TArray['length']]>;

Load

PageLoadLayoutLoadの汎用的な形式です。Loadを直接使用せずに、./$typesからインポートする必要があります(生成された型を参照)。

type Load<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	InputData extends Record<string, unknown> | null = Record<
		string,
		any
	> | null,
	ParentData extends Record<string, unknown> = Record<
		string,
		any
	>,
	OutputData extends Record<
		string,
		unknown
	> | void = Record<string, any> | void,
	RouteId extends string | null = string | null
> = (
	event: LoadEvent<Params, InputData, ParentData, RouteId>
) => MaybePromise<OutputData>;

LoadEvent

PageLoadEventLayoutLoadEventの汎用的な形式です。LoadEventを直接使用せずに、./$typesからインポートする必要があります(生成された型を参照)。

interface LoadEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	Data extends Record<string, unknown> | null = Record<
		string,
		any
	> | null,
	ParentData extends Record<string, unknown> = Record<
		string,
		any
	>,
	RouteId extends string | null = string | null
> extends NavigationEvent<Params, RouteId> {}
fetch: typeof fetch;

fetchは、いくつかの追加機能を持つネイティブのfetch Web APIと同等です。

  • ページリクエストのcookieおよびauthorizationヘッダーを継承するため、サーバー上で認証付きリクエストを行うために使用できます。
  • サーバー上で相対リクエストを行うことができます(通常、fetchはサーバーコンテキストで使用される場合、オリジンを含むURLが必要です)。
  • 内部リクエスト(例:+server.jsルート用)は、サーバー上で実行されている場合、HTTP呼び出しのオーバーヘッドなしで、ハンドラー関数に直接送られます。
  • サーバーサイドレンダリング中は、レスポンスがキャプチャされ、Responseオブジェクトのtextメソッドとjsonメソッドにフックすることで、レンダリングされたHTMLにインライン化されます。ただし、filterSerializedResponseHeadersを介して明示的に含めない限り、ヘッダーはシリアライズされません。
  • ハイドレーション中は、レスポンスがHTMLから読み取られ、一貫性が保証され、追加のネットワークリクエストが防止されます。

Cookieを使用した認証付きリクエストの詳細については、こちらをご覧ください。

data: Data;

ルートのサーバーload関数(+layout.server.jsまたは+page.server.js内)によって返されたデータ(存在する場合)が含まれています。

setHeaders(headers: Record<string, string>): void;

レスポンスのヘッダーを設定する必要がある場合は、このメソッドを使用できます。これは、たとえばページをキャッシュしたい場合に役立ちます。

src/routes/blog/+page
export async function 
function load({ fetch, setHeaders }: {
    fetch: any;
    setHeaders: any;
}): Promise<any>
load
({ fetch, setHeaders }) {
const const url: "https://cms.example.com/articles.json"url = `https://cms.example.com/articles.json`; const const response: anyresponse = await fetch: anyfetch(const url: "https://cms.example.com/articles.json"url); setHeaders: anysetHeaders({ age: anyage: const response: anyresponse.headers.get('age'), 'cache-control': const response: anyresponse.headers.get('cache-control') }); return const response: anyresponse.json(); }

同じヘッダーを複数回設定することは(別々のload関数内であっても)エラーになります。特定のヘッダーは一度だけ設定できます。

setHeadersset-cookieヘッダーを追加することはできません。代わりに、サーバー専用load関数でcookies APIを使用してください。

setHeadersは、load関数がブラウザで実行される場合、効果がありません。

parent(): Promise<ParentData>;

await parent()は、親の+layout.jsload関数からのデータを返します。暗黙的に、存在しない+layout.js({ data }) => data関数として扱われ、親の+layout.server.jsファイルからのデータを返し、転送します。

await parent()を使用する際は、誤ってウォーターフォールが発生しないように注意してください。たとえば、親のデータを返された出力にマージするだけの場合、他のデータの取得に呼び出してください。

depends(...deps: Array<`${string}:${string}`>): void;

この関数は、load関数が1つ以上のURLまたはカスタム識別子に依存していることを宣言します。これにより、その後invalidate()を使用して、loadを再実行させることができます。

ほとんどの場合、fetch呼び出しがdependsを代わりに実行するため、これは必要ありません。これは、fetchをバイパスするカスタムAPIクライアントを使用している場合にのみ必要です。

URLは絶対パスでも、読み込まれているページに対する相対パスでもかまいません。また、エンコードされている必要があります。

カスタム識別子は、URI仕様に準拠するために、1つ以上の小文字で始まる接頭辞をコロンで続ける必要があります。

次の例は、カスタム識別子への依存関係を登録するためにdependsを使用する方法を示しています。これは、ボタンをクリックした後invalidateされ、load関数を再実行します。

src/routes/+page
let let count: numbercount = 0;
export async function 
function load({ depends }: {
    depends: any;
}): Promise<{
    count: number;
}>
load
({ depends }) {
depends: anydepends('increase:count'); return { count: numbercount: let count: numbercount++ }; }
src/routes/+page
<script>
	import { invalidate } from '$app/navigation';

	let { data } = $props();

	const increase = async () => {
		await invalidate('increase:count');
	}
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>
untrack<T>(fn: () => T): T;

この関数を使用して、コールバック内で同期的に呼び出されるすべてのものの依存関係トラッキングをオプトアウトします。例

src/routes/+page.server
export async function 
function load({ untrack, url }: {
    untrack: any;
    url: any;
}): Promise<{
    message: string;
} | undefined>
load
({ untrack, url }) {
// Untrack url.pathname so that path changes don't trigger a rerun if (untrack: anyuntrack(() => url: anyurl.pathname === '/')) { return { message: stringmessage: 'Welcome!' }; } }

LoadProperties

type LoadProperties<
	input extends Record<string, any> | void
> = input extends void
	? undefined // needs to be undefined, because void will break intellisense
	: input extends Record<string, any>
		? input
		: unknown;
interface Navigation {}
from: NavigationTarget | null;

ナビゲーションが開始された場所

to: NavigationTarget | null;

ナビゲーションの移動先/移動した場所

type: Exclude<NavigationType, 'enter'>;

ナビゲーションの種類

  • `form`: ユーザーが``を送信しました
  • leave: タブが閉じられたか、別のドキュメントへのナビゲーションが発生したために、アプリが離れています。
  • `link`: リンククリックによってナビゲーションがトリガーされました
  • `goto`: `goto(...)`呼び出しまたはリダイレクトによってナビゲーションがトリガーされました
  • `popstate`: 前/後のナビゲーションによってナビゲーションがトリガーされました
willUnload: boolean;

ナビゲーションによってページがアンロードされるかどうか(つまり、クライアント側のナビゲーションではないか)。

delta?: number;

履歴の戻る/進むナビゲーションの場合、戻る/進むステップ数。

complete: Promise<void>;

ナビゲーションが完了すると解決され、ナビゲーションが失敗するか中断されると拒否されるPromise。willUnloadナビゲーションの場合、Promiseは解決されません。

interface NavigationEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> {}
params: Params;

現在のページのパラメーター(例:/blog/[slug]のようなルートの場合、{ slug: string }オブジェクト)。

route: {}

現在のルートに関する情報。

id: RouteId;

現在のルートのID(例:src/routes/blog/[slug]の場合、/blog/[slug])。

url: URL;

現在のページのURL。

特定のナビゲーションのターゲットに関する情報。

interface NavigationTarget {}
params: Record<string, string> | null;

ターゲットページのパラメーター(例:/blog/[slug]のようなルートの場合、{ slug: string }オブジェクト)。ターゲットがSvelteKitアプリの一部ではない場合(ルートに解決できなかった場合)、nullです。

route: { id: string | null };

ターゲットルートに関する情報。

url: URL;

ナビゲーション先のURL。

  • `enter`: アプリがハイドレートされました
  • form: ユーザーがGETメソッドで<form>を送信しました。
  • leave: ユーザーはタブを閉じたり、戻る/進むボタンを使用して別のドキュメントに移動したりすることで、アプリを離れています。
  • `link`: リンククリックによってナビゲーションがトリガーされました
  • `goto`: `goto(...)`呼び出しまたはリダイレクトによってナビゲーションがトリガーされました
  • `popstate`: 前/後のナビゲーションによってナビゲーションがトリガーされました
type NavigationType =
	| 'enter'
	| 'form'
	| 'leave'
	| 'link'
	| 'goto'
	| 'popstate';

NumericRange

type NumericRange<
	TStart extends number,
	TEnd extends number
> = Exclude<TEnd | LessThan<TEnd>, LessThan<TStart>>;

OnNavigate

onNavigateコールバックに渡される引数です。

interface OnNavigate extends Navigation {}
type: Exclude<NavigationType, 'enter' | 'leave'>;

ナビゲーションの種類

  • `form`: ユーザーが``を送信しました
  • `link`: リンククリックによってナビゲーションがトリガーされました
  • `goto`: `goto(...)`呼び出しまたはリダイレクトによってナビゲーションがトリガーされました
  • `popstate`: 前/後のナビゲーションによってナビゲーションがトリガーされました
willUnload: false;

onNavigateコールバックはクライアントサイドナビゲーションの直前に呼び出されるため、ページをアンロードするナビゲーションで呼び出されることはありません。

Page

$pageストアの形状。

interface Page<
	Params extends Record<string, string> = Record<
		string,
		string
	>,
	RouteId extends string | null = string | null
> {}
url: URL;

現在のページのURL。

params: Params;

現在のページのパラメーター(例:/blog/[slug]のようなルートの場合、{ slug: string }オブジェクト)。

route: {}

現在のルートに関する情報。

id: RouteId;

現在のルートのID(例:src/routes/blog/[slug]の場合、/blog/[slug])。

status: number;

現在のページのHTTPステータスコード。

error: App.Error | null;

現在のページのエラーオブジェクト(存在する場合)。handleErrorフックから設定されます。

data: App.PageData & Record<string, any>;

現在のページのすべてのload関数からのすべてのデータの統合結果。App.PageDataを使用して共通の分母を型指定できます。

state: App.PageState;

$app/navigationpushState関数とreplaceState関数を使用して操作できるページの状態。

form: any;

フォーム送信後のみ設定されます。フォームアクションの詳細については、こちらを参照してください。

ParamMatcher

パラメーターマッチャーの形状。マッチングの詳細については、こちらを参照してください。

type ParamMatcher = (param: string) => boolean;

PrerenderOption

type PrerenderOption = boolean | 'auto';

Redirect

redirect関数によって返されるオブジェクトです。

interface Redirect {}
status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;

300~308の範囲のHTTPステータスコードです。

location: string;

リダイレクト先の場所です。

RequestEvent

interface RequestEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> {}
cookies: Cookies;

現在のリクエストに関連するCookieを取得または設定します。

fetch: typeof fetch;

fetchは、いくつかの追加機能を持つネイティブのfetch Web APIと同等です。

  • ページリクエストのcookieおよびauthorizationヘッダーを継承するため、サーバー上で認証付きリクエストを行うために使用できます。
  • サーバー上で相対リクエストを行うことができます(通常、fetchはサーバーコンテキストで使用される場合、オリジンを含むURLが必要です)。
  • 内部リクエスト(例:+server.jsルート用)は、サーバー上で実行されている場合、HTTP呼び出しのオーバーヘッドなしで、ハンドラー関数に直接送られます。
  • サーバーサイドレンダリング中は、レスポンスがキャプチャされ、Responseオブジェクトのtextメソッドとjsonメソッドにフックすることで、レンダリングされたHTMLにインライン化されます。ただし、filterSerializedResponseHeadersを介して明示的に含めない限り、ヘッダーはシリアライズされません。
  • ハイドレーション中は、レスポンスがHTMLから読み取られ、一貫性が保証され、追加のネットワークリクエストが防止されます。

Cookieを使用した認証付きリクエストの詳細については、こちらをご覧ください。

getClientAddress(): string;

アダプターによって設定されたクライアントのIPアドレス。

locals: App.Locals;

サーバーハンドルフック内でリクエストに追加されたカスタムデータが含まれています。

params: Params;

現在のルートのパラメーター(例:/blog/[slug]のようなルートの場合、{ slug: string }オブジェクト)。

platform: Readonly<App.Platform> | undefined;

アダプターを介して利用可能になった追加データ。

request: Request;

元のリクエストオブジェクト。

route: {}

現在のルートに関する情報。

id: RouteId;

現在のルートのID(例:src/routes/blog/[slug]の場合、/blog/[slug])。

setHeaders(headers: Record<string, string>): void;

レスポンスのヘッダーを設定する必要がある場合は、このメソッドを使用できます。これは、たとえばページをキャッシュしたい場合に役立ちます。

src/routes/blog/+page
export async function 
function load({ fetch, setHeaders }: {
    fetch: any;
    setHeaders: any;
}): Promise<any>
load
({ fetch, setHeaders }) {
const const url: "https://cms.example.com/articles.json"url = `https://cms.example.com/articles.json`; const const response: anyresponse = await fetch: anyfetch(const url: "https://cms.example.com/articles.json"url); setHeaders: anysetHeaders({ age: anyage: const response: anyresponse.headers.get('age'), 'cache-control': const response: anyresponse.headers.get('cache-control') }); return const response: anyresponse.json(); }

同じヘッダーを複数回設定することは(別々のload関数内であっても)エラーになります。特定のヘッダーは一度だけ設定できます。

setHeadersset-cookieヘッダーを追加することはできません。代わりにcookies APIを使用してください。

url: URL;

リクエストされたURL。

isDataRequest: boolean;

クライアントから+page/layout.server.jsデータの要求があった場合にtrueになります。この場合、urlプロパティはデータ要求に関連する内部情報は削除されます。この区別が重要な場合は、このプロパティを使用してください。

isSubRequest: boolean;

SvelteKitからHTTPリクエストを行うオーバーヘッドなしで+server.jsが呼び出された場合にtrueになります。これは、サーバー上で同オリジンのfetchリクエストを行う場合に発生します。

RequestHandler

HTTPメソッド(GETPUTPATCHなど)に対応する+server.jsファイルからエクスポートされた(event: RequestEvent) => Response関数で、そのメソッドによるリクエストを処理します。

最初のジェネリック引数としてParamsを受け取りますが、代わりに生成された型を使用することで省略できます。

type RequestHandler<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> = (
	event: RequestEvent<Params, RouteId>
) => MaybePromise<Response>;

Reroute

rerouteフックを使用すると、レンダリングするルートを決定する前にURLを変更できます。

type Reroute = (event: { url: URL }) => void | string;

ResolveOptions

interface ResolveOptions {}
transformPageChunk?(input: { html: string; done: boolean }): MaybePromise<string | undefined>;
  • input: HTMLチャンクとそれが最後のチャンクかどうかを示す情報

HTMLにカスタム変換を適用します。doneがtrueの場合、最後のチャンクです。チャンクは必ずしも整形式のHTMLであるとは限りません(要素の開始タグが含まれていても終了タグが含まれていない場合があります)。しかし、%sveltekit.head%やレイアウト/ページコンポーネントなど、適切な境界で常に分割されます。

filterSerializedResponseHeaders?(name: string, value: string): boolean;
  • name: ヘッダー名
  • value: ヘッダー値

load関数がfetchでリソースを読み込む場合に、シリアル化されたレスポンスに含めるべきヘッダーを決定します。デフォルトでは、何も含まれません。

preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;
  • input: ファイルの種類とそのパス

プリロードするために<head>タグに追加するものを決定します。デフォルトでは、jsファイルとcssファイルがプリロードされます。

RouteDefinition

interface RouteDefinition<Config = any> {}
id: string;
api: {
	methods: Array<HttpMethod | '*'>;
};
page: {
	methods: Array<Extract<HttpMethod, 'GET' | 'POST'>>;
};
pattern: RegExp;
prerender: PrerenderOption;
segments: RouteSegment[];
methods: Array<HttpMethod | '*'>;
config: Config;

SSRManifest

interface SSRManifest {}
appDir: string;
appPath: string;
assets: Set<string>;
mimeTypes: Record<string, string>;
_: {}

プライベートフィールド

client: NonNullable<BuildData['client']>;
nodes: SSRNodeLoader[];
routes: SSRRoute[];
matchers(): Promise<Record<string, ParamMatcher>>;
server_assets: Record<string, number>;

サーバーコードによってインポートされたすべてのアセットの[ファイル]: サイズマップ

ServerInitOptions

interface ServerInitOptions {}
env: Record<string, string>;

環境変数のマップ

read?: (file: string) => ReadableStream;

アセットのファイル名をReadableStreamに変換する関数。$app/serverからエクスポートされるreadが動作するために必要です。

ServerLoad

PageServerLoadLayoutServerLoadの汎用的な形式です。ServerLoadを直接使用するのではなく、./$typesからインポートする必要があります(生成された型を参照)。

type ServerLoad<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	ParentData extends Record<string, any> = Record<
		string,
		any
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = (
	event: ServerLoadEvent<Params, ParentData, RouteId>
) => MaybePromise<OutputData>;

ServerLoadEvent

interface ServerLoadEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	ParentData extends Record<string, any> = Record<
		string,
		any
	>,
	RouteId extends string | null = string | null
> extends RequestEvent<Params, RouteId> {}
parent(): Promise<ParentData>;

await parent()は、親の+layout.server.jsload関数からのデータを取得します。

await parent()を使用する際は、誤ってウォーターフォールが発生しないように注意してください。たとえば、親のデータを返された出力にマージするだけの場合、他のデータの取得に呼び出してください。

depends(...deps: string[]): void;

この関数は、load関数が1つ以上のURLまたはカスタム識別子に依存していることを宣言します。これにより、その後invalidate()を使用して、loadを再実行させることができます。

ほとんどの場合、fetch呼び出しがdependsを代わりに実行するため、これは必要ありません。これは、fetchをバイパスするカスタムAPIクライアントを使用している場合にのみ必要です。

URLは絶対パスでも、読み込まれているページに対する相対パスでもかまいません。また、エンコードされている必要があります。

カスタム識別子は、URI仕様に準拠するために、1つ以上の小文字で始まる接頭辞をコロンで続ける必要があります。

次の例は、カスタム識別子への依存関係を登録するためにdependsを使用する方法を示しています。これは、ボタンをクリックした後invalidateされ、load関数を再実行します。

src/routes/+page
let let count: numbercount = 0;
export async function 
function load({ depends }: {
    depends: any;
}): Promise<{
    count: number;
}>
load
({ depends }) {
depends: anydepends('increase:count'); return { count: numbercount: let count: numbercount++ }; }
src/routes/+page
<script>
	import { invalidate } from '$app/navigation';

	let { data } = $props();

	const increase = async () => {
		await invalidate('increase:count');
	}
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>
untrack<T>(fn: () => T): T;

この関数を使用して、コールバック内で同期的に呼び出されるすべてのものの依存関係トラッキングをオプトアウトします。例

src/routes/+page
export async function 
function load({ untrack, url }: {
    untrack: any;
    url: any;
}): Promise<{
    message: string;
} | undefined>
load
({ untrack, url }) {
// Untrack url.pathname so that path changes don't trigger a rerun if (untrack: anyuntrack(() => url: anyurl.pathname === '/')) { return { message: stringmessage: 'Welcome!' }; } }

Snapshot

ページまたはレイアウトコンポーネントからエクスポートされるexport const snapshotの型。

interface Snapshot<T = any> {}
capture: () => T;
restore: (snapshot: T) => void;

SubmitFunction

type SubmitFunction<
	Success extends
		| Record<string, unknown>
		| undefined = Record<string, any>,
	Failure extends
		| Record<string, unknown>
		| undefined = Record<string, any>
> = (input: {
	action: URL;
	formData: FormData;
	formElement: HTMLFormElement;
	controller: AbortController;
	submitter: HTMLElement | null;
	cancel(): void;
}) => MaybePromise<
	| void
	| ((opts: {
			formData: FormData;
			formElement: HTMLFormElement;
			action: URL;
			result: ActionResult<Success, Failure>;
			/**
			 * Call this to get the default behavior of a form submission response.
			 * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.
			 * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.
			 */
			update(options?: {
				reset?: boolean;
				invalidateAll?: boolean;
			}): Promise<void>;
	  }) => void)
>;

プライベート型

以下は、上記の公開型によって参照されますが、直接インポートすることはできません。

AdapterEntry

interface AdapterEntry {}
id: string;

HTTPサービス(例:サーバーレス関数)を一意に識別する文字列で、重複排除に使用されます。たとえば、/foo/a-[b]/foo/[c]は異なるルートですが、どちらもNetlifyの_redirectsファイルでは/foo/:paramとして表現されるため、同じIDを共有します。

filter(route: RouteDefinition): boolean;

候補ルートと現在のルートを比較して、現在のルートとグループ化する必要があるかどうかを決定する関数。

ユースケース

  • フォールバックページ:/foo/[c]/foo/a-[b]のフォールバックであり、/[...catchall]はすべてのルートのフォールバックです。
  • 共通のconfigを共有するルートのグループ化:/fooはエッジにデプロイする必要があり、/bar/bazはサーバーレス関数にデプロイする必要があります。
complete(entry: { generateManifest(opts: { relativePath: string }): string }): MaybePromise<void>;

エントリが作成された後に1回呼び出される関数。ここで、関数をファイルシステムに書き込み、リダイレクトマニフェストを生成する必要があります。

Csp

namespace Csp {
	type ActionSource = 'strict-dynamic' | 'report-sample';
	type BaseSource =
		| 'self'
		| 'unsafe-eval'
		| 'unsafe-hashes'
		| 'unsafe-inline'
		| 'wasm-unsafe-eval'
		| 'none';
	type CryptoSource =
		`${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;
	type FrameSource =
		| HostSource
		| SchemeSource
		| 'self'
		| 'none';
	type HostNameScheme = `${string}.${string}` | 'localhost';
	type HostSource =
		`${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;
	type HostProtocolSchemes = `${string}://` | '';
	type HttpDelineator = '/' | '?' | '#' | '\\';
	type PortScheme = `:${number}` | '' | ':*';
	type SchemeSource =
		| 'http:'
		| 'https:'
		| 'data:'
		| 'mediastream:'
		| 'blob:'
		| 'filesystem:';
	type Source =
		| HostSource
		| SchemeSource
		| CryptoSource
		| BaseSource;
	type Sources = Source[];
}

CspDirectives

interface CspDirectives {}
'child-src'?: Csp.Sources;
'default-src'?: Array<Csp.Source | Csp.ActionSource>;
'frame-src'?: Csp.Sources;
'worker-src'?: Csp.Sources;
'connect-src'?: Csp.Sources;
'font-src'?: Csp.Sources;
'img-src'?: Csp.Sources;
'manifest-src'?: Csp.Sources;
'media-src'?: Csp.Sources;
'object-src'?: Csp.Sources;
'prefetch-src'?: Csp.Sources;
'script-src'?: Array<Csp.Source | Csp.ActionSource>;
'script-src-elem'?: Csp.Sources;
'script-src-attr'?: Csp.Sources;
'style-src'?: Array<Csp.Source | Csp.ActionSource>;
'style-src-elem'?: Csp.Sources;
'style-src-attr'?: Csp.Sources;
'base-uri'?: Array<Csp.Source | Csp.ActionSource>;
sandbox?: Array<
| 'allow-downloads-without-user-activation'
| 'allow-forms'
| 'allow-modals'
| 'allow-orientation-lock'
| 'allow-pointer-lock'
| 'allow-popups'
| 'allow-popups-to-escape-sandbox'
| 'allow-presentation'
| 'allow-same-origin'
| 'allow-scripts'
| 'allow-storage-access-by-user-activation'
| 'allow-top-navigation'
| 'allow-top-navigation-by-user-activation'
>;
'form-action'?: Array<Csp.Source | Csp.ActionSource>;
'frame-ancestors'?: Array<Csp.HostSource | Csp.SchemeSource | Csp.FrameSource>;
'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;
'report-uri'?: string[];
'report-to'?: string[];
'require-trusted-types-for'?: Array<'script'>;
'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;
'upgrade-insecure-requests'?: boolean;
'require-sri-for'?: Array<'script' | 'style' | 'script style'>;
  • 非推奨
'block-all-mixed-content'?: boolean;
  • 非推奨
'plugin-types'?: Array<`${string}/${string}` | 'none'>;
  • 非推奨
referrer?: Array<
| 'no-referrer'
| 'no-referrer-when-downgrade'
| 'origin'
| 'origin-when-cross-origin'
| 'same-origin'
| 'strict-origin'
| 'strict-origin-when-cross-origin'
| 'unsafe-url'
| 'none'
>;
  • 非推奨

HttpMethod

type HttpMethod =
	| 'GET'
	| 'HEAD'
	| 'POST'
	| 'PUT'
	| 'DELETE'
	| 'PATCH'
	| 'OPTIONS';

Logger

interface Logger {}
(msg: string): void;
success(msg: string): void;
error(msg: string): void;
warn(msg: string): void;
minor(msg: string): void;
info(msg: string): void;

MaybePromise

type MaybePromise<T> = T | Promise<T>;

PrerenderEntryGeneratorMismatchHandler

interface PrerenderEntryGeneratorMismatchHandler {}
(details: { generatedFromId: string; entry: string; matchedId: string; message: string }): void;

PrerenderEntryGeneratorMismatchHandlerValue

type PrerenderEntryGeneratorMismatchHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderEntryGeneratorMismatchHandler;

PrerenderHttpErrorHandler

interface PrerenderHttpErrorHandler {}
(details: {
status: number;
path: string;
referrer: string | null;
referenceType: 'linked' | 'fetched';
message: string;
}): void;

PrerenderHttpErrorHandlerValue

type PrerenderHttpErrorHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderHttpErrorHandler;

PrerenderMap

type PrerenderMap = Map<string, PrerenderOption>;

PrerenderMissingIdHandler

interface PrerenderMissingIdHandler {}
(details: { path: string; id: string; referrers: string[]; message: string }): void;

PrerenderMissingIdHandlerValue

type PrerenderMissingIdHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderMissingIdHandler;

PrerenderOption

type PrerenderOption = boolean | 'auto';

Prerendered

interface Prerendered {}
pages: Map<
string,
{
	/** The location of the .html file relative to the output directory */
	file: string;
}
>;

path{ file }オブジェクトにマッピングしたものです。/fooのようなパスはfoo.htmlに対応し、/bar/のようなパスはbar/index.htmlに対応します。

assets: Map<
string,
{
	/** The MIME type of the asset */
	type: string;
}
>;

path{ type }オブジェクトにマッピングしたものです。

redirects: Map<
string,
{
	status: number;
	location: string;
}
>;

プリレンダリング中に発生したリダイレクトのマップ。

paths: string[];

プリレンダリングされたパスの配列(末尾のスラッシュに関係なく、trailingSlash設定に関係なく、末尾のスラッシュは含まれません)。

RequestOptions

interface RequestOptions {}
getClientAddress(): string;
platform?: App.Platform;

RouteSegment

interface RouteSegment {}
content: string;
dynamic: boolean;
rest: boolean;

TrailingSlash

type TrailingSlash = 'never' | 'always' | 'ignore';

GitHubでこのページを編集する