SvelteKit • Reference

@sveltejs/kit/hooks

On this page
import {
	function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T

Utility for defining environment variables, which are made available via $app/env/public and $app/env/private.

@deprecatedImport `defineEnvVars` from `@sveltejs/kit/env` instead
function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T

Utility for defining environment variables, which are made available via $app/env/public and $app/env/private.

@deprecatedImport `defineEnvVars` from `@sveltejs/kit/env` instead
defineEnvVars
,
function sequence(...handlers: Handle[]): Handle

A helper function for sequencing multiple handle calls in a middleware-like manner. The behavior for the handle options is as follows:

  • transformPageChunk is applied in reverse order and merged

  • preload is applied in forward order, the first option "wins" and no preload options after it are called

  • filterSerializedResponseHeaders behaves the same as preload

/// file: src/hooks.server.js
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
			return true;
		}
	});
	console.log('first post-processing');
	return result;
}

/// type: import('@sveltejs/kit').Handle
async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
			return true;
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
			console.log('second filterSerializedResponseHeaders');
			return true;
		}
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

The example above would print:

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing
@paramhandlers The chain of `handle` functions
function sequence(...handlers: Handle[]): Handle

A helper function for sequencing multiple handle calls in a middleware-like manner. The behavior for the handle options is as follows:

  • transformPageChunk is applied in reverse order and merged

  • preload is applied in forward order, the first option "wins" and no preload options after it are called

  • filterSerializedResponseHeaders behaves the same as preload

/// file: src/hooks.server.js
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
			return true;
		}
	});
	console.log('first post-processing');
	return result;
}

/// type: import('@sveltejs/kit').Handle
async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
			return true;
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
			console.log('second filterSerializedResponseHeaders');
			return true;
		}
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

The example above would print:

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing
@paramhandlers The chain of `handle` functions
sequence
} from '@sveltejs/kit/hooks';

defineEnvVars

Import defineEnvVars from @sveltejs/kit/env instead

Utility for defining environment variables, which are made available via $app/env/public and $app/env/private.

export function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T;

sequence

A helper function for sequencing multiple handle calls in a middleware-like manner. The behavior for the handle options is as follows:

  • transformPageChunk is applied in reverse order and merged
  • preload is applied in forward order, the first option "wins" and no preload options after it are called
  • filterSerializedResponseHeaders behaves the same as preload
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
			return true;
		}
	});
	console.log('first post-processing');
	return result;
}

/// type: import('@sveltejs/kit').Handle
async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
			return true;
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
			console.log('second filterSerializedResponseHeaders');
			return true;
		}
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

The example above would print:

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing
export function sequence(...handlers: Handle[]): Handle;