Skip to main content

@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. Call when form submission fails.

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

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 normalizeUrl(url: URL | string): {
    url: URL;
    wasNormalized: boolean;
    denormalize: (url?: string | URL) => URL;
}

Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname. Returns the normalized URL as well as a method for adding the potential suffix back based on a new pathname (possibly including search) or URL.

import { normalizeUrl } from '@sveltejs/kit';

const { url, denormalize } = normalizeUrl('/blog/post/__data.json');
console.log(url.pathname); // /blog/post
console.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json
@since2.18.0
normalizeUrl
,
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.

Most common status codes:

  • 303 See Other: redirect as a GET request (often used after a form POST request)
  • 307 Temporary Redirect: redirect will keep the request method
  • 308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page

See all redirect status codes

@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';

Server

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

VERSION

const VERSION: string;

error

Jette une erreur avec un statut HTTP et un message optionnel. Lorsqu’exécuté lors de la gestion d’une requête, cette méthode va imposer à SvelteKit de renvoyer une réponse d’erreur sans invoquer handleError. Assurez-vous de ne pas “attraper” l’erreur jetée, ce qui empêcherait SvelteKit de la gérer.

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

Crée un objet ActionFailure. Appeler cette méthode lorsque vous voulez faire échouer une soumission de formulaire.

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

isActionFailure

Vérifie si l’action a échoué via le jeté de fail.

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

isHttpError

Vérifie s’il s’agit d’une erreur jetée par error.

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

isRedirect

Vérifie s’il s’agit d’une redirection jetée par redirect.

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

json

Crée un objet de réponse Response JSON à partir des données fournies.

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

normalizeUrl

Disponible depuis la version 2.18.0

Supprime tout suffixe potentiel interne à SvelteKit et tout “trailing slash” du pathname d’URL. Renvoie l’URL normalisée ainsi qu’une méthode pour ajouter de nouveau le suffixe potentiel basé sur un nouveau pathname (incluant potentiellement la chaîne de recherche) ou un nouvelle URL.

import { 
function normalizeUrl(url: URL | string): {
    url: URL;
    wasNormalized: boolean;
    denormalize: (url?: string | URL) => URL;
}

Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname. Returns the normalized URL as well as a method for adding the potential suffix back based on a new pathname (possibly including search) or URL.

import { normalizeUrl } from '@sveltejs/kit';

const { url, denormalize } = normalizeUrl('/blog/post/__data.json');
console.log(url.pathname); // /blog/post
console.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json
@since2.18.0
normalizeUrl
} from '@sveltejs/kit';
const { const url: URLurl, const denormalize: (url?: string | URL) => URLdenormalize } =
function normalizeUrl(url: URL | string): {
    url: URL;
    wasNormalized: boolean;
    denormalize: (url?: string | URL) => URL;
}

Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname. Returns the normalized URL as well as a method for adding the potential suffix back based on a new pathname (possibly including search) or URL.

import { normalizeUrl } from '@sveltejs/kit';

const { url, denormalize } = normalizeUrl('/blog/post/__data.json');
console.log(url.pathname); // /blog/post
console.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json
@since2.18.0
normalizeUrl
('/blog/post/__data.json');
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
  • A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:

console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:

const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console
.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)

Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).

const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.

@sincev0.1.100
log
(const url: URLurl.URL.pathname: stringpathname); // /blog/post
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
  • A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:

console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:

const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console
.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)

Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).

const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.

@sincev0.1.100
log
(const denormalize: (url?: string | URL) => URLdenormalize('/blog/post/a')); // /blog/post/a/__data.json
function normalizeUrl(url: URL | string): {
	url: URL;
	wasNormalized: boolean;
	denormalize: (url?: string | URL) => URL;
};

redirect

Redirige une requête. Lorsqu’exécuté lors d’une gestion de requête, SvelteKit va renvoyer une réponse de redirection. Assurez-vous de ne pas “attraper” la redirection jetée, ce qui empêcherait SvelteKit de la gérer.

Les codes de redirection les plus communs :

  • 303 See Other: redirige en tant que requête GET (souvent utilisé après une requête POST de formulaire)
  • 307 Temporary Redirect: la redirection va conserver la méthode de requête
  • 308 Permanent Redirect: la redirection va conserver la méthode requête, le référencement sera transféré vers la nouvelle page

Voir tous les codes de redirection existants

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

text

Crée un objet de réponse Response à partir du body fourni.

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

Action

Forme d’une action de formulaire faisant partie de export const actions = {...} dans un fichier +page.server.js. Voir la section Actions de formulaires pour plus d’informations.

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

Lorsqu’une action de formulaire est exécutée via fetch, la réponse aura l’une de ces formes.

