@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. Call when form submission fails.
fail,
function isActionFailure(e: unknown): e is ActionFailure
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 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
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
redirect,
function text(body: string, init?: ResponseInit | undefined): Response
Create a Response
object from the supplied body.
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
normalizeUrl } from '@sveltejs/kit';
const { const url: URL
url, const denormalize: (url?: string | URL) => URL
denormalize } = 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
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
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.
log(const url: URL
url.URL.pathname: string
pathname); // /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
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.
log(const denormalize: (url?: string | URL) => URL
denormalize('/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ête308 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éeform
: L’utilisateur ou utilisatrice a soumis un<form>
link
: La navigation a été déclenchée par un clic sur un liengoto
: La navigation a été déclenchée par un appel àgoto(...)
ou une redirectionpopstate
: 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 sourceto
le fichier ou dossier destinationopts.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 cookieopts
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 cookievalue
la valeur du cookieopts
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 cookieopts
les options, passées directement àcookie.serialize
. Lepath
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 cookievalue
la valeur du cookieopts
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
etauthorization
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
etjson
de l’objetResponse
. Notez que les en-têtes ne seront pas sérialisées, à moins qu’elles ne soient incluses explicitement viafilterSerializedResponseHeaders
. - 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 :
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();
}
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
.
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}>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 :
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: any
untrack(() => url: any
url.pathname === '/')) {
return { message: string
message: '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;
Navigation
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 produitlink
: La navigation a été déclenchée par un clic sur un liengoto
: La navigation a été déclenchée par un appelgoto(...)
ou une redirectionpopstate
: 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
NavigationEvent
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
NavigationTarget
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
NavigationType
enter
: L’application a été hydratée/relancéeform
: L’utilisateur ou l’utilisatrice a soumis un<form>
avec une méthode GETleave
: 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érentlink
: La navigation a été déclenchée par un clic sur un liengoto
: La navigation a été déclenchée par un appelgoto(...)
ou une redirectionpopstate
: 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 liengoto
: La navigation a été déclenchée par un appelgoto(...)
ou une redirectionpopstate
: 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
etauthorization
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
etjson
de l’objetResponse
. Notez que les en-têtes ne seront pas sérialisées, à moins qu’elles ne soient incluses explicitement viafilterSerializedResponseHeaders
. - 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 :
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();
}
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êtevalue
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
.
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}>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 :
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: any
untrack(() => url: any
url.pathname === '/')) {
return { message: string
message: '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 && [value.data],
decode: ([data]) => new MyCustomType(data)
}
};
Transport } from '@sveltejs/kit';
declare class class MyCustomType
MyCustomType {
MyCustomType.data: any
data: any
}
// hooks.js
export const const transport: Transport
transport: 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 && [value.data],
decode: ([data]) => new MyCustomType(data)
}
};
Transport = {
type MyCustomType: {
encode: (value: any) => false | any[];
decode: ([data]: any) => MyCustomType;
}
MyCustomType: {
Transporter<any, any>.encode: (value: any) => any
encode: (value: any
value) => value: any
value instanceof class MyCustomType
MyCustomType && [value: MyCustomType
value.MyCustomType.data: any
data],
Transporter<any, any>.decode: (data: any) => any
decode: ([data: any
data]) => new constructor MyCustomType(): MyCustomType
MyCustomType(data: any
data)
}
};
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