+
+```dts
+type NavigationType =
+ | 'enter'
+ | 'form'
+ | 'leave'
+ | 'link'
+ | 'goto'
+ | 'popstate';
+```
+
+
+
+## NumericRange
+
+
+
+```dts
+type NumericRange<
+ TStart extends number,
+ TEnd extends number
+> = Exclude, LessThan>;
+```
+
+
+
+## OnNavigate
+
+The argument passed to [`onNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-onnavigate) callbacks.
+
+
+
+```dts
+interface OnNavigate extends Navigation {/*…*/}
+```
+
+
+
+```dts
+type: Exclude
;
+```
+
+
+
+The type of navigation:
+- `form`: The user submitted a `
+
+
+
+
+```dts
+willUnload: false;
+```
+
+
+
+Since `onNavigate` callbacks are called immediately before a client-side navigation, they will never be called with a navigation that unloads the page.
+
+
+
+
+```dts
+interface Redirect {/*…*/}
+```
+
+
+
+```dts
+status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;
+```
+
+
+
+The [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages), in the range 300-308.
+
+
+
+
+
+
+```dts
+location: string;
+```
+
+
+
+The location to redirect to.
+
+
+
```dts
-prerender?: {/*…*/}
+isSubRequest: boolean;
```
-See [Prerendering](https://kit.svelte.dev/docs/page-options#prerender).
+`true` for `+server.js` calls coming from SvelteKit without the overhead of actually making an HTTP request. This happens when you make same-origin `fetch` requests on the server.
-
+
+## RequestHandler
+
+A `(event: RequestEvent) => Response` function exported from a `+server.js` file that corresponds to an HTTP verb (`GET`, `PUT`, `PATCH`, etc) and handles requests with that method.
+
+It receives `Params` as the first generic argument, which you can skip by using [generated types](https://kit.svelte.dev/docs/types#generated-types) instead.
+
+
```dts
-concurrency?: number;
+type RequestHandler<
+ Params extends Partial
> = Partial<
+ Record
+ >,
+ RouteId extends string | null = string | null
+> = (
+ event: RequestEvent
+) => MaybePromise;
```
-
+
-
+## Reroute
-- default `1`
+The [`reroute`](https://kit.svelte.dev/docs/hooks#universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.
-
+
-How many pages can be prerendered simultaneously. JS is single-threaded, but in cases where prerendering performance is network-bound (for example loading content from a remote CMS) this can speed things up by processing other tasks while waiting on the network response.
+```dts
+type Reroute = (event: { url: URL }) => void | string;
+```
-
+
+## ResolveOptions
+
+
+
+```dts
+interface ResolveOptions {/*…*/}
+```
+
```dts
-crawl?: boolean;
+transformPageChunk?(input: { html: string; done: boolean }): MaybePromise
;
```
-- default `true`
+- `input` the html chunk and the info if this is the last chunk
-Whether SvelteKit should find pages to prerender by following links from `entries`.
+Applies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML
+(they could include an element's opening tag but not its closing tag, for example)
+but they will always be split at sensible boundaries such as `%sveltekit.head%` or layout/page components.
+
```dts
-entries?: Array<'*' | `/${string}`>;
+filterSerializedResponseHeaders?(name: string, value: string): boolean;
```
-- default `["*"]`
+- `name` header name
+- `value` header value
-An array of pages to prerender, or start crawling from (if `crawl: true`). The `*` string includes all routes containing no required `[parameters]` with optional parameters included as being empty (since SvelteKit doesn't know what value any parameters should have).
+Determines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`.
+By default, none will be included.
+
```dts
-handleHttpError?: PrerenderHttpErrorHandlerValue;
+preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;
```
-- default `"fail"`
+- `input` the type of the file and its path
+
+
+
+Determines what should be added to the `` tag to preload it.
+By default, `js` and `css` files will be preloaded.
+
-How to respond to HTTP errors encountered while prerendering the app.
+## RouteDefinition
-- `'fail'` — fail the build
-- `'ignore'` - silently ignore the failure and continue
-- `'warn'` — continue, but print a warning
-- `(details) => void` — a custom error handler that takes a `details` object with `status`, `path`, `referrer`, `referenceType` and `message` properties. If you `throw` from this function, the build will fail
+
-```js
-// @errors: 7031
-/// file: svelte.config.js
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
- kit: {
- prerender: {
- handleHttpError: ({ path, referrer, message }) => {
- // ignore deliberate link to shiny 404 page
- if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
- return;
- }
-
- // otherwise fail the build
- throw new Error(message);
- }
- }
- }
-};
+```dts
+interface RouteDefinition {/*…*/}
```
-
-
```dts
-handleMissingId?: PrerenderMissingIdHandlerValue;
+id: string;
```
-
-
+
--
default `"fail"`
+```dts
+api: {
+ methods: Array
;
+};
+```
+
-How to respond when hash links from one prerendered page to another don't correspond to an `id` on the destination page.
+
-- `'fail'` — fail the build
-- `'ignore'` - silently ignore the failure and continue
-- `'warn'` — continue, but print a warning
-- `(details) => void` — a custom error handler that takes a `details` object with `path`, `id`, `referrers` and `message` properties. If you `throw` from this function, the build will fail
+```dts
+page: {
+ methods: Array
>;
+};
+```
+
-
+
```dts
-handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;
+pattern: RegExp;
```
-
-
+
--
default `"fail"`
+```dts
+prerender: PrerenderOption;
+```
+
-How to respond when an entry generated by the `entries` export doesn't match the route it was generated from.
+
-- `'fail'` — fail the build
-- `'ignore'` - silently ignore the failure and continue
-- `'warn'` — continue, but print a warning
-- `(details) => void` — a custom error handler that takes a `details` object with `generatedFromId`, `entry`, `matchedId` and `message` properties. If you `throw` from this function, the build will fail
+```dts
+segments: RouteSegment[];
+```
+
+
+
+
+```dts
+methods: Array
;
+```
+
+
+
```dts
-origin?: string;
+config: Config;
```
-
-
+## SSRManifest
+
+
+
+```dts
+interface SSRManifest {/*…*/}
+```
--
default `"http://sveltekit-prerender"`
+
+
+```dts
+appDir: string;
+```
+
-The value of `url.origin` during prerendering; useful if it is included in rendered content.
+
+
+```dts
+appPath: string;
+```
+
-
+
+
+```dts
+assets: Set
;
+```
+
+
+
+
+
+```dts
+mimeTypes: Record
;
+```
+
+
```dts
-serviceWorker?: {/*…*/}
+_: {/*…*/}
```
+private fields
+
```dts
-register?: boolean;
+client: NonNullable
;
```
-
-
-
+
--
default `true`
+```dts
+nodes: SSRNodeLoader[];
+```
+
+
-Whether to automatically register the service worker, if it exists.
+```dts
+routes: SSRRoute[];
+```
+
+
+
+```dts
+matchers(): Promise
>;
+```
+
+
```dts
-files?(filepath: string): boolean;
+server_assets: Record
;
```
-
-
-- default `(filename) => !/\.DS_Store/.test(filename)`
+A `[file]: size` map of all assets imported by server code
-
-Determine which files in your `static` directory will be available in `$service-worker.files`.
+
+## Server
+
+
+
+```dts
+class Server {/*…*/}
+```
+
+
+
+```dts
+constructor(manifest: SSRManifest);
+```
+
+
+
+
+
+```dts
+init(options: ServerInitOptions): Promise
;
+```
+
+
```dts
-typescript?: {/*…*/}
+respond(request: Request, options: RequestOptions): Promise
;
```
-
-
+## ServerInitOptions
+
+
```dts
-config?: (config: Record
) => Record | void;
+interface ServerInitOptions {/*…*/}
```
-
+
-
+```dts
+env: Record
;
+```
+
+
-- default `(config) => config`
+A map of environment variables
+
+
+
+
+```dts
+read?: (file: string) => ReadableStream;
+```
+
+
-A function that allows you to edit the generated `tsconfig.json`. You can mutate the config (recommended) or return a new one.
-This is useful for extending a shared `tsconfig.json` in a monorepo root, for example.
+A function that turns an asset filename into a `ReadableStream`. Required for the `read` export from `$app/server` to work
-
+
+```dts
+type ServerLoad<
+ Params extends Partial
> = Partial<
+ Record
+ >,
+ ParentData extends Record = Record<
+ string,
+ any
+ >,
+ OutputData extends Record | void = Record<
+ string,
+ any
+ > | void,
+ RouteId extends string | null = string | null
+> = (
+ event: ServerLoadEvent
+) => MaybePromise;
+```
+
+
+```dts
+interface ServerLoadEvent<
+ Params extends Partial
> = Partial<
+ Record
+ >,
+ ParentData extends Record = Record<
+ string,
+ any
+ >,
+ RouteId extends string | null = string | null
+> extends RequestEvent {/*…*/}
+```
+
```dts
-version?: {/*…*/}
+parent(): Promise
;
```
-Client-side navigation can be buggy if you deploy a new version of your app while people are using it. If the code for the new page is already loaded, it may have stale content; if it isn't, the app's route manifest may point to a JavaScript file that no longer exists.
-SvelteKit helps you solve this problem through version management.
-If SvelteKit encounters an error while loading the page and detects that a new version has been deployed (using the `name` specified here, which defaults to a timestamp of the build) it will fall back to traditional full-page navigation.
-Not all navigations will result in an error though, for example if the JavaScript for the next page is already loaded. If you still want to force a full-page navigation in these cases, use techniques such as setting the `pollInterval` and then using `beforeNavigate`:
-```html
-/// file: +layout.svelte
-
-```
+Be careful not to introduce accidental waterfalls when using `await parent()`. If for example you only want to merge parent data into the returned output, call it _after_ fetching your other data.
-If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](https://kit.svelte.dev/docs/modules#$app-stores-updated) store to `true` when it detects one.
+
+
+
```dts
-name?: string;
+depends(...deps: string[]): void;
```
-The current app version string. If specified, this must be deterministic (e.g. a commit ref rather than `Math.random()` or `Date.now().toString()`), otherwise defaults to a timestamp of the build.
+This function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) to cause `load` to rerun.
+
+Most of the time you won't need this, as `fetch` calls `depends` on your behalf — it's only necessary if you're using a custom API client that bypasses `fetch`.
-For example, to use the current commit hash, you could do use `git rev-parse HEAD`:
+URLs can be absolute or relative to the page being loaded, and must be [encoded](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding).
+
+Custom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the [URI specification](https://www.rfc-editor.org/rfc/rfc3986.html).
+
+The following example shows how to use `depends` to register a dependency on a custom identifier, which is `invalidate`d after a button click, making the `load` function rerun.
```js
// @errors: 7031
-/// file: svelte.config.js
-import * as child_process from 'node:child_process';
-
-export default {
- kit: {
- version: {
- name: child_process.execSync('git rev-parse HEAD').toString().trim()
- }
+/// file: src/routes/+page.js
+let count = 0;
+export async function load({ depends }) {
+ depends('increase:count');
+
+ return { count: count++ };
+}
+```
+
+```html
+/// file: src/routes/+page.svelte
+
+
+
{data.count}
+Increase Count
```
+
```dts
-pollInterval?: number;
+untrack
(fn: () => T): T;
```
-
+Use this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:
-- default `0`
+```js
+// @errors: 7031
+/// file: src/routes/+page.js
+export async function load({ untrack, url }) {
+ // Untrack url.pathname so that path changes don't trigger a rerun
+ if (untrack(() => url.pathname === '/')) {
+ return { message: 'Welcome!' };
+ }
+}
+```
+
+
+## Snapshot
+
+The type of `export const snapshot` exported from a page or layout component.
+
+
+
+```dts
+interface Snapshot
{/*…*/}
+```
-The interval in milliseconds to poll for version changes. If this is `0`, no polling occurs.
+
+
+```dts
+capture: () => T;
+```
+
+
+```dts
+restore: (snapshot: T) => void;
+```
+
+
+## SubmitFunction
+
+
+
+```dts
+type SubmitFunction<
+ Success extends
+ | Record
+ | undefined = Record,
+ Failure extends
+ | Record
+ | undefined = Record
+> = (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;
+ /**
+ * Call this to get the default behavior of a form submission response.
+ * @param options Set `reset: false` if you don't want the `
-
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index a5da3e4d3c..5478631d64 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -26,6 +26,8 @@ const config = {
export default config;
```
+## Config
+
```dts
@@ -124,6 +126,8 @@ Any additional options required by tooling that integrates with Svelte.
+## KitConfig
+
The `kit` property configures SvelteKit, and can have the following properties:
## adapter
@@ -174,9 +178,9 @@ const config = {
};
```
-> The built-in `$lib` alias is controlled by `config.kit.files.lib` as it is used for packaging.
+> [!NOTE] The built-in `$lib` alias is controlled by `config.kit.files.lib` as it is used for packaging.
-> You will need to run `npm run dev` to have SvelteKit automatically generate the required alias configuration in `jsconfig.json` or `tsconfig.json`.
+> [!NOTE] You will need to run `npm run dev` to have SvelteKit automatically generate the required alias configuration in `jsconfig.json` or `tsconfig.json`.
@@ -222,8 +226,10 @@ const config = {
directives: {
'script-src': ['self']
},
+ // must be specified with either the `report-uri` or `report-to` directives, or both
reportOnly: {
- 'script-src': ['self']
+ 'script-src': ['self'],
+ 'report-uri': ['/']
}
}
}
@@ -238,11 +244,11 @@ To add a nonce for scripts and links manually included in `src/app.html`, you ma
When pages are prerendered, the CSP header is added via a `