<form method="post" use:enhance={() => {
	return ({ result }) => {
		// le résultat est de 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

Forme de l’objet export const actions = {...} dans un fichier +page.server.js. Voir la section Actions de formulaires pour plus d’informations.

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

Les adaptateurs sont responsables de prendre le build de production et de le transformer en quelque chose pouvant être déployé sur une plateforme de votre choix.

interface Adapter {}
name: string;

Le nom de l’adaptateur, à utiliser pour l’affichage de logs. Va correspondre généralement au nom du paquet.

adapt: (builder: Builder) => MaybePromise<void>;
  • builder Un objet fourni par SvelteKit contenant des méthodes pour adapter l’application

Cette fonction est exécutée après que SvelteKit a compilé votre application.

supports?: {}

Vérifications effectuées lors du développement et de la compilation pour déterminer si certaines fonctionnalités spécifiques fonctionneront en production avec cet adaptateur.

read?: (details: { config: any; route: { id: string } }) => boolean;
  • details.config La configuration mergée de la route

Teste le support de read depuis $app/server.

emulate?: () => MaybePromise<Emulator>;

Crée un Emulator, permettant à l’adaptateur d’influencer l’environnement pendant le développement, la compilation et le pré-rendu.

AfterNavigate

L’argument passé aux callbacks afterNavigate.

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

Le type de navigation :

  • enter: L’application a été hydratée/démarrée
  • form: L’utilisateur ou utilisatrice a soumis un <form>
  • link: La navigation a été déclenchée par un clic sur un lien
  • goto: La navigation a été déclenchée par un appel à goto(...) ou une redirection
  • popstate: La navigation a été déclenchée par les boutons “précédent”/"suivant”
willUnload: false;

Puisque les callbacks afterNavigate sont exécutés après qu’une navigation se soit terminée, ils ne seront jamais exécutés lors d’une navigation “déchargeant” la page.

AwaitedActions

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

BeforeNavigate

L’argument passé aux callbacks beforeNavigate.

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

Appelez cette méthode pour empêcher la navigation de démarrer.

Builder

Cet objet est fourni à la fonction adapt des adaptateurs. Il contient différentes méthodes et propriétés utiles pour adapter l’application.

interface Builder {}
log: Logger;

Affiche des messages dans la console. log.info et log.minor sont muets tant que le logLevel de Vite vaut info.

rimraf: (dir: string) => void;

Supprime dir et tout son contenu.

mkdirp: (dir: string) => void;

Crée dir et tout dossier parent requis.

config: ValidatedConfig;

L’objet de configuration Svelte entièrement résolu.

prerendered: Prerendered;

Informations au sujet des pages et assets pré-rendus, s’ils existent.

routes: RouteDefinition[];

Un tableau de toutes les routes (incluant les routes pré-rendues)

createEntries: (fn: (route: RouteDefinition) => AdapterEntry) => Promise<void>;
  • fn Une fonction qui regroupe un ensemble de routes en un point d’entrée
  • déprécié Utilisez plutôt builder.routes

Crée des fonctions séparées associées à une ou plusieurs routes de votre application.

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

Trouve tous les assets importés par les fichiers de serveur appartenant à routes

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

Génère une page de secours pour un serveur web statique à utiliser lorsqu’aucune route n’a été trouvée. Utile pour les SPA.

generateEnvModule: () => void;

Génère un module exposant les variables d’environnement de compilation en tant que $env/dynamic/public.

generateManifest: (opts: { relativePath: string; routes?: RouteDefinition[] }) => string;
  • opts un chemin relatif au dossier racine de l’application et optionnellement le format (esm ou cjs) dans lequel le manifeste devrait être généré

Génère un manifeste côté serveur avec lequel initialiser le serveur SvelteKit.

getBuildDirectory: (name: string) => string;
  • le chemin name vers le fichier, relatif au dossier de compilation

Résout un chemin vers le dossier name au sein de outDir, par ex. /path/to/.svelte-kit/my-adapter.

getClientDirectory: () => string;

Récupère le chemin complet vers le dossier contenant des assets côté client, incluant le contenu de votre dossier static.

getServerDirectory: () => string;

Récupère le chemin complet vers le dossier contenu le code côté serveur.

getAppPath: () => string;

Récupère le chemin de l’application incluant tout chemin base configuré, par ex. my-base-path/_app.

writeClient: (dest: string) => string[];
  • le dossier de destination dest
  • renvoie un tableau de fichiers écrits dans dest

Écrit les assets client dans dest.

writePrerendered: (dest: string) => string[];
  • le dossier de destination dest
  • renvoie un tableau de fichiers écrits dans dest

Écrit les fichiers pré-rendus vers le dossier dest.

writeServer: (dest: string) => string[];
  • le dossier de destination dest
  • renvoie un tableau de fichiers écrits dans dest

Écrit le code serveur vers dest.

copy: (
	from: string,
	to: string,
	opts?: {
		filter?(basename: string): boolean;
		replace?: Record<string, string>;
	}
) => string[];
  • from le fichier ou dossier source
  • to le fichier ou dossier destination
  • opts.filter une fonction pour déterminer si un fichier ou dossier devrait être copié
  • opts.replace un dictionnaire de chaînes de caractères à remplacer
  • renvoie un tableau de fichiers qui ont été copiés

Copie un fichier ou dossier.

compress: (directory: string) => Promise<void>;
  • directory Le dossier contenant les fichiers à compresser

Compresse les fichiers dans directory avec gzip et broli, lorsqu’approprié. Génère des fichiers .gz et .br à côté des originaux.

ClientInit

Disponible depuis la version 2.10.0

La fonction init sera exécutée après le démarrage de l’application dans le navigateur

type ClientInit = () => MaybePromise<void>;

Config

Voir le documentation de référence sur la configuration pour plus de détails.

Cookies

interface Cookies {}
get: (name: string, opts?: import('cookie').CookieParseOptions) => string | undefined;
  • name le nom du cookie
  • opts les options, passées directement à cookie.parse. Voir la documentation

Récupère un cookie précédemment défini avec cookies.set, ou depuis les en-têtes de requête.

getAll: (opts?: import('cookie').CookieParseOptions) => Array<{ name: string; value: string }>;
  • opts les options, passées directement à cookie.parse. Voir la documentation

Récupère tous cookies précédemment définis avec cookies.set, ou depuis les en-têtes de requête.

set: (
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
) => void;
  • name le nom du cookie
  • value la valeur du cookie
  • opts les options, passées directement à cookie.parse. Voir la documentation

Définit un cookie. Cela va ajouter un en-tête set-cookie à la réponse, mais également rendre le cookie disponible via cookies.get ou cookies.getAll lors de la requête courante.

Les options httpsOnly et secure valent true par défaut (sauf sur http://localhost, où secure vaut false), et doit être explicitement désactivé si vous souhaitez que les cookies soient lisibles par du code JavaScript client et/ou transmis via HTTP. L’option sameSite vaut par défaut lax.

Vous devez préciser un path pour le cookie. Dans la plupart des cas vous devriez explicitement préciser path: '/' pour rendre le cookie disponible sur toutes les pages de votre application. Vous pouvez utiliser des chemins relatifs, ou définir path: '' pour rendre le cookie uniquement disponible sur le chemin courant et ses enfants.

delete: (name: string, opts: import('cookie').CookieSerializeOptions & { path: string }) => void;
  • name le nom du cookie
  • opts les options, passées directement à cookie.serialize. Le path doit correspondre au chemin du cookie que vous souhaitez supprimer. Voir la documentation

Supprime un cookie en définissant sa valeur à une chaîne de caractères vide et sa date d’expiration à une date dans le passé.

Vous devez préciser un path pour le cookie. Dans la plupart des cas vous devriez explicitement préciser path: '/' pour rendre le cookie disponible sur toutes les pages de votre application. Vous pouvez utiliser des chemins relatifs, ou définir path: '' pour rendre le cookie uniquement disponible sur le chemin courant et ses enfants.

serialize: (
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
) => string;
  • name le nom du cookie
  • value la valeur du cookie
  • opts les options, passées directement à cookie.serialize. Voir la documentation

Sérialise la paire nom-valeur d’un cookie en une chaîne de caractères d’en-tête Set-Cookie, mais ne l’applique pas à la réponse.

Les options httpsOnly et secure valent true par défaut (sauf sur http://localhost, où secure vaut false), et doit être explicitement désactivé si vous souhaitez que les cookies soient lisibles par du code JavaScript client et/ou transmis via HTTP. L’option sameSite vaut par défaut lax.

Vous devez préciser un path pour le cookie. Dans la plupart des cas vous devriez explicitement préciser path: '/' pour rendre le cookie disponible sur toutes les pages de votre application. Vous pouvez utiliser des chemins relatifs, ou définir path: '' pour rendre le cookie uniquement disponible sur le chemin courant et ses enfants.

Emulator

Une collection de fonctions qui influencent l’environnement lors du développement, de la compilation, et du pré-rendu.

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

Une fonction exécutée avec la config de la route courante ainsi que l’options prerender et renvoie un objet App.Platform

Handle

Le hook handle est exécuté à chaque fois que le serveur SvelteKit reçoit une requête et détermine la réponse. Il reçoit un objet event représentant la requête et une fonction appelée resolve, qui rend la route et génère une Response. Ceci vous permet de modifier les en-têtes ou corps de réponse, ou de contourner complètement SvelteKit (pour implémenter des routes programmatiquement, par exemple).

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

HandleClientError

Le hook client handleError est exécuté lorsqu’une erreur inattendue est jetée lors de la navigation.

Si une erreur inattendue est jetée lors du chargement ou du rendu suivant, cette fonction sera exécutée avec l’erreur et l’évènement. Assurez-vous que cette fonction ne jette jamais d’erreur.

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

HandleFetch

Le hook handleFetch vous permet de modifier (ou remplacer) le résultat d’un appel event.fetch s’exécutant sur le serveur (ou lors du pré-rendu) au sein d’un endpoint, d’une fonction load, action, handle, handleError, ou reroute.

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

HandleServerError

Le hook serveur handleError est exécutée lorsqu’une erreur inattendue est jetée lors de la réponse à une requête.

Si une erreur inattendue est jetée lors du chargement ou du rendu suivant, cette fonction sera exécutée avec l’erreur et l’évènement. Assurez-vous que cette fonction ne jette jamais d’erreur.

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

HttpError

L’objet renvoyé par la fonction error.

interface HttpError {}
status: number;

Le code HTTP, dont la valeur vaut entre 400 et 599.

body: App.Error;

Le contenu de l’erreur.

KitConfig

Voir la documentation sur la configuration pour plus de détails.

LessThan

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

Load

La forme générique de PageLoad et LayoutLoad. Vous devriez les importer depuis ./$types (voir la section types générés) plutôt que d’utiliser Load directement.

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

La forme générique de PageLoadEvent et LayoutLoadEvent. Vous devriez les importer depuis ./$types (voir la section types générés) plutôt que d’utiliser LoadEvent directement.

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 est équivalent à l’API web native fetch, avec quelques fonctionnalités additionnelles :

  • Elle peut être utilisée pour faire des requêtes authentifiées sur le serveur, puisqu’elle hérite des en-têtes cookie et authorization de la requête de page.
  • Elle peut faire des requêtes relatives sur le serveur (ordinairement, fetch nécessite une URL avec une origine lorsqu’utilisée dans un contexte serveur).
  • Les requêtes internes (par ex. pour les routes +server.js) vont exécuter directement leur fonction concernées lorsqu’exécutées sur le serveur, sans la couche supplémentaire nécessaire pour faire l’appel HTTP.
  • Lors du rendu côté serveur, la réponse sera capturée et inlinée dans le HTML rendu en utilisant les méthodes text et json de l’objet Response. Notez que les en-têtes ne seront pas sérialisées, à moins qu’elles ne soient incluses explicitement via filterSerializedResponseHeaders.
  • Lors de l’hydratation, la réponse sera lue depuis le HTML, en garantissant la consistance et empêchant une requête réseau additionnelle.

Vous pouvez en apprendre plus sur les requêtes authentifiées avec cookies ici.

data: Data;

Contient les données renvoyées par la fonction load de serveur de la route (dans un fichier +layout.server.js ou +page.server.js), si elle existe.

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

Si vous avez besoin de définir des en-têtes sur la réponse, vous pouvez le faire en utilisant cette méthode. C’est utile si vous souhaitez mettre la page en cache, par exemple :

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(); }

Définir la même en-tête plusieurs fois (même dans des fonctions load différentes) est une erreur — vous pouvez uniquement définir une en-tête donnée une seule fois.

Vous ne pouvez pas ajouter une en-tête set-cookie avec setHeaders — utilisez plutôt l’API cookies dans une fonction load de serveur.

setHeaders n’a pas d’effet lorsqu’une fonction load est exécutée dans le navigateur.

parent: () => Promise<ParentData>;

await parent() renvoie les données des fonctions load des fichiers +layout.js parents. Implicitement, un fichier +layout.js manquant est traité comme une fonction ({ data }) => data, ce qui veut dire qu’elle va renvoyer et relayer les données des fichiers +layout.server.js parents.

Faites attention à ne pas introduire des cascades de chargement accidentelles lorsque vous utilisez await parent(). Si par exemple vous voulez uniquement fusionner les données parentes dans l’objet renvoyé en sortie, appelez cette méthode après avoir récupéré vos autres données.

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

Cette fonction déclare que la fonction load a une dépendance envers une ou plusieurs URLs ou identifiants personnalisés, qui peuvent ultérieurement utilisés avec invalidate() pour déclencher la ré-exécution de load.

La plupart du temps vous ne devriez pas en avoir besoin, puisque les appels fetch appellent depends pour vous — cette méthode est uniquement nécessaire si vous utilisez une API cliente personnalisée qui contourne fetch.

Les URLs peuvent être absolues ou relatives à la page en train d’être chargée, et doivent être encodées.

Les identifiants personnalisés doivent être préfixés avec une ou plusieurs lettres en minuscules suivies d’un : pour correspondre à la spécification d’URI.

L’exemple suivant montre comment utiliser depends pour enregistrer une dépendance envers un identifiant personnalisé, qui est invalidé avec invalidate avec un clic sur un bouton, déclenchant la ré-exécution de la fonction 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}>Incrémenter le compte</button>
untrack: <T>(fn: () => T) => T;

Utilisez cette fonction pour annuler le suivi de dépendances pour tout ce qui est exécuté de manière synchrone au sein du callback. Exemple :

src/routes/+page.server
export async function 
function load({ untrack, url }: {
    untrack: any;
    url: any;
}): Promise<{
    message: string;
} | undefined>
load
({ untrack, url }) {
// Annule le suivi de `url.pathname` afin que les changements de path ne déclenchent pas de // ré-exécution de la fonction `load` if (untrack: anyuntrack(() => url: anyurl.pathname === '/')) { return { message: stringmessage: 'Bienvenue !' }; } }

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;

L’endroit d’où la navigation a été déclenchée

to: NavigationTarget | null;

L’endroit où la navigation est/a été dirigée

type: Exclude<NavigationType, 'enter'>;

Le type de navigation :

  • form : L’utilisateur ou l’utilisatrice a soumis un élément <form>
  • leave : L’utilisateur ou l’utilisatrice quitte l’application soit parce que l’onglet a été fermé ou qu’une navigation vers un document différent se produit
  • link : La navigation a été déclenchée par un clic sur un lien
  • goto : La navigation a été déclenchée par un appel goto(...) ou une redirection
  • popstate : La navigation a été déclenchée par les fonctionnalités précédent/suivant du navigateur
willUnload: boolean;

Si oui ou non la navigation entraîne le “déchargement” de la page (c-à-d pas une navigation côté client)

delta?: number;

Dans le cas d’une navigation via l’historique précédent/suivant, le nombre d’étapes pour retourner en arrière/avant

complete: Promise<void>;

Une promesse qui est résolue une fois la navigation terminée, et est rejetée si la navigation échoue ou est annulée. Dans le cas d’une navigation willUnload, la promesse ne sera jamais résolue

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

Les paramètres de la page courante — par ex. pour une route comme /blog/[slug], un objet { slug: string }

route: {}

Informations sur la route courante

id: RouteId;

L’ID de la route courante — par ex. pour src/routes/blog/[slug], cette valeur serait /blog/[slug]. Si aucune route ne correspond, cette valeur vaut null.

url: URL;

L’URL de la page courante

Informations à propos de la cible d’une navigation spécifique.

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

Paramètres de la page cible — par ex. pour une route comme /blog/[slug], un objet { slug: string }. Vaut null si la cible ne fait pas partie de l’application SvelteKit (et ne peut donc pas être résolue en tant que route).

route: {}

Informations à propos de la route cible

id: string | null;

L’ID de la route courante — par ex. pour src/routes/blog/[slug], cette valeur serait /blog/[slug]. Si aucune route ne correspond, cette valeur vaut null.

url: URL;

L’URL vers laquelle la navigation s’effectue

  • enter: L’application a été hydratée/relancée
  • form: L’utilisateur ou l’utilisatrice a soumis un <form> avec une méthode GET
  • leave: L’utilisateur ou l’utilisatrice en train de quitter l’application en fermant l’onglet ou en utilisant les boutons précédent/suivant du navigateur pour aller sur un document différent
  • link : La navigation a été déclenchée par un clic sur un lien
  • goto : La navigation a été déclenchée par un appel goto(...) ou une redirection
  • popstate : La navigation a été déclenchée par les fonctionnalités précédent/suivant du navigateur
type NavigationType =
	| 'enter'
	| 'form'
	| 'leave'
	| 'link'
	| 'goto'
	| 'popstate';

NumericRange

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

OnNavigate

L’argument passé aux callbacks onNavigate.

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

Le type de navigation :

  • form: L’utilisateur ou l’utilisatrice a soumis un <form>
  • link : La navigation a été déclenchée par un clic sur un lien
  • goto : La navigation a été déclenchée par un appel goto(...) ou une redirection
  • popstate : La navigation a été déclenchée par les fonctionnalités précédent/suivant du navigateur
willUnload: false;

Puisque les callbacks onNavigate sont appelés immédiatement avant une navigation client, ils ne seront jamais appelés avec une navigation qui “décharge” la page.

Page

La forme de l’objet réactif page et du store $page.

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

L’URL de la page courange.

params: Params;

Les paramètres de la page courante — par ex. pour une route comme /blog/[slug], un objet { slug: string }.

route: {}

Informations à propos de la route courante.

id: RouteId;

L’ID de la route courante — par ex. pour src/routes/blog/[slug], cette valeur serait /blog/[slug]. Si aucune route ne correspond, cette valeur vaut null.

status: number;

Code HTTP de la page courante.

error: App.Error | null;

L’objet d’erreur de la page courante, s’il existe. Construit depuis les hooks handleError.

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

Le résultat fusionné de toutes les données venant de toutes les fonctions load de la page courante. Vous pouvez typer un dénominateur commun grâce à App.PageData.

state: App.PageState;

L’état de la page, qui peut être manipulé en utilisant les fonctions pushState et replaceState importées depuis $app/navigation.

form: any;

Rempli uniquement après une soumission de formulaire. Voir la section actions de formulaire pour plus d’informations.

ParamMatcher

La forme d’un matcher de paramètres. Voir la section matching pour plus d’informations.

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

PrerenderOption

type PrerenderOption = boolean | 'auto';

Redirect

L’objet renvoyé par la fonction redirect.

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

Le code HTTP, entre 300 et 308.

location: string;

L’endroit vers lequel rediriger.

RequestEvent

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

Récupère ou définit des cookies liés à la requête courante

fetch: typeof fetch;

fetch est équivalent à l’API web native fetch, avec quelques fonctionnalités additionnelles :

  • Elle peut être utilisée pour faire des requêtes authentifiées sur le serveur, puisqu’elle hérite des en-têtes cookie et authorization de la requête de page.
  • Elle peut faire des requêtes relatives sur le serveur (ordinairement, fetch nécessite une URL avec une origine lorsqu’utilisée dans un contexte serveur).
  • Les requêtes internes (par ex. pour les routes +server.js) vont exécuter directement leur fonction concernées lorsqu’exécutées sur le serveur, sans la couche supplémentaire nécessaire pour faire l’appel HTTP.
  • Lors du rendu côté serveur, la réponse sera capturée et inlinée dans le HTML rendu en utilisant les méthodes text et json de l’objet Response. Notez que les en-têtes ne seront pas sérialisées, à moins qu’elles ne soient incluses explicitement via filterSerializedResponseHeaders.
  • Lors de l’hydratation, la réponse sera lue depuis le HTML, en garantissant la consistance et empêchant une requête réseau additionnelle.

Vous pouvez en apprendre plus sur les requêtes authentifiées avec cookies ici.

getClientAddress: () => string;

L’adresse IP du client, définie par l’adaptateur.

locals: App.Locals;

Contient les données personnalisées ajoutées à la requête au sein du hook serveur handle.

params: Params;

Les paramètres de la route courante — par ex. pour une route comme /blog/[slug], un objet { slug: string }.

platform: Readonly<App.Platform> | undefined;

Les données supplémentaires rendues disponibles via l’adaptateur.

request: Request;

L’objet représentant la requête d’origine.

route: {}

Des informations sur la route courante.

id: RouteId;

L’ID de la route courante — par ex. pour src/routes/blog/[slug], cette valeur serait /blog/[slug]. Si aucune route ne correspond, cette valeur vaut null.

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

Si vous avez besoin de définir des en-têtes sur la réponse, vous pouvez le faire en utilisant cette méthode. C’est utile si vous souhaitez mettre la page en cache, par exemple :

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(); }

Définir la même en-tête plusieurs fois (même dans des fonctions load différentes) est une erreur — vous pouvez uniquement définir une en-tête donnée une seule fois.

Vous ne pouvez pas ajouter une en-tête set-cookie avec setHeaders — utilisez plutôt l’API cookies dans une fonction load de serveur.

url: URL;

L’URL requêtée.

isDataRequest: boolean;

Vaut true si la requête vient du client et demande les données de +page/layout.server.js. La propriété url sera supprimée des informations internes relatives à la requête de données dans ce cas. Utilisez cette propriété si la distinction est importante pour vous.

isSubRequest: boolean;

Vaut true pour les appels +server.js venant de SvelteKit sans la surcharge d’une requête HTTP. Ceci se produit lorsque vous faites des requêtes fetch ayant la même origine sur le serveur.

RequestHandler

Une fonction (event: RequestEvent) => Response exportée depuis un fichier +server.js correspondant à un verbe HTTP (GET, PUT, PATCH, etc.) et gérant les requêtes avec cette méthode.

Elle reçoit des Params en tant que premier argument générique, que vous pouvez ignorer en utilisant plutôt les types générés.

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

Disponible depuis la version 2.3.0

Le hook reroute vous permet de modifier l’URL avant qu’elle ne soit utilisée pour déterminer quelle route afficher.

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

ResolveOptions

interface ResolveOptions {}
transformPageChunk?: (input: { html: string; done: boolean }) => MaybePromise<string | undefined>;
  • input le morceau de html et l’information de s’il s’agit du dernier morceau

Applique des transformations personnalisées au HTML. Si done vaut true, il s’agit du dernier morceau. Il n’y a pas de garantie que chaque morceau soit du HTML bien formé (ils pourraient inclure la balise ouvrante d’un élément mais pas sa balise fermante, par exemple) mais ils seront toujours divisés à des endroits sensibles, tels que %sveltekit.head% ou les composants de page/layout.

filterSerializedResponseHeaders?: (name: string, value: string) => boolean;
  • name nom de l’en-tête
  • value valeur de l’en-tête

Détermine quelles en-têtes devraient être incluses dans les réponses sérialisées lorsqu’une fonction load charge une ressource avec fetch. Par défaut, aucune ne sera incluse.

preload?: (input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }) => boolean;
  • input le type de fichier et son chemin

Détermine ce qui devrait être ajouté à la balise <head> pour le précharger. Par défaut, les fichiers js et css seront préchargés.

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>;

Fichiers statiques venant de kit.config.files.assets et du service worker (s’il en existe).

mimeTypes: Record<string, string>;
_: {}

champs privés

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

Un dictionnaire [file]: size de tous les assets importés par le code serveur.

ServerInit

Disponible depuis la version 2.10.0

Le hook init sera invoqué avant que le serveur ne réponde à sa première requête.

type ServerInit = () => MaybePromise<void>;

ServerInitOptions

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

Un dictionnaire des variables d’environnement.

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

Une fonction qui transforme le nom de fichier d’un asset en ReadableStream. Requis pour que l’export read importé depuis $app/server fonctionne.

ServerLoad

La forme générique de PageServerLoad et LayoutServerLoad. Vous devriez importer ces types depuis ./$types (voir la section types générés) plutôt que d’utiliser ServerLoad directement.

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() renvoie les données des fonctions load des fichiers +layout.server.js parents.

Faites attention à ne pas introduire des cascades de chargement accidentelles lorsque vous utilisez await parent(). Si par exemple vous voulez uniquement fusionner les données parentes dans l’objet renvoyé en sortie, appelez cette méthode après avoir récupéré vos autres données.

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

Cette fonction déclare que la fonction load a une dépendance envers une ou plusieurs URLs ou identifiants personnalisés, qui peuvent ultérieurement utilisés avec invalidate() pour déclencher la ré-exécution de load.

La plupart du temps vous ne devriez pas en avoir besoin, puisque les appels fetch appellent depends pour vous — cette méthode est uniquement nécessaire si vous utilisez une API cliente personnalisée qui contourne fetch.

Les URLs peuvent être absolues ou relatives à la page en train d’être chargée, et doivent être encodées.

Les identifiants personnalisés doivent être préfixés avec une ou plusieurs lettres en minuscules suivies d’un : pour correspondre à la spécification d’URI.

L’exemple suivant montre comment utiliser depends pour enregistrer une dépendance envers un identifiant personnalisé, qui est invalidé avec invalidate avec un clic sur un bouton, déclenchant la ré-exécution de la fonction 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}>Incrémenter le compte</button>
untrack: <T>(fn: () => T) => T;

Utilisez cette fonction pour annuler le suivi de dépendances pour tout ce qui est exécuté de manière synchrone au sein du callback. Exemple :

src/routes/+page
export async function 
function load({ untrack, url }: {
    untrack: any;
    url: any;
}): Promise<{
    message: string;
} | undefined>
load
({ untrack, url }) {
// Annule le suivi de `url.pathname` afin que les changements de path ne déclenchent pas de // ré-exécution de la fonction `load` if (untrack: anyuntrack(() => url: anyurl.pathname === '/')) { return { message: stringmessage: 'Welcome!' }; } }

Snapshot

Le type de export const snapshot exporté depuis un composant de page ou de layout.

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>;
			/**
			 * Appelez cette fonction pour récupérer le comportement par défaut d'une réponse de
			 * soumission de formulaire.
			 * @param options Définissez `reset: false` si vous ne voulez pas que les valeurs du `<form>` soient réinitialisées après une soumission réussie.
			 * @param invalidateAll Définissez `invalidateAll: false` si vous ne souhaitez pas que l'action appelle `invalidateAll` après la soumission.
			 */
			update: (options?: {
				reset?: boolean;
				invalidateAll?: boolean;
			}) => Promise<void>;
	  }) => MaybePromise<void>)
>;

Transport

Disponible depuis la version 2.11.0

Le hook transport vous permet de transporter des types personnalisés au travers de la frontière serveur/client.

Chaque transporteur possède une paire de fonctions encode et decode. Sur le serveur, encode détermine si une valeur est une instance du type personnalisé et, si c’est le cas, renvoie une encodage non-falsy de la valeur pouvant être un objet ou un tableau (ou false sinon).

Dans le navigateur, decode transforme l’encodage dans l’autre sens vers une instance du type personnalisé.

import type { 
type Transport = {
    [x: string]: Transporter<any, any>;
}

The transport hook allows you to transport custom types across the server/client boundary.

Each transporter has a pair of encode and decode functions. On the server, encode determines whether a value is an instance of the custom type and, if so, returns a non-falsy encoding of the value which can be an object or an array (or false otherwise).

In the browser, decode turns the encoding back into an instance of the custom type.

import type { Transport } from '@sveltejs/kit';

declare class MyCustomType {
	data: any
}

// hooks.js
export const transport: Transport = {
	MyCustomType: {
		encode: (value) => value instanceof MyCustomType &#x26;&#x26; [value.data],
		decode: ([data]) => new MyCustomType(data)
	}
};
@since2.11.0
Transport
} from '@sveltejs/kit';
declare class class MyCustomTypeMyCustomType { MyCustomType.data: anydata: any } // hooks.js export const const transport: Transporttransport:
type Transport = {
    [x: string]: Transporter<any, any>;
}

