@sveltejs/kit
import {
class Server
Server,
const VERSION: string
VERSION,
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.
error,
function fail(status: number): ActionFailure<undefined> (+1 overload)
Create an ActionFailure
object.
fail,
function isActionFailure(e: unknown): e is ActionFailure<undefined>
Checks whether this is an action failure thrown by
{@link
fail
}
.
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
}
.
isHttpError,
function isRedirect(e: unknown): e is Redirect_1
Checks whether this is a redirect thrown by
{@link
redirect
}
.
isRedirect,
function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response
object from the supplied data.
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.
redirect,
function text(body: string, init?: ResponseInit | undefined): Response
Create a Response
object from the supplied body.
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
関数によって返されるオブジェクトです。
KitConfig
詳細は設定リファレンスを参照してください。
LessThan
type LessThan<
TNumber extends number,
TArray extends any[] = []
> = TNumber extends TArray['length']
? TArray[number]
: LessThan<TNumber, [...TArray, TArray['length']]>;
Load
PageLoad
とLayoutLoad
の汎用的な形式です。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
PageLoadEvent
とLayoutLoadEvent
の汎用的な形式です。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;
レスポンスのヘッダーを設定する必要がある場合は、このメソッドを使用できます。これは、たとえばページをキャッシュしたい場合に役立ちます。
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: any
response = await fetch: any
fetch(const url: "https://cms.example.com/articles.json"
url);
setHeaders: any
setHeaders({
age: any
age: const response: any
response.headers.get('age'),
'cache-control': const response: any
response.headers.get('cache-control')
});
return const response: any
response.json();
}
同じヘッダーを複数回設定することは(別々のload
関数内であっても)エラーになります。特定のヘッダーは一度だけ設定できます。
setHeaders
でset-cookie
ヘッダーを追加することはできません。代わりに、サーバー専用load
関数でcookies
APIを使用してください。
setHeaders
は、load
関数がブラウザで実行される場合、効果がありません。
parent(): Promise<ParentData>;
await parent()
は、親の+layout.js
のload
関数からのデータを返します。暗黙的に、存在しない+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
関数を再実行します。
let let count: number
count = 0;
export async function function load({ depends }: {
depends: any;
}): Promise<{
count: number;
}>
load({ depends }) {
depends: any
depends('increase:count');
return { count: number
count: let count: number
count++ };
}
<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;
この関数を使用して、コールバック内で同期的に呼び出されるすべてのものの依存関係トラッキングをオプトアウトします。例
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: any
untrack(() => url: any
url.pathname === '/')) {
return { message: string
message: '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;
Navigation
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は解決されません。
NavigationEvent
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。
NavigationTarget
特定のナビゲーションのターゲットに関する情報。
interface NavigationTarget {…}
params: Record<string, string> | null;
ターゲットページのパラメーター(例:/blog/[slug]
のようなルートの場合、{ slug: string }
オブジェクト)。ターゲットがSvelteKitアプリの一部ではない場合(ルートに解決できなかった場合)、null
です。
route: { id: string | null };
ターゲットルートに関する情報。
url: URL;
ナビゲーション先のURL。
NavigationType
- `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/navigation
のpushState
関数と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;
レスポンスのヘッダーを設定する必要がある場合は、このメソッドを使用できます。これは、たとえばページをキャッシュしたい場合に役立ちます。
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: any
response = await fetch: any
fetch(const url: "https://cms.example.com/articles.json"
url);
setHeaders: any
setHeaders({
age: any
age: const response: any
response.headers.get('age'),
'cache-control': const response: any
response.headers.get('cache-control')
});
return const response: any
response.json();
}
同じヘッダーを複数回設定することは(別々のload
関数内であっても)エラーになります。特定のヘッダーは一度だけ設定できます。
setHeaders
でset-cookie
ヘッダーを追加することはできません。代わりにcookies
APIを使用してください。
url: URL;
リクエストされたURL。
isDataRequest: boolean;
クライアントから+page/layout.server.js
データの要求があった場合にtrue
になります。この場合、url
プロパティはデータ要求に関連する内部情報は削除されます。この区別が重要な場合は、このプロパティを使用してください。
isSubRequest: boolean;
SvelteKitからHTTPリクエストを行うオーバーヘッドなしで+server.js
が呼び出された場合にtrue
になります。これは、サーバー上で同オリジンのfetch
リクエストを行う場合に発生します。
RequestHandler
HTTPメソッド(GET
、PUT
、PATCH
など)に対応する+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
PageServerLoad
とLayoutServerLoad
の汎用的な形式です。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.js
のload
関数からのデータを取得します。
await parent()
を使用する際は、誤ってウォーターフォールが発生しないように注意してください。たとえば、親のデータを返された出力にマージするだけの場合、他のデータの取得後に呼び出してください。
depends(...deps: string[]): void;
この関数は、load
関数が1つ以上のURLまたはカスタム識別子に依存していることを宣言します。これにより、その後invalidate()
を使用して、load
を再実行させることができます。
ほとんどの場合、fetch
呼び出しがdepends
を代わりに実行するため、これは必要ありません。これは、fetch
をバイパスするカスタムAPIクライアントを使用している場合にのみ必要です。
URLは絶対パスでも、読み込まれているページに対する相対パスでもかまいません。また、エンコードされている必要があります。
カスタム識別子は、URI仕様に準拠するために、1つ以上の小文字で始まる接頭辞をコロンで続ける必要があります。
次の例は、カスタム識別子への依存関係を登録するためにdepends
を使用する方法を示しています。これは、ボタンをクリックした後invalidate
され、load
関数を再実行します。
let let count: number
count = 0;
export async function function load({ depends }: {
depends: any;
}): Promise<{
count: number;
}>
load({ depends }) {
depends: any
depends('increase:count');
return { count: number
count: let count: number
count++ };
}
<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;
この関数を使用して、コールバック内で同期的に呼び出されるすべてのものの依存関係トラッキングをオプトアウトします。例
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: any
untrack(() => url: any
url.pathname === '/')) {
return { message: string
message: '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';