Hooks / handle • Svelte Tutorial

SvelteKit avancé Hooks handle

SvelteKit fournit différents hooks, qui sont des manières d’intercepter et surcharger le comportement par défaut du framework.

Le hook le plus important est handle, qui se trouve dans src/hooks.server.js. Il reçoit un objet event ainsi qu’une fonction resolve, et renvoie un objet Response.

resolve en est la pierre angulaire : SvelteKit fait correspondre l’URL de la requête entrante à une route de votre application, importe le code correspondant (les fichiers +page.server.js et +page.svelte, et ainsi de suite), charge les données requises par la route, et génère la réponse.

Le hook handle par défaut a cette tête là :

src/hooks.server

export async function handle({ event, resolve }) {
	return await resolve(event);
}

Pour les pages (et donc pas pour les routes d’API), vous pouvez modifier le HTML généré avec transformPageChunk :

src/hooks.server

export async function handle({ event, resolve }) {
	return await resolve(event, {
		transformPageChunk: ({ html }) => html.replace(
			'<body',
			'<body style="color: hotpink"'
		)
	});
}

Vous pouvez aussi entièrement créer de nouvelles routes :

src/hooks.server

export async function handle({ event, resolve }) {
	if (event.url.pathname === '/ping') {
		return new Response('pong');
	}

	return await resolve(event, {
		transformPageChunk: ({ html }) => html.replace(
			'<body',
			'<body style="color: hotpink"'
		)
	});
}

Modifier cette page sur Github

précédent suivant

Redirections L’objet RequestEvent

<h1>bonjour tout le monde</h1>

<a href="/ping">ping</a>

show text show editor