The transport hook allows you to transport custom types across the server/client boundary.

Each transporter has a pair of encode and decode functions. On the server, encode determines whether a value is an instance of the custom type and, if so, returns a non-falsy encoding of the value which can be an object or an array (or false otherwise).

In the browser, decode turns the encoding back into an instance of the custom type.

import type { Transport } from '@sveltejs/kit';

declare class MyCustomType {
	data: any
}

// hooks.js
export const transport: Transport = {
	MyCustomType: {
		encode: (value) => value instanceof MyCustomType &#x26;&#x26; [value.data],
		decode: ([data]) => new MyCustomType(data)
	}
};
@since2.11.0
Transport
= {
type MyCustomType: {
    encode: (value: any) => false | any[];
    decode: ([data]: any) => MyCustomType;
}
MyCustomType
: {
Transporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata], Transporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata) } };
type Transport = Record<string, Transporter>;

Transporter

Un membre du hook transport.

interface Transporter<
	T = any,
	U = Exclude<
		any,
		false | 0 | '' | null | undefined | typeof NaN
	>
> {}
encode: (value: T) => false | U;
decode: (data: U) => T;

Private types

Les types qui suivent sont référencés par les types publics documentés plus haut, mais ne peuvent pas être importés directement :

AdapterEntry

