Types
Edit this page on GitHub@sveltejs/kitpermalink
All APIs in SvelteKit are fully typed. The following types can be imported from @sveltejs/kit
:
Adapterpermalink
An object responsible for turning the output of svelte-kit build into something that can be deployed to your target environment
interface Adapter {
name: string;
headers?: {
host?: string;
protocol?: string;
};
adapt(builder: Builder): Promise<void>;
}
Apppermalink
The app that is generated by running svelte-kit build, and which your adapter interacts with to respond to incoming requests
class App {
constructor(manifest: SSRManifest);
render(request: Request, options?: RequestOptions): Promise<Response>;
}
Builderpermalink
interface Builder {
log: Logger;
rimraf(dir: string): void;
mkdirp(dir: string): void;
appDir: string;
trailingSlash: 'always' | 'never' | 'ignore';
/**
* Create entry points that map to individual functions
* @param fn A function that groups a set of routes into an entry point
*/
createEntries(fn: (route: RouteDefinition) => AdapterEntry): void;
generateManifest: (opts: { relativePath: string; format?: 'esm' | 'cjs' }) => string;
getBuildDirectory(name: string): string;
getClientDirectory(): string;
getServerDirectory(): string;
getStaticDirectory(): string;
/**
* @param dest the destination folder to which files should be copied
* @returns an array of paths corresponding to the files that have been created by the copy
*/
writeClient(dest: string): string[];
/**
* @param dest the destination folder to which files should be copied
* @returns an array of paths corresponding to the files that have been created by the copy
*/
writeServer(dest: string): string[];
/**
* @param dest the destination folder to which files should be copied
* @returns an array of paths corresponding to the files that have been created by the copy
*/
writeStatic(dest: string): string[];
/**
* @param from the source file or folder
* @param to the destination file or folder
* @param opts.filter a function to determine whether a file or folder should be copied
* @param opts.replace a map of strings to replace
* @returns an array of paths corresponding to the files that have been created by the copy
*/
copy(
from: string,
to: string,
opts?: {
filter?: (basename: string) => boolean;
replace?: Record<string, string>;
}
): string[];
prerender(options: { all?: boolean; dest: string; fallback?: string }): Promise<Prerendered>;
}
Configpermalink
interface Config {
compilerOptions?: CompileOptions;
extensions?: string[];
kit?: {
adapter?: Adapter;
amp?: boolean;
appDir?: string;
browser?: {
hydrate?: boolean;
router?: boolean;
};
csp?: {
mode?: 'hash' | 'nonce' | 'auto';
directives?: CspDirectives;
};
files?: {
assets?: string;
hooks?: string;
lib?: string;
routes?: string;
serviceWorker?: string;
template?: string;
};
floc?: boolean;
inlineStyleThreshold?: number;
methodOverride?: {
parameter?: string;
allowed?: string[];
};
package?: {
dir?: string;
emitTypes?: boolean;
exports?(filepath: string): boolean;
files?(filepath: string): boolean;
};
paths?: {
assets?: string;
base?: string;
};
prerender?: {
concurrency?: number;
crawl?: boolean;
enabled?: boolean;
entries?: string[];
onError?: PrerenderOnErrorValue;
};
routes?: (filepath: string) => boolean;
serviceWorker?: {
register?: boolean;
files?: (filepath: string) => boolean;
};
trailingSlash?: TrailingSlash;
version?: {
name?: string;
pollInterval?: number;
};
vite?: import('vite').UserConfig | (() => MaybePromise<import('vite').UserConfig>);
};
preprocess?: any;
}
Csppermalink
namespace Csp {
type ActionSource = 'strict-dynamic' | 'report-sample';
type BaseSource = 'self' | 'unsafe-eval' | 'unsafe-hashes' | 'unsafe-inline' | '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[];
type UriPath = `${HttpDelineator}${string}`;
}
CspDirectivespermalink
type 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'?: Csp.UriPath[];
'report-to'?: string[];
'require-trusted-types-for'?: Array<'script'>;
'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;
'upgrade-insecure-requests'?: boolean;
/** @deprecated */
'require-sri-for'?: Array<'script' | 'style' | 'script style'>;
/** @deprecated */
'block-all-mixed-content'?: boolean;
/** @deprecated */
'plugin-types'?: Array<`${string}/${string}` | 'none'>;
/** @deprecated */
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'
>;
};
EndpointOutputpermalink
interface EndpointOutput<Output extends Body = Body> {
status?: number;
headers?: Headers | Partial<ResponseHeaders>;
body?: Output;
}
ErrorLoadpermalink
interface ErrorLoad<Params = Record<string, string>, Props = Record<string, any>> {
(input: ErrorLoadInput<Params>): MaybePromise<LoadOutput<Props>>;
}
ErrorLoadInputpermalink
interface ErrorLoadInput<Params = Record<string, string>> extends LoadInput<Params> {
status?: number;
error?: Error;
}
ExternalFetchpermalink
interface ExternalFetch {
(req: Request): Promise<Response>;
}
GetSessionpermalink
interface GetSession {
(event: RequestEvent): MaybePromise<App.Session>;
}
Handlepermalink
interface Handle {
(input: {
event: RequestEvent;
resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}): MaybePromise<Response>;
}
HandleErrorpermalink
interface HandleError {
(input: { error: Error & { frame?: string }; event: RequestEvent }): void;
}
Loadpermalink
interface Load<Params = Record<string, string>, Props = Record<string, any>> {
(input: LoadInput<Params>): MaybePromise<Either<Fallthrough, LoadOutput<Props>>>;
}
LoadInputpermalink
interface LoadInput<Params = Record<string, string>> {
url: URL;
params: Params;
props: Record<string, any>;
fetch(info: RequestInfo, init?: RequestInit): Promise<Response>;
session: App.Session;
stuff: Partial<App.Stuff>;
}
LoadOutputpermalink
interface LoadOutput<Props = Record<string, any>> {
status?: number;
error?: string | Error;
redirect?: string;
props?: Props;
stuff?: Partial<App.Stuff>;
maxage?: number;
}
PrerenderErrorHandlerpermalink
interface PrerenderErrorHandler {
(details: {
status: number;
path: string;
referrer: string | null;
referenceType: 'linked' | 'fetched';
}): void;
}
Prerenderedpermalink
interface Prerendered {
pages: Map<
string,
{
/** The location of the .html file relative to the output directory */
file: string;
}
>;
assets: Map<
string,
{
/** The MIME type of the asset */
type: string;
}
>;
redirects: Map<
string,
{
status: number;
location: string;
}
>;
/** An array of prerendered paths (without trailing slashes, regardless of the trailingSlash config) */
paths: string[];
}
RequestEventpermalink
interface RequestEvent {
request: Request;
url: URL;
params: Record<string, string>;
locals: App.Locals;
platform: Readonly<App.Platform>;
}
RequestHandlerpermalink
A function exported from an endpoint that corresponds to an HTTP verb (get, put, patch, etc) and handles requests with that method. Note that since 'delete' is a reserved word in JavaScript, delete handles are called 'del' instead.
interface RequestHandler<Output extends Body = Body> {
(event: RequestEvent): MaybePromise<
Either<Output extends Response ? Response : EndpointOutput<Output>, Fallthrough>
>;
}
RequestOptionspermalink
interface RequestOptions {
platform?: App.Platform;
}
ResolveOptionspermalink
type ResolveOptions = Partial<RequiredResolveOptions>;
SSRManifestpermalink
interface SSRManifest {
appDir: string;
assets: Set<string>;
/** private fields */
_: {
mime: Record<string, string>;
entry: {
file: string;
js: string[];
css: string[];
};
nodes: SSRNodeLoader[];
routes: SSRRoute[];
};
}
ValidatedConfigpermalink
type ValidatedConfig = RecursiveRequired<Config>;
The App
namespacepermalink
It's possible to tell SvelteKit how to type objects inside your app by declaring the App
namespace. By default, a new project will have a file called src/app.d.ts
containing the following:
/// <reference types="@sveltejs/kit" />
declare namespace App {
interface Locals {}
interface Platform {}
interface Session {}
interface Stuff {}
}
By populating these interfaces, you will gain type safety when using event.locals
, event.platform
, session
and stuff
:
App.Localspermalink
The interface that defines event.locals
, which can be accessed in hooks (handle
, handleError
and getSession
) and endpoints.
App.Platformpermalink
If your adapter provides platform-specific context via event.platform
, you can specify it here.
App.Sessionpermalink
The interface that defines session
, both as an argument to load
functions and the value of the session store.
App.Stuffpermalink
The interface that defines stuff
, as input or output to load
or as the value of the stuff
property of the page store.