interface AdapterEntry {}
id: string;

Une chaîne de caractères qui identifie de manière unique un service HTTP (c-à-d une fonction serverless) et est utilisée pour dédupliquer. Par exemple, /foo/a-[b] et /foo/[c] sont des routes différentes, mais toutes les deux seraient représentées dans un fichier _redirects de Netlify en tant que /foo/:param, et partageraient donc un ID

filter(route: RouteDefinition): boolean;

Une fonction qui compare la route candidate avec la route courante pour déterminer si elle devrait être groupée avec la route courante.

Cas d’usage :

  • Pages de secours : /foo/[c] est une route de secours pour /foo/a-[b], et /[...catchall] est une route de secours pour toutes les routes
  • Grouper les routes qui partagent une config commune : /foo devrait être déployée sur le réseau edge, /bar et /baz devraient être déployées sur une fonction serverless
complete(entry: { generateManifest(opts: { relativePath: string }): string }): MaybePromise<void>;

Une fonction qui est invoquée une fois que l’entrée a été créée. C’est ici que vous devriez écrire la fonction vers le système de fichiers et générer les manifestes de redirection.

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'>;
  • déprécié
'block-all-mixed-content'?: boolean;
  • déprécié
'plugin-types'?: Array<`${string}/${string}` | 'none'>;
  • déprécié
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'
>;
  • déprécié

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,
{
	/** L'emplacement du fichier .html relatif au dossier de compilation */
	file: string;
}
>;

Un dictionnaire de path vers des objets { file }, où un chemin comme /foo correspond à foo.html et un chemin comme /bar/ correspond à bar/index.html.

assets: Map<
string,
{
	/** Le type MIME de l'asset */
	type: string;
}
>;

Un dictionnaire de path vers des objets { type }

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

Un dictionnaire de redirections rencontrées lors du pré-rendu.

paths: string[];

Un tableau de chemins pré-rendus (sans les trailing slashs, indépendamment de la configuration trailingSlash)

RequestOptions

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

RouteSegment

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

TrailingSlash

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

Modifier cette page sur Github llms.txt

précédent